저희의 디자인 시스템
모든 프로젝트에 일관성을 부여하는 시각적 기반입니다. 토큰, 팔레트, 타이포그래피, 간격 — 모두 공개하고 문서화했습니다.
색상 팔레트
--primary: 16 71% 42%유일한 액션 색상: CTA, 링크. 흰색 배경 대비 5.3:1
--accent: 214 52% 25%제목, 구조. 흰색 배경 대비 11.3:1
--navy-deep: 213 56% 17%배너 및 푸터 배경
--gold-bright: 41 88% 62%네이비 배경 위 숫자 전용
--foreground: 215 28% 17%본문. 흰색 배경 대비 14.7:1
--muted-foreground: 215 14% 40%메모, 캡션. 흰색 배경 대비 6.0:1
--rose: 14 62% 40%확장 팔레트, 기본 색조에 맞춰 조정
--violet: 214 52% 32%확장 팔레트, 기본 색조에 맞춰 조정
--cyan: 205 48% 33%확장 팔레트, 기본 색조에 맞춰 조정
--gold: 40 90% 30%후기, 수상. 흰색 배경 대비 4.5:1 이상
--indigo: 213 56% 25%확장 팔레트, 기본 색조에 맞춰 조정
--destructive: 0 72% 42%오류, 삭제
타이포그래피
리옹 감성의 타이포그래피
제목, CTA, 강조. 100–900.
긴 문단도 편하게 읽히도록, 정돈된 편집 리듬을 갖췄습니다.
본문, 내비게이션, 레이블. 200–800.
| 요소 | 크기(유동) | 행간 | 용도 |
|---|---|---|---|
h1 | clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem) | 1.06 | 페이지 제목, 첫 화면 |
h2 | clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem) | 1.14 | 섹션 제목 |
h3 | clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem) | 1.25 | 부제목, 카드 |
h4 | 1.125rem | 1.35 | 중간 제목 |
h5, h6 | 1rem | 1.4 | 작은 제목 |
body | 1rem | 1.65 | 본문(Plus Jakarta Sans) |
text-sm | 0.875rem | 1.25rem | 보조 본문, 메모 |
text-xs | 0.75rem | 1rem | 메타 정보, 배지, 캡션 |
간격(Tailwind 스케일)
0.52px14px28px312px416px624px832px1248px1664px2496px그림자
shadow-e1거의 보이지 않는 가는 선 — 입력란, 칩
shadow-e2기본 상태의 카드
shadow-e3호버 상태의 카드, 플로팅 버튼
shadow-e4대화상자, 패널
맞춤 CSS 유틸리티
.glass흰색 카드, 가는 테두리, 부드러운 그림자 — 카드, 입력란
.glass-strong같은 표면, 더 뚜렷한 그림자 — 대화상자, 헤더
.glass-premium강조된 표면 — 첫 화면, 포트폴리오
.surface-sunken쿨 그레이 교차 섹션, 가장자리 40 px 페이드
.section-y섹션 세로 리듬(--section-y)
.measure한 줄 길이를 68자로 제한
.text-gradient-warm제목 속 한 단어에 테라코타 배경
.text-gradient-cool제목 속 한 단어에 네이비 배경
.cta-gradient테라코타 배경 + --primary-foreground 글자색
.section-divider1 px 선, 양 끝 페이드
.card-img-frame16/10 이미지 프레임, CLS 제로, 호버 시 확대
.spot-card커서를 따라가는 빛과 테두리
.btn-glow-fill채움 버튼: 호버 시 반사광 + 테라코타 후광
.btn-glow-ring외곽선 버튼: 호버 시 빛나는 테두리
.link-grow왼쪽에서 늘어나는 밑줄
.skip-link건너뛰기 링크, 포커스 시 표시
컴포넌트 미리보기
버튼
배지
그라데이션
Kayzen Premium
모던 엔지니어링
Glass Strong
.glass-strong 클래스를 사용한 카드 예시입니다.