/* ============================================================ FYT Design System — Colors & Type Editorial-warm direction (v9). Instrument Serif italic + Inter + JetBrains Mono over a Bone surface with a Terra accent. ============================================================ */ /* -- Google Fonts (Instrument Serif + Inter + JetBrains Mono) ---------- */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Surface / Canvas (light, warm editorial) ───────────── */ --fyt-bone: #F1F1F4; /* default app canvas — quiet lilac (2026) */ --fyt-bone-deep: #E4E4EA; /* rail / tinted section */ --fyt-bone-sheet: #F6F6F9; /* card / sheet fill */ --fyt-bone-line: rgba(36,36,36,0.10); /* hairline */ --fyt-bone-line-soft: rgba(36,36,36,0.06); /* ── Ink (warm black scale) ─────────────────────────────── */ --fyt-ink: #1A1A1A; /* headings, icons */ --fyt-ink-soft: #242424; /* body text */ --fyt-ink-70: rgba(36,36,36,0.70); --fyt-ink-55: rgba(36,36,36,0.55); /* muted body */ --fyt-ink-40: rgba(36,36,36,0.40); /* meta, timestamps */ --fyt-ink-25: rgba(36,36,36,0.25); /* dividers */ /* ── Stone (alt dark surface, for Start screen) ─────────── */ --fyt-stone: #2A2623; /* deep warm ink */ --fyt-stone-deep: #1F1C19; /* darkest variant */ --fyt-stone-line: rgba(245,241,234,0.12); /* ── Accent ─ Terra (the ONE chromatic accent) ──────────── */ --fyt-terra: #C4714A; /* headline phrases, recommended-ring, chart 'them' */ --fyt-terra-deep: #A35932; /* hover / pressed */ --fyt-terra-soft: rgba(196,113,74,0.14); /* pill fill */ /* ── Light paper (for onboarding early slides, splash) ── */ --fyt-paper: #FFFFFF; /* ── Aliases kept for any legacy spec-card references ─── */ --fyt-bg: var(--fyt-bone); --fyt-surface: var(--fyt-bone-sheet); --fyt-surface-elev: #E5E0D6; --fyt-text: var(--fyt-ink-soft); --fyt-text-secondary: var(--fyt-ink-55); --fyt-text-muted: var(--fyt-ink-40); --fyt-border: var(--fyt-bone-line); --fyt-warm-black: var(--fyt-ink-soft); /* ── Dark mode / reversed (Stone backdrop) ──────────────── */ --fyt-bg-dark: var(--fyt-stone-deep); --fyt-surface-dark: var(--fyt-stone); --fyt-surface-elev-dark: #35302C; --fyt-text-dark: #F5F1EA; --fyt-text-secondary-dark: rgba(245,241,234,0.65); --fyt-text-muted-dark: rgba(245,241,234,0.40); --fyt-border-dark: var(--fyt-stone-line); /* ── Semantic ───────────────────────────────────────────── */ --fyt-success: #2A9D99; --fyt-success-subtle: rgba(42,157,153,0.10); --fyt-warning: #DD5B00; --fyt-warning-subtle: rgba(221,91,0,0.10); --fyt-error: #B5412C; /* pulled toward terra family */ --fyt-error-subtle: rgba(181,65,44,0.10); --fyt-info: var(--fyt-terra); --fyt-info-subtle: var(--fyt-terra-soft); /* ── Big Five dimension colors (data viz only — never chrome) */ --fyt-openness: #8B5CF6; --fyt-conscientiousness: #2A9D99; --fyt-extraversion: #DD5B00; --fyt-agreeableness: #1AAE39; --fyt-neuroticism: #B5412C; /* Soft pastels (overlaid wheels / radar charts) */ --fyt-openness-soft: #C9B6FF; --fyt-conscientiousness-soft: #7AE7C7; --fyt-extraversion-soft: #FFD166; --fyt-agreeableness-soft: #A5E7B3; --fyt-neuroticism-soft: #E8A599; /* ── Tribe type gradients (dark hero cards) ─────────────── */ --fyt-tribe-work-a: #0A1628; --fyt-tribe-work-b: #1A2E4A; --fyt-tribe-family-a: #1A0A10; --fyt-tribe-family-b: #2D1520; --fyt-tribe-study-a: #0A1A0A; --fyt-tribe-study-b: #142814; --fyt-tribe-social-a: #1A0A28; --fyt-tribe-social-b: #2D1545; /* ── Test framework gradients ───────────────────────────── */ --fyt-test-bigfive-a: #1A1A2E; --fyt-test-bigfive-b: #16213E; --fyt-test-disc-a: #1A0A00; --fyt-test-disc-b: #2D1600; --fyt-test-culture-a: #0A001A; --fyt-test-culture-b: #1A0035; --fyt-test-mbti-a: #001A14; --fyt-test-mbti-b: #00302A; --fyt-test-enneagram-a: #001433; --fyt-test-enneagram-b: #002855; --fyt-test-attachment-a: #1A0010; --fyt-test-attachment-b: #330020; --fyt-test-default-a: var(--fyt-stone-deep); --fyt-test-default-b: var(--fyt-stone); /* ── Spacing (8 px base, with 18 px product edge) ──────── */ --fyt-space-xs: 4px; --fyt-space-sm: 8px; --fyt-space-md: 12px; --fyt-space-edge: 18px; /* phone-screen outer margin (non-negotiable) */ --fyt-space-lg: 24px; --fyt-space-xl: 32px; --fyt-space-xxl: 48px; --fyt-space-xxxl: 64px; /* ── Radii ──────────────────────────────────────────────── */ --fyt-radius-xs: 4px; /* input, small button */ --fyt-radius-sm: 8px; --fyt-radius-md: 12px; /* list rows, chip cards */ --fyt-radius-lg: 20px; /* sheet cards */ --fyt-radius-xl: 28px; /* hero / test tiles */ --fyt-radius-pill: 9999px; /* ── Shadows — one soft ambient is the house rule ─────── */ --fyt-shadow-card: 0 1px 2px rgba(36,36,36,0.04), 0 8px 24px -12px rgba(36,36,36,0.10); --fyt-shadow-lift: 0 2px 6px rgba(36,36,36,0.06), 0 16px 40px -18px rgba(36,36,36,0.18); --fyt-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.60), inset 0 -1px 0 rgba(36,36,36,0.04); /* ── Typography families ────────────────────────────────── */ --fyt-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --fyt-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --fyt-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ============================================================ Type scale — MATCH THESE NAMES IN EVERY MOCK Display face is Instrument Serif, italic by default (400). Body is Inter. Numeric / eyebrow / metadata is JetBrains Mono. ============================================================ */ /* Display (Instrument Serif italic, tight) */ .fyt-display-xl { font-family: var(--fyt-font-display); font-style: italic; font-size: 56px; font-weight: 400; line-height: 1.02; letter-spacing: -0.6px; color: var(--fyt-ink); } .fyt-display-lg { font-family: var(--fyt-font-display); font-style: italic; font-size: 48px; font-weight: 400; line-height: 1.05; letter-spacing: -0.5px; color: var(--fyt-ink); } .fyt-display-md { font-family: var(--fyt-font-display); font-style: italic; font-size: 34px; font-weight: 400; line-height: 1.08; letter-spacing: -0.4px; color: var(--fyt-ink); } .fyt-display-sm { font-family: var(--fyt-font-display); font-style: italic; font-size: 26px; font-weight: 400; line-height: 1.12; letter-spacing: -0.3px; color: var(--fyt-ink); } /* Serif *upright* — headline phrases within cards, captions */ .fyt-serif-upright { font-family: var(--fyt-font-display); font-style: normal; font-weight: 400; color: var(--fyt-ink); } /* Headline (Inter 600) — screen titles, card heads */ .fyt-headline-lg { font-family: var(--fyt-font-body); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; color: var(--fyt-ink); } .fyt-headline-md { font-family: var(--fyt-font-body); font-size: 16px; font-weight: 600; line-height: 1.30; letter-spacing: 0; color: var(--fyt-ink); } .fyt-headline-sm { font-family: var(--fyt-font-body); font-size: 14px; font-weight: 600; line-height: 1.30; letter-spacing: 0.05px; color: var(--fyt-ink); } /* Body (Inter) */ .fyt-body-lg { font-family: var(--fyt-font-body); font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--fyt-ink-soft); } .fyt-body-md { font-family: var(--fyt-font-body); font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--fyt-ink-55); } .fyt-body-sm { font-family: var(--fyt-font-body); font-size: 13px; font-weight: 400; line-height: 1.50; color: var(--fyt-ink-55); } /* Labels / UI (Inter 500–600) */ .fyt-label-lg { font-family: var(--fyt-font-body); font-size: 14px; font-weight: 600; line-height: 1; color: var(--fyt-ink); } .fyt-label-md { font-family: var(--fyt-font-body); font-size: 13px; font-weight: 500; line-height: 1.15; color: var(--fyt-ink-55); } .fyt-label-sm { font-family: var(--fyt-font-body); font-size: 12px; font-weight: 500; line-height: 1; color: var(--fyt-ink-40); } /* Eyebrow — the signature mono meta-label */ .fyt-eyebrow { font-family: var(--fyt-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--fyt-ink-55); } .fyt-eyebrow-sm { font-family: var(--fyt-font-mono); font-size: 9px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fyt-ink-40); } /* Numeric (JetBrains Mono) */ .fyt-score-display { font-family: var(--fyt-font-mono); font-size: 30px; font-weight: 500; color: var(--fyt-ink); } .fyt-score-label { font-family: var(--fyt-font-mono); font-size: 12px; font-weight: 400; color: var(--fyt-ink-55); } /* Button (Inter 500, line-height 1) */ .fyt-button-lg { font-family: var(--fyt-font-body); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0; } .fyt-button-md { font-family: var(--fyt-font-body); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0; } /* ============================================================ Base element resets (use these in mocks) ============================================================ */ body.fyt-frame { margin: 0; background: var(--fyt-bone); color: var(--fyt-ink-soft); font-family: var(--fyt-font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.fyt-frame.dark { background: var(--fyt-bg-dark); color: var(--fyt-text-dark); }