/* ========================================================================== JCubed Lab: design tokens Palette: Indigo accent on Stone neutrals, lifted from the Cafetero voxel mark. Marigold and Cherry are its other two faces: a highlight and an emphasis, never body text. Bark is kept deliberately as the bridge to Woodworking Designs, whose Material primary is --bark-500, and the --wood-* ramp below is that app's own Walnut ground. Light-first, dark mode derived. (Was "Fern" before the Cafetero rebrand; the green ramp is gone.) Single source of truth: change a value here, the whole site follows. ========================================================================== */ :root { /* ---- Indigo ramp: the brand accent, lifted from the mark's Dutch blue -- */ --indigo-50: #EEF2FB; --indigo-100: #DCE4F6; --indigo-200: #B9C8EC; --indigo-300: #8CA6DC; --indigo-400: #5C7CC4; --indigo-500: #3A5FA8; --indigo-600: #21468B; /* the mark's left face, base accent */ --indigo-700: #1A3870; --indigo-800: #142B57; --indigo-900: #0E1D3B; /* ---- Marigold: the mark's top face. A highlight, never a text colour --- */ --marigold-100: #FEF3C8; --marigold-300: #FDE271; --marigold-500: #FCD116; --marigold-700: #A17F06; --marigold-900: #5E4A00; /* ---- Cherry: the mark's right face. Emphasis, sparingly ---------------- */ --cherry-300: #E8918C; --cherry-500: #C8232F; --cherry-700: #8E1620; /* ---- Bark ramp, kept. The bridge to the Woodworking Designs app, whose Material primary is #7A4E2D, is still deliberate. ------------------ */ --bark-100: #F3E6DA; --bark-300: #C9A183; --bark-500: #7A4E2D; --bark-700: #543A20; --bark-900: #2C1600; /* ---- Stone ramp: neutrals, faintly blue so they sit with Indigo ------- */ --stone-0: #FFFFFF; --stone-50: #F6F8FC; --stone-100: #EEF1F7; --stone-200: #DDE3EE; --stone-300: #C4CDDE; --stone-400: #9AA5BC; --stone-500: #7A879F; --stone-600: #5D6B84; --stone-700: #45536B; --stone-800: #2C384B; --stone-900: #16202F; /* ---- Semantic colour: use THESE in components, never the ramps ------- */ --color-bg: var(--stone-50); --color-surface: var(--stone-0); --color-surface-sunken: var(--stone-100); --color-text: var(--stone-900); --color-text-muted: var(--stone-700); /* 7.1:1 on --color-bg */ --color-text-faint: var(--stone-500); --color-border: var(--stone-200); --color-border-strong: var(--stone-300); --color-accent: var(--indigo-600); /* lines, marks, non-text accents */ --color-accent-strong: var(--indigo-600); /* filled surfaces under white text, 8.6:1 */ --color-accent-ink: var(--indigo-700); /* accent text on --color-accent-quiet, 9.9:1 */ --color-accent-hover: var(--indigo-700); --color-accent-quiet: var(--indigo-50); --color-on-accent: #FFFFFF; --color-secondary: var(--cherry-700); /* emphasis, sparingly */ --color-highlight: var(--marigold-500);/* underlines and rules, never text */ /* ---- Mark: the Cafetero voxel. Same cube vertices as before, but each face is a 3x3 grid with a J cut into it: J, three times, is JCubed. Flag stock (Colombian yellow over Dutch blue and red) with each J cut as a shade of the face it sits in, which is what keeps the cube solid. No tile: the mark sits straight on the page and the cell gaps show it. */ --mark-top: #FCD116; /* Colombian yellow */ --mark-top-j: #8A6A00; --mark-left: #21468B; /* Dutch blue */ --mark-left-j: #8AA3DA; --mark-right: #AE1C28; /* Dutch red */ --mark-right-j: #F4B7B2; /* ---- Wood: the app's own ground, for the Woodworking section only. Lifted from the app's Theme.kt Walnut light scheme. This shifts the GROUND, never the accent, so the page keeps one action colour. ---- */ --wood-bg: #F0E3D3; /* Walnut background */ --wood-surface: #FFFAF5; /* Walnut surface */ --wood-sunken: #EBD9C6; /* Walnut surfaceVariant */ --wood-ink: #241C15; /* Walnut onBackground */ --wood-muted: #52443A; /* Walnut onSurfaceVariant */ --wood-line: #D7C2B4; /* Walnut outlineVariant */ --wood-primary: #7A4E2D; /* Walnut primary, the studio's --bark-500 */ /* ---- Bracket: Bracketworks's own ground, for /bracketworks only. The studio accent is already Indigo, so this ramp leans cyan on purpose: Bracketworks has to read as a different place, not a tint of the same one. Same rule as --wood-* above, the GROUND shifts and the semantic tokens are aliased over it once, so dark mode comes free. Audited: worst pair is 4.60:1 (primary on sunken, light) and 7.22:1 (primary on surface, dark). AA throughout, AAA for body text. ----- */ --bracket-bg: #E9F3F8; /* the page ground */ --bracket-surface: #FFFFFF; --bracket-sunken: #D7E9F2; --bracket-ink: #0B2230; --bracket-muted: #40606F; --bracket-line: #BBD8E5; --bracket-primary: #0A6E92; /* the one accent */ --bracket-deep: #063E54; /* hover and pressed */ /* ---- Nonobonanza: the game's own ground, for /nonobonanza only. Lifted hex for hex from the app's NonobonanzaColors.kt, which is the one file in that repo allowed to name a colour. Direction "Ink & Paper": warm paper, one ink, hairline rules, and a sienna that is the only colour on the screen. One value is not the app's. Its --nono-muted is #8A7D68 on the phone, which comes out at 3.4:1 on this ground: fine for a label read at arm's length on a bright OLED, under the 4.5:1 this site holds body text to. Darkened to 6.2:1 here rather than shipped as it is. Every other pair below is the app's own and clears AA: ink 15.6:1, sienna 5.8:1, and on dark stock 15.0:1 and 6.6:1. The board colours are here because the page draws a real board out of real pack art, and it has to be the same board the phone draws. ---- */ --nono-bg: #F4EFE4; /* chrome.ground */ --nono-surface: #FBF8F1; /* chrome.surface */ --nono-ink: #1C1814; /* chrome.text, and board.cellFilled */ --nono-muted: #5F5648; /* chrome.textMuted, darkened for reading on a desk */ --nono-line: #DCD1BC; /* board.gridHairline */ --nono-guide: #A99B80; /* board.gridGuide */ --nono-cross: #B4A68C; /* board.cellCross */ --nono-clue: #2E2822; /* board.clue */ --nono-primary: #8C4B2A; /* chrome.accent, the one colour */ --nono-on: #FBF8F1; /* chrome.onAccent */ /* ---- Type ------------------------------------------------------------- */ --font-display: "Baloo 2", ui-rounded, ui-sans-serif, system-ui, -apple-system, sans-serif; --font-text: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-display: 2.875rem; --leading-display: 1.08; --tracking-display: -0.02em; --text-h1: 2rem; --leading-h1: 1.15; --tracking-h1: -0.015em; --text-h2: 1.375rem; --leading-h2: 1.25; --tracking-h2: -0.01em; --text-h3: 1.1875rem;--leading-h3: 1.3; --tracking-h3: -0.005em; --text-lg: 1.125rem; --leading-lg: 1.6; --text-body: 0.9375rem;--leading-body: 1.6; --text-sm: 0.8125rem;--leading-sm: 1.55; --text-label: 0.75rem; --leading-label: 1.4; --tracking-label: 0.1em; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-display: 700; /* ---- Space: 4px base ------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* ---- Shape ------------------------------------------------------------ */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Shape rule: buttons are pill, cards are md, media is lg, small chrome is sm. */ --border-width: 1px; /* ---- Elevation: tinted, never neutral grey --------------------------- */ --shadow-sm: 0 1px 2px rgba(14, 29, 59, 0.06); --shadow-md: 0 4px 12px rgba(14, 29, 59, 0.09); /* ---- Motion ----------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --duration: 150ms; /* ---- Layout ----------------------------------------------------------- */ --measure: 34rem; --page: 72rem; --header-h: 68px; } /* Dark is opt-in only, driven by data-theme on , never by the OS. Light is the default for everyone, including users whose system is dark. */ :root[data-theme="dark"] { --color-bg: #0E1420; --color-surface: #161F30; --color-surface-sunken: #0A1019; --color-text: #E6EBF5; --color-text-muted: #A7B3CA; --color-text-faint: #7A879F; --color-border: #26314A; --color-border-strong: #35425F; --color-accent: var(--indigo-300); --color-accent-strong: var(--indigo-400); --color-accent-ink: var(--indigo-200); --color-accent-hover: var(--indigo-200); --color-accent-quiet: #1B2740; --color-on-accent: #0A1019; --color-secondary: var(--cherry-300); --color-highlight: var(--marigold-300); --wood-bg: #1A120C; --wood-surface: #221812; --wood-sunken: #2C1F16; --wood-ink: #ECE0D9; --wood-muted: #D6C3B6; --wood-line: #52443A; --wood-primary: #E9B98D; --bracket-bg: #08161E; --bracket-surface: #0E2029; --bracket-sunken: #061219; --bracket-ink: #DCEBF2; --bracket-muted: #9DBAC8; --bracket-line: #1E3844; --bracket-primary: #56B6D8; --bracket-deep: #8ACFE9; /* The app's dark pair, and it is not the light one inverted: it is the same idea printed on dark stock. The sienna is brightened because the light one goes muddy on a dark ground, which is the app's own note next to the same hex. --nono-ink and --nono-cross swap jobs here for the reason the app gives: a filled cell has to become light, or the mark cannot be read at all against the paper it is printed on. */ --nono-bg: #171512; --nono-surface: #201D19; --nono-ink: #EDE6D8; --nono-muted: #948873; --nono-line: #2E2A24; --nono-guide: #4A443A; --nono-cross: #6E6353; --nono-clue: #E4DCCB; --nono-primary: #D08A5F; --nono-on: #171512; --mark-top: #F5CB1F; --mark-top-j: #7C5F00; --mark-left: #274F97; --mark-left-j: #93AADD; --mark-right: #B92330; --mark-right-j: #F6BEB8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); } /* ---- The child apps' marks -------------------------------------------------- Each app's mark is the same cube as the studio's, with its own letters cut into it and its own colours: W W D in Walnut for Woodworking Designs, B in pool blue for Bracketworks. They are classes rather than :root variables because the studio's own J sits on the same pages and reads these same six names, so a mark carries its palette with it. Both are generated. `python3 tools/cubemark.py --palette --list` names them, and the numbers below are that palette's faces, ground then letter. The animated cube in public/mark.js and the flat SVG under it both read these, so neither can drift from the other. One palette each, no dark variant: these are the apps' own colours and they sit on either ground, which is what the flat marks have always done. */ .mark-walnut{ --mark-top: #DDB88A; --mark-top-j: #543A20; --mark-left: #543A20; --mark-left-j: #C9A183; --mark-right: #7A4E2D; --mark-right-j: #F3E6DA; } .mark-bracketworks{ --mark-top: #8FD0E8; --mark-top-j: #0A4B63; --mark-left: #063E54; --mark-left-j: #6FBCD8; --mark-right: #0A6E92; --mark-right-j: #CFEBF6; } /* Nonobonanza is the one mark in the family that does take a dark variant, and the reason is in cubemark.py rather than here: `sienna` and `sienna-night` are two palettes whose tile colours are this site's two grounds, #F4EFE4 and #171512, so which one belongs on which page is already decided. The paper palette's top face is #FDF3EC, a hair off the light ground; on dark stock the cube would lose its lid, which is what the night palette's warmer top fixes. Walnut and Bracketworks sit on either ground unchanged and still do. */ .mark-nonobonanza{ --mark-top: #FDF3EC; --mark-top-j: #8C4B2A; --mark-left: #6B3720; --mark-left-j: #D9A98C; --mark-right: #A8623C; --mark-right-j: #FBF1E9; } :root[data-theme="dark"] .mark-nonobonanza{ --mark-top: #E9C6AC; --mark-top-j: #6B3720; --mark-left: #7A3E20; --mark-left-j: #E9C6AC; --mark-right: #B06B41; --mark-right-j: #FFF3EA; }