/* ========================================================================== SurveyIQ — design tokens Single source of truth for colour, type, spacing, radius, shadow, layout. Transcribed from the Primus Partners design system (primus-design-system_1.html). Values that system marks "confirmed" are used literally and noted as such; the rest are derived from them, so the whole app reads as one palette rather than two. Every token name here predates this file's contents. Only the values moved, which is why one stylesheet changed the look of every screen. ========================================================================== */ :root { /* --- Colour: ink & text ------------------------------------------------ #222 for headings and #333 for body copy are both confirmed. The steps below them are derived, keeping the ladder monotonic so hover, muted and disabled states still separate. -------------------------------------------------------------------- */ --c-ink: #222222; /* confirmed - H2 / display headings */ --c-ink-2: #333333; /* confirmed - default body copy */ --c-text-secondary: #333333; /* confirmed - card + caption text */ --c-text-muted: #5A5550; --c-text-subtle: #8A8A8A; /* confirmed - section sub-heading */ --c-text-faint: #999999; /* confirmed - meta / footnote */ --c-placeholder: #B3A495; /* confirmed - placeholder on cream */ --c-on-ink: #FFFFFF; /* confirmed - text on maroon / ink */ --c-on-ink-muted: rgba(255, 255, 255, .70); --c-on-ink-subtle: rgba(255, 255, 255, .85); /* --- Colour: accent --------------------------------------------------- One accent for the whole product. The system is explicit that maroon is the single brand colour, so everything that used to be orange is maroon and nothing else competes with it. -------------------------------------------------------------------- */ --c-accent: #6F0909; /* confirmed - primary maroon */ --c-accent-hover: #7A0C0C; /* confirmed - deep maroon, hover/active */ --c-accent-tint: #F6EAE9; --c-accent-tint-2: #FCF7F6; --c-accent-tint-3: #F1DEDD; --c-accent-border: #E4C9C7; --c-accent-border-2: #EEDCDA; /* --- Colour: status --------------------------------------------------- Both pairs are lifted from the system's own confirmed/inferred tags, so status colours belong to the same palette as everything else. -------------------------------------------------------------------- */ --c-success: #2E7D43; /* confirmed - .tag.confirmed text */ --c-success-tint: #E7F3EA; /* confirmed - .tag.confirmed fill */ --c-success-tint-2: #F2F8F4; --c-success-border: #D3E6D9; --c-success-text: #2C5E3B; --c-warn: #A4590B; /* confirmed - .tag.inferred text */ --c-warn-tint: #FDEEE0; /* confirmed - .tag.inferred fill */ --c-warn-border: #F0DCC0; /* confirmed - disclaimer border */ /* --- Colour: surfaces ------------------------------------------------- Warm off-whites, never grey: cream and the page wash are both confirmed. -------------------------------------------------------------------- */ --c-surface: #FFFFFF; /* confirmed - cards, ground for text */ --c-surface-2: #FCF9F7; /* confirmed - cream */ --c-surface-3: #F7F2EE; --c-surface-4: #F1EAE4; --c-canvas: #FAF8F6; /* confirmed - page background */ /* Cream tint wash, confirmed, for image and media placeholders. */ --c-cream-tint: rgba(238, 224, 210, .18); /* --- Colour: lines & fills --------------------------------------------- */ --c-border: #E8E2DD; /* confirmed - hairline */ --c-border-2: #EDE8E3; --c-border-3: #DBD3CB; --c-border-4: #E2DBD4; --c-divider: #F2ECE7; --c-divider-2: #F5F0EB; --c-track: #EFE9E3; --c-track-2: #F7F3EF; --c-swatch-dim: #DCD2C6; --c-swatch-dim-2: #C9BDB0; --c-overlay: rgba(34, 34, 34, .32); /* --- Typography ------------------------------------------------------- Three families, as the system specifies: Montserrat for display, Poppins for UI accents, Roboto for body. Roboto Mono is an addition - the system has no monospace because the site it came from has no tabular data, and this app has slugs, counts and timestamps that need one. -------------------------------------------------------------------- */ --font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-sans: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-ui: "Poppins", "Roboto", ui-sans-serif, system-ui, sans-serif; --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace; /* Glyph icons (⠿ ▤ ✦ ⊘ …) are covered by neither Roboto nor Montserrat, so the symbol faces come first here rather than as a fallback. */ --font-glyph: "Segoe UI Symbol", "Segoe UI Emoji", "Apple Symbols", "Noto Sans Symbols 2", "Roboto", ui-sans-serif, sans-serif; --fs-10: 10px; --fs-10-5: 10.5px; --fs-11: 11px; --fs-11-5: 11.5px; --fs-12: 12px; --fs-12-5: 12.5px; --fs-13: 13px; --fs-13-5: 13.5px; --fs-14: 14px; --fs-14-5: 14.5px; --fs-15: 15px; --fs-15-5: 15.5px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --fs-22: 22px; --fs-23: 23px; --fs-24: 24px; --fs-26: 26px; --fs-27: 27px; --fs-28: 28px; --fs-29: 29px; --fs-30: 30px; --fs-38: 38px; --fw-regular: 400; --fw-book: 400; --fw-medium: 500; --fw-mid: 500; --fw-semibold: 600; --fw-heading: 650; --fw-bold: 700; /* Stated in px by the system, not em: -0.4 on H2, -0.2 on H3 and card titles, -0.5 on the display line. */ --ls-display: -0.5px; --ls-tight: -0.4px; --ls-snug: -0.2px; --ls-eyebrow: 2px; /* confirmed - eyebrow tracking */ --ls-caps: .5px; /* confirmed - small uppercase label tracking */ --lh-heading: 1.3; --lh-body: 1.65; /* confirmed - body line-height */ /* --- Spacing ---------------------------------------------------------- The system's confirmed scale. Deliberately not a 4px grid: these are the six steps the source actually uses. -------------------------------------------------------------------- */ --space-1: 8px; /* micro gap - arrow to text */ --space-2: 15px; /* tight padding */ --space-3: 20px; /* section side padding */ --space-4: 30px; /* block margin */ --space-5: 50px; /* section vertical padding */ --space-6: 85px; /* large media wrap margin */ /* --- Radius ----------------------------------------------------------- 3px on cards, 10px on media and 50px on the search pill are confirmed; 2px is the button radius the system shows. -------------------------------------------------------------------- */ --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 10px; --r-2xl: 12px; --r-pill: 50px; --r-round: 50%; /* --- Shadow ----------------------------------------------------------- 0 4px 8px rgba(0,0,0,.2) is the confirmed card shadow; the softer .06 is what the system's own card demo uses and suits a dense interface, so it is the default and the heavier one is available for lifted surfaces. Larger overlays keep a deeper shade, tinted with the ink rather than pure black. -------------------------------------------------------------------- */ --sh-card: 0 4px 8px rgba(0, 0, 0, .06); --sh-raised: 0 4px 8px rgba(0, 0, 0, .2); --sh-frame: 0 18px 44px -26px rgba(34, 34, 34, .26); --sh-modal: 0 34px 80px -28px rgba(34, 34, 34, .42); --sh-popover: 0 14px 32px -14px rgba(34, 34, 34, .28); --sh-segment: 0 1px 2px rgba(34, 34, 34, .08); /* --- Layout constants -------------------------------------------------- */ --w-wrap: 1120px; /* confirmed - content max width */ --w-sidebar: 236px; --w-pages-rail: 212px; --w-ai-panel: 320px; --w-flow-panel: 340px; --w-detail-panel: 352px; --w-lifecycle: 392px; --w-document: 620px; --w-question: 540px; --h-topbar: 56px; --h-topbar-lg: 64px; --h-subtabs: 52px; --h-table-head: 38px; --h-table-row: 44px; --h-touch: 52px; --z-panel: 5; --z-popover: 40; --z-overlay: 90; --z-modal: 100; --z-toast: 200; --ease: cubic-bezier(.2, .6, .3, 1); }