shadcn/ui Design Brief: Core UI/UX Aesthetics

원본 Gist

shadcn/ui의 핵심 UI/UX 미학에 대한 상세한 디자인 브리프입니다.

구현 지침:

12-컬럼 그리드 시스템과 컬럼 사이에 16px의 거터(gutters)를 사용합니다.
컨테이너의 최대 너비를 SM (640px), MD (768px), LG (1024px), XL (1280px), 2XL (1536px)로 설정합니다.
모바일에서는 컨테이너에 24px 패딩을 유지하고, 데스크톱에서는 32px로 늘립니다.
컴포넌트 프레임의 크기를 일관되게 유지합니다: 버튼 (높이: 40px), 폼 입력 (높이: 44px).
최적의 가독성을 위해 콘텐츠 컨테이너 너비를 65-70자(약 600px)로 유지합니다.
대시보드 레이아웃에서 2:1의 콘텐츠 대 사이드바 비율을 사용하여 비대칭을 구현합니다.

구현 지침:

기본 폰트 패밀리로 Inter를 설치하고 다음 두께를 사용합니다: 400 (regular), 500 (medium), 600 (semibold), 700 (bold).
이 스케일에 따라 폰트 크기를 설정합니다: 본문 (14px/0.875rem), h6 (16px/1rem), h5 (18px/1.125rem), h4 (20px/1.25rem), h3 (24px/1.5rem), h2 (30px/1.875rem), h1 (36px/2.25rem).
다음과 같은 줄 간격을 적용합니다: 제목 (1.2), 본문 텍스트 (1.5), 작은 텍스트 (1.4).
폰트 두께를 전략적으로 사용합니다: 제목 (600/700), 본문 (400), UI 라벨 (500).
문자 간격(letter spacing)을 설정합니다: 제목은 -0.025em, 본문 텍스트는 normal.
페이지당 3단계 이하의 제목으로 적절한 계층 구조를 구현합니다.

구현 지침:

기본 팔레트: 중립 색상으로 Slate-50 (#f8fafc)부터 Slate-950 (#020617)까지, 그리고 선택한 강조 색상을 사용합니다.
구체적인 의미론적 색상을 사용합니다:
- Primary: #0ea5e9 (sky-500)
- Success: #22c55e (green-500)
- Warning: #f59e0b (amber-500)
- Destructive: #ef4444 (red-500)
- Muted: slate-200 (라이트 모드), slate-800 (다크 모드)
각 색상에 대해 50(가장 밝음)부터 950(가장 어두움)까지 10단계의 그라데이션을 적용합니다.
모든 텍스트가 WCAG AA 표준을 충족하는지 확인합니다: 일반 텍스트는 4.5:1, 큰 텍스트는 3:1.
테마 변경이 용이하도록 루트 스코프에서 CSS 변수를 설정합니다.

구현 지침:

기본 배경: 라이트 모드는 white (#ffffff), 다크 모드는 slate-950 (#020617).
보조 표면: 라이트 모드는 slate-50 (#f8fafc), 다크 모드는 slate-900 (#0f172a).
그림자 스케일로 미묘한 깊이를 추가합니다: xs, sm, md, lg.
카드 배경은 1px 테두리로 구현합니다: 라이트 모드 (흰색 배경, slate-200 테두리), 다크 모드 (slate-800 배경, slate-700 테두리).
다이얼로그 및 드롭다운과 같은 오버레이 요소에는 8px의 배경 블러와 40%의 불투명도를 사용합니다.

구현 지침:

다음의 모서리 반경 스케일을 구현합니다: none: 0px, sm: 2px, DEFAULT: 4px, md: 6px, lg: 8px, xl: 12px, full: 9999px.
반경을 일관되게 적용합니다:
- 버튼, 입력 필드: radius-md (6px)
- 카드, 다이얼로그: radius-lg (8px)
- 알약(Pills), 태그: radius-full
- 알림 배너: radius-DEFAULT (4px)
- 중첩 요소 (버튼 그룹): 내부 요소에 radius-sm (2px)
시각적 조화를 유지하기 위해 한 화면에서 3가지 이상의 다른 반경 값을 혼합하지 않습니다.

구현 지침:

구현 지침:

구현 지침: