Design System

절제된 모더니즘 + AI-native 인터랙션. 모든 UI는 이 카탈로그에서 먼저 검증한 뒤 본 페이지로 통합한다. 정전: docs/DESIGN.md

§1Brand · Logo

docs/DESIGN.md §1

Sizes

sm (h-6)

md (h-8) — 기본

lg (h-12)

xl (h-16) — hero

Icon only

텍스트 path는 currentColor — 다크/라이트 자동 대응. 아이콘 박스(흰색) + 화살표(Primary #0084FF)는 디자인 의도 그대로.

§3Color

DESIGN.md §3

primary

#0084FF

primary-hover

#0073E6

accent-cyan

#67E8F9

accent-pink

#FBCFE8

--color-bg

surface

--color-surface

surface-elevated

--color-surface-elevated

border

--color-border

§4Typography

DESIGN.md §4

display-2xlsalesaround

display-xlHero headline

display-lgSection title

display-mdCard heading

display-smSub heading

headingModule heading

body-lgB2B SaaS 마케팅팀에게 향후 2~3개월 캠페인을 추천하는 풀스택 어시스턴트.

body본문 텍스트. 한국어 line-height 1.6 이상으로 가독성 확보.

body-sm보조 텍스트 / 캡션

captionMETADATA / LABEL

§4.1Numbers (tabular-nums)

DESIGN.md §4.1

기본

1,234,567

tabular-nums

1,234,567

대시보드·KPI 카드의 숫자는 반드시 tabular-nums 사용 (자릿수 정렬).

§6.1Button (Keycap)

DESIGN.md §6.1

Variants

Sizes

Disabled

👆 클릭해보면 4px 눌리는 인터랙션이 보임 (Keycap 시그니처).

§6.2Card

DESIGN.md §6.2

B2B SaaS 캠페인 — Q3 ROI 케이스

분기 결산 시즌에 효과 본 캠페인 패턴

LinkedIn에서 "AI agent ROI" 검색 +340%. 케이스스터디형 콘텐츠 시리즈 권장.

리드폼 — Q4 신규 캠페인

UTM 자동 트래킹 + 우리 서브도메인 호스팅

추천 카드에서 1클릭으로 폼 생성. 리드 인박스로 자동 수집.

§6.3Input / Form

DESIGN.md §6.3

Sizes

Small

Medium

Large

States

Default

Disabled

Error (aria-invalid)

이메일 형식이 아니에요.

Required

Input Types

url

password

number

Textarea

기본 (사용자 수동 resize)

autoResize

Field compound (권장 — 자동 aria, id 연결)

회사 이메일

회사 도메인 이메일 사용을 권장합니다.

회사 이메일

회사 도메인 이메일 사용을 권장합니다.

이메일 형식이 올바르지 않아요.

회사 소개

AI가 이 소개를 읽고 ICP·USP를 추론합니다. 짧고 명료하게.

§6.4Sheet (Modal 대안)

DESIGN.md §6.4

Sheet 우선 — Modal은 확인 다이얼로그 한정

vaul 기반. 우측 / 하단 슬라이드. ESC + outside click 닫기 + body scroll lock 자동. 하단 Sheet는 손잡이(handle) 드래그도 지원.

§6.5Toast

DESIGN.md §6.5

클릭해서 시도 — 우하단에 6초 노출 + 좌측 4px stripe

카피는 짧게. 축하 메시지 / 광고체 X. 좌측 stripe로 success/error/warning/info 구분.

§6.6Skeleton (Loading)

DESIGN.md §6.6

Primitives

SkeletonText

1 line

3 lines

5 lines (마지막 짧게)

SkeletonAvatar

SkeletonCard (Card 1:1)

회전 스피너 절대 X (Hard NO). 실제 콘텐츠 형태 닮음 + shimmer (좌→우). prefers-reduced-motion에서 자동 비활성.

§6.7EmptyState

DESIGN.md §6.7

아직 캠페인이 없어요

회사 정보를 입력하면 30초 안에 첫 캠페인 추천을 받을 수 있어요.

검색 결과가 없어요

다른 키워드로 다시 시도해보세요.

반드시 다음 액션을 제안. "데이터가 없습니다" 같은 막다른 길 X.

§6.8ErrorState

DESIGN.md §6.8

연결이 끊겼어요

잠시 후 다시 시도해주세요. 문제가 계속되면 알려주세요.

URL을 분석할 수 없었어요

회사 사이트가 로봇 접근을 막고 있거나, 응답이 너무 느려요. URL을 다시 확인해주세요.

무엇 / 왜 / 무엇을 할 수 있는지 한국어 평이체. "Something went wrong" X.

§6.9TrendBadge

DESIGN.md §6

추천 근거 출처 — ChatGPT 대비 우리 차별점

LinkedIn AI agent ROI +340%토스 7월 분기 결산 케이스최근 3개 캠페인 평균 conversion 12%

Signal = 외부 검색·트렌드 (시안) / Case = 실제 회사 사례 (핑크) / Wisdom = 우리 학습 데이터 (Primary).

§6.10CampaignCard (시그니처)

DESIGN.md §6.2

시기

7월 3주차

2026 Q3

B2B SaaS 분기 결산 — ROI 케이스 콘텐츠 시리즈

목적: 분기 결산 시즌에 ROI 사례로 신규 리드 인지 + 기존 고객 retention
타겟: CMO · 마케팅 디렉터 · 1~2인 마케팅팀 리드 (50~500인 B2B SaaS)
채널: LinkedIn회사 블로그이메일 뉴스레터

목표 리드

예상 reach

5,000

가격 페이지 SEO — AI 시대 검색 최적화

목적: ChatGPT/Perplexity의 추천 결과에 우리 가격 페이지 노출
타겟: 우리 가격 페이지 방문자 + ChatGPT 사용자
채널: 자체 SEOschema.org 마크업

AI 친화도 점수

§6.11CountUp / NumberTicker

DESIGN.md §7.4

리드 수

전환율

0.0%

ROI

×0.0

Framer Motion useSpring 기반. prefers-reduced-motion 시 즉시 최종값.

§7.2Motion · Lenis

DESIGN.md §7.2

스크롤 결 비교

01Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

02Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

03Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

04Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

05Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

06Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

07Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

08Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

09Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

10Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

11Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

12Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

13Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

14Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

15Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

16Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

17Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

18Lenis 적용 시 휠 입력이 부드럽게 보간돼 결이 살아납니다.

랜딩(`/`, `/audit`) 전용. 도구 페이지(/roadmap·/dashboard 등)에는 적용 X — Linear/Vercel 결. prefers-reduced-motion 시 자동 비활성.

§6.12Icons

DESIGN.md §6

네비게이션 아이콘 — 1.75px stroke, currentColor, 24 viewBox

kanban

chart

inbox

binoculars

lead

currentColor 사용 → 부모의 text 색이 그대로 적용. hover/active 시 별도 색 지정 없이 부모 class만 바꾸면 됨.

§6.13Illustrations

DESIGN.md §6.7

추상 기하학 — 1.5px stroke, primary + cyan 액센트

default

inboxEmpty

dashboardEmpty

구체적 아이콘·이모지 X. var(--color-*) 토큰만 사용해 다크·라이트 자동 대응.

§6.14MonthPicker

DESIGN.md §6.3

YYYY-MM 월 선택기 — Popover + 4×3 그리드 + 년도 네비

선택값: (없음)