{ "schemaVersion": 2, "generatedAt": "2026-09-19T21:29:36Z", "title": "Design System: lodge", "extensions": { "colorMeta": { "survey-green": { "role": "primary", "displayName": "Survey Green", "canonical": "#24694f", "tonalRamp": [ "oklch(15% 0.081 165)", "oklch(27% 0.081 165)", "oklch(38% 0.081 165)", "oklch(50% 0.081 165)", "oklch(61% 0.081 165)", "oklch(73% 0.081 165)", "oklch(84% 0.081 165)", "oklch(95% 0.081 165)" ] }, "curve-red": { "role": "secondary", "displayName": "Curve Red", "canonical": "#b3341f", "tonalRamp": [ "oklch(15% 0.167 32)", "oklch(27% 0.167 32)", "oklch(38% 0.167 32)", "oklch(50% 0.167 32)", "oklch(61% 0.167 32)", "oklch(73% 0.167 32)", "oklch(84% 0.167 32)", "oklch(95% 0.167 32)" ] }, "ochre": { "role": "tertiary", "displayName": "Ochre", "canonical": "#c9a24a", "tonalRamp": [ "oklch(15% 0.115 85)", "oklch(27% 0.115 85)", "oklch(38% 0.115 85)", "oklch(50% 0.115 85)", "oklch(61% 0.115 85)", "oklch(73% 0.115 85)", "oklch(84% 0.115 85)", "oklch(95% 0.115 85)" ] }, "log-paper": { "role": "neutral", "displayName": "Log Paper", "canonical": "#eef0e6", "tonalRamp": [ "oklch(15% 0.013 116)", "oklch(27% 0.013 116)", "oklch(38% 0.013 116)", "oklch(50% 0.013 116)", "oklch(61% 0.013 116)", "oklch(73% 0.013 116)", "oklch(84% 0.013 116)", "oklch(95% 0.013 116)" ] }, "log-paper-2": { "role": "neutral", "displayName": "Log Paper 2", "canonical": "#e3e7d8", "tonalRamp": [ "oklch(15% 0.020 119)", "oklch(27% 0.020 119)", "oklch(38% 0.020 119)", "oklch(50% 0.020 119)", "oklch(61% 0.020 119)", "oklch(73% 0.020 119)", "oklch(84% 0.020 119)", "oklch(95% 0.020 119)" ] }, "ink": { "role": "neutral", "displayName": "Ink", "canonical": "#15211d", "tonalRamp": [ "oklch(15% 0.019 172)", "oklch(27% 0.019 172)", "oklch(38% 0.019 172)", "oklch(50% 0.019 172)", "oklch(61% 0.019 172)", "oklch(73% 0.019 172)", "oklch(84% 0.019 172)", "oklch(95% 0.019 172)" ] }, "ink-2": { "role": "neutral", "displayName": "Ink 2", "canonical": "#46544d", "tonalRamp": [ "oklch(15% 0.021 164)", "oklch(27% 0.021 164)", "oklch(38% 0.021 164)", "oklch(50% 0.021 164)", "oklch(61% 0.021 164)", "oklch(73% 0.021 164)", "oklch(84% 0.021 164)", "oklch(95% 0.021 164)" ] }, "night-survey-green": { "role": "primary", "displayName": "Survey Green, night print", "canonical": "#74caa6", "tonalRamp": [ "oklch(15% 0.099 165)", "oklch(27% 0.099 165)", "oklch(38% 0.099 165)", "oklch(50% 0.099 165)", "oklch(61% 0.099 165)", "oklch(73% 0.099 165)", "oklch(84% 0.099 165)", "oklch(95% 0.099 165)" ] }, "night-curve-red": { "role": "secondary", "displayName": "Curve Red, night print", "canonical": "#f08a74", "tonalRamp": [ "oklch(15% 0.129 33)", "oklch(27% 0.129 33)", "oklch(38% 0.129 33)", "oklch(50% 0.129 33)", "oklch(61% 0.129 33)", "oklch(73% 0.129 33)", "oklch(84% 0.129 33)", "oklch(95% 0.129 33)" ] }, "night-ochre": { "role": "tertiary", "displayName": "Ochre, night print", "canonical": "#d9b45e", "tonalRamp": [ "oklch(15% 0.113 86)", "oklch(27% 0.113 86)", "oklch(38% 0.113 86)", "oklch(50% 0.113 86)", "oklch(61% 0.113 86)", "oklch(73% 0.113 86)", "oklch(84% 0.113 86)", "oklch(95% 0.113 86)" ] }, "night-ground": { "role": "neutral", "displayName": "Night Ground", "canonical": "#162026", "tonalRamp": [ "oklch(15% 0.018 235)", "oklch(27% 0.018 235)", "oklch(38% 0.018 235)", "oklch(50% 0.018 235)", "oklch(61% 0.018 235)", "oklch(73% 0.018 235)", "oklch(84% 0.018 235)", "oklch(95% 0.018 235)" ] }, "night-ground-2": { "role": "neutral", "displayName": "Night Ground 2", "canonical": "#1d2a31", "tonalRamp": [ "oklch(15% 0.022 232)", "oklch(27% 0.022 232)", "oklch(38% 0.022 232)", "oklch(50% 0.022 232)", "oklch(61% 0.022 232)", "oklch(73% 0.022 232)", "oklch(84% 0.022 232)", "oklch(95% 0.022 232)" ] }, "night-ink": { "role": "neutral", "displayName": "Night Ink", "canonical": "#e6eadc", "tonalRamp": [ "oklch(15% 0.019 120)", "oklch(27% 0.019 120)", "oklch(38% 0.019 120)", "oklch(50% 0.019 120)", "oklch(61% 0.019 120)", "oklch(73% 0.019 120)", "oklch(84% 0.019 120)", "oklch(95% 0.019 120)" ] }, "night-ink-2": { "role": "neutral", "displayName": "Night Ink 2", "canonical": "#a5b2a8", "tonalRamp": [ "oklch(15% 0.020 153)", "oklch(27% 0.020 153)", "oklch(38% 0.020 153)", "oklch(50% 0.020 153)", "oklch(61% 0.020 153)", "oklch(73% 0.020 153)", "oklch(84% 0.020 153)", "oklch(95% 0.020 153)" ] }, "rule": { "role": "neutral", "displayName": "Rule (ink at 20%)" }, "grid": { "role": "neutral", "displayName": "Depth Grid" }, "grid-strong": { "role": "neutral", "displayName": "Depth Grid, 40px line" }, "green-wash": { "role": "neutral", "displayName": "Green Wash" }, "red-wash": { "role": "neutral", "displayName": "Red Wash" }, "night-rule": { "role": "neutral", "displayName": "Rule, night print" }, "night-grid": { "role": "neutral", "displayName": "Depth Grid, night print" }, "night-grid-strong": { "role": "neutral", "displayName": "Depth Grid 40px line, night print" }, "night-green-wash": { "role": "neutral", "displayName": "Green Wash, night print" }, "night-red-wash": { "role": "neutral", "displayName": "Red Wash, night print" } }, "typographyMeta": { "display": { "displayName": "Display", "purpose": "Repository names on the index and the Machines heading; Archivo at 66% width." }, "headline": { "displayName": "Headline", "purpose": "File name above a note; 1.75rem below 56rem." }, "title": { "displayName": "Stamp", "purpose": "Condensed tabular stamp for names, depths and counts, 0.8125rem to 1.75rem." }, "body": { "displayName": "Body", "purpose": "Interface text; meta lines at 0.875rem in ink-2." }, "prose": { "displayName": "Prose", "purpose": "Rendered notes at a 70ch measure." }, "label": { "displayName": "Label", "purpose": "Uppercase field and group names; always names the value or list under it." }, "mono": { "displayName": "Mono", "purpose": "SHAs, keys, paths, commands, code, source and diffs; ligatures off." } }, "shadows": [], "motion": [ { "name": "ease", "value": "cubic-bezier(0.16, 1, 0.3, 1)", "purpose": "The one easing curve, for every transition and the settle reveal." }, { "name": "state", "value": "150ms", "purpose": "Colour, background, underline and opacity changes on hover and selection." }, { "name": "settle", "value": "600ms clip-path inset(0 0 100% 0) to inset(0)", "purpose": "A revision arriving over SSE reveals top-down onto the surface. Nothing else animates." }, { "name": "reduced-motion", "value": "1ms", "purpose": "All transition and animation durations under prefers-reduced-motion." } ], "breakpoints": [ { "name": "bar-compact", "value": "40rem" }, { "name": "machines-stack", "value": "48rem" }, { "name": "rail", "value": "56rem" }, { "name": "sheet-narrow", "value": "72rem" } ], "themes": { "selector": ".dark", "customProperties": { "light": { "--paper": "#eef0e6", "--paper-2": "#e3e7d8", "--ink": "#15211d", "--ink-2": "#46544d", "--rule": "rgb(21 33 29 / 0.2)", "--grid": "rgb(36 105 79 / 0.13)", "--grid-strong": "rgb(36 105 79 / 0.3)", "--green": "#24694f", "--green-wash": "rgb(36 105 79 / 0.12)", "--red": "#b3341f", "--red-wash": "rgb(179 52 31 / 0.11)", "--ochre": "#c9a24a" }, "dark": { "--paper": "#162026", "--paper-2": "#1d2a31", "--ink": "#e6eadc", "--ink-2": "#a5b2a8", "--rule": "rgb(230 234 220 / 0.2)", "--grid": "rgb(111 199 163 / 0.09)", "--grid-strong": "rgb(111 199 163 / 0.24)", "--green": "#74caa6", "--green-wash": "rgb(116 202 166 / 0.14)", "--red": "#f08a74", "--red-wash": "rgb(240 138 116 / 0.14)", "--ochre": "#d9b45e" } } } }, "components": [ { "name": "Text Action", "kind": "button", "refersTo": "action-text", "description": "Default action: green weight-600 text on a 1px rule, wash on hover. No box.", "html": "", "css": ".ds-act { font-family: var(--sans); font-size: 1rem; font-weight: 600; padding: 0.125rem 0; color: var(--green); background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; transition: color 150ms var(--ease), background-color 150ms var(--ease); } .ds-act:hover { background: var(--green-wash); } .ds-act:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }" }, { "name": "Text Action, Danger", "kind": "button", "refersTo": "action-text-danger", "description": "Destructive or declining text action in curve red.", "html": "", "css": ".ds-act { font-family: var(--sans); font-size: 1rem; font-weight: 600; padding: 0.125rem 0; color: var(--green); background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; transition: color 150ms var(--ease), background-color 150ms var(--ease); } .ds-act:hover { background: var(--green-wash); } .ds-act:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .ds-act-danger { color: var(--red); } .ds-act-danger:hover { background: var(--red-wash); }" }, { "name": "Solid Action", "kind": "button", "refersTo": "action-solid", "description": "The single primary act of a page: paper text on ink, green on hover.", "html": "", "css": ".ds-solid { font-family: var(--sans); font-size: 1rem; font-weight: 600; padding: 0.625rem 1rem; color: var(--paper); background: var(--ink); border: 0; border-radius: 0; cursor: pointer; transition: background-color 150ms var(--ease); } .ds-solid:hover { background: var(--green); } .ds-solid:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }" }, { "name": "Solid Action, Danger", "kind": "button", "refersTo": "action-solid-danger", "description": "Irreversible deletion, enabled only after the name is typed.", "html": "", "css": ".ds-solid-danger { font-family: var(--sans); font-size: 1rem; font-weight: 600; padding: 0.625rem 1rem; color: var(--paper); background: var(--red); border: 0; border-radius: 0; cursor: pointer; } .ds-solid-danger:disabled { opacity: 0.5; cursor: default; } .ds-solid-danger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }" }, { "name": "Field", "kind": "input", "refersTo": "field", "description": "Underlined input: 2px ink rule that turns curve red on focus.", "html": "", "css": ".ds-label { display: block; font-family: var(--sans); font-size: 0.75rem; font-weight: 500; font-stretch: 80%; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; } .ds-field { width: 100%; padding: 0.5rem 0; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink); caret-color: var(--red); background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; } .ds-field::placeholder { color: var(--ink-2); } .ds-field:focus-visible { outline: none; border-bottom-color: var(--red); }" }, { "name": "Top Bar", "kind": "nav", "refersTo": "top-bar", "description": "3rem bar: condensed wordmark, section links with a red underline on the current one, plain tools on the right.", "html": "
lodge
", "css": ".ds-bar { display: flex; gap: 1.5rem; align-items: center; height: 3rem; padding: 0 1rem; font-family: var(--sans); color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--rule); } .ds-wordmark { font-size: 1.25rem; font-weight: 800; font-stretch: 68%; letter-spacing: 0.01em; color: inherit; text-decoration: none; } .ds-nav { display: flex; gap: 1.25rem; } .ds-nav a { color: inherit; text-decoration: underline 1px transparent; text-underline-offset: 0.22em; transition: color 150ms var(--ease), text-decoration-color 150ms var(--ease); } .ds-nav a:hover { color: var(--green); text-decoration-color: currentColor; } .ds-nav a[aria-current=page] { text-decoration-thickness: 2px; text-decoration-color: var(--red); } .ds-tools { display: flex; gap: 1.25rem; margin-left: auto; } .ds-plain { padding: 0.25rem 0; font: inherit; color: var(--ink-2); background: none; border: 0; cursor: pointer; transition: color 150ms var(--ease); } .ds-plain:hover { color: var(--ink); } .ds-bar :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }" }, { "name": "Title Block", "kind": "custom", "description": "Ruled dl above the column: uppercase field labels over stamped values.", "html": "
Repository
beavergram
Depth
52 / 64
Root
3f3f3f3f3f3f
", "css": ".ds-titleblock { display: grid; grid-template-columns: 1fr 1fr; width: 17.5rem; margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .ds-titleblock div { padding: 0.5rem 0.75rem; border-top: 1px solid var(--rule); } .ds-titleblock div + div + div { border-left: 1px solid var(--rule); } .ds-titleblock .ds-tb-wide { grid-column: 1 / -1; border-top: 0; } .ds-titleblock dt { font-size: 0.75rem; font-weight: 500; font-stretch: 80%; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; } .ds-titleblock dd { margin: 0; } .ds-tb-name, .ds-tb-stamp { font-weight: 600; font-stretch: 68%; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .ds-tb-name { font-size: 1.75rem; line-height: 1.1; } .ds-tb-mono { font-family: var(--mono); font-size: 0.8125rem; }" }, { "name": "Strip Log Beds", "kind": "custom", "description": "Beds on the depth grid: stamped depth, machine hatch, touch mark, formation label; the selected bed carries the red cursor and beds above it lose their hatch.", "html": "
", "css": ".ds-lith { --l: var(--ink); position: relative; background-color: var(--paper); } .ds-lith::after { position: absolute; inset: 0; content: ''; background: var(--l); } .ds-lith-0::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='0.9' fill='black' stroke='none'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='0.9' fill='black' stroke='none'/%3E%3C/svg%3E\") repeat; } .ds-lith-1::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M-1 9 9 -1M-1 1 1 -1M7 9 9 7'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M-1 9 9 -1M-1 1 1 -1M7 9 9 7'/%3E%3C/svg%3E\") repeat; } .ds-lith-2::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 2.5h7M6 7.5h6M0 7.5h1'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 2.5h7M6 7.5h6M0 7.5h1'/%3E%3C/svg%3E\") repeat; } .ds-lith-3::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 .5h12M0 4.5h12M.5 0v4M6.5 4v4'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 .5h12M0 4.5h12M.5 0v4M6.5 4v4'/%3E%3C/svg%3E\") repeat; } .ds-lith-4::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M4 2v4M2 4h4'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M4 2v4M2 4h4'/%3E%3C/svg%3E\") repeat; } .ds-lith-5::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 3q3 -3 6 0t6 0'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 3q3 -3 6 0t6 0'/%3E%3C/svg%3E\") repeat; } .ds-lith-6::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 5l4 -4l4 4'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 5l4 -4l4 4'/%3E%3C/svg%3E\") repeat; } .ds-lith-web { background-color: var(--ochre); } .ds-lith-web::after, .ds-lith-gone::after { display: none; } .ds-lith-gone { outline: 1px dashed var(--rule); outline-offset: -1px; } .ds-column { display: flex; flex-direction: column; width: 17.5rem; padding: 1.5rem 0 1rem; font-family: var(--sans); background-color: var(--paper-2); background-image: linear-gradient(var(--grid-strong) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 100% 40px, 100% 8px, 8px 100%; border-right: 1px solid var(--ink); } .ds-bed { position: relative; display: grid; flex: none; grid-template-columns: 2.75rem 4.5rem 0.5rem 1fr; align-items: stretch; padding: 0; font: inherit; color: var(--ink); text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); cursor: pointer; } .ds-depth { padding-right: 0.5rem; font-size: 0.8125rem; font-weight: 600; font-stretch: 68%; font-variant-numeric: tabular-nums; line-height: 1.25rem; color: var(--ink-2); text-align: right; } .ds-fill { border-inline: 1px solid var(--ink); } .ds-bed:hover .ds-fill { --l: var(--green); } .ds-bed-above .ds-fill::after { display: none; } .ds-mark { background: var(--green); } .ds-formation { display: flex; gap: 0.375rem; padding-left: 0.375rem; font-size: 0.75rem; line-height: 1.25rem; color: var(--ink-2); white-space: nowrap; } .ds-formation b { font-weight: 600; font-stretch: 80%; color: var(--ink); } .ds-formation code { font-family: var(--mono); font-size: 0.8125em; } .ds-bed[aria-selected=true]::before { position: absolute; inset: -1px 0 auto; z-index: 1; height: 3px; content: ''; background: var(--red); } .ds-bed[aria-selected=true]::after { position: absolute; top: -1.375rem; right: 0; z-index: 3; width: 0.625rem; height: 2.75rem; content: ''; background: var(--red); } .ds-bed[aria-selected=true] .ds-depth { color: var(--red); } .ds-bed:focus-visible { z-index: 2; outline: 2px solid var(--red); outline-offset: -2px; }" }, { "name": "Lithology Legend", "kind": "custom", "description": "The seven machine hatches as CSS masks over ink, plus solid ochre for the web and the dashed outline for a machine that is gone.", "html": "
", "css": ".ds-lith { --l: var(--ink); position: relative; background-color: var(--paper); } .ds-lith::after { position: absolute; inset: 0; content: ''; background: var(--l); } .ds-lith-0::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='0.9' fill='black' stroke='none'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cx='3' cy='3' r='0.9' fill='black' stroke='none'/%3E%3C/svg%3E\") repeat; } .ds-lith-1::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M-1 9 9 -1M-1 1 1 -1M7 9 9 7'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M-1 9 9 -1M-1 1 1 -1M7 9 9 7'/%3E%3C/svg%3E\") repeat; } .ds-lith-2::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 2.5h7M6 7.5h6M0 7.5h1'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 2.5h7M6 7.5h6M0 7.5h1'/%3E%3C/svg%3E\") repeat; } .ds-lith-3::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 .5h12M0 4.5h12M.5 0v4M6.5 4v4'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 .5h12M0 4.5h12M.5 0v4M6.5 4v4'/%3E%3C/svg%3E\") repeat; } .ds-lith-4::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M4 2v4M2 4h4'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M4 2v4M2 4h4'/%3E%3C/svg%3E\") repeat; } .ds-lith-5::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 3q3 -3 6 0t6 0'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 3q3 -3 6 0t6 0'/%3E%3C/svg%3E\") repeat; } .ds-lith-6::after { -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 5l4 -4l4 4'/%3E%3C/svg%3E\") repeat; mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 5l4 -4l4 4'/%3E%3C/svg%3E\") repeat; } .ds-lith-web { background-color: var(--ochre); } .ds-lith-web::after, .ds-lith-gone::after { display: none; } .ds-lith-gone { outline: 1px dashed var(--rule); outline-offset: -1px; } .ds-legend { display: grid; grid-template-columns: repeat(9, 4rem); gap: 0.75rem; padding: 1rem; background: var(--paper); } .ds-swatch { height: 3rem; border: 1px solid var(--ink); } .ds-swatch:hover { --l: var(--green); }" }, { "name": "File Row", "kind": "custom", "refersTo": "file-row", "description": "File list row with its change track; hover is a green wash, the open file inverts to paper on ink.", "html": "", "css": ".ds-rows { width: 17rem; padding: 0; margin: 0; list-style: none; font-family: var(--sans); color: var(--ink); background: var(--paper); border-top: 1px solid var(--ink); } .ds-rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.75rem; align-items: baseline; padding: 0.5rem 0.375rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); transition: background-color 150ms var(--ease); } .ds-rows a:hover { background: var(--green-wash); } .ds-rows a[aria-current=true] { color: var(--paper); background: var(--ink); } .ds-rows a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .ds-file { grid-column: 1 / -1; font-weight: 600; } .ds-dir { font-weight: 400; opacity: 0.65; } .ds-track { position: relative; grid-row: 2; grid-column: 1 / -1; height: 0.4375rem; border-bottom: 1px solid currentColor; opacity: 0.85; } .ds-track i { position: absolute; bottom: 0; width: 2px; height: 100%; background: currentColor; } .ds-track .ds-tick-above { opacity: 0.3; } .ds-when { font-size: 0.8125rem; opacity: 0.7; }" }, { "name": "Diff Lines", "kind": "custom", "description": "Changes view: mono lines with green and red washes, signed gutters, and a dashed gap for collapsed context.", "html": "
  1. ## Done
  2. step 3 pending
  3. step 3 verified on both machines
  4. 14 unchanged lines
  5. ## Next
", "css": ".ds-diff { padding: 0; margin: 0; list-style: none; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; white-space: pre; color: var(--ink); background: var(--paper); } .ds-diff li { position: relative; padding: 0 0.75rem 0 1.75rem; } .ds-same { color: var(--ink-2); } .ds-added { background: var(--green-wash); } .ds-removed { background: var(--red-wash); } .ds-added::before, .ds-removed::before { position: absolute; left: 0.5rem; font-weight: 700; } .ds-added::before { color: var(--green); content: '+'; } .ds-removed::before { color: var(--red); content: '\\2212'; } .ds-removed del { text-decoration-color: var(--red); } .ds-diff .ds-gap { padding-block: 0.25rem; margin: 0.5rem 0; font-family: var(--sans); color: var(--ink-2); border-block: 1px dashed var(--rule); }" } ], "narrative": { "northStar": "The Borehole Strip Log", "overview": "**Creative North Star: \"The Borehole Strip Log\"**\n\nHistory is a drilled column. Every revision is a bed at its depth, newest at the surface, and the note on screen is the core pulled from the selected depth. The interface is a sheet of survey log paper: a fine green depth grid under the column, ink rules, condensed stamped numerals, and one hatch per machine, the way a geologist's log gives every rock type its own fill. The machines page is the legend of that log.\n\nThe sheet carries no chrome. There are no cards, no boxed buttons, no shadows and no rounded corners. Hierarchy comes from scale contrast (a 4rem condensed repository name against 0.75rem labels), from full-strength ink rules against faint ones, and from fills: ink for the current row, washes for hover, hatches for who wrote what. It refuses the forge layout of a file table with a commits tab, and the metric-card dashboard.\n\nThe dark theme is the same sheet as a night print: the same grid, rules and hatches in pale ink on a near-black blue ground. Nothing is restyled between themes; only the token values change, which is why hatches are masks over the ink colour instead of drawn images.", "keyCharacteristics": [ "One column of beds is the navigation: drag it, step it with arrow keys or j/k, and every depth, file and view is a deep link.", "Type, fills and rules only. Zero radius, zero shadow, zero boxed controls.", "Three working colours with fixed meanings: green selects and links, red is the depth cursor and destruction, ochre is the web's own hand.", "Archivo's width axis does the stamping: the narrower the setting, the more the text is data.", "Reading first: the note sits at a 70ch measure and management lives in the margins." ], "rules": [ { "name": "The Three Pens Rule", "body": "Green, red and ochre each have one job. Green means select or go, red means you are here or this destroys, ochre means the web did it. A new state borrows one of those meanings or uses ink; it does not get a fourth colour.", "section": "colors" }, { "name": "The Text Contrast Rule", "body": "Green and red are used as text on paper, so they are held at 4.5:1 or better against `log-paper`. This is why the shipped light values are darker than the direction contract's #2f7d62 and #c5402f: those failed as text on #eef0e6. Ochre does not pass as text on paper and is used only as a fill or a rule.", "section": "colors" }, { "name": "The Night Print Rule", "body": "The dark ground is `night-ground` (#162026), not the contract's slate #33444c. The owner saw the slate ground during the build and asked for the darker one back; treat this as a decided value. A `--slate` custom property is still declared in the stylesheet but nothing uses it.", "section": "colors" }, { "name": "The Width Is Meaning Rule", "body": "Condensed width marks data the system stamped: names, depths, counts, kinds. Sentences a person reads stay at normal width. Do not condense body copy to save space, and do not set a stamp at normal width.", "section": "typography" }, { "name": "The Label Names A Field Rule", "body": "An uppercase label always names the value or list directly under it, as in a drawing's title block. It is never a decorative line above a headline.", "section": "typography" }, { "name": "The One Sheet Rule", "body": "Everything is printed on the same sheet. If something needs to stand out, give it an ink rule, a fill or a bigger size, not a shadow or a raised surface.", "section": "elevation" } ], "dos": [ "Do take every colour from the custom properties so the night print follows for free; add a value to both `:root` and `.dark` or not at all.", "Do draw any new pattern as an SVG tile used as a CSS mask over `--l`, so it inherits ink and can be recoloured by state.", "Do keep green and red at 4.5:1 or better on `log-paper` when they carry text, and keep ochre to fills and rules.", "Do use Archivo's width axis for stamped data (66 to 80%) and normal width for sentences; set numerals tabular.", "Do make every new view state a URL parameter, the way depth, file and view already are.", "Do keep motion to 150ms state changes on the shared ease, with the clip-reveal `settle` reserved for a revision arriving live.", "Do name component classes so they cannot collide with Tailwind utilities. Tailwind is imported globally, so a scoped class called `fixed` picked up `position: fixed` during this build. Avoid bare utility words (`fixed`, `static`, `hidden`, `block`, `flex`, `grid`, `container`, `truncate`, `underline`, `transition`) as class names." ], "donts": [ "Don't add cards, boxed or pill buttons, radii or shadows. Separation is an ink rule, a `rule` line or a fill.", "Don't build a file table with a commits tab or a metric-card dashboard; history stays a column you drag.", "Don't give a state a fourth accent colour, and don't set ochre as text.", "Don't lighten the night ground toward slate; #162026 is the owner's decision.", "Don't float confirmations in modals or popovers; they open in place.", "Don't put an uppercase label above a headline as decoration. A label names the field or the list under it.", "Don't embed hatches as coloured images or fixed-colour backgrounds; they would not follow the theme." ] } }