/* ============================================================================= KDU Developer Community — Design tokens ----------------------------------------------------------------------------- Every colour, font and measurement the site uses is declared here. Change a value in this file and it changes everywhere; nothing in the HTML or the other stylesheets hard-codes a colour. The look is soft and plain on purpose. This is a community of developers, not a manual: nothing here should feel like documentation. That means one ordinary sans-serif, rounded corners, quiet greys, plenty of air, and no typographic mannerisms — no letter-spaced small caps, no rules, no texture, no decorative marks. Colour is used sparingly and only where it means something. The palette still comes from the logo, so the site and the mark belong together, but the strong colours sit in small places rather than across whole sections. Foreground and background pairs are checked against WCAG AA (4.5:1 for body text, 3:1 for large text). Ratios are noted where they are close enough to matter. ========================================================================== */ :root { /* --------------------------------------------------------------------------- 1. THE PALETTE The only place raw colour values appear. ------------------------------------------------------------------------ */ /* From the logo. */ --navy: #123a6b; /* softened from the mark's #062350 */ --blue: #2c60c5; /* the first dot — this is the colour of doing things */ --gold: #fbb405; /* the second dot — small highlights only */ --green: #448162; /* the third dot — small highlights only */ /* Variants, for grounds where the pure colour is not readable. */ --blue-soft: #eef2fc; /* a blue-tinted wash, for quiet panels */ --blue-deep: #2351a9; /* hover */ --blue-light: #8fb0e6; /* on navy grounds */ /* Neutrals. Warm-grey rather than pure grey, and the darkest text tone is a soft near-black rather than black, which is most of what makes a page feel gentle instead of stark. */ --grey-000: #ffffff; --grey-025: #fbfbfc; /* page background */ --grey-050: #f5f6f8; /* alternating sections, quiet fills */ --grey-100: #eceef1; /* borders on light fills */ --grey-200: #dfe2e7; /* hairlines */ --grey-400: #9aa1ad; /* placeholders, disabled */ --grey-500: #5f6673; /* secondary text (6.02:1 white, 5.34:1 on the tint) */ --grey-700: #4a5160; /* body text (8.04:1 on white) */ --grey-900: #2b3140; /* headings */ /* --------------------------------------------------------------------------- 2. SEMANTIC COLOUR — everything else refers to these, not to section 1 ------------------------------------------------------------------------ */ --color-bg: var(--grey-025); --color-bg-alt: var(--grey-050); --color-surface: var(--grey-000); --color-surface-alt: var(--grey-050); --color-ink: var(--navy); /* the footer and the dark band */ --color-heading: var(--grey-900); --color-text: var(--grey-700); --color-text-muted: var(--grey-500); --color-text-faint: var(--grey-500); --color-border: var(--grey-200); --color-border-strong: var(--grey-400); /* Interaction. Blue means this does something. */ --color-primary: var(--blue); --color-primary-hover: var(--blue-deep); --color-primary-soft: var(--blue-soft); --color-on-primary: #ffffff; --color-accent-1: var(--blue); --color-accent-2: var(--gold); --color-accent-3: var(--green); /* On the navy footer. */ --color-on-dark: #eef1f6; --color-on-dark-muted: #a8b4c8; /* 5.44:1 on navy */ --color-on-dark-faint: #96a8be; /* 4.69:1 on navy */ --color-border-on-dark: #2c517f; --color-primary-on-dark: var(--blue-light); --color-accent-on-dark: var(--gold); --color-focus: var(--blue); --color-focus-on-dark: #ffffff; --color-selection-bg: var(--blue-soft); --color-selection-fg: var(--grey-900); /* Validation. The wording carries the meaning; colour only supports it. */ --color-invalid: #b3261e; --color-invalid-field: #fdf3f2; --color-valid: #2f6f4f; /* --------------------------------------------------------------------------- 3. TYPEFACE PT Sans, one family, regular and bold. An ordinary, friendly sans with slightly humanist letterforms — warm enough not to feel corporate, plain enough that nobody notices it, which is the point. ------------------------------------------------------------------------ */ --font: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --weight-body: 400; --weight-medium: 400; --weight-semibold: 700; --weight-display: 700; --weight-display-bold: 700; /* --------------------------------------------------------------------------- 4. TYPE SCALE Body sits at 17px. The headings step down gently: a small range keeps the page calm, and nothing is set at a size that shouts. ------------------------------------------------------------------------ */ --fs-hero: clamp(2.1rem, 5.5vw, 3.1rem); --fs-hero-wide: clamp(2.1rem, 4vw, 3.1rem); --fs-display: clamp(1.7rem, 3vw, 2.25rem); --fs-h2: clamp(1.45rem, 2.2vw, 1.8rem); --fs-h3: 1.2rem; --fs-h4: 1.0625rem; --fs-lead: clamp(1.0625rem, 1.3vw, 1.1875rem); --fs-body: 1.0625rem; --fs-small: 1rem; --fs-caption: 0.9375rem; --fs-micro: 0.875rem; --lh-hero: 1.18; --lh-display: 1.2; --lh-heading: 1.3; --lh-body: 1.65; --lh-tight: 1.45; /* No letter-spacing anywhere. Tracked-out small caps are the single thing that makes a page read as a specification, and this is not one. These tokens stay at zero so any rule still referring to them is harmless. */ --tracking-hero: 0; --tracking-display: 0; --tracking-caption: 0; --tracking-label: 0; /* --------------------------------------------------------------------------- 5. SPACE — 4px base ------------------------------------------------------------------------ */ --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-11: 6rem; --space-12: 7rem; --section-gap: clamp(3rem, 6vw, 5.5rem); /* --------------------------------------------------------------------------- 6. LAYOUT ------------------------------------------------------------------------ */ --wrap: 70rem; --wrap-narrow: 42rem; --wrap-wide: 78rem; --gutter: clamp(1.25rem, 4vw, 2.5rem); --header-h: 4.25rem; /* --------------------------------------------------------------------------- 7. SHAPE AND DEPTH Rounded corners and a low, wide shadow. Both are doing the same job: taking the hard edges off. ------------------------------------------------------------------------ */ --radius: 10px; --radius-sm: 6px; --radius-pill: 999px; --hairline: 1px; --rule: 1px solid var(--color-border); --rule-strong: 1px solid var(--color-border); --rule-ink: 1px solid var(--color-border); --border-heavy: 1px; --shadow-sm: 0 1px 2px rgba(43, 49, 64, 0.05); --shadow: 0 2px 8px rgba(43, 49, 64, 0.06); --shadow-lg: 0 8px 24px rgba(43, 49, 64, 0.08); /* The paper texture is gone. Kept at zero so the rule that reads it does nothing rather than having to be hunted down. */ --grain-opacity: 0; --grain-tile: 220px; --ground-h: 0px; --focus-width: 2px; --focus-offset: 3px; /* --------------------------------------------------------------------------- 8. MOTION — all of it is disabled under prefers-reduced-motion ------------------------------------------------------------------------ */ --ease: cubic-bezier(0.2, 0.6, 0.25, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 380ms; --z-grain: 90; --z-header: 100; --z-menu: 110; }