5892125740
- Vite + React 19 + Tailwind CSS - 4가지 디자인 레퍼런스 통합 (CRT 스크린, 크로스헤어, 노이즈, 인스트루먼트) - 섹션 9개: Hero, Features, HowItWorks, Privacy, Pricing, FAQ, CTA, Header, Footer - 재사용 컴포넌트 8개 (Badge, Container, InstrumentCard, GlowButton 등) - i18n 10개 국어 (en/ko/ja/zh/es/fr/de/pt/ru/vi) - GitHub Pages 자동 배포 워크플로우
109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
/**
|
|
* D3RO Voice Landing Page - Centralized Design Tokens
|
|
*
|
|
* All visual constants live here. Components reference these tokens
|
|
* instead of hardcoding colors, spacing, or typography values.
|
|
*
|
|
* Tailwind classes map to these same values via tailwind.config.js.
|
|
* Use tokens when building inline styles or JS-driven visuals.
|
|
*/
|
|
|
|
// ── Colors ──────────────────────────────────────────────
|
|
export const color = {
|
|
brand: {
|
|
amber: '#f25b29',
|
|
amberLight: '#ff7a4d',
|
|
amberDark: '#c44a22',
|
|
amberGlow: 'rgba(242,91,41,0.6)',
|
|
amberDim: 'rgba(242,91,41,0.15)',
|
|
amberMuted: 'rgba(242,91,41,0.08)',
|
|
},
|
|
surface: {
|
|
950: '#0a0a0c',
|
|
900: '#0d0d0f',
|
|
800: '#131315',
|
|
700: '#19191b',
|
|
600: '#1e1f21',
|
|
500: '#242427',
|
|
400: '#2a2a2d',
|
|
300: '#333338',
|
|
200: '#3a3b3f',
|
|
100: '#4a4b50',
|
|
},
|
|
neutral: {
|
|
50: '#fafafa',
|
|
100: '#f0f0f1',
|
|
200: '#d4d4d8',
|
|
300: '#a1a1aa',
|
|
400: '#71717a',
|
|
500: '#52525b',
|
|
},
|
|
semantic: {
|
|
success: '#22c55e',
|
|
warning: '#eab308',
|
|
error: '#ef4444',
|
|
},
|
|
} as const
|
|
|
|
// ── Typography ──────────────────────────────────────────
|
|
export const font = {
|
|
display: '"Space Grotesk", sans-serif',
|
|
sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
mono: '"JetBrains Mono", "Fira Code", monospace',
|
|
} as const
|
|
|
|
// ── Spacing (px) ────────────────────────────────────────
|
|
export const space = {
|
|
section: { y: 120, yMobile: 80 },
|
|
grid: { gap: 16, gapLg: 24 },
|
|
container: { maxWidth: 1280, px: 24, pxLg: 48 },
|
|
} as const
|
|
|
|
// ── Shadows ─────────────────────────────────────────────
|
|
export const shadow = {
|
|
insetPanel: 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.04)',
|
|
chassis: '0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04)',
|
|
glowSm: '0 0 10px rgba(242,91,41,0.3)',
|
|
glowMd: '0 0 20px rgba(242,91,41,0.25), 0 0 40px rgba(242,91,41,0.1)',
|
|
glowLg: '0 0 30px rgba(242,91,41,0.3), 0 0 60px rgba(242,91,41,0.15), 0 0 90px rgba(242,91,41,0.05)',
|
|
} as const
|
|
|
|
// ── Radii ───────────────────────────────────────────────
|
|
export const radius = {
|
|
instrument: '2px',
|
|
panel: '6px',
|
|
card: '12px',
|
|
pill: '999px',
|
|
} as const
|
|
|
|
// ── Z-Index ─────────────────────────────────────────────
|
|
export const zIndex = {
|
|
header: 50,
|
|
overlay: 40,
|
|
modal: 60,
|
|
} as const
|
|
|
|
// ── Timing ──────────────────────────────────────────────
|
|
export const timing = {
|
|
fast: '150ms',
|
|
normal: '250ms',
|
|
slow: '400ms',
|
|
easeOut: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
} as const
|
|
|
|
// ── Feature Labels ──────────────────────────────────────
|
|
export const tierLabel = {
|
|
free: 'FREE',
|
|
pro: 'PRO',
|
|
proPlus: 'PRO+',
|
|
} as const
|
|
|
|
// ── Nav Items ───────────────────────────────────────────
|
|
// Labels come from i18n (t.nav.*). Only hrefs and keys are defined here.
|
|
export const navItems = [
|
|
{ key: 'features' as const, href: '#features' },
|
|
{ key: 'pipeline' as const, href: '#pipeline' },
|
|
{ key: 'privacy' as const, href: '#privacy' },
|
|
{ key: 'pricing' as const, href: '#pricing' },
|
|
{ key: 'faq' as const, href: '#faq' },
|
|
] as const
|