/* BlockReady design tokens. * * The one place a literal color, size or radius is written down. Everything else — site.css, a page, * a component — refers to these by name. If a value appears twice in this file it is a mistake; if it * appears anywhere else, that is the mistake. * * The world: a neighborhood bulletin board printed rather than pinned. Deep pine carries structure, * emerald carries action and readiness, amber marks what is private or still pending, red means act * now. Surfaces are flat: hairline rules, no elevation. See docs/ui.md for the rules that govern use. */ /* Self-hosted, never a CDN. The map, the roster and the type all have to render with no internet at all, which is the entire point of the product. One variable file, Latin subset, 29 KB, covering every weight the system uses. Libre Franklin is SIL OFL, so blockready-node can ship it too. */ @font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/libre-franklin-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- Surfaces --------------------------------------------------------------------------- Ground is the board; sheets are the paper on it. Both stay light: the scene this app is used in is a phone held outdoors in daylight by somebody who may be rattled, and a dark working surface loses that fight. The dark is spent on structure instead. */ --br-ground: #EDF1EF; --br-sheet: #FFFFFF; --br-sheet-alt: #F6F9F7; --br-line: #DDE5E1; --br-line-strong: #C5D1CA; /* ---- Map surfaces ------------------------------------------------------------------------ The two tones that say where a neighborhood stops. Inside its boundary is paper; outside is a step darker than the board, so the edge of what this neighborhood covers reads as a change of surface rather than as a drawn line around it. Tonal, because tonal layering is the only depth this system has — and because the alternatives were taken: dotted is the tally's leader and dashed is the PENDING stamp's border, and a third meaning for either would make all of them mean less. */ --br-map-paper: #FFFFFF; --br-map-outside: #E3E9E6; /* The roadway. One step darker than the ground outside the neighborhood, so a street reads as a surface rather than a gap between the houses. */ --br-map-road: #D2DCD7; /* ---- Ink -------------------------------------------------------------------------------- */ --br-ink: #13241E; --br-ink-muted: #55665E; --br-ink-faint: #667A70; --br-ink-inverse: #FFFFFF; /* ---- Pine: structure -------------------------------------------------------------------- The masthead, the inverted tally panel, and the offline strip. Not a button color. */ --br-pine: #0F2E22; --br-pine-panel: #123A2C; --br-pine-deep: #0B1F18; --br-pine-line: #2A5545; --br-pine-ink: #BFD8CC; --br-pine-leader: #4C6F60; /* ---- Emerald: action and readiness ------------------------------------------------------ */ /* Kept as a triplet and composed into the hex, rather than written twice: Bootstrap needs the rgb form for its utilities, and two independent spellings of one color is how a palette change leaves half the app behind. */ --br-emerald-rgb: 14, 107, 69; --br-emerald: rgb(var(--br-emerald-rgb)); --br-emerald-hover-rgb: 10, 76, 49; --br-emerald-hover: rgb(var(--br-emerald-hover-rgb)); --br-emerald-tint: #E2EFE8; --br-emerald-ink: #1C5B40; --br-emerald-bright: #5FD3A0; /* on pine only; fails contrast on white */ /* ---- Slate: what a neighbor can do ------------------------------------------------------ */ --br-slate-tint: #E7EEF2; --br-slate-ink: #22536E; /* ---- The mark's two accents: inside the TrainedResponder mark, and nowhere else ----------- The logo's own values, taken from the vector. The mark's structure — ring, runner, head — is currentColor and inherits its field; only these two paths hold a color of their own. The orange is NOT #EA7125, which is the duty orange in TrainedResponder's app design system. The two differ by a few points and the logo governs here, because the logo is the only place either color appears. Amber above means private-or-pending, and a brand orange used loosely near a privacy marker would teach a neighbor that the privacy marker is decoration. So both are quarantined inside a 30px drawing: the mark reads them as --tr-mark-arrow and --tr-mark-cross, and nothing else may spend them. A second use is a bug. See DESIGN.md, "The Accents-Stay-In-The-Mark Rule". */ --br-mark-orange: #F37922; --br-mark-blue: #0D67AB; /* ---- Amber: private, or waiting --------------------------------------------------------- Deliberately NOT the brand color. A privacy marker rendered in the brand's own green would stop reading as a warning and start reading as decoration. */ --br-amber: #9A6410; --br-amber-tint: #FBEBD2; --br-amber-ink: #8A5A00; --br-amber-signal: #F0A202; /* the offline dot on pine, and the neighbor's-eye strip */ /* ---- Red: act now ----------------------------------------------------------------------- */ --br-red-rgb: 163, 32, 20; --br-red: rgb(var(--br-red-rgb)); --br-red-hover: #7A160E; --br-red-tint: #F6DCD8; --br-red-ink: #7A160E; --br-red-line: #D69A90; /* ---- Type ------------------------------------------------------------------------------- Libre Franklin: the Franklin Gothic lineage of American community print — the face of block flyers, park signage and mutual-aid notices. The stack falls back to system faces so a refused or slow font never leaves a neighbor staring at nothing. */ --br-font: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --br-text-display: 2.875rem; /* 46px */ --br-text-h1: 1.75rem; --br-text-h2: 1.1875rem; --br-text-brand: 1.3125rem; /* the wordmark, which is a role rather than a heading level */ --br-text-label: 0.875rem; /* form labels and legends */ --br-text-lg: 1rem; --br-text-base: 1rem; /* 16px. The floor for an audience that includes the oldest people on the block, reading outdoors in daylight. */ --br-text-sm: 0.8125rem; --br-text-xs: 0.75rem; /* Reading measure. Set in ch, but note that ch is the width of "0", which in Libre Franklin is narrower than its average lowercase letter: 68ch measured out at ~94 characters a line, well past the 65–75 a reader can track back from. Tuned against rendered text, not arithmetic. */ --br-measure: 56ch; --br-leading-tight: 1.1; --br-leading-body: 1.55; --br-tracking-display: -0.03em; --br-tracking-label: 0.06em; /* ---- Space ------------------------------------------------------------------------------ */ --br-space-1: 0.25rem; --br-space-2: 0.5rem; --br-space-3: 0.75rem; --br-space-4: 1rem; --br-space-5: 1.375rem; --br-space-6: 2rem; --br-space-7: 2.75rem; /* ---- Shape ------------------------------------------------------------------------------ Flat by decision: hairline borders carry separation, and there is no elevation anywhere in the system. If something needs to look lifted, it is probably a dialog. */ --br-radius-sm: 5px; --br-radius: 10px; --br-radius-lg: 12px; --br-radius-pill: 20px; --br-border: 1px; /* The rail down the inside edge of the menu row you are standing on. Thicker than a hairline because it is a mark rather than a division, and a 1px one reads as a rendering artifact. */ --br-rail: 3px; /* ---- Controls --------------------------------------------------------------------------- 44px is the floor for anything tappable, everywhere, no exceptions: the people most likely to need this app are the least likely to hit a small target. */ --br-touch-min: 44px; --br-control-height: 48px; /* Small still means tappable. 'Sign out' in the masthead and 'Withdraw' in the invitations table are .btn-sm, so a 36px variant would have put the two most-used controls in the app under the floor the line above calls absolute. Small now differs by padding, not by height. */ --br-control-height-sm: var(--br-touch-min); /* ---- Motion ----------------------------------------------------------------------------- */ /* Stacking. Only two things in this app leave the flow: the skip link, which must clear the masthead it sits on, and the menu panel, which must clear the page it hangs over. */ --br-z-skip: 10; --br-z-menu: 20; --br-duration: 120ms; --br-ease: cubic-bezier(0.2, 0, 0, 1); } /* Bootstrap is kept and re-themed rather than replaced: it is MIT (so the Pi node can use the same CSS), it is already local for offline, and 5.3 is built to be driven by variables. Mapping its variables here means a themed .btn, .form-control or .table follows the system without every component needing an override of its own. */ :root { --bs-body-bg: var(--br-ground); --bs-body-color: var(--br-ink); --bs-body-font-family: var(--br-font); --bs-body-font-size: var(--br-text-base); --bs-body-line-height: var(--br-leading-body); --bs-border-color: var(--br-line); --bs-border-radius: var(--br-radius); --bs-border-radius-sm: var(--br-radius-sm); --bs-border-radius-lg: var(--br-radius-lg); --bs-link-color: var(--br-emerald); --bs-link-hover-color: var(--br-emerald-hover); --bs-primary: var(--br-emerald); --bs-danger: var(--br-red); /* Bootstrap 5.3 composes its utility colors from the -rgb triplets, not the hex variables above. Without these, .bg-primary, .border-danger, .link-primary and the focus ring keep painting stock Bootstrap blue and red — inert today only because site.css overrides the few places that are actually used, and a trap for whoever reaches for a utility class next. */ --bs-primary-rgb: var(--br-emerald-rgb); --bs-danger-rgb: var(--br-red-rgb); --bs-link-color-rgb: var(--br-emerald-rgb); --bs-link-hover-color-rgb: var(--br-emerald-hover-rgb); --bs-focus-ring-color: rgba(var(--br-emerald-rgb), 0.4); --bs-emphasis-color: var(--br-ink); --bs-secondary-color: var(--br-ink-muted); }