/* ============================================================ NUTRIUM — Design Tokens Color palette derived from group1.png Typography: Manrope (Google Fonts) ============================================================ */ :root { /* ---------------------------------------------------------- COLOR PALETTE ---------------------------------------------------------- */ /* ---- Primary (Navy Blue from scrubs) ---- */ --color-primary-950: #080c16; /* near black navy */ --color-primary-900: #0f1524; /* darkest – deep ink */ --color-primary-800: #1a2240; /* ★ base – primary brand */ --color-primary-700: #212945; /* sampled from image */ --color-primary-600: #2c3558; /* dark navy */ --color-primary-500: #3a4570; /* medium navy */ --color-primary-400: #4e5a8a; /* muted blue */ --color-primary-300: #6e7aaa; /* soft blue */ --color-primary-200: #9aa3c8; /* light periwinkle */ --color-primary-100: #c8cde3; /* very light blue */ --color-primary-50: #eceef5; /* whisper blue */ /* ---- Neutral / Surface (whites & greys from kitchen) ---- */ --color-neutral-950: #111214; /* near black */ --color-neutral-900: #1c1d21; /* very dark grey */ --color-neutral-800: #33343a; /* dark grey */ --color-neutral-700: #4b4d55; /* medium-dark grey */ --color-neutral-600: #6b6d76; /* medium grey */ --color-neutral-500: #8e9098; /* grey */ --color-neutral-400: #b2b4ba; /* cool grey (≈ floor tone) */ --color-neutral-300: #cdd0d6; /* light cool grey */ --color-neutral-200: #e4e6ea; /* ★ off-white from surfaces */ --color-neutral-100: #f2f3f5; /* near white */ --color-neutral-50: #fafafa; /* snow white */ --color-neutral-0: #ffffff; /* pure white */ /* ---- Accent / Warm (gold/brass accents from image) ---- */ --color-accent-950: #2e1e10; /* deepest warm brown */ --color-accent-900: #4a3222; /* very dark warm brown */ --color-accent-800: #6b4c36; /* dark warm brown */ --color-accent-700: #8a6a50; /* deep warm brown */ --color-accent-600: #a07856; /* warm brown */ --color-accent-500: #b5967e; /* ★ base – brass/gold tone */ --color-accent-400: #c8aa94; /* light warm gold */ --color-accent-300: #dcc4b2; /* soft sand */ --color-accent-200: #ecddd2; /* pale sand */ --color-accent-100: #f5ede7; /* warm off-white */ --color-accent-50: #faf6f3; /* whisper warm */ /* ---- Semantic Colors ---- */ --color-success: #2d7a5f; /* calm green – health/wellness */ --color-success-bg: #e8f5ef; --color-warning: #856215; /* deep warm amber – 5.2:1 on warning-bg */ --color-warning-bg: #fdf5e6; --color-error: #c0392b; /* muted red */ --color-error-bg: #fdecea; --color-info: #3a4570; /* reuse primary-500 */ --color-info-bg: #eceef5; /* ---------------------------------------------------------- APPLIED COLOR ROLES ---------------------------------------------------------- */ /* Backgrounds */ --bg-page: var(--color-neutral-100); /* #f2f3f5 */ --bg-surface: var(--color-neutral-0); /* #ffffff */ --bg-surface-raised: var(--color-neutral-100); /* #f2f3f5 */ --bg-surface-sunken: var(--color-neutral-200); /* #e4e6ea */ --bg-primary: var(--color-primary-800); /* #1a2240 */ --bg-primary-hover: var(--color-primary-700); /* #212945 */ --bg-primary-subtle: var(--color-primary-50); /* #eceef5 */ --bg-accent-subtle: var(--color-accent-100); /* #f5ede7 */ /* Text All roles meet WCAG 2.1 AA (4.5:1) on their intended backgrounds. Tertiary bumped to neutral-700 for better small-text legibility. */ --text-primary: var(--color-primary-900); /* #0f1524 – deep ink */ --text-secondary: var(--color-primary-700); /* #212945 – brand secondary */ --text-tertiary: var(--color-neutral-700); /* #4b4d55 – 8.4:1 on white */ --text-on-primary: var(--color-neutral-0); /* #ffffff */ --text-on-primary-muted: var(--color-primary-200); /* #9aa3c8 – 6.3:1 on primary-800 */ --text-link: var(--color-primary-600); /* #2c3558 */ --text-link-hover: var(--color-primary-500); /* #3a4570 */ --text-accent: var(--color-accent-700); /* #8a6a50 – 4.7:1 on white */ --text-on-accent: var(--color-accent-900); /* #4a3222 – for text on accent backgrounds */ --text-on-accent-muted: var(--color-accent-800); /* #6b4c36 – secondary text on accent backgrounds */ /* Borders */ --border-default: var(--color-neutral-200); /* #e4e6ea */ --border-subtle: var(--color-neutral-100); /* #f2f3f5 */ --border-strong: var(--color-neutral-400); /* #b2b4ba */ --border-focus: var(--color-primary-400); /* #4e5a8a */ /* ---------------------------------------------------------- TYPOGRAPHY — Manrope ---------------------------------------------------------- */ --font-family-sans: 'Manrope', system-ui, -apple-system, sans-serif; --font-family-mono: 'JetBrains Mono', ui-monospace, monospace; /* Weight Manrope is a variable font (200–800) so fractional values work. Bumped "regular" to 500 for better legibility on light backgrounds. */ --font-weight-regular: 500; --font-weight-medium: 550; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold:800; /* Type Scale — Major Third (1.250) Base: 16px (1rem) Optimized for readability on a marketing site. Step Name Size Line-height Letter-spacing ───────────────────────────────────────────────────────────── -2 caption 0.64rem 1.5 +0.02em -1 small 0.8rem 1.5 +0.01em 0 body 1rem 1.6 0 1 body-lg 1.125rem 1.6 0 2 subheading 1.25rem 1.5 -0.005em 3 h4 1.563rem 1.4 -0.01em 4 h3 1.953rem 1.35 -0.015em 5 h2 2.441rem 1.25 -0.02em 6 h1 3.052rem 1.2 -0.025em 7 display 3.815rem 1.1 -0.03em */ /* Font sizes */ --text-caption: 0.64rem; /* ~10px */ --text-sm: 0.8rem; /* ~13px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.563rem; /* 25px */ --text-3xl: 1.953rem; /* 31px */ --text-4xl: 2.441rem; /* 39px */ --text-5xl: 3.052rem; /* 49px */ --text-display: 3.815rem; /* 61px */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.4; --leading-relaxed: 1.6; --leading-loose: 1.8; /* Letter spacing */ --tracking-tighter: -0.03em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.01em; --tracking-wider: 0.02em; /* ---------------------------------------------------------- SPACING (base 4px) ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---------------------------------------------------------- BORDER RADII Softly rounded — friendly but not playful. ---------------------------------------------------------- */ --radius-xs: 0.25rem; /* 4px – tags, badges */ --radius-sm: 0.375rem; /* 6px – small chips, toggles */ --radius-md: 0.625rem; /* 10px – buttons, inputs */ --radius-lg: 0.875rem; /* 14px – cards, dropdowns */ --radius-xl: 1.25rem; /* 20px – modals, sections */ --radius-2xl: 1.75rem; /* 28px – hero cards, pricing */ --radius-3xl: 2.5rem; /* 40px – large feature sections */ --radius-full: 9999px; /* pills, avatars */ /* ---------------------------------------------------------- ELEVATION / SHADOWS Navy-tinted shadows for cohesion with primary palette. Each level = increasing visual lift from the surface. ---------------------------------------------------------- */ /* Level 0 – flat / no elevation */ --shadow-none: none; /* Level 1 – subtle lift (borders, input fields, nav) */ --shadow-xs: 0 1px 2px rgba(26, 34, 64, 0.05); /* Level 2 – low cards, dropdowns at rest */ --shadow-sm: 0 1px 3px rgba(26, 34, 64, 0.07), 0 1px 2px rgba(26, 34, 64, 0.04); /* Level 3 – cards on hover, active dropdowns */ --shadow-md: 0 4px 8px rgba(26, 34, 64, 0.07), 0 2px 4px rgba(26, 34, 64, 0.04); /* Level 4 – modals, popovers, sticky nav */ --shadow-lg: 0 12px 24px rgba(26, 34, 64, 0.08), 0 4px 8px rgba(26, 34, 64, 0.04); /* Level 5 – dialogs, toasts, elevated panels */ --shadow-xl: 0 24px 48px rgba(26, 34, 64, 0.10), 0 8px 16px rgba(26, 34, 64, 0.05); /* Level 6 – top-level overlays */ --shadow-2xl: 0 32px 64px rgba(26, 34, 64, 0.12), 0 12px 24px rgba(26, 34, 64, 0.06); /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --content-max-width: 1200px; --content-narrow: 720px; --header-height: 4.5rem; }