/* * azoresflights design system * --------------------------- * A single-hue system. Atlantic blue at hue 235 is the only accent; neutrals sit at hue 240 so the * greys read as the same family rather than as a separate warm grey; red at hue 25 is reserved for * destructive actions and appears nowhere decorative. * * ONE THEME, LIGHT. The palette below is the shipped one and it does not follow the reader's system * setting. The dark palette still exists, parked at the bottom of this file under * `:root[data-theme="dark"]`, which nothing in the app ever sets. It is kept rather than deleted so * dark can come back as one attribute on , and every contrast claim in * spec/design/brand_tokens_spec.rb still runs against it so it cannot rot while it is off. * * 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. * * So the palette is oklch and the three consumers get the --hex-* block below, which is these same * 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: light; /* 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.965 0.008 240); --bg-82: oklch(0.965 0.008 240 / 0.86); /* the sticky header, behind a blur */ --surface: oklch(0.995 0.003 240); --sunk: oklch(0.945 0.008 240); --deep: oklch(0.925 0.008 240); --field: oklch(1 0 0); /* inputs, selects, the route cards */ --field-hi: oklch(0.92 0.03 240); /* the active month chip, the active tab */ --plan-idle: oklch(0.985 0.004 240); --plan-on: oklch(0.94 0.035 240); --icon-bg: oklch(0.92 0.03 235); /* pinned: public/icon.svg draws its own field */ /* Text, darkest 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.25 0.02 240); --text-2: oklch(0.36 0.016 240); --text-3: oklch(0.45 0.014 240); --text-4: oklch(0.52 0.012 240); --text-5: oklch(0.72 0.01 240); /* Hairlines, weakest first. Everything that draws a line on the page uses one of these. --edge is the OPAQUE one: an alpha hairline is fine over a known ground but useless to the email and the share card, which compose their own surfaces in Ruby and cannot resolve it. */ --line1: oklch(0.3 0.02 240 / 0.12); --line2: oklch(0.3 0.02 240 / 0.18); --line3: oklch(0.3 0.02 240 / 0.28); --edge: oklch(0.9 0.012 240); /* The one accent. --accent is a FILL and carries --on-accent as its ink; --accent-text is the darker cousin used when the blue is the text rather than the ground. Do not swap them: the fill colour used as text on --bg does not clear the contrast floor, and the text colour used as a fill is too dark to put dark ink on. */ --accent: oklch(0.66 0.16 235); --accent-hover: oklch(0.6 0.16 235); --accent-text: oklch(0.47 0.13 235); --accent-ink: oklch(0.34 0.1 235); /* ink on the mid-tier (--accent-20) price cell */ --on-accent: oklch(0.19 0.04 240); --on-accent-35: oklch(0.19 0.04 240 / 0.35); --plane: oklch(0.28 0.06 235); /* the airplane glyph, and only that */ --accent-08: oklch(0.66 0.16 235 / 0.1); --accent-16: oklch(0.66 0.16 235 / 0.16); --accent-18: oklch(0.66 0.16 235 / 0.2); --accent-20: oklch(0.66 0.16 235 / 0.22); --accent-24: oklch(0.66 0.16 235 / 0.26); --accent-35: oklch(0.66 0.16 235 / 0.42); --accent-70: oklch(0.66 0.16 235 / 0.75); --link: oklch(0.5 0.14 235); --link-hover: oklch(0.42 0.13 235); /* The selection family. --pick is the accent again; --pick-strong is deliberately NEUTRAL, near black on light and near white on dark, because the selected day in the price grid sits on top of a blue cell and a blue ring on a blue fill reads as nothing at all. */ --pick: oklch(0.66 0.16 235); --pick-strong: oklch(0.25 0.02 240); --on-pick: oklch(0.19 0.04 240); --pick-text: oklch(0.47 0.13 235); --pick-16: oklch(0.66 0.16 235 / 0.16); --pick-22: oklch(0.25 0.02 240 / 0.18); --pick-30: oklch(0.66 0.16 235 / 0.26); --pick-50: oklch(0.66 0.16 235 / 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.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); --on-danger: oklch(0.98 0.01 40); /* pinned: near-white ink on the red in either theme */ /* ---- The sRGB mirror ---------------------------------------------------------------------- * The 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. There is one * set because there is one theme -- an email does not know what the recipient's client prefers, * and a share card is an image, so both simply take the palette the site ships. * * config.x.brand_colors mirrors exactly this block. Change one, change both; * spec/design/brand_tokens_spec.rb converts each oklch value above and fails if they disagree. */ --hex-bg: #eff4f8; --hex-surface: #fcfeff; --hex-field: #ffffff; --hex-edge: #d7dfe5; --hex-text: #19232a; --hex-text-2: #363e45; --hex-text-3: #4f565c; --hex-text-4: #636a6f; --hex-text-5: #9fa6aa; --hex-accent: #009fe5; --hex-accent-text: #006398; --hex-on-accent: #021624; --hex-danger: #be222a; --hex-danger-text: #b02a2d; /* 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; } /* ---------------------------------------------------------- Dark, parked --- */ /* * OFF. Nothing sets data-theme on , so none of this applies; the site is light everywhere, * whatever the reader's system prefers. It is kept because deleting a considered palette to turn a * feature off is how you end up re-deriving it later, and re-enabling it is one attribute. * * It is NOT dead weight in the specs: brand_tokens_spec runs every contrast floor against this * palette too, and fails if a colour declared above has no counterpart here. --icon-bg and * --on-danger are the two deliberate exceptions, pinned once above. */ :root[data-theme="dark"] { color-scheme: dark; --bg: oklch(0.17 0.015 240); --bg-82: oklch(0.17 0.015 240 / 0.82); --surface: oklch(0.205 0.016 240); --sunk: oklch(0.155 0.016 240); --deep: oklch(0.145 0.018 240); --field: oklch(0.235 0.016 240); --field-hi: oklch(0.28 0.03 240); --plan-idle: oklch(0.19 0.014 240); --plan-on: oklch(0.24 0.03 240); --text: oklch(0.96 0.008 240); --text-2: oklch(0.87 0.01 240); --text-3: oklch(0.75 0.012 240); --text-4: oklch(0.64 0.012 240); --text-5: oklch(0.42 0.01 240); --line1: oklch(1 0 0 / 0.08); --line2: oklch(1 0 0 / 0.11); --line3: oklch(1 0 0 / 0.16); --edge: oklch(0.28 0.02 240); --accent: oklch(0.72 0.15 235); --accent-hover: oklch(0.79 0.14 235); --accent-text: oklch(0.82 0.13 235); --accent-ink: oklch(0.94 0.02 235); --on-accent: oklch(0.19 0.03 240); --on-accent-35: oklch(0.17 0.03 240 / 0.35); --plane: oklch(0.95 0.02 235); --accent-08: oklch(0.72 0.15 235 / 0.08); --accent-16: oklch(0.72 0.15 235 / 0.16); --accent-18: oklch(0.72 0.15 235 / 0.18); --accent-20: oklch(0.72 0.15 235 / 0.2); --accent-24: oklch(0.72 0.15 235 / 0.24); --accent-35: oklch(0.72 0.15 235 / 0.35); --accent-70: oklch(0.72 0.15 235 / 0.7); --link: oklch(0.78 0.13 235); --link-hover: oklch(0.88 0.09 235); --pick: oklch(0.72 0.15 235); --pick-strong: oklch(0.96 0.008 240); --on-pick: oklch(0.19 0.03 240); --pick-text: oklch(0.82 0.13 235); --pick-16: oklch(0.72 0.15 235 / 0.14); --pick-22: oklch(0.96 0.008 240 / 0.22); --pick-30: oklch(0.72 0.15 235 / 0.26); --pick-50: oklch(0.72 0.15 235 / 0.5); --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); }