/* TOP design tokens — bundle (colors+typography+spacing) gerado do design system */ /* ============================================================================ TOP — The Outfit Planner · Color tokens Three layers: 1. PRIMITIVES raw scales, no meaning (--gd-neutral-500, --top-season-*) 2. SEMANTIC the vocabulary the UI knows (--color-text, --color-accent) 3. SKINS :root = light · .theme-dark = dark BRAND PHILOSOPHY — "color IS the system." TOP is about color, so color is an active part of the UI, not a reserved accent. The chrome carries a chromatic accent drawn from the brand's color wheel (a confident blue by default; it can follow the active person's personal-color season), and the 12-season wheel recurs across components (logo, score rings, the analysis hero, avatar rings, tier dots). For usability the load-bearing layers stay calm: TEXT is ink, SURFACES are neutral paper/ink. Color lives in actions, selection, scores and the personal-palette data — where it also carries meaning. ============================================================================ */ :root { /* ---- Layer 1 · Primitives ------------------------------------------------ */ --gd-white: #ffffff; --gd-black: #000000; /* Ink + neutral ramp (cool, fashion-neutral; 900 == brand ink) */ --gd-neutral-0: #ffffff; --gd-neutral-50: #f7f7f8; --gd-neutral-100: #eeeef1; --gd-neutral-200: #dededf; --gd-neutral-300: #bcbcc4; --gd-neutral-400: #8e8e9c; --gd-neutral-500: #6b6b78; --gd-neutral-600: #4a4a55; --gd-neutral-700: #33333b; --gd-neutral-800: #212127; --gd-neutral-900: #16181d; /* TOP ink */ --gd-neutral-950: #0b0c0f; --top-ink: #16181d; /* the one brand color — primary action & wordmark */ /* The 12-season color wheel (the logo's heart; also the personal-color tiers). Sophisticated, slightly muted — never neon. Order = around the wheel. */ --top-season-1: #c0344d; /* red */ --top-season-2: #d06a2e; /* orange */ --top-season-3: #d8a13b; /* amber */ --top-season-4: #a9b84a; /* chartreuse */ --top-season-5: #5fae57; /* green */ --top-season-6: #2e9e7e; /* emerald */ --top-season-7: #2f9fae; /* teal */ --top-season-8: #2f6fb0; /* blue */ --top-season-9: #4a4fb0; /* indigo */ --top-season-10: #7a45ad; /* violet */ --top-season-11: #a83f9a; /* magenta */ --top-season-12: #bb3b6f; /* rose */ /* Feedback — the only chromatic semantics (color carries meaning) */ --gd-positive-400: #46c79f; /* "great color" / suits you (dark skin) */ --gd-positive-500: #1f8a6d; /* "great color" / suits you (light skin) */ --gd-danger-400: #f0747b; --gd-danger-500: #d64550; /* "avoid" / off-palette / destructive */ --gd-danger-600: #b8323d; --gd-success-500: #1f8a6d; --gd-warning-500: #d8a13b; /* ---- Layer 2 · Semantic (LIGHT skin) ------------------------------------ */ --color-background: var(--gd-neutral-50); /* screen background */ --color-surface: var(--gd-neutral-0); /* elevated card / input */ --color-surface-muted: var(--gd-neutral-100); /* pressed / disabled */ --color-border: var(--gd-neutral-200); /* control & card border */ --color-text: var(--gd-neutral-900); /* primary text */ --color-text-muted: var(--gd-neutral-500); /* secondary / caption */ --color-text-on-accent: var(--gd-white); /* text on accent surface */ --color-accent: #2563a8; /* primary action = BRAND BLUE (from the wheel) */ --color-accent-pressed: #1e5290; /* deeper blue on press */ --color-accent-muted: #e9f0f9; /* tinted selected surface */ --color-positive: var(--gd-positive-500); /* suits-you / great color */ --color-danger: var(--gd-danger-500); /* avoid / destructive */ --color-danger-text: var(--gd-danger-600); /* validation message */ --color-success: var(--gd-success-500); /* success */ } /* ---- Layer 3 · DARK skin -------------------------------------------------- Monochrome inversion: the accent becomes PAPER and its text becomes INK. Apply by adding class="theme-dark" to any ancestor (the app follows the OS color scheme automatically). The accent stays chromatic, lifted for dark. */ .theme-dark { --color-background: var(--gd-neutral-950); --color-surface: var(--gd-neutral-900); --color-surface-muted: var(--gd-neutral-800); --color-border: var(--gd-neutral-700); --color-text: var(--gd-neutral-50); --color-text-muted: var(--gd-neutral-400); --color-text-on-accent: #0b0c0f; /* ink text on light-blue accent */ --color-accent: #5aa0e6; /* lifted brand blue */ --color-accent-pressed: #7db4ec; --color-accent-muted: #15263a; --color-positive: var(--gd-positive-400); --color-danger: var(--gd-danger-400); --color-danger-text: var(--gd-danger-400); --color-success: var(--gd-positive-400); } /* ---- Optional · per-season accent themes ---------------------------------- "The app speaks in YOUR colors." Add one of these classes on a screen root (alongside the active person's personal-color season) to retint the whole chrome to that season. Winter = the cool brand blue (default-ish); the others warm or cool the accent. Text/surfaces are untouched. */ .season-inverno { --color-accent:#2b5fa6; --color-accent-pressed:#214f8c; --color-accent-muted:#e8eff8; } .season-verao { --color-accent:#5a6fa6; --color-accent-pressed:#4b5d8c; --color-accent-muted:#eceff6; } .season-outono { --color-accent:#a8632b; --color-accent-pressed:#8c5221; --color-accent-muted:#f6ece0; } .season-primavera { --color-accent:#c2554a; --color-accent-pressed:#a5443b; --color-accent-muted:#fbeae7; } .theme-dark.season-inverno, .theme-dark .season-inverno { --color-accent:#5aa0e6; --color-text-on-accent:#0b0c0f; } .theme-dark.season-outono, .theme-dark .season-outono { --color-accent:#e0a05a; --color-text-on-accent:#0b0c0f; } /* ============================================================================ TOP — The Outfit Planner · Typography tokens Two-typeface split: • DISPLAY = Space Grotesk — the wordmark and screen titles. Geometric, open counters (a great "O" for the wheel), a little fashion-tech edge. • TEXT = native system stack (SF Pro on iOS) — body, labels, captions. Fast, legible, what the RN app actually renders. Space Grotesk ships as a webfont (Google Fonts @import below, in the token closure so consumers get it automatically). ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"); :root { /* Display — titles + wordmark */ --font-display: "Space Grotesk", "SF Pro Display", system-ui, sans-serif; /* Text — body / labels / captions (native system stack) */ --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Raw size scale (px) */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 28px; /* Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---- Semantic type tokens — one per Text variant ---- title uses the display face; everything else uses the system face. */ --text-title-size: 28px; --text-title-weight: 700; --text-title-line: 34px; --text-body-size: 16px; --text-body-weight: 400; --text-body-line: 24px; --text-caption-size: 12px; --text-caption-weight: 400; --text-caption-line: 16px; --text-label-size: 14px; --text-label-weight: 500; --text-label-line: 20px; } /* ============================================================================ Garderobe — Spacing, radius & size tokens Structural scales, shared across both skins (only colors/type re-skin). Spacing is a base-4 scale; control height is a 48px tap target (≥44px iOS). ============================================================================ */ :root { /* Spacing scale (base 4) */ --space-none: 0; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* Border radii */ --radius-none: 0; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; /* Absolute control / avatar sizes */ --size-avatar-sm: 32px; --size-avatar-md: 44px; --size-avatar-lg: 64px; --size-control-height: 48px; /* Garment thumbnail sizes */ --size-thumb-md: 56px; --size-thumb-lg: 72px; }