/* ========================================================================= tokens.css - LAYER 1 of 4: design tokens ========================================================================= THE ONLY FILE IN THE PLATFORM THAT MAY CONTAIN A RAW VALUE. Every colour, size, space, radius, border, shadow and duration used anywhere is named here. No other stylesheet may write a hex code, an rgb(), a px font-size or a hard-coded spacing value. scripts/validate-design-system.ps1 enforces this and fails the build if it drifts. Why that rule matters: the platform will eventually carry a marketing site, a policy store, a client portal and an administration portal. A token that is defined once can be re-themed once. A hex code scattered through four applications cannot. INTERIM VALUES. docs/BrandGuidelines.md is still awaiting brand input. These implement the agreed Sprint 1 direction only - warm off-white, charcoal, restrained champagne gold - and are close to, but not identical with, the values measured on the previous website (see docs/FramerSiteInventory.md 6.2). Layer order: tokens -> base -> layout -> components ========================================================================= */ :root { /* ===================================================================== COLOUR - SURFACES ===================================================================== */ --color-surface-default: #F8F5F0; /* the page */ --color-surface-raised: #FFFEFB; /* cards, panels */ --color-surface-sunken: #EFEAE1; /* insets, quiet blocks, code */ --color-surface-inverse: #191817; /* charcoal sections */ --color-surface-inverse-raised: #232120; /* cards on charcoal */ /* ===================================================================== COLOUR - TEXT Contrast ratios are computed by scripts/validate-contrast.ps1. ===================================================================== */ --color-text-default: #1B1A18; --color-text-muted: #56534D; --color-text-subtle: #6E6A63; --color-text-inverse: #F4F1EB; --color-text-inverse-muted: #B5AFA4; /* ===================================================================== COLOUR - ACCENT (champagne gold) THREE golds, because one cannot do all three jobs and stay legible. Which to use is decided by contrast, not by taste: --color-accent lines and borders on light. 3.5:1 - passes WCAG 1.4.11 for a UI component, FAILS 1.4.3 for text. Never use for text. --color-accent-text the same hue darkened for gold text on light. Passes on surface-default (4.63:1) and surface-raised (4.99:1). It does NOT pass on surface-sunken: 4.20:1, below the 4.5 threshold. So .section--sunken cannot currently carry an .eyebrow__num, a .card__index or .list-steps numerals. See docs/DesignSystem.md, section 10. --color-accent-on-dark gold text on charcoal. 9.8:1. ===================================================================== */ --color-accent: #A17D33; --color-accent-text: #8A6A28; --color-accent-line: #D8C9A6; --color-accent-wash: #F0E8D8; --color-accent-on-dark: #D9BE84; /* ===================================================================== COLOUR - BORDERS border-subtle is decorative separation (exempt from WCAG 1.4.11). border-strong outlines real controls and must reach 3:1. ===================================================================== */ --color-border-subtle: #E2DCD1; --color-border-strong: #948B7E; --color-border-inverse: #38352F; /* ===================================================================== COLOUR - STATUS Each has a text colour and a wash to sit on. ===================================================================== */ --color-status-info: #2E4A5C; --color-status-info-wash: #E7EDF1; --color-status-warning: #6B4B12; --color-status-warning-wash: #F5EEDF; --color-status-danger: #7A2E22; --color-status-danger-wash: #F6E9E6; --color-status-success: #2E5138; --color-status-success-wash: #E8F0EA; /* ===================================================================== COLOUR - FOCUS ===================================================================== */ --color-focus-ring: #1B1A18; --color-focus-ring-inverse: #E8C98C; /* ===================================================================== COLOUR - ENYALIUS Enyalius is the case, workflow and people-risk platform built by Your People Team. Its identity is already approved and is implemented, not proposed: see assets/brand/enyalius/README.md. It is a navy, graphite, porcelain and steel palette, deliberately cooler and quieter than the consultancy's warm one. These tokens exist so the product can carry its own identity on its own page WITHOUT re-theming the practice site around it. Nothing above this block changes; nothing below this block reads these values. If Enyalius ever needs a second page, it re-uses these and defines nothing new. Ratios are measured against the surface each colour is actually used on and are enforced by scripts/validate-contrast.ps1. ===================================================================== */ /* Grounds. Onyx is the deepest; graphite is the raised surface on onyx and is also the right half of the shield; navy is the left half. */ --color-eny-onyx: #0B0D12; --color-eny-graphite: #1F232B; --color-eny-navy: #0D2D57; --color-eny-porcelain: #F3F4F6; --color-eny-panel: #FFFFFF; /* the raised surface on porcelain */ --color-eny-stone: #D6D8DC; /* cool stone: rules on light, and the hover ground of the main action on dark */ /* Text on the dark grounds. Cool, because a warm off-white on navy reads as a mistake rather than as a choice. --color-eny-text onyx 16.6:1, graphite 13.5:1, navy 11.9:1 --color-eny-text-muted onyx 9.2:1, graphite 7.4:1 */ --color-eny-text: #E9EDF3; --color-eny-text-muted: #A9B4C4; /* Text on the light ground. --color-eny-ink porcelain 16.0:1 --color-eny-ink-muted porcelain 6.9:1 */ --color-eny-ink: #14181F; --color-eny-ink-muted: #4A5461; /* Accents. Each is the one that passes where it is used: --color-eny-accent navy text on porcelain, 9.3:1 --color-eny-line rules and focus on light, 6.0:1 --color-eny-steel steel-blue on onyx 10.2:1, on graphite 8.3:1 */ --color-eny-accent: #16407A; --color-eny-line: #2F5E9E; --color-eny-steel: #9FBEE8; /* The outline of a secondary control on the dark grounds. It has to be an opaque colour and it has to clear 1.4.11: the translucent veil used for decorative panel edges composites to 1.35:1 on onyx, which left the only thing identifying the control as a control invisible until hover. onyx 3.9:1, graphite 3.1:1 - both above the 3.0 a UI component needs. */ --color-eny-border-invert: #66707E; /* Premium gold, from the approved gold shield. A LINE COLOUR ONLY: 4.83:1 on the white card it rules clears 1.4.11 for a UI component and FAILS 1.4.3 for text. Never set it as a colour, and never let it become the default accent - the brand reserves it for premium and access contexts, so on this page it appears once, on the card about availability. */ --color-eny-gold: #8A6E2F; /* Translucency. The product surfaces are veils over the ground rather than opaque panels, which is what makes the dark bands read as depth instead of as stacked boxes. Deliberately not named --color-*: they are surface treatments with no contrast obligation of their own, and the contrast validator reads only six-digit hex. The navy wash is the hero's light source. */ --eny-veil: rgba(255, 255, 255, 0.045); --eny-veil-line: rgba(255, 255, 255, 0.12); --eny-wash: rgba(13, 45, 87, 0.55); /* Shape. The house radii are 1-3px because heavy rounding reads as consumer SaaS. Enyalius softens that deliberately and by a measured amount - it is a working environment people sit inside all day, not a brochure - but it stops well short of the pill geometry the house rule is guarding against. */ --radius-eny-sm: 0.375rem; --radius-eny: 0.75rem; --radius-eny-lg: 1.25rem; /* The diagrams are drawn in a 480-unit viewBox, so 480px is the size at which one unit is one pixel and the labels are the size they were drawn. Past that they simply get bigger, which reads as a diagram that has been zoomed rather than one that has been set. */ --eny-diagram-width: 30rem; /* ===================================================================== TYPOGRAPHY System stacks only. This platform loads no web fonts, because it makes no external request of any kind. ===================================================================== */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* One scale, and a short one on purpose. There were previously five sizes below 18px - 17/15/13/12/11 - which is too little separation to read as hierarchy and just enough to look inconsistent. Three small sizes now do the work: --text-md body --text-sm secondary text --text-xs labels, meta, badges Nothing may invent a size outside this scale. */ --text-display: clamp(3rem, 7vw, 5.25rem); --text-3xl: clamp(2rem, 4.5vw, 3rem); --text-2xl: clamp(1.5rem, 3vw, 2rem); --text-xl: 1.375rem; --text-lg: 1.1875rem; --text-md: 1.0625rem; --text-sm: 0.9375rem; --text-xs: 0.8125rem; --leading-display: 1.02; --leading-tight: 1.14; --leading-snug: 1.4; --leading-body: 1.7; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-label: 0.14em; --tracking-eyebrow: 0.22em; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ===================================================================== SPACE - one scale, used for margin, padding and gap everywhere ===================================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-12: 9rem; /* ===================================================================== SPACE - COMPOSED Two derived values, because the raw scale above says how big a gap is but not which gap it is. These name the two rhythms that repeat on every page, so a section and a card breathe consistently and both can be re-tuned in one place. Both are STEPPED at breakpoints in layout.css. Previously every section was --space-10 and every card --space-6 at every width, which is a beat rather than a rhythm: 5rem of air above a two-line heading on a 360px screen, and the same 2rem inside a card whether it has a whole column to itself or a third of one. ===================================================================== */ --section-space: var(--space-8); --section-head-space: var(--space-6); --card-padding: var(--space-5); /* ===================================================================== LAYOUT ===================================================================== */ --measure: 70ch; /* readable line length for prose */ --measure-short: 54ch; --wrap-max: 75rem; --wrap-narrow: 48rem; --wrap-gutter: var(--space-5); --sidebar-width: 17.5rem; --sidenav-width: 16rem; /* Approximate sticky-header height at desktop. ESTIMATED, not measured - verify in a browser and adjust. */ --sticky-offset: 7.5rem; /* How far below the top of the scrollport an anchored or focused element must come to rest, because .site-header is sticky at top:0 and would otherwise cover it - WCAG 2.2 2.4.11 Focus Not Obscured. MEASURED, unlike the estimate above: the header is 142px below 48rem, 96px from 48rem, 149px between 60rem and 80rem where the eight-item menu takes two rows, and 96px again above that. This is the worst case; layout.css steps it down once the two-row band is past. */ --scroll-offset: 9.5rem; /* ===================================================================== SHAPE Deliberately sharp. Heavy rounding reads as consumer SaaS; restrained geometry reads as professional services. ===================================================================== */ --radius-sm: 1px; --radius-md: 2px; --radius-lg: 3px; --radius-pill: 999px; --border-width: 1px; --border-width-accent: 2px; --hairline: var(--border-width) solid var(--color-border-subtle); --hairline-accent: var(--border-width) solid var(--color-accent-line); --hairline-inverse: var(--border-width) solid var(--color-border-inverse); --shadow-dialog: 0 24px 60px rgba(25, 24, 23, 0.28); --backdrop: rgba(25, 24, 23, 0.6); /* ===================================================================== CONTROLS - shared sizing so every control lines up ===================================================================== */ --control-height: 2.875rem; /* >= 44px touch target */ --control-padding-x: var(--space-4); --control-padding-y: var(--space-3); --focus-ring-width: 2px; --focus-ring-offset: 3px; /* ===================================================================== MOTION AND RESPONSE Perceived quality is mostly feedback latency. An interface that does not acknowledge a press feels broken long before anyone can say why. --press-shift is the distance a control moves when held: small enough to feel physical, not enough to disturb the layout. ===================================================================== */ --transition-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.2, 0, 0.2, 1); --transition-enter: 180ms cubic-bezier(0.16, 1, 0.3, 1); --press-shift: 1px; --lift-shift: -2px; --shadow-lift: 0 6px 20px rgba(25, 24, 23, 0.10); /* Waiting, not moving. Slow enough to read as "still working" rather than as something demanding attention. */ --pulse-duration: 1.4s; /* ===================================================================== ELEVATION ORDER ===================================================================== */ --z-header: 50; --z-skip-link: 100; /* ===================================================================== PRINT Ink on paper, not the screen palette. Separate tokens so the print stylesheet does not have to reach for a raw value. ===================================================================== */ --color-print-ink: #000000; --color-print-paper: #FFFFFF; --color-print-rule: #999999; --text-print: 11pt; } /* Reduced motion removes movement, but NOT feedback. Colour and border changes still happen instantly, so a control that is pressed still acknowledges the press - it simply does not travel. */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-enter: 0ms; --press-shift: 0px; --lift-shift: 0px; } }