Aster 디자인 가이드
Aster에서 사용하는 색상, 글꼴, 모서리 둥글기와 헤더 높이를 정리했습니다.라이트·다크 테마의 색상 대비도 함께 확인할 수 있습니다.
01 — Color
기본 색상과 브랜드 색상
배경과 카드에는 밝기가 다른 회색을 사용합니다. 청록색과 코랄색은 브랜드와 콘텐츠 영역을 표시하는 데 사용합니다. 아래 색상은 현재 테마에 맞춰 표시됩니다.
기본 색상
- --background페이지 배경—
- --foreground본문 텍스트—
- --card카드 배경—
- --card-foreground카드 텍스트—
- --muted태그 배경—
- --muted-foreground보조 텍스트—
- --accent마우스를 올렸을 때 배경—
- --border구분선 · 테두리—
- --primary주요 버튼 배경—
- --primary-foreground주요 버튼 텍스트—
브랜드 색상
- --brand-accent링크 강조 · Cases 표시—
- --brand-mark로고의 a · Works 표시—
- --brand-canvas헤더 배경—
- --brand-ink헤더 텍스트—
02 — Typography
글꼴 크기와 굵기, 자간
주요 글꼴은 Pretendard입니다. 제목, 본문, 버튼 등 용도에 따라 크기와 굵기, 자간을 다르게 적용합니다. 아래 예시에서 각 스타일을 비교할 수 있습니다.
- 워드마크질문하고, 실험하고, 반복한다900 · -0.04em
- 섹션 제목질문하고, 실험하고, 반복한다510 · -0.022em
- 주요 문구질문하고, 실험하고, 반복한다510 · -0.015em
- 본문질문하고, 실험하고, 반복한다400 · -0.01em
- 라벨 · 버튼질문하고, 실험하고, 반복한다510 · -0.01em
- 카드 설명질문하고, 실험하고, 반복한다400 · -0.01em
03 — Shape
카드와 버튼의 모서리 둥글기
카드와 히어로 프레임은 16px, 작은 카드는 8px, 태그는 4px로 모서리를 둥글게 처리합니다. 버튼과 배지는 양 끝을 완전히 둥글게 만듭니다.
- rounded-2xl16px · 카드 · 히어로 프레임
- rounded-lg8px · 미리보기 안의 작은 카드
- rounded-full캡슐형 · 버튼 · 배지 · 상태 표시
- rounded4px · 태그 칩
04 — Dimension
스크롤 상태에 따른 헤더 높이
기본 헤더와 글 제목 바가 표시될 때의 축소 헤더에 서로 다른 높이를 적용합니다. 제목 바는 헤더 높이에 맞춰 바로 아래에 배치합니다.
- --header-height기본 상태—
- --header-height-compact글 제목 바 표시 중—
05 — Contrast
라이트·다크 테마의 색상 대비
텍스트와 배경의 색상 대비를 테마별로 비교한 표입니다. 일반 텍스트의 비교 기준은 4.5:1이며, 로고에 사용하는 코랄색은 자체 목표인 3:1과 비교했습니다.
| 색상 조합 | 라이트 | 다크 | 기준 |
|---|---|---|---|
| foreground / background | 19.93 | 18.73 | AA 4.5 |
| muted-foreground / 배경 | 5.05 | 6.13 | AA 4.5 |
| muted-foreground / card | 4.88 | 5.86 | AA 4.5 |
| card-foreground / card | 19.26 | 17.90 | AA 4.5 |
| primary-foreground / 주 버튼 | 19.93 | 15.83 | AA 4.5 |
| brand-accent / card | 6.15 | 12.88 | AA 4.5 |
| brand-mark / 배경 | 3.45 | 7.07 | 자체 목표 3:1 |
2026년 9월 14일의 색상값으로 계산한 결과입니다. 이 표는 자동으로 갱신되지 않으므로 색상을 변경하면 대비를 다시 확인해야 합니다.