큐레이션 · 오픈 · 무료

Replit

Replit은 로컬 설정 없이 소프트웨어를 구축, 배포, 공유할 수 있게 해주는 브라우저 기반 협업 IDE입니다.

01

디자인 DNA

빌더들이 아이디어를 스케치하고 현실로 컴파일하는 개방적이고 통쾌한 워크숍.

02

컬러

따뜻한 오프화이트 계열의 중성 색상과 단일의 높은 에너지 오렌지 악센트를 사용합니다.

03

타이포그래피

geometric-sans · monospace

• display56px · 500
• headline40px · 500
• body16px · 400
• caption14px · 400

제목은 컴팩트하고 강렬한 느낌을 주기 위해 타이트한 네거티브 트래킹을 사용합니다. · 본문 텍스트도 밀도를 유지하기 위해 상대적으로 타이트한 라인 높이를 사용합니다. · 디스플레이/제목 강조에는 볼드 700 대신 폰트 웨이트 500을 사용합니다.

04

여백

요소 간 일관되고 타이트한 간격을 제공하는 4px 기준선 그리드와 카드를 위한 여유로운 padding입니다.

05

표면 (라운드 / 그림자 / 경계선)

rgba(0,0,0,0.08) 0px 2px 8px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px

06

레이아웃

눈에 띄는 입력 필드를 갖춘 중앙 정렬 단일 컬럼 히어로 영역, 그다음 가격 또는 기능을 위한 다중 컬럼 카드 레이아웃이 이어집니다.

07

모션과 인터랙션

인터랙티브 요소의 매끄러운 fade 및 background-color 전환. · 버튼과 카드의 hover 시 미묘한 scale 또는 opacity 변화.

outline 버튼의 배경색 채움; 카드의 약간의 높이 변화. · 버튼의 미묘한 scale-down 효과; 다음 상태 또는 페이지로의 전환.

08

컴포넌트

• button 주요 액션을 위한 알약 형태의 outline 버튼과 보조 또는 특정 트리거를 위한 솔리드 둥근 버튼.
• card 큰 border-radius와 미묘한 drop shadow를 사용한 부드러운 오프화이트 또는 밝은 그레이 카드.
• chip 카테고리화 또는 빠른 액션을 위한 밝은 그레이 둥근 태그 또는 추천 칩.
• input 둥근 모서리와 오른쪽에 임베디드된 솔리드 액션 버튼을 갖춘 크고 넓은 textarea 또는 text input.
• hero 큰 제목, 간결한 부제목 및 지배적인 인터랙티브 입력 영역을 포함한 전체 너비의 수직 중앙 정렬 섹션.

09

보이스와 금지 목록

• 톤 사용자의 창작을 유도하는 직접적이고 권한을 부여하며 약간의 재미가 있는 톤.
• 헤드라인 '무엇을 만들겠습니까?' 또는 '작게 시작하세요. 빠르게 확장하세요.'와 같이 짧고 강렬한 질문이나 진술.
• CTA '계정 만들기' 또는 '가입하기'와 같이 명확하고 행동 지향적인 텍스트.

• 진한 순수 블랙 배경을 사용하지 마세요. 대신 #F7F6F4와 같은 따뜻한 오프화이트를 사용합니다.
• 지나치게 장식적이거나 세리프 폰트를 사용하지 마세요. 타이포그래피는 일관되게 깔끔한 기하학적 sans-serif입니다.
• 모서리에 날카롭고 직사각형의 모서리를 일관되게 사용하지 마세요. 요소들은 8px 또는 알약 형태와 같이 여유로운 border-radius에 의존합니다.
• UI를 오렌지 악센트로 도배하지 마세요. 엄격히 높은 우선순위 콜 투 액션에만 사용됩니다.
• 무거운 drop shadow 또는 높은 대비의 border를 사용하지 마세요. 높이는 매우 부드럽고 미묘한 그림자를 통해 전달됩니다.
• 제목에 넓고 느슨한 line-height를 사용하지 마세요. 텍스트는 타이트하고 컴팩트하게 유지됩니다.
• 피하기: 전문 용어가 많이 포함된 기술적 설명
• 피하기: 공격적인 판매 언어
• 피하기: 수동적이거나 불확실한 어조

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko