/* =========================================================================== Municorn design system · 1 · tokens --------------------------------------------------------------------------- The only file in the repo allowed to contain a colour, face or shadow literal. Every other file references these names. A hex outside this file is a defect. Media queries cannot read custom properties, so the breakpoints are stated here and written verbatim downstream: 560 facts list goes two-column 700 masonry breakpoint — brick tile changes size 860 nav collapses to the menu button 1000 wins grid goes three-column A fifth breakpoint means deleting one. =========================================================================== */ :root{ /* -- channel triplets: every alpha in the system derives from one source -- */ --ink-c:21 18 16; --brick-c:139 58 46; /* Slate. The one cool hue in a warm system, and it earns its place by naming a distinction nothing else can carry: a figure that was FILED WITH SOMEBODY ELSE and has been public for years, against one the utility handed us this week. Brick already means "ours / now / attend to this" everywhere on this site, so the other half of that pair could not be another warm tone without reading as a second kind of urgency. 5.17:1 on --paper as --filed, so it may carry type at the small mono sizes this system sets eyebrows in. The first value tried, 96 116 138, was 4.54:1 — nominally AA and with no headroom at all, which is how --faint came to be darkened once already. Used only for the public record: never for a verdict, never for a quantity, never on the map ramp. */ --filed-c:88 107 128; --insufficient-c:107 91 138; --lime-c:237 230 217; --brass-lt-c:216 178 120; --shadow-c:25 12 8; /* -- slabs ------------------------------------------------------------- */ --paper:#FAF8F4; --ink:rgb(var(--ink-c)); --ink-2:#1E1A17; /* footer / closing slab only */ /* -- type on light ----------------------------------------------------- */ --ink-soft:#5C5751; /* secondary copy */ /* Fine print. Was #8E877F, which is 2.9:1 on --paper and fails WCAG AA at every size it was used at — and it was used for citations, field notes and document sublines, which are the lines a reader most needs to be able to check. 5.4:1 now. Darkening the token fixes every use at once rather than leaving the next one to be caught by eye. */ --faint:#6B655E; --rule:#DAD4C8; /* hairline on light */ /* The second hairline: a rule that has to be SEEN rather than merely felt. --rule at 1.3:1 on --paper is right for a table's inner grid, where the alignment does the work and the line only has to stop the eye. It is wrong for a line that is itself the datum — one peer filing in the percentile strip — where a reader has to be able to count them. 2.0:1, which is a rule you can see and still not a rule that shouts. The scrollbar thumb it used to carry has moved to --thumb below, which has a floor to meet. */ --rule-2:#C0B8A8; /* The scrollbar thumb, and only that. --rule-2 used to carry it at 1.86:1 on --paper, which is below the 3:1 WCAG 1.4.11 asks of a user interface component — and a scrollbar is the one control on the page whose position is the only thing telling a reader how much document is left. 3.34:1, which is a thumb you can find without it competing with the hairlines. It is its own token rather than a darker --rule-2 because that value is also the datum line in the percentile strip, where 2.0:1 is the deliberate design. */ --thumb:#8E877F; /* -- type on dark ------------------------------------------------------ */ --lime-hi:#F3ECDD; /* headings inside a dark slab */ --lime:rgb(var(--lime-c));/* type on dark */ --lime-2:#E5DCCC; /* body copy inside a dark slab */ --lime-3:#D5C9B6; /* copy inside glass, over brick */ --lime-soft:#C0B4A0; /* nav links and muted controls on dark */ --lime-mute:#A79C8C; /* secondary copy on dark */ --lime-faint:#8E8375; /* metadata on dark: ticker, footer bar */ /* -- the wall ---------------------------------------------------------- */ --brick:#8B3A2E; /* single accent inside a light heading (em) */ --mortar:#C9BCA9; /* joints, and the flat wall behind the courses */ --bed:#241B17; /* dark bed the courses are laid onto */ /* Sibling brick tones vary individual bricks inside the tile. Never in UI. A data URI cannot read custom properties, so these five values are repeated inside --brickimg and --soldier below. That duplication is the one place in the system where a literal appears twice; if a brick tone changes, change it in both. */ --brick-lt:#934236; --brick-lt2:#974C3B; --brick-dk:#803329; --brick-dk2:#843729; /* -- verdicts ----------------------------------------------------------- On an index page the state of a check is the primary information and has to be legible at a glance without reading a word. Two of the four are aliases, named for the meaning rather than the colour. */ --closed:#3F6B4A; --failed:var(--brick); --insufficient:#6B5B8A; --inapplicable:var(--faint); /* -- the water balance ledger ------------------------------------------- Segments derive from tokens that already have a role — billed reads as closed, apparent as brass, real as brick, the residual as ink. Only the unbilled-authorized sage has no other job. */ --seg-unbilled:#7C8B6B; /* -- the map ramp -------------------------------------------------------- One hue, five steps, light to dark: a sequential quantity gets a sequential ramp, and the brick the rest of the site already uses for a failed check is the dark end. Not a diverging scale and not a categorical one — there is no meaningful midpoint in a loss percentage, and two adjacent bands are two adjacent fifths rather than two different kinds of thing. Lightness falls monotonically (95, 85, 73, 58, 42 in L*), so the ramp survives being printed in grey and being read by somebody who cannot separate the hues. --map-none is deliberately off-ramp: a system that filed no figure is not a low one, and colouring it at the light end would say it was. */ --map-1:#EFE7DA; --map-2:#E0C3AE; --map-3:#CE9A80; --map-4:#B26A54; --map-5:var(--brick); --map-none:#CFC8BB; --map-line:#FAF8F4; /* hairline between neighbouring service areas */ --card:#FFFFFF; /* raised surface on --paper: ledger, inputs, chips */ --filed:rgb(var(--filed-c)); /* the public record: eyebrows and rules only */ /* -- brass ------------------------------------------------------------- */ --brass:#8A6A34; /* eyebrows, dt labels, underlines on light */ --brass-lt:#D8B278; /* the one bright accent. sparingly */ --brass-hi:#EBCB98; /* button hover only */ --on-brass:#1B1712; /* type on a brass fill */ /* -- joinery: window openings only ------------------------------------- */ --joinery:#F2EEE4; /* casing face */ --joinery-lt:#FBF8F1; /* sash face */ --joinery-edge:#B9AF9B; --joinery-edge-2:#C6BCA8; --sill-hi:#EDE7DA; --sill-lo:#D5CCBA; --sill-edge:#B0A692; --apron:#E4DCCC; --pane-1:#C9CFCB; /* glass, lit edge */ --pane-2:#9FA7A3; --pane-3:#8C948F; /* glass, shaded edge */ /* -- derived surfaces: use these rather than rolling your own rgba ------ */ --glass:rgb(var(--ink-c)/.78); /* the only way text sits on brick */ --glass-blur:blur(7px); --glass-nav:rgb(var(--ink-c)/.9); --glass-nav-blur:blur(9px); --hairline:rgb(var(--lime-c)/.13); /* hairline on dark */ --hairline-lt:rgb(var(--lime-c)/.18); /* border of a glass panel */ --wash:rgb(var(--lime-c)/.035); /* row and menu hover, on dark */ --wash-brick:rgb(var(--brick-c)/.03); /* table row hover, on light */ --wash-filed:rgb(var(--filed-c)/.07); /* a public filing, as a surface */ --tint-failed:rgb(var(--brick-c)/.05); --tint-insufficient:rgb(var(--insufficient-c)/.05); /* the rake draws on a canvas, which cannot read a custom property, so js/rake.js reads these two triplets off :root at startup */ --rake-line-c:233 222 201; --rake-mark-c:200 140 80; /* three shadow depths, no fourth. never black. */ --lift-1:0 3px 8px rgb(var(--shadow-c)/.4); --lift-2:0 10px 26px rgb(var(--shadow-c)/.4); --lift-3:0 14px 30px rgb(var(--shadow-c)/.45); /* -- faces ------------------------------------------------------------- */ --serif:'Crimson Pro',Georgia,serif; /* headings, row titles, nameplates */ --sans:'Public Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace; /* metadata only */ /* -- layout ------------------------------------------------------------ */ --max:78rem; --gut:clamp(1.15rem,4.5vw,4rem); --section:clamp(3rem,6.5vw,5rem); /* slab rhythm */ --head-gap:clamp(2rem,4vw,3rem); /* section header to content */ /* -- motion ------------------------------------------------------------ */ /* Every authored offset is multiplied by --motion, so calm mode zeroes the movement and keeps the sequencing for free. See motion.css. */ --motion:1; --ease-reveal:cubic-bezier(.22,1,.36,1); /* a part arriving */ --ease-set:cubic-bezier(.16,1,.3,1); /* a part snapping into position */ /* -- masonry tiles ----------------------------------------------------- */ --bricksize:128px 64px; --brickimg:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='64'%3E%3Crect%20width='128'%20height='64'%20fill='%23C9BCA9'/%3E%3Crect%20x='2'%20y='2'%20width='60'%20height='28'%20fill='%238B3A2E'/%3E%3Crect%20x='66'%20y='2'%20width='60'%20height='28'%20fill='%23934236'/%3E%3Crect%20x='-30'%20y='34'%20width='60'%20height='28'%20fill='%23803329'/%3E%3Crect%20x='34'%20y='34'%20width='60'%20height='28'%20fill='%238B3A2E'/%3E%3Crect%20x='98'%20y='34'%20width='60'%20height='28'%20fill='%23974C3B'/%3E%3C/svg%3E"); --soldier:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='34'%3E%3Crect%20width='72'%20height='34'%20fill='%23C9BCA9'/%3E%3Crect%20x='2'%20y='2'%20width='14'%20height='30'%20fill='%23803329'/%3E%3Crect%20x='20'%20y='2'%20width='14'%20height='30'%20fill='%238B3A2E'/%3E%3Crect%20x='38'%20y='2'%20width='14'%20height='30'%20fill='%23934236'/%3E%3Crect%20x='56'%20y='2'%20width='14'%20height='30'%20fill='%23843729'/%3E%3C/svg%3E"); } @media(max-width:700px){ :root{--bricksize:106px 53px} }