/* ========================================================================== Dataprovider design tokens -------------------------------------------------------------------------- Single source of truth for colour, type, spacing, radius and shadow. Every value is derived from the live site at www.dataprovider.com. Components read these variables. Never hardcode a hex value in a component. Scale naming runs light (50) to dark (900). The live site names its gold family "primary" and its blue/navy family "secondary"; the mapping to those live names is noted next to each value. ========================================================================== */ :root { /* ---- Gold (live: primary) ------------------------------------------- */ --dp-gold-50: #fffdf3; /* primary-100 */ --dp-gold-200: #ffe174; /* primary-500 */ --dp-gold-300: #ffd43b; /* primary-700 */ --dp-gold-500: #ffc701; /* primary-900 main brand gold / CTA */ --dp-gold-600: #e1b102; /* primary-1000 gold border + hover */ --dp-gold-800: #886e05; /* primary-1300 */ --dp-gold-950: #342b04; /* primary-1600 */ /* ---- Blue / navy (live: secondary) ---------------------------------- */ --dp-blue-50: #fafbff; /* secondary-100 */ --dp-blue-100: #f5f6ff; /* secondary-200 page background */ --dp-blue-200: #eaedff; /* secondary-300 soft surfaces, dividers */ --dp-blue-300: #cdd5f9; /* secondary-400 strong borders */ --dp-blue-400: #a8b4f4; /* secondary-500 */ --dp-blue-500: #485ee2; /* secondary-700 */ --dp-blue-600: #3049dc; /* secondary-800 links */ --dp-blue-700: #243ccc; /* secondary-900 main brand blue */ --dp-blue-800: #2135b3; /* secondary-1000 blue border + hover */ --dp-blue-900: #1d2f9a; /* secondary-1100 */ --dp-navy: #101a50; /* secondary-1400 navy: headings, body text */ --dp-navy-900: #0c1238; /* secondary-1500 */ --dp-navy-950: #070b21; /* secondary-1600 */ /* ---- Neutral -------------------------------------------------------- */ --dp-neutral-50: #fdfdfd; --dp-neutral-100: #fbfbfb; --dp-neutral-200: #f8f8f8; --dp-neutral-300: #eeeeee; --dp-neutral-400: #e8e8e8; --dp-neutral-500: #c7c7c7; /* neutral outline border */ --dp-neutral-600: #8f8f8f; --dp-neutral-700: #6f6f6f; --dp-neutral-900: #161616; --dp-white: #ffffff; --dp-black: #000000; /* ---- Status --------------------------------------------------------- */ /* The live marketing pages do not expose status colours. These are standard accessible defaults, to be replaced when the console app surfaces its own values. */ --dp-success: #16a34a; --dp-success-soft: #ecfdf3; --dp-warning: #d97706; --dp-warning-soft: #fffbeb; --dp-danger: #dc2626; --dp-danger-soft: #fef2f2; --dp-info: var(--dp-blue-700); --dp-info-soft: var(--dp-blue-200); /* Soft surfaces for badges, alerts and tags */ --dp-primary-soft: var(--dp-blue-200); --dp-neutral-soft: var(--dp-neutral-300); /* ---- Semantic surfaces ---------------------------------------------- */ --dp-bg: var(--dp-blue-100); /* page background #f5f6ff */ --dp-surface: var(--dp-white); /* cards, panels */ --dp-surface-subtle: var(--dp-blue-50); --dp-surface-soft: var(--dp-blue-200); /* ---- Semantic text -------------------------------------------------- */ --dp-text: var(--dp-navy); --dp-text-muted: #5b6694; /* navy-tinted secondary text */ --dp-text-subtle: var(--dp-neutral-700); --dp-text-on-dark: var(--dp-white); /* ---- Borders -------------------------------------------------------- */ --dp-border: var(--dp-blue-200); --dp-border-strong: var(--dp-blue-300); --dp-border-neutral: var(--dp-neutral-500); /* ---- Links ---------------------------------------------------------- */ --dp-link: var(--dp-blue-600); --dp-link-hover: var(--dp-blue-700); /* ---- Brand action colours ------------------------------------------- */ --dp-cta-bg: var(--dp-gold-500); --dp-cta-bg-hover: var(--dp-gold-600); --dp-cta-border: var(--dp-gold-600); --dp-cta-text: var(--dp-navy); --dp-primary-bg: var(--dp-blue-700); --dp-primary-bg-hover: var(--dp-blue-800); --dp-primary-border: var(--dp-blue-800); --dp-primary-text: var(--dp-white); --dp-secondary-bg: var(--dp-navy); --dp-secondary-bg-hover: var(--dp-navy-900); --dp-secondary-border: var(--dp-navy); --dp-secondary-text: var(--dp-white); /* ---- Typography ----------------------------------------------------- */ --dp-font-sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --dp-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --dp-weight-light: 300; --dp-weight-regular: 400; --dp-weight-semibold: 600; --dp-weight-bold: 700; --dp-weight-extrabold: 800; --dp-text-xs: 0.75rem; /* 12px */ --dp-text-sm: 0.875rem; /* 14px */ --dp-text-base: 1rem; /* 16px */ --dp-text-lg: 1.125rem; /* 18px */ --dp-text-xl: 1.25rem; /* 20px */ --dp-text-2xl: 1.5rem; /* 24px */ --dp-text-3xl: 1.875rem; /* 30px */ --dp-text-4xl: 2.25rem; /* 36px */ --dp-text-5xl: 3.25rem; /* 52px hero, matches live h1 */ --dp-leading-tight: 1.1; --dp-leading-snug: 1.25; --dp-leading-normal: 1.5; /* ---- Spacing (4px base) --------------------------------------------- */ --dp-space-1: 0.25rem; --dp-space-2: 0.5rem; --dp-space-3: 0.75rem; --dp-space-4: 1rem; --dp-space-5: 1.25rem; --dp-space-6: 1.5rem; --dp-space-8: 2rem; --dp-space-10: 2.5rem; --dp-space-12: 3rem; --dp-space-16: 4rem; /* ---- Radius --------------------------------------------------------- */ --dp-radius-xs: 4px; /* buttons, inputs, badges */ --dp-radius-sm: 6px; --dp-radius-md: 8px; --dp-radius-lg: 12px; --dp-radius-xl: 16px; /* cards, matches live */ --dp-radius-full: 9999px; /* ---- Shadow (navy-tinted, from live cards) -------------------------- */ --dp-shadow-sm: 0 1px 2px 0 rgba(16, 26, 80, 0.05); --dp-shadow-md: 0 4px 6px -2px rgba(16, 26, 80, 0.06), 0 1px 2px 0 rgba(16, 26, 80, 0.05); --dp-shadow-lg: 0 12px 16px -4px rgba(16, 26, 80, 0.06), 0 4px 6px -2px rgba(16, 26, 80, 0.04); --dp-shadow-focus: 0 0 0 3px rgba(36, 60, 204, 0.35); /* ---- Overlay -------------------------------------------------------- */ --dp-overlay: rgba(7, 11, 33, 0.45); /* ---- Motion --------------------------------------------------------- */ --dp-transition: 150ms ease; } /* Minimal base so both the registry and the showcase render on-brand. Scoped to element defaults only; components own their own styling. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--dp-font-sans); font-size: var(--dp-text-base); line-height: var(--dp-leading-normal); color: var(--dp-text); background: var(--dp-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }