/* ===================================================================== WILS brand v2.0 · design tokens · Direction 1 "Colour Field" Mirror: tokens.json (same names, DTCG format). Contrast: CONTRAST.md --------------------------------------------------------------------- Rules carried by these tokens (see BRAND-GUIDE.md): - One font only: WILS Sans 400 / 500 / 700. No italic exists: never synthesise a slant (font-synthesis: none). Binomials stay upright. - Flat colour. No gradients, no shadows, no rounded corners (only the 10 px group dot is round). Paper is pure white, never cream. - Two values per hue: 100 % and a 10 % tint. Group colours are never text; tints carry Ink only. Documented exceptions, and the only ones: (1) drawings and the planting-plan device build tints from opacity, never from a new hex (--wils-ill-*, --wils-device-*-opacity); (2) --wils-print-black #000000, one-colour print reproduction only. - Light only. - Arabic: same sizes, open leading, never tracked, never capitalised. Digits are Western 0-9 in both locales. ===================================================================== */ /* --------------------------------------------------------------------- @font-face · WILS Sans v0.2 PATH NOTE: url() in CSS resolves relative to THIS file (02 Brand/tokens/ -> ../type/WILS-Sans-v0.2/fonts/). CSS custom properties cannot be used inside url() in @font-face, so when you copy this file into the app (e.g. app/src/styles/), rewrite the three "../type/WILS-Sans-v0.2/fonts/" prefixes to the served font path (e.g. "/fonts/"). --wils-font-path below documents the default. --------------------------------------------------------------------- */ @font-face { font-family: "WILS Sans"; src: url("../fonts/WILSSans-Regular.woff2") format("woff2"), url("../fonts/WILSSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "WILS Sans"; src: url("../fonts/WILSSans-Medium.woff2") format("woff2"), url("../fonts/WILSSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "WILS Sans"; src: url("../fonts/WILSSans-Bold.woff2") format("woff2"), url("../fonts/WILSSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } :root { color-scheme: light; --wils-font-path: "../fonts/"; /* documentation only */ /* ================= PALETTE (constants, constants) ===== */ /* core */ --wils-ink: #121417; /* all body text and data */ --wils-paper: #FFFFFF; /* white ground, never cream */ --wils-muted: #575B63; /* captions and labels only (on light) */ --wils-muted-on-ink: #A9ACB3; /* captions on Ink (footer) */ --wils-lead: #00666F; /* Delta Teal: lead, home hero, actions, links */ --wils-lead-tint: #E6F0F1; /* Delta Teal 10 % */ --wils-print-black: #000000; /* one-colour print only (logo/wils-mono-black.svg); never on screen */ /* plant groups: 100 % field, 10 % tint, text colour on the field */ --wils-trees: #16803C; --wils-trees-tint: #E8F2EC; --wils-trees-on: #FFFFFF; --wils-palms: #F2A20C; --wils-palms-tint: #FEF6E7; --wils-palms-on: #121417; /* light field: Ink, never Paper */ --wils-shrubs: #C93A17; --wils-shrubs-tint: #FAEBE8; --wils-shrubs-on: #FFFFFF; --wils-groundcovers: #86C8F0; --wils-groundcovers-tint: #F3FAFE; --wils-groundcovers-on: #FFFFFF; /* white on the blue: owner choice 2026-11-08 (1.82:1, below WCAG AA) */ --wils-climbers: #B2176E; --wils-climbers-tint: #F7E8F0; --wils-climbers-on: #FFFFFF; /* hardscape groups (Mineral): 100 % field, 10 % tint, text colour on the field */ --wils-surfaces: #D6B07A; /* Sandstone: paving, play surfaces */ --wils-surfaces-tint: #FBF7F2; --wils-surfaces-on: #121417; /* light field: Ink, never Paper */ --wils-edges: #5B6470; /* Granite: edges and kerbs, walls and steps */ --wils-edges-tint: #EFF0F1; --wils-edges-on: #FFFFFF; --wils-water: #1D4E9E; /* Cobalt: drainage, tree pits and grates */ --wils-water-tint: #E8EDF5; --wils-water-on: #FFFFFF; --wils-furniture: #8C4A1F; /* Corten: street furniture, lighting */ --wils-furniture-tint: #F4EDE9; --wils-furniture-on: #FFFFFF; /* ================= SEMANTIC (light only) ============================ */ --wils-color-bg: var(--wils-paper); --wils-color-surface: var(--wils-paper); /* tiles, frames: hairline-framed, same ground */ --wils-color-text: var(--wils-ink); --wils-color-text-muted: var(--wils-muted); --wils-color-link: var(--wils-lead); --wils-color-action-bg: var(--wils-lead); --wils-color-action-text: var(--wils-paper); --wils-color-lead-tint: var(--wils-lead-tint); --wils-color-inverse-bg: var(--wils-ink); /* source-number chips, footer */ --wils-color-inverse-text: var(--wils-paper); --wils-color-inverse-muted: var(--wils-muted-on-ink); --wils-color-rule: rgba(18, 20, 23, .16); /* 1 px hairline */ --wils-color-rule-strong: var(--wils-ink); /* 2 px heading/table rule */ --wils-color-focus: var(--wils-lead); /* group tints as grounds (the 10 % tints) */ --wils-color-trees-tint: var(--wils-trees-tint); --wils-color-palms-tint: var(--wils-palms-tint); --wils-color-shrubs-tint: var(--wils-shrubs-tint); --wils-color-groundcovers-tint: var(--wils-groundcovers-tint); --wils-color-climbers-tint: var(--wils-climbers-tint); --wils-color-surfaces-tint: var(--wils-surfaces-tint); --wils-color-edges-tint: var(--wils-edges-tint); --wils-color-water-tint: var(--wils-water-tint); --wils-color-furniture-tint: var(--wils-furniture-tint); /* per-page group: set --wils-group / --wils-group-on / --wils-group-tint on a page or section, e.g.
. Default = Trees. */ --wils-group: var(--wils-trees); --wils-group-on: var(--wils-trees-on); --wils-group-tint: var(--wils-color-trees-tint); /* ================= TYPE ============================================= */ --wils-font-sans: "WILS Sans", system-ui, sans-serif; --wils-font-mono: ui-monospace, Menlo, monospace; /* hex codes and IDs on brand boards only */ --wils-weight-regular: 400; --wils-weight-medium: 500; --wils-weight-bold: 700; /* Latin scale: size / line-height / weight / tracking */ --wils-text-display-size: 96px; --wils-text-display-lh: .92; --wils-text-display-weight: 700; --wils-text-display-tracking: -.035em; --wils-text-h1-size: 64px; --wils-text-h1-lh: .95; --wils-text-h1-weight: 700; --wils-text-h1-tracking: -.03em; --wils-text-h2-size: 40px; --wils-text-h2-lh: 1; --wils-text-h2-weight: 700; --wils-text-h2-tracking: -.02em; --wils-text-h3-size: 24px; --wils-text-h3-lh: 1.15; --wils-text-h3-weight: 700; --wils-text-h3-tracking: -.01em; --wils-text-lede-size: 19px; --wils-text-lede-lh: 1.5; --wils-text-lede-weight: 400; --wils-text-lede-tracking: 0; --wils-text-body-size: 17px; --wils-text-body-lh: 1.5; --wils-text-body-weight: 400; --wils-text-body-tracking: 0; --wils-text-small-size: 14px; --wils-text-small-lh: 1.45; --wils-text-small-weight: 400; --wils-text-small-tracking: 0; --wils-text-label-size: 11px; --wils-text-label-lh: 1.3; --wils-text-label-weight: 700; --wils-text-label-tracking: .14em; /* uppercase */ /* Arabic: same sizes, open leading, tracking 0, no capitals */ --wils-text-display-lh-ar: 1.25; --wils-text-h1-lh-ar: 1.3; --wils-text-h2-lh-ar: 1.4; --wils-text-h3-lh-ar: 1.5; --wils-text-lede-lh-ar: 1.8; --wils-text-body-lh-ar: 1.8; --wils-text-small-lh-ar: 1.7; --wils-text-label-size-ar: 13px; --wils-text-label-lh-ar: 1.6; --wils-text-label-weight-ar: 500; --wils-tracking-ar: 0; /* wordmark (values relative to the wordmark's own font-size) */ --wils-wordmark-weight: 700; --wils-wordmark-tracking: -.04em; --wils-wordmark-lh: .8; --wils-wordmark-cap-height: .713em; /* H = 1460 / 2048 units; clear space = 1 H all sides */ --wils-wordmark-desc-size: .24em; /* descriptor, Medium, two lines */ --wils-wordmark-desc-lh: 1.12; --wils-wordmark-desc-tracking: -.01em; --wils-wordmark-desc-gap: .22em; --wils-wordmark-ar-desc-size: .2em; /* Arabic lock-up (proposed, owner review) */ --wils-wordmark-ar-desc-lh: 1.5; --wils-wordmark-ar-desc-gap: .25em; --wils-wordmark-min-lockup: 40px; /* 12 mm; below this use compact WILS */ --wils-wordmark-min-compact: 20px; /* 6 mm */ /* ================= SPACE (4 px base, 8 px rhythm; step n = 4 px x n) == */ --wils-space-0: 0; --wils-space-1: 4px; --wils-space-2: 8px; --wils-space-3: 12px; --wils-space-4: 16px; --wils-space-5: 20px; --wils-space-6: 24px; --wils-space-8: 32px; --wils-space-10: 40px; --wils-space-12: 48px; --wils-space-14: 56px; --wils-space-16: 64px; --wils-space-18: 72px; --wils-space-24: 96px; --wils-space-28: 112px; /* ================= GRID / LAYOUT ==================================== */ --wils-grid-columns: 12; --wils-grid-gutter: 24px; --wils-page-max: 1280px; /* site frame */ --wils-page-margin: 32px; /* site side gutter, desktop */ --wils-page-margin-mobile: 16px; /* site side gutter, <= 1100 px */ --wils-section-pad-y: 112px; /* long-form / brand pages */ --wils-section-pad-x: 96px; --wils-section-pad-y-mobile: 64px; --wils-section-pad-x-mobile: 20px; --wils-sidebar: 500px; /* plant page data column (1fr + 500px, gap 48) */ --wils-nav-height: 64px; --wils-nav-height-mobile: 56px; --wils-measure: 720px; /* max line length for lede / prose */ /* planting-plan device */ --wils-device-unit: 8px; /* cell = 8 px x n */ --wils-device-columns: 17; /* beds 7 / 2 / 4 / 4 (W I L S) */ --wils-device-rows-mobile: 2; --wils-device-rows-page: 3; --wils-device-rows-cover: 6; /* ================= COMPONENTS (board-fixed measures) ================ */ /* Sizes the board sets per component, outside the type scale. Compact (<= 1100 px) values are in the @media block below. */ /* cover and long-form section heads */ --wils-text-cover-size: 200px; --wils-text-cover-lh: .84; --wils-text-cover-tracking: -.045em; --wils-text-cover-idea-size: 26px; --wils-text-cover-idea-lh: 1.25; --wils-text-section-size: 72px; --wils-text-section-lh: .95; --wils-text-section-tracking: -.03em; --wils-section-head-label-col: 240px; /* home hero */ --wils-text-home-hero-size: 112px; --wils-text-home-hero-lh: .88; --wils-text-home-hero-tracking: -.045em; --wils-text-home-lede-size: 22px; --wils-text-home-lede-lh: 1.35; --wils-text-home-lede-weight: 500; --wils-home-hero-max: 1000px; --wils-home-lede-max: 620px; /* navigation */ --wils-nav-wordmark-size: 26px; --wils-nav-link-size: 15px; --wils-nav-link-gap: 24px; --wils-nav-search-width: 280px; --wils-nav-search-height: 40px; /* plant hero */ --wils-hero-binomial-size: 96px; --wils-hero-binomial-lh: .9; --wils-hero-common-size: 28px; --wils-hero-meta-col: 380px; --wils-hero-meta-label-size: 10px; /* dt labels: Label style at 10 px */ --wils-hero-plan-max: 820px; --wils-hero-ar-name-size: 56px; /* RTL: Arabic name leads */ --wils-hero-ar-binomial-size: 22px; /* RTL: Latin binomial follows */ /* CAD download buttons */ --wils-btn-download-height: 84px; --wils-btn-download-format-size: 22px; --wils-btn-download-label-size: 10px; /* group bar (home) */ --wils-groupbar-size: 20px; --wils-groupbar-min-h: 96px; /* data tables, chips, cards */ --wils-table-cell-pad: 9px; --wils-table-label-size: 10px; /* ref squares, chips in tables */ --wils-ref-chip-size: 16px; --wils-chip-size: 12px; --wils-card-binomial-size: 20px; --wils-card-common-size: 15px; /* share card 1200 x 630 */ --wils-share-width: 1200px; --wils-share-height: 630px; --wils-share-field: 680px; --wils-share-panel: 520px; --wils-share-wordmark-size: 40px; --wils-share-title-size: 88px; /* two-line species name */ --wils-share-title-size-long: 80px; /* three-line or longer slogan */ --wils-share-desc-size: 26px; /* ================= RULES / HAIRLINES ================================ */ --wils-rule-hairline: 1px; /* frames, table rows, list dividers (colour: rule) */ --wils-rule-strong: 2px; /* section heads, table heads, TOC (colour: rule-strong) */ --wils-rule-accent: 6px; /* top accent on callout panels (colour: lead) */ --wils-device-hairline: 1px; /* open-ground cells */ --wils-device-edge: 2px; /* bed edges, plan frame */ --wils-device-path: 3px; /* Paper paths between beds */ /* ================= DRAWING OPACITIES (documented exception) ========= */ /* Drawings and the device build tints from opacity over the group colour or Ink, never from a new hex. Fixed values from the board. */ --wils-device-hairline-opacity: .28; /* device open-ground cell lines */ --wils-device-canopy-opacity: .22; /* device tree canopy fill */ --wils-ill-mass-back: .16; /* render: back crown masses */ --wils-ill-mass-front: .22; /* render: front crown masses */ --wils-ill-crown-edge: .75; /* render: crown edge (1 for Palms, Groundcovers) */ --wils-ill-veins: .375; /* render: crown form lines (0.38 in files) */ --wils-ill-ground: .6; /* render: ground line */ --wils-ill-plan-outline: .7; /* plan symbol: canopy outline */ /* ================= RADII / MARKERS ================================== */ --wils-radius: 0; /* everything is square */ --wils-radius-dot: 50%; /* the group dot only */ --wils-dot-group: 10px; --wils-shadow: none; /* ================= BREAKPOINTS (reference; not usable in @media) ===== */ --wils-bp-compact: 1100px; /* <= 1100: single column, type steps down, mobile gutters */ --wils-ref-mobile: 390px; /* design reference width, mobile */ --wils-ref-desktop: 1280px; /* design reference width, desktop */ } /* Compact type steps (board @media max-width:1100px) */ @media (max-width: 1100px) { :root { --wils-text-display-size: 60px; --wils-text-h1-size: 40px; --wils-text-h2-size: 30px; --wils-text-lede-size: 17px; --wils-text-cover-size: 92px; --wils-text-cover-idea-size: 20px; --wils-text-section-size: 44px; --wils-text-home-hero-size: 60px; /* not on the board: follows the display step */ --wils-text-home-lede-size: 19px; /* not on the board: follows the lede step */ --wils-nav-wordmark-size: 22px; --wils-hero-binomial-size: 46px; --wils-hero-binomial-lh: .95; --wils-hero-common-size: 20px; --wils-btn-download-height: 64px; --wils-btn-download-format-size: 18px; --wils-groupbar-min-h: 56px; --wils-page-margin: var(--wils-page-margin-mobile); --wils-nav-height: var(--wils-nav-height-mobile); --wils-section-pad-y: var(--wils-section-pad-y-mobile); --wils-section-pad-x: var(--wils-section-pad-x-mobile); } } /* Group switch:
sets the page group */ [data-group="trees"] { --wils-group: var(--wils-trees); --wils-group-on: var(--wils-trees-on); --wils-group-tint: var(--wils-color-trees-tint); } [data-group="palms"] { --wils-group: var(--wils-palms); --wils-group-on: var(--wils-palms-on); --wils-group-tint: var(--wils-color-palms-tint); } [data-group="shrubs"] { --wils-group: var(--wils-shrubs); --wils-group-on: var(--wils-shrubs-on); --wils-group-tint: var(--wils-color-shrubs-tint); } [data-group="groundcovers"] { --wils-group: var(--wils-groundcovers); --wils-group-on: var(--wils-groundcovers-on); --wils-group-tint: var(--wils-color-groundcovers-tint); } [data-group="climbers"] { --wils-group: var(--wils-climbers); --wils-group-on: var(--wils-climbers-on); --wils-group-tint: var(--wils-color-climbers-tint); } [data-group="surfaces"] { --wils-group: var(--wils-surfaces); --wils-group-on: var(--wils-surfaces-on); --wils-group-tint: var(--wils-color-surfaces-tint); } [data-group="edges"] { --wils-group: var(--wils-edges); --wils-group-on: var(--wils-edges-on); --wils-group-tint: var(--wils-color-edges-tint); } [data-group="water"] { --wils-group: var(--wils-water); --wils-group-on: var(--wils-water-on); --wils-group-tint: var(--wils-color-water-tint); } [data-group="furniture"] { --wils-group: var(--wils-furniture); --wils-group-on: var(--wils-furniture-on); --wils-group-tint: var(--wils-color-furniture-tint); } /* Drawing plate: Paper (BRAND-GUIDE.md §8, RENDER-STANDARD.md §3.6). Pins Ink lines and Muted labels so an inlined drawing stays Ink on Paper. */ .wils-plate { background: var(--wils-paper); border: var(--wils-rule-hairline) solid var(--wils-color-rule); color: var(--wils-ink); --wils-color-text: var(--wils-ink); --wils-color-text-muted: var(--wils-muted); } /* Minimal base that the tokens assume (safe to drop if the app has its own) */ html { font-synthesis: none; } /* never fake italic or bold */ body { background: var(--wils-color-bg); color: var(--wils-color-text); font-family: var(--wils-font-sans); font-size: var(--wils-text-body-size); line-height: var(--wils-text-body-lh); } :lang(ar) { letter-spacing: var(--wils-tracking-ar) !important; text-transform: none !important; }