결혼 준비라는 가장 따뜻하고 복잡한 의사결정에 어울리는 시각 언어. 부산웨딩넷 10년의 정서를 이어받아 모던하게 재해석한 풀 디자인 시스템 — 컬러 24종·타이포 8단계·컴포넌트 47개·아이콘 84종.
픽셀 한 줄까지 이 원칙으로 의사결정해요. 새 컴포넌트를 만들거나 기존 것을 수정할 때 가장 먼저 이 6가지에 비추어 봅니다.
모든 화면은 두 분의 시간·감정·결정을 우선해요. 회사 매출보다 두 분의 경험이 먼저. 추천도 무리하지 않아요.
웨딩 시장의 과한 화려함을 빼고, 네추럴한 따뜻함만 남겼어요. 핑크보다 머스타드·블러시·세이지를 선택.
AI 기능은 보라색 액센트로 표시. 사람의 결정과 명확히 구분되도록. AI가 결정자가 아니라 비서임을 시각으로.
서두르지 않는 인터페이스. 여백·라인 높이·애니메이션 타이밍이 차분하게 잡혀 있어요.
예쁜 말보다 정확한 정보. 숫자·날짜·시세는 시각적 강조 없이 명확하게 전달.
애니메이션은 장식이 아니라 의미 전달 도구. 펄스·페이드·스케일 모두 이유가 있어요.
8개 영역 · 24개 토큰. 모든 컬러는 4.5:1 명도 대비 통과 (WCAG AA). 클릭하면 HEX 자동 복사.
한글은 Noto Serif KR / Noto Sans KR · 영문은 Cormorant Garamond·Playfair Display·Inter·JetBrains Mono. 럭셔리 영역은 Cormorant 이태릭으로 차별.
전체 47개 컴포넌트 중 핵심 12종. Figma 라이브러리 + React 코드 모두 동기화됩니다.
각 비서 도메인별 시그니처 컬러 그라디언트. 84종 일러스트 아이콘 + 이모지 사용 가이드.
linear-gradient(135deg, #E8D5A3, #C4A35A)모든 여백·갭은 4px 기반. 자주 쓰는 8단계 토큰 — Tailwind 호환.
CSS Custom Properties 사용 권장. Tailwind 4 / shadcn / styled-components 호환 토큰을 GitHub에서 다운로드.
/* Flora Design Tokens v2.4 — 2026.05.08 */ :root { /* AI · Primary */ --ai-1: #B794D9; /* Lavender */ --ai-2: #7C5BA8; /* Flora Purple */ --ai-grad: linear-gradient(135deg, var(--ai-1), var(--ai-2)); /* VIP · Gold */ --gold: #C4A35A; --gold-l: #E8D5A3; --vip-gold: linear-gradient(135deg, #FFE19C, #E8C77E 50%, #C4A35A); /* Couple roles */ --bride: #C9806B; /* 신부 — 장미 */ --groom: #6E91AF; /* 신랑 — 스틸 블루 */ /* Surface */ --bg: #FBF8F3; --cream: #F2EAD9; --line: #EDE5D6; /* States */ --sage: #7A9E8A; /* Success */ --alert: #D97A7A; /* Danger */ --gold: #C4A35A; /* Warning */ /* Spacing — 4-base scale */ --space-1: .25rem; --space-4: 1rem; --space-8: 2rem; /* Radius */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 9999px; } /* Example: AI primary button */ .btn-pri { background: var(--ai-grad); border-radius: var(--r-pill); padding: var(--space-3) var(--space-6); }
Figma 라이브러리·코드 토큰·로고·아이콘 — 모든 리소스는 무료로 다운로드. 사용 시 출처 표기 부탁드려요.
새 컴포넌트 제안·버그 신고·접근성 개선·번역 — 어떤 형태든 환영해요. 매주 화요일 디자인 시스템 위클리 미팅(공개)에 참여하시면 됩니다.