/* Guitarmaking design tokens — v0.8 (2026-08-25) Source of truth: ../01_Analysis/ and ../02_Style_Guide/GUITARMAKING_STYLE_GUIDE.md Components live in components.css — this file owns tokens, base setting and surfaces. v0.7 Optical ladder applied to every component. Drawing strokes, semantic data palette, print at the book's trim, track switch, marginalia, rosette. v0.6 Minion Pro resolved via Adobe Fonts kit bpt2pps. Optical-size ladder added. Expansion cuts (condensed, black) available — see style guide 3.5. v0.5 Palette decided: two surfaces, cover outside / interior inside. v0.2 Cover palette, CL/SS pair, figure-size scale. */ :root { /* ================================================================ COLOUR — DECIDED 2026-08-25. Hybrid: cover outside, interior inside. Two surfaces. Every component belongs to exactly one. ================================================================ */ /* ---- SURFACE 1: IDENTITY (amber) — home hero, footer, buy pages ---- MONOCHROME BY NECESSITY. Ink is the ONLY text colour that passes on amber. Links here are ink + underline; buttons are ink fills. */ --gm-amber: #E9B667; /* the ground. the brand colour */ --gm-red: #CF5353; /* WORDMARK ONLY. 2.26:1 on amber — logotype exemption, not a pass */ /* ---- SURFACE 2: READING (paper) — chapters, articles, directory ---- */ --gm-paper-warm: #FAF8F5; /* the reading ground */ --gm-paper: #FFFFFF; /* figure grounds — drawings on white */ --gm-ink: #231F20; /* all body text. 15.38:1 AAA */ --gm-red-text: #B24848; /* links + interactive. 5.06:1 AA */ --gm-panel: #E8E6E1; /* callout panels. ink 13.07:1 AAA */ --gm-gray-tool: #786054; /* captions/metadata. 5.50:1, >=16px */ --gm-focus: #8F6937; /* focus ring on paper. 4.67:1 */ --gm-focus-amber: #231F20; /* focus ring on amber — bronze is 2.67:1 here and disappears */ --gm-rule: #231F20; --gm-rule-light: rgba(35, 31, 32, 0.18); /* ---- ACCENT vs LINK — two different jobs, deliberately separated ---- --gm-link is a link. It NEVER changes. A link must look the same on every page or the affordance stops being learnable. --gm-accent is the structural accent: eyebrows, numerals, figure numbers, step numbers, the drop cap. It FOLLOWS THE CHOSEN TRACK. Consequence: choosing an instrument visibly changes the page's colour temperature — classical runs olive, steel-string runs mahogany — while links stay constant. Colour carries meaning, not decoration. */ --gm-link: #B24848; /* = --gm-red-text. Links only. Invariant. */ --gm-accent: #B24848; /* default, no track chosen */ /* ---- CL / SS WAYFINDING — fills only, paper text on top ----------- */ --gm-track-classical: #514F3E; /* olive. paper 7.81:1 AAA */ --gm-track-steelstring: #6C3C18; /* mahogany. paper 8.62:1 AAA */ /* ================================================================ INTERACTION — added v0.9 A manual is static. A website is not. Every value below is DERIVED from a colour already in the palette by shifting lightness at the same hue — no new hues invented, per the restraint budget. All verified against their own ground. ================================================================ */ /* Hover / active. Same hue, darker. */ --gm-amber-hover: #E4A748; /* ink on it 7.70 */ --gm-amber-active: #E19A2D; /* ink on it 6.88 */ --gm-link-hover: #913B3B; /* on paper 6.85 */ --gm-link-active: #7C3232; /* on paper 8.40 */ --gm-ink-hover: #3E3739; /* paper on it 10.94 */ --gm-panel-hover: #DFDCD5; /* ink on it 11.90 */ --gm-track-cl-hover: #403E31; --gm-track-ss-hover: #573013; /* Selected / current — amber washed into paper. Ink stays AAA on all three. */ --gm-tint-1: #F9F3EA; /* 8% amber · 14.78 */ --gm-tint-2: #F8EFE1; /* 14% amber · 14.30 */ --gm-tint-3: #F6E9D6; /* 22% amber · 13.62 */ /* Status — REUSED from the palette, not invented. The supplier directory is the one surface that goes stale, and it must look maintained. */ --gm-status-verified: #514F3E; /* olive · 7.81 — confirmed */ --gm-status-caution: #784818; /* cured wood · 7.23 — needs re-checking */ --gm-status-retired: #786054; /* tool grey · 5.50 — discontinued */ --gm-status-alert: #8A2020; /* 8.58 — the ONE new value: a darkened brand red */ /* Motion. Restraint budget: no motion that is not doing work. State feedback qualifies. Entrances, reveals and parallax do not. */ --gm-t-fast: 90ms; --gm-t-base: 140ms; /* A third step, for a reveal large enough that 140ms reads as a blink rather than a movement. Reveals sit outside the restraint budget above, so this is for the rare case where the distance travelled earns the time. */ --gm-t-slow: 200ms; --gm-ease: cubic-bezier(.2,.6,.35,1); /* Form + control geometry */ --gm-control-h: 2.75rem; /* 44px — touch target at a bench */ --gm-control-pad: 0.85rem; --gm-border: 1px; /* ---- WOOD — imagery, charts and data ONLY. Never interface. ------- */ --gm-wood-rosewood: #24180C; --gm-wood-walnut: #48240C; --gm-wood-mahogany: #6C3C18; --gm-wood-cured: #784818; --gm-wood-spruce: #E4C09C; /* too close to amber for UI use */ --gm-wood-shaving: #E4B484; /* ---- RETIRED — do not reintroduce -------------------------------- #8F6937 bronze -> focus ring on paper only; fails on amber #E7E6B2 sage -> review-copy scaffolding, retires with trade ed. #FF9300/#3BACF7 -> navigator CL/SS; fail contrast, orange vs amber #000000 -> never body text; drawing line work only */ /* ---- Type families — Minion Pro via Adobe Fonts ------------------ Kit: https://use.typekit.net/bpt2pps.css (RESOLVED 2026-08-25) Every family ships 400 + 700, roman and italic. There is NO 600 — see --gm-weight-semibold below. OPTICAL SIZE LADDER. Minion's optical cuts are separate families, not weights. Pick the family by RENDERED SIZE, not by role: Caption <= 13px captions, labels, callouts, small caps Text 14-20px body copy (17px) Subhead 21-34px section heads, step heads, index titles Display >= 35px chapter titles, hero statements Two deliberate exceptions inherited from the book, which chose the Caption cut above its nominal range because the heavier stems and opener spacing read better in small bold italic: - section heads 13px use CAPTION Bold Italic (MinionPro-BoldItCapt) - the 'CHAPTER n' eyebrow uses DISPLAY roman at 23px */ --gm-font-text: "minion-pro", "Minion Pro", "Source Serif 4", Georgia, serif; --gm-font-caption: "minion-pro-caption", "minion-pro", "Source Serif 4", Georgia, serif; --gm-font-subhead: "minion-pro-subhead", "minion-pro", "Source Serif 4", Georgia, serif; --gm-font-display: "minion-pro-display", "minion-pro", "Source Serif 4", Georgia, serif; /* Expansion cuts — NOT used in the book. The site may use them where it has needs print did not; see style guide 3.5 before reaching for them. */ --gm-font-condensed: "minion-pro-condensed", "minion-pro", Georgia, serif; --gm-font-condensed-caption: "minion-pro-condensed-caption", "minion-pro-condensed", Georgia, serif; --gm-font-condensed-subhead: "minion-pro-condensed-subhead", "minion-pro-condensed", Georgia, serif; --gm-font-condensed-display: "minion-pro-condensed-display", "minion-pro-condensed", Georgia, serif; --gm-font-black: "minion-std-black", "minion-pro", Georgia, serif; /* Label face. The book uses Helvetica at 6pt inside drawings ONLY. Never a headline face. */ --gm-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; /* Back-compat alias — components.css refers to --gm-font-serif */ --gm-font-serif: var(--gm-font-text); /* Semibold (600) ADDED TO THE KIT 2026-08-25. Chapter titles now render in MinionPro-SemiboldItDisp — the book's actual cut, no substitution. Caveat: the four new 600 cuts currently serve WITHOUT OpenType features (210 glyphs, no smcp/onum/frac) unlike the 400/700 cuts. Immaterial for titles; it matters only where 600 would carry small caps. Panel labels therefore stay on 700 Caption, which has the full feature set. See style guide 3.4. */ --gm-weight-semibold: 600; --gm-weight-label: 700; /* panel labels — 700 Caption, keeps smcp */ /* ---- Type scale (16px base) ------------------------------------- */ --gm-size-chapter: clamp(2.25rem, 5vw, 3.25rem); /* book 36pt semibold italic display */ --gm-size-title: 1.75rem; /* book 23pt display caps */ --gm-size-section: 1.25rem; /* book 13pt bold italic caption */ --gm-size-step: 1.3125rem; /* 21px - book 13-14pt bold italic; sits in Subhead range */ --gm-size-body: 1.0625rem; /* book 11pt */ --gm-size-secondary: 1rem; /* book 10pt */ --gm-size-caption: 0.9375rem; /* book 9pt italic */ --gm-size-label: 0.8125rem; /* book 8-9pt small caps */ --gm-size-callout: 0.6875rem; /* book 6pt Helvetica, figures only */ --gm-leading-tight: 1.08; /* chapter title */ --gm-leading-head: 1.25; /* section heads */ --gm-leading-body: 1.35; /* opened from the book's 1.273 for screen — deliberate */ --gm-leading-loose: 1.4; /* captions, panel body */ --gm-track-caps: 0.1em; /* letterspaced caps / small-cap fallback */ --gm-track-eyebrow: 0.32em; /* section + panel labels (measured from reference) */ --gm-track-eyebrow-wide: 0.4em; /* masthead / cover-weight labels only */ --gm-size-eyebrow: 0.6875rem;/* 11px letterspaced caps — the label size */ --gm-dropcap-size: 5.6em; /* drop cap, ~4 lines deep */ /* Display red #CF5353 is 3.95:1 — passes as large text but is the WORDMARK colour and must not appear as body-scale type. Link red #B24848 is 5.06:1. Both pass at 95px; the question is semantic, not contrast. See guide 7.3. */ --gm-dropcap-color: var(--gm-accent); /* follows the track — 4.3 */ --gm-dropcap-lh: 0.85; --gm-label-col: 10rem; /* 140px = exactly 10 spacing units */ --gm-track-display: 0.08em; /* display caps */ /* ---- Spacing (unit = the book's 14pt leading) -------------------- */ --gm-u: 0.875rem; /* 14px */ --gm-u-05: calc(var(--gm-u) * 0.5); /* 7px */ --gm-u-2: calc(var(--gm-u) * 2); /* 28px */ --gm-u-3: calc(var(--gm-u) * 3); /* 42px */ --gm-u-4: calc(var(--gm-u) * 4); /* 56px */ --gm-u-6: calc(var(--gm-u) * 6); /* 84px */ --gm-u-8: calc(var(--gm-u) * 8); /* 112px — section separation minimum */ --gm-u-12: calc(var(--gm-u) * 12); /* 168px */ /* ---- Layout ------------------------------------------------------ */ --gm-measure: 68ch; /* book text block = 68.8% of trim */ --gm-page-inset: clamp(1.5rem, 8vw, 6rem); /* book side margin = 15.8% of trim */ --gm-foot-space: var(--gm-u-8); /* book foot margin = 16.7% of trim */ --gm-indent: 1.35em; /* book first-line indent = 1x leading */ --gm-rule-weight: 1px; /* 0.5pt hairline */ --gm-page-ratio: 0.7917; /* 9.5 / 12 */ /* ---- Figure slots (decoded from 357 size calls + 527 placed images) ---- Widths are fractions of the TEXT BLOCK, not the page. 'full' fills the content column; 'bleed' oversets INTO the page inset. 'column' and 'half' differ by 0.17in in print and collapse to one web slot. */ --gm-fig-column: 47%; /* book: column (3.09in) / 1-2 page (3.26in) — 41% of calls */ --gm-fig-wide: 67%; /* book: 2-3 page (4.36in) — 45% of calls, THE WORKHORSE */ --gm-fig-full: 100%; /* book: full width (6.53in) — 7% of calls */ --gm-fig-bleed: calc(100% + 2 * var(--gm-page-inset)); /* book: full page — 4% of calls */ /* Aspect presets. Source corpus: 69% landscape, median 1.311, spikes at 3:2 and 4:3. */ --gm-ar-3-2: 3 / 2; /* primary — 25% of assets */ --gm-ar-4-3: 4 / 3; /* primary — 19% */ --gm-ar-1-1: 1 / 1; /* secondary — 7% */ --gm-ar-3-4: 3 / 4; /* secondary — 7% */ /* 19% of assets are cropped diagrams on non-standard ratios — they use intrinsic sizing (.gm-fig--intrinsic) and must NEVER be forced into a preset. */ /* ================================================================ DRAWING STROKES & DATA — added v0.7 Adapted from the Vilnius chart system. Cumpiano's drawings already distinguish object line, hidden line, dimension and leader — in ink, by hand. This is the digital equivalent, for any artwork the SITE creates: navigators, CL/SS comparisons, spec charts, calculators. ================================================================ */ /* Stroke ladder. Three weights, semantic roles. Never pick by eye. */ --gm-stroke-object: 1; /* object outline — the structural line */ --gm-stroke-section: 0.75; /* section / threshold line */ --gm-stroke-hair: 0.5; /* dimension, grid, leader */ --gm-dash-hidden: 3 3; /* hidden line / threshold */ --gm-dash-division: 2 4; /* division, quadrant */ /* Data palette — SEMANTIC, not brand. Which series matters, not which colour is pretty. Drawn from the brand's own values so charts sit in the same world without importing the identity surface. */ --gm-data-featured: #B24848; /* the series under discussion */ --gm-data-secondary: #2A2622; /* near-black comparison series */ --gm-data-tertiary: #786054; /* mid — context */ --gm-data-muted: #C9C0B4; /* low emphasis / background series */ --gm-data-grid: rgba(35,31,32,.10); --gm-data-axis: rgba(35,31,32,.32); } /* ---- Base setting -------------------------------------------------- */ body { background: var(--gm-paper); color: var(--gm-ink); font-family: var(--gm-font-serif); font-size: var(--gm-size-body); line-height: var(--gm-leading-body); text-align: left; /* ragged right — never justify */ } .gm-measure { max-width: var(--gm-measure); } /* The book's page signature: a hairline rule above and below the block. */ .gm-rule-frame { border-top: var(--gm-rule-weight) solid var(--gm-rule); border-bottom: var(--gm-rule-weight) solid var(--gm-rule); padding-block: var(--gm-u-2) var(--gm-u-6); } /* Paragraph setting. Use EITHER indented OR spaced on a given surface. Never both. */ .gm-prose--indented p + p { text-indent: var(--gm-indent); margin: 0; } .gm-prose--spaced p { margin: 0 0 1em; text-indent: 0; } /* NOTE: type roles (.gm-chapter-title, .gm-section-head, .gm-eyebrow, .gm-caption), the callout panel and the figure component live in components.css. They were duplicated here in v0.5 and were removed in v0.6 to stop the two files fighting over the same selectors. tokens.css owns tokens, base setting and surfaces. */ /* ================================================================ SURFACE CLASSES — decided 2026-08-25 A component belongs to exactly one surface. Never mix them. ================================================================ */ /* ---- Identity surface: the jacket ---- */ .gm-surface-identity{ background: var(--gm-amber); color: var(--gm-ink); /* the ONLY text colour here */ } .gm-surface-identity a{ color: var(--gm-ink); /* links cannot shift colour on amber */ text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } /* Buttons, fields, chips and rows live in components.css (19 - CONTROLS). tokens.css owns tokens, base setting and the two surfaces. */ .gm-surface-identity :focus-visible{ outline: 2px solid var(--gm-focus-amber); outline-offset: 2px; } .gm-surface-identity .gm-wordmark{ color: var(--gm-red); /* logotype exemption — display size only */ } /* ---- Reading surface: the page ---- */ .gm-surface-reading{ background: var(--gm-paper-warm); color: var(--gm-ink); } .gm-surface-reading a{ color: var(--gm-link); /* invariant — never follows the track */ text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } .gm-surface-reading :focus-visible{ outline: 2px solid var(--gm-focus); outline-offset: 2px; } .gm-surface-reading .gm-caption, .gm-surface-reading .gm-meta{ color: var(--gm-gray-tool); font-size: var(--gm-size-caption); /* >=16px — never below */ } /* ---- CL / SS track badges: fills only, paper text ---- */ .gm-track-cl, .gm-track-ss{ color: var(--gm-paper-warm); font-family: var(--gm-font-sans); font-size: var(--gm-size-label); font-weight: 600; letter-spacing: var(--gm-track-caps); padding: 0.2em 0.5em; } .gm-track-cl{ background: var(--gm-track-classical); } .gm-track-ss{ background: var(--gm-track-steelstring); } /* ================================================================ OPENTYPE — Minion Pro carries a full feature set. Verified in the binaries: 128 small-cap glyphs, 35 oldstyle figures, 40 ligatures, and frac/numr/dnom. See ../01_Analysis/font_inventory/. ================================================================ */ /* Running prose: oldstyle, proportional figures — numerals that sit in the line like lowercase, which is correct for a book-like setting. */ .gm-surface-reading p, .gm-surface-reading li, .gm-prose--indented, .gm-prose--spaced{ font-variant-numeric: oldstyle-nums proportional-nums; font-feature-settings: "liga" 1, "dlig" 1; } /* Tables and data: lining + tabular, so digits align in columns. Components set this on their own numerals — see components.css. */ table.gm-data, .gm-tabular{ font-variant-numeric: lining-nums tabular-nums; } /* Measurements. Write "16 1/4" in plain text and the font builds it — arbitrary denominators, no Unicode glyph hunting, and it survives a round trip through a CMS field. */ .gm-frac{ font-feature-settings: "frac" 1; } /* Real small caps. 128 drawn glyphs with adjusted stem weights — not capitals scaled down, which always read spindly. Falls back to letterspaced uppercase where the face lacks smcp. */ .gm-smallcaps{ font-variant-caps: small-caps; letter-spacing: var(--gm-track-caps); text-transform: lowercase; /* let smcp do the work, not transform */ } .gm-smallcaps--caps{ text-transform: none; } /* input already cased */ /* ================================================================ TRACK-SCOPED ACCENT — added v0.8 The single biggest expansion of colour in the system, and the only one that carries meaning. Both values beat the default red on contrast: olive 7.81:1, mahogany 8.62:1, against red's 5.06:1. ================================================================ */ [data-track="cl"]{ --gm-accent: var(--gm-track-classical); } [data-track="ss"]{ --gm-accent: var(--gm-track-steelstring); }