Orbital Warm Editorial
따뜻한 크림 캔버스 위에 완전 라운드 알약 도형이 궤도처럼 겹치고, 세리프 헤딩·산세리프 본문에 코랄/앰버 듀오가 강조하는 playful 브랜드 스타일.
설명
완전 라운드 알약(border-radius 999px) 도형이 콘텐츠 컨테이너이자 장식으로 궤도처럼 겹쳐 모듈러 블록 그리드를 이룬다. 배경은 따뜻한 크림, 강조는 코랄·앰버 두 색만. 헤딩은 옵티컬 세리프(Fraunces), 본문은 산세리프(Inter)로 에디토리얼 위계를 만든다. 장식 알약이 아주 느리게 궤도 회전하며 빈 면을 채우는 부드러운 playful 모션이 정체성이다.
타입 스케일
display Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
헤딩·디스플레이는 옵티컬 세리프 Fraunces(weight 500) — 따뜻한 편집 위계. 본문·라벨은 산세리프 Inter(본문 400, 라벨 600 대문자 넓은 자간, 색은 코랄). 세리프 헤딩 + 산세리프 본문 믹스가 핵심이며 헤딩에 산세리프 금지.
골든 예제 (exemplar)
Do
- 알약(radius 999px) 도형을 콘텐츠 컨테이너이자 궤도 장식으로 겹쳐 쓴다
- 헤딩은 세리프(Fraunces), 본문은 산세리프(Inter)로 믹스한다
- 강조는 코랄·앰버 두 색만 쓴다
- 빈 크림 면은 궤도 장식 알약과 옅은 큰 알약 윤곽 워터마크로 채운다
- 모션은 부드러운 오버슈트 playful — 카드 호버는 translateY+살짝 회전
Don't
- 알약을 빼고 둥근 사각형만 쓰기 금지 — pill(radius 999px)이 형태 정체성
- 헤딩에 산세리프 쓰기 금지 — Fraunces 세리프 헤딩
- 코랄·앰버 외 강조색·채도 높은 원색 금지
- 그라디언트·이모지·하드 섀도·글래스 패널 금지
- 균일한 그림자를 모든 카드에 깔기 금지 — 떠 있는 알약에만 옅게
- 평면 단색 데드 보이드 금지 · 빠른 기계적 스냅 모션 금지
컴포넌트 노트
- button
- base: 알약(radius 999px). 코랄 solid 배경 + 흰 텍스트, padding 13px 32px, Inter 500.hover: scale(1.04) + 색 한 단계 진해짐, 360ms playful easing.secondary_variant: 투명 배경 + 잉크 1.5px 알약 외곽선.focus: 2px offset outline (ring=coral).
- card
- 가로로 긴 알약 또는 둥근 카드(radius 12–16px), 흰 표면, 내부 패딩 28–32px. 라운드 라인 아이콘 + 코랄 키커 + Fraunces 제목 + Inter 본문. 호버 시 translateY(-4px)+rotate(1.5deg). 그림자는 옅게, 떠 있는 모듈에만.
- input
- 알약 또는 둥근 필드, 1.5px border. 포커스 시 border가 coral(ring)로.
- nav
- 높이 72px 크림 헤더. 좌측 Fraunces 워드마크, 중앙 메뉴는 흰 알약 컨테이너에 담김, 우측 코랄 solid 알약 CTA. 메뉴 호버 시 항목이 작은 앰버 알약으로 하이라이트.
- orbit_decoration
- 코랄·앰버 알약(면 또는 옅은 윤곽선)이 섹션 배경에 겹쳐 떠서 40s로 느리게 궤도 회전. 빈 면을 채우는 정체성 장치 — 무작위 부유 금지, 궤도 경로 위 의도적 배치.