큐레이션 · 오픈 · 무료

CodeSandbox

격리된 샌드박스를 프로그래밍 방식으로 생성하는 데 중점을 둔 개발자 플랫폼입니다.

01

디자인 DNA

클라우드의 다크 모드 터미널

02

컬러

깊은 다크 중립 배경 위의 고대비 네온 악센트

03

타이포그래피

grotesque-sans · monospace

• display56px · 500
• title32px · 500
• subtitle22px · 400
• body16px · 400

대형 디스플레이 헤드라인에는 타이트한 네거티브 자간을 사용합니다 · 텍스트와 배경 사이의 고대비를 유지합니다

04

여백

4px 기본 그리드

05

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

#252525를 사용한 1px 단색 테두리

06

레이아웃

다크 및 네온 배경 섹션이 번갈아 배치되는 중앙 정렬 단일 열 레이아웃

07

모션과 인터랙션

hover 상태를 위한 부드러운 불투명도 트랜지션 · 인터랙티브 요소의 미묘한 색상 트랜지션

미묘한 색상 변화 또는 불투명도 조절 · 즉각적인 시각적 피드백

08

컴포넌트

• button 메인 버튼은 악센트 색상 배경(#d6fb41)과 다크 텍스트(#0e0e0e) 및 필 모양을 사용하며, 보조 버튼은 아웃라인 스타일입니다
• card 네온 배경의 피처 카드로, 검은색 텍스트를 사용하며, 눈에 보이는 테두리나 그림자는 없습니다
• chip 'New' 같은 레이블을 위한 작은 악센트 색상 뱃지
• input 다크 배경과 미묘한 테두리를 가진 표준 텍스트 입력 필드
• hero 다크 배경 위의 거대한 타이포그래피 헤드라인과 지원 서브텍스트 및 메인 CTA 버튼

09

보이스와 금지 목록

• 톤 기술적이고, 전문적이며, 직접적입니다
• 헤드라인 규모와 보안에 중점을 둔 굵고 간결한 문구
• CTA '무료로 시작하기' 및 'CodeSandbox SDK 시도하기'와 같은 행동 지향적 문구

• 저채도, 저대비 악센트 색상을 사용하지 마세요 — 스크린샷은 메인 악센트로 고채도 네온 옐로우 그린(#d6fb41)을 보여줍니다
• 헤드라인에 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔하고 현대적인 그로테스크-산스 폰트 계열을 보여줍니다
• 지나친 그림자나 그라디언트를 사용하지 마세요 — 스크린샷은 최소한의 엘리베이션이 있는 플랫 디자인을 보여줍니다
• 메인 인터페이스에 밝은 흰색 배경을 사용하지 마세요 — 스크린샷은 주로 다크 배경(#0e0e0e)을 보여줍니다
• 헤드라인에 넓은 자간을 사용하지 마세요 — 스크린샷은 디스플레이 텍스트에 타이트한 네거티브 자간(-2.8px)을 보여줍니다
• 여러 악센트 색상을 사용하지 마세요 — 스크린샷은 다크 중립색과 단일 네온 악센트의 엄격한 이색 팔레트를 보여줍니다
• 모든 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카로운 모서리와 미묘한 둥근 모서리(최대 10px)의 혼합을 보여줍니다
• 피하기: 마케팅 용어
• 피하기: 불명확한 약속
• 피하기: 지나치게 복잡한 문장
• 피하기: 불필요한 느낌표
• 피하기: 약하거나 수동적인 어조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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