/* * azoresflights design system * --------------------------- * A single-hue system. Green at hue 147 is the only accent; neutrals sit at hue 160-162 so the * greys read as the same family rather than as a separate cool grey; red at hue 25 is reserved for * destructive actions and appears nowhere decorative. * * Two themes, and the light one is not an afterthought: every colour below is redeclared inside * `@media (prefers-color-scheme: light)`, and `color-scheme` is set per theme so native form * controls, date pickers and scrollbars follow the page instead of fighting it. * * Separation comes from 1px rules and one raised surface. Motion is colour and border only. * Archivo for everything, JetBrains Mono for every number, label and timestamp. * * Propshaft does NOT bundle: `stylesheet_link_tag :app` emits one per file in this * directory, SORTED BY FILENAME (propshaft/helper.rb -> asset_paths_by_glob). Load order is * therefore the filename and nothing else, which is why 00-fonts.css is numbered. The four * unprefixed files -- blog, docs, highlight -- sort after every numbered one, which is where they * belong: each is page-scoped and overrides the core. */ /* ---------------------------------------------------------------- Tokens --- */ /* * oklch, not hex, and that is a deliberate reversal of what this file used to say. * * The reason the old palette was hex was that three consumers need literal sRGB strings in Ruby and * cannot read a stylesheet: the transactional emails (inline styles, and no email client * understands oklch), the generated share card, and theme_color. Writing the WHOLE palette in hex * to serve those three cost the screen palette its perceptual uniformity -- lightening a step meant * eyeballing a new hex rather than moving one number -- and it made a light theme, where every * colour needs a considered counterpart, impractical. * * So the palette is oklch and the three consumers get the --hex-* block below, which is the same * dark values written out in sRGB. config.x.brand_colors mirrors THAT block, and * spec/design/brand_tokens_spec.rb fails if the two ever disagree. The duplication is still * guarded; it is just no longer holding the rest of the system hostage. */ :root { color-scheme: dark; /* Surfaces, page outward. --sunk and --deep are BELOW the page, for the console band and the share-card well; --surface is above it, for every card and panel. */ --bg: oklch(0.17 0.015 162); --bg-82: oklch(0.17 0.015 162 / 0.82); /* the sticky header, behind a blur */ --surface: oklch(0.205 0.016 162); --sunk: oklch(0.155 0.016 162); --deep: oklch(0.145 0.018 162); --field: oklch(0.235 0.016 162); /* inputs, selects, the route cards */ --field-hi: oklch(0.28 0.03 162); /* the active month chip, the active tab */ --plan-idle: oklch(0.19 0.014 162); --plan-on: oklch(0.24 0.03 162); --icon-bg: oklch(0.15 0.02 162); /* pinned in both themes: it is an icon field */ /* Text, lightest first. --text-4 is the floor for anything anyone has to read. --text-5 does not clear 4.5:1 on --bg and is for numerals and ornament ONLY -- the day numbers in the price grid, the em dash in an empty cell. Never a word. */ --text: oklch(0.96 0.008 160); --text-2: oklch(0.87 0.01 160); --text-3: oklch(0.75 0.012 160); --text-4: oklch(0.64 0.012 160); --text-5: oklch(0.42 0.01 160); /* Hairlines, weakest first. Everything that draws a line uses one of these. */ --line1: oklch(1 0 0 / 0.08); --line2: oklch(1 0 0 / 0.11); --line3: oklch(1 0 0 / 0.16); /* The one accent. --accent is a FILL and carries --on-accent as its ink; --accent-text is the lighter cousin used when the green is the text rather than the ground. Do not swap them: the fill colour used as text on --bg is legible but muddy, and the text colour used as a fill is too bright to put dark ink on. */ --accent: oklch(0.72 0.15 147); --accent-hover: oklch(0.79 0.14 147); --accent-text: oklch(0.82 0.13 147); --accent-ink: oklch(0.94 0.02 147); /* ink on the mid-tier (--accent-20) price cell */ --on-accent: oklch(0.19 0.03 162); --on-accent-35: oklch(0.17 0.03 162 / 0.35); --plane: oklch(0.95 0.02 147); /* the airplane glyph, and only that */ --accent-08: oklch(0.72 0.15 147 / 0.08); --accent-16: oklch(0.72 0.15 147 / 0.16); --accent-18: oklch(0.72 0.15 147 / 0.18); --accent-20: oklch(0.72 0.15 147 / 0.2); --accent-24: oklch(0.72 0.15 147 / 0.24); --accent-35: oklch(0.72 0.15 147 / 0.35); --accent-70: oklch(0.72 0.15 147 / 0.7); --link: oklch(0.78 0.13 147); --link-hover: oklch(0.88 0.09 147); /* The selection family. --moss is the accent again; --moss-strong is deliberately NEUTRAL, near white on dark and near black on light, because the selected day in the price grid sits on top of a green cell and a green ring on a green fill reads as nothing at all. */ --moss: oklch(0.72 0.15 147); --moss-strong: oklch(0.96 0.008 160); --on-moss: oklch(0.19 0.03 162); --moss-text: oklch(0.82 0.13 147); --moss-16: oklch(0.72 0.15 147 / 0.14); --moss-22: oklch(0.96 0.008 160 / 0.22); --moss-30: oklch(0.72 0.15 147 / 0.26); --moss-50: oklch(0.72 0.15 147 / 0.5); /* Destructive only. --danger is the fill and --on-danger its ink; --danger-text is the text and --danger-copy the body copy inside a danger panel. */ --danger: oklch(0.55 0.16 25); --danger-text: oklch(0.72 0.13 25); --danger-line: oklch(0.55 0.14 25 / 0.5); --danger-soft: oklch(0.55 0.14 25 / 0.16); --danger-bg: oklch(0.24 0.03 25 / 0.28); --danger-copy: oklch(0.9 0.02 40); --on-danger: oklch(0.98 0.01 40); /* ---- The sRGB mirror ---------------------------------------------------------------------- * The DARK values above, written as literal hex, for the three consumers that cannot read a * stylesheet: the transactional emails, the generated share card, and theme_color. Dark only, * because all three are dark surfaces regardless of the reader's theme -- an email does not know * what the recipient's client prefers, and a share card is an image. * * config.x.brand_colors mirrors exactly this block. Change one, change both; * spec/design/brand_tokens_spec.rb fails if they disagree. */ --hex-bg: #09110d; --hex-surface: #111a15; --hex-field: #17211c; --hex-text: #edf3f0; --hex-text-2: #cfd6d2; --hex-text-3: #a8b0ab; --hex-text-4: #868e8a; --hex-text-5: #494f4b; --hex-accent: #5cbd6a; --hex-accent-text: #88db92; --hex-on-accent: #061810; --hex-danger: #bd413f; --hex-danger-text: #eb827b; /* Type */ --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Rhythm */ --container: 1180px; --measure: 640px; --gutter: clamp(16px, 4vw, 32px); --col-gap: 24px; --section-y: clamp(36px, 7vw, 76px); --sidebar-w: 240px; /* Radii, and each one means a thing rather than a size: cells, then controls, then the cards that hold them, then the panels that hold those. */ --r-cell: 10px; --r-input: 12px; --r-btn: 12px; --r-card: 14px; --r-row: 18px; --r-panel: 20px; --r-pill: 999px; --r-chip: 999px; /* Motion: colour and border, 120-180ms. The two exceptions are the price cell's 120ms transform and the quiet-hours knob's 160ms slide, both of which are the control saying it was hit. */ --motion: 150ms ease; } @media (prefers-color-scheme: light) { :root { color-scheme: light; --bg: oklch(0.965 0.008 150); --bg-82: oklch(0.965 0.008 150 / 0.86); --surface: oklch(0.995 0.003 150); --sunk: oklch(0.945 0.008 150); --deep: oklch(0.925 0.008 150); --field: oklch(1 0 0); --field-hi: oklch(0.92 0.03 150); --plan-idle: oklch(0.985 0.004 150); --plan-on: oklch(0.94 0.035 150); /* --icon-bg is NOT redeclared. The icon renders its own dark field in both themes. */ --text: oklch(0.25 0.02 160); --text-2: oklch(0.36 0.016 160); --text-3: oklch(0.45 0.014 160); /* 0.52, where the comp says 0.53. At 0.53 this lands on --sunk at 4.47:1, just under the floor, and --sunk is the ground the whole signed-in console band sits on. The system wins over the comp when the two disagree about contrast, so it is darkened by one step. */ --text-4: oklch(0.52 0.012 160); --text-5: oklch(0.72 0.01 160); --line1: oklch(0.3 0.02 160 / 0.12); --line2: oklch(0.3 0.02 160 / 0.18); --line3: oklch(0.3 0.02 160 / 0.28); /* Darker than the dark theme's, not lighter. On a near-white ground the same green would fail the contrast floor as text and wash out as a fill. */ --accent: oklch(0.66 0.16 147); --accent-hover: oklch(0.6 0.16 147); --accent-text: oklch(0.47 0.13 147); --accent-ink: oklch(0.34 0.1 147); --on-accent: oklch(0.19 0.04 160); --on-accent-35: oklch(0.19 0.04 160 / 0.35); /* The plane in the nav mark sits STRAIGHT ON THE PAGE, with no field behind it -- only the icon file draws its own dark square. So it has to flip with the theme: left at the dark theme's near-white it was white on a near-white ground, which is to say invisible, and the mark quietly became a green dot with nothing orbiting it. The comp has the same gap; the contrast floor wins over the comp. */ --plane: oklch(0.28 0.06 147); --accent-08: oklch(0.66 0.16 147 / 0.1); --accent-16: oklch(0.66 0.16 147 / 0.16); --accent-18: oklch(0.66 0.16 147 / 0.2); --accent-20: oklch(0.66 0.16 147 / 0.22); --accent-24: oklch(0.66 0.16 147 / 0.26); --accent-35: oklch(0.66 0.16 147 / 0.42); --accent-70: oklch(0.66 0.16 147 / 0.75); --link: oklch(0.5 0.14 147); --link-hover: oklch(0.42 0.13 147); --moss: oklch(0.66 0.16 147); --moss-strong: oklch(0.25 0.02 160); --on-moss: oklch(0.19 0.04 160); --moss-text: oklch(0.47 0.13 147); --moss-16: oklch(0.66 0.16 147 / 0.16); --moss-22: oklch(0.25 0.02 160 / 0.18); --moss-30: oklch(0.66 0.16 147 / 0.26); --moss-50: oklch(0.66 0.16 147 / 0.5); --danger: oklch(0.52 0.19 25); --danger-text: oklch(0.5 0.17 25); --danger-line: oklch(0.52 0.19 25 / 0.4); --danger-soft: oklch(0.52 0.19 25 / 0.1); --danger-bg: oklch(0.62 0.16 25 / 0.1); --danger-copy: oklch(0.36 0.09 30); } }