mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-16 08:06:24 +03:00
Paul BakausandClaude Opus 4.8
1fe9c41759
The Pinstripe display face was single-weight, so every `font-weight` on it was inert — the documented h1/h2 weight split never actually rendered. Switch --ks-font-display (and --ks-font-wordmark) to plain Alumni Sans, which honors weight, and set the display scale intentionally: - Display / h1 -> weight 100 (thin hairline hero) - Headline / h2 -> weight 300 via --ks-type-headline-weight (light anchor) - Wordmark 400, body 400, title 500 unchanged Centralize h2 weight: the eight section-title sites that hardcoded 600 now read var(--ks-type-headline-weight), so h2 weight is a single lever. Google Fonts now loads Alumni Sans wght@100;300;...;700 and no longer pulls the Pinstripe family. DESIGN.md, design.json, and the token/CSS comments are updated to match (family, weights, Two-Face and Weight-Inversion rules). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
206 lines
9.2 KiB
CSS
206 lines
9.2 KiB
CSS
/*
|
|
* impeccable.style — Neo kinpaku tokens (page-global, single source of truth)
|
|
*
|
|
* Every brand-bearing color, surface, text color, hairline rule, type-scale
|
|
* value, and motion easing used on the site lives here. New pages should read
|
|
* these tokens via var(--ks-*) rather than hand-typing oklch values.
|
|
*
|
|
* Pages may override individual tokens locally when there's a documented
|
|
* reason (e.g. .home-kinpaku bumps --ks-rule alpha for sharper UI borders
|
|
* against bento tiles). When in doubt, do not override — match.
|
|
*
|
|
* Imported by design-system.css, home-kinpaku.css, and designing-kinpaku.css.
|
|
* If a new page-level stylesheet needs these tokens, @import this file at the
|
|
* top so the values are available at :root.
|
|
*/
|
|
|
|
:root {
|
|
/* color-scheme follows html.light / html.dark class on <html> */
|
|
/* ============================================================
|
|
Brand anchors. Two anchors carry the brand — kinpaku gold for
|
|
commitment and brand voice, verdigris patina for state and
|
|
contrast. Everything else is supporting role.
|
|
============================================================ */
|
|
|
|
/* Kinpaku gold. The rich, warm, vibrant primary. */
|
|
--ks-kinpaku: oklch(84% 0.19 80.46); /* primary accent, wordmark, icon */
|
|
--ks-kinpaku-pale: oklch(86% 0.07 84); /* hover lift, pale fills */
|
|
--ks-kinpaku-rich: oklch(77% 0.13 82); /* active CTA, severity-medium */
|
|
--ks-kinpaku-deep: oklch(61% 0.085 78); /* borders against the brand */
|
|
|
|
/* Verdigris patina. The secondary accent — state, signal, selection. */
|
|
--ks-patina: oklch(70% 0.12 188); /* secondary accent */
|
|
--ks-patina-pale: oklch(82% 0.07 188); /* hover lift on patina */
|
|
--ks-patina-deep: oklch(49% 0.08 188); /* deep oxide, dark variants */
|
|
|
|
/* Warning — vermilion. Used sparingly, only for failures and warnings. */
|
|
--ks-vermilion: oklch(58% 0.15 35);
|
|
|
|
/* ============================================================
|
|
Surfaces. Warm-black lacquer carries everything.
|
|
============================================================ */
|
|
--ks-lacquer: oklch(7% 0.006 95); /* page ground */
|
|
--ks-lacquer-deep: oklch(4% 0.004 95); /* deepest inset */
|
|
--ks-lacquer-raised: oklch(11% 0.006 95); /* raised panels, inputs */
|
|
--ks-graphite: oklch(15% 0.008 95); /* inactive surfaces */
|
|
--ks-graphite-2: oklch(19% 0.008 95); /* one step up from graphite */
|
|
|
|
/* ============================================================
|
|
Text. The whole text ramp runs near-neutral and bright so copy,
|
|
headings, and labels read crisp on lacquer instead of mushing
|
|
into the warm floor. Warmth now lives only in the gold accents
|
|
and the surfaces, not in the type. (--ks-champagne keeps its name
|
|
for compatibility but is no longer warm.)
|
|
============================================================ */
|
|
--ks-champagne: oklch(91% 0 0); /* headlines, <strong> — neutral white */
|
|
--ks-text: oklch(88% 0 0); /* body — neutral near-white */
|
|
--ks-text-muted: oklch(72% 0 0); /* captions, meta */
|
|
--ks-text-faint: oklch(62% 0 0); /* subdued */
|
|
--ks-text-mute-deep: oklch(52% 0 0); /* disabled */
|
|
|
|
/* ============================================================
|
|
Rules. The hairline is neutral so borders/dividers/labels don't
|
|
carry warmth (warmth lives in the gold accents and surfaces). For a
|
|
gold accent border, use --ks-kinpaku directly, not a readability variant.
|
|
============================================================ */
|
|
--ks-rule: oklch(78% 0 0 / 0.16);
|
|
|
|
/* ============================================================
|
|
Code. One treatment site-wide. Inline code is a neutral graphite
|
|
chip; blocks / CLI commands are a deep lacquer terminal with a
|
|
neutral hairline. Gold is only for code that is itself a command
|
|
link (--ks-code-cmd). All code rules read these — don't hand-type.
|
|
============================================================ */
|
|
--ks-code-fg: oklch(91% 0 0); /* inline code text */
|
|
--ks-code-bg: var(--ks-graphite-2); /* inline code chip */
|
|
--ks-code-radius: 3px;
|
|
--ks-code-pad: 0.3em 0.5em; /* inline code chip padding */
|
|
--ks-code-block-fg: oklch(86% 0 0); /* block / CLI text */
|
|
--ks-code-block-bg: var(--ks-lacquer-deep);
|
|
--ks-code-block-border: var(--ks-rule);
|
|
--ks-code-block-radius: 2px;
|
|
--ks-code-cmd: var(--ks-kinpaku); /* code that's a command link */
|
|
|
|
/* ============================================================
|
|
Typography — two faces.
|
|
- --ks-font-display: Alumni Sans. A weightable humanist grotesque;
|
|
the hero h1 runs at a thin hairline (100) for elegance, section
|
|
h2s at a heavier cut (300) to anchor each block.
|
|
- --ks-font-wordmark: Alumni Sans, same face as display, held at
|
|
weight 400 for the brand lockup.
|
|
- --ks-font: Albert Sans. Quiet geometric humanist, used for body
|
|
and UI text. Pairs cleanly with the Alumni Sans display without
|
|
competing.
|
|
All loaded via Base.astro's Google Fonts link.
|
|
============================================================ */
|
|
--ks-font-display: "Alumni Sans", "Albert Sans", Arial, sans-serif;
|
|
--ks-font-wordmark: "Alumni Sans", "Albert Sans", Arial, sans-serif;
|
|
--ks-font: "Albert Sans", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif;
|
|
--ks-mono: "SFMono-Regular", "Roboto Mono", "JetBrains Mono", Consolas, monospace;
|
|
|
|
/* ============================================================
|
|
Type scale. These are the actual sizes the homepage ships with —
|
|
new pages should read them via var(...) rather than hand-typing.
|
|
The display vs headline weight split is deliberate: the hero h1
|
|
reads thin (100) for elegance; section h2s read heavier (300) to
|
|
anchor each block. Section h2s look heavier than the h1 on purpose.
|
|
============================================================ */
|
|
|
|
/* Display — hero h1. */
|
|
--ks-type-display-size: clamp(3.4rem, 6.5vw, 5.6rem);
|
|
--ks-type-display-weight: 100;
|
|
--ks-type-display-line: 1.02;
|
|
--ks-type-display-track: -0.01em;
|
|
|
|
/* Headline — section h2. Heavier than display. */
|
|
--ks-type-headline-size: clamp(2.6rem, 4vw, 3.4rem);
|
|
--ks-type-headline-weight: 300;
|
|
--ks-type-headline-line: 1.04;
|
|
|
|
/* Title — card and panel headings (h3). */
|
|
--ks-type-title-size: 1.18rem;
|
|
--ks-type-title-weight: 500;
|
|
--ks-type-title-line: 1.35;
|
|
|
|
/* Body. */
|
|
--ks-type-body-size: 1.02rem;
|
|
--ks-type-body-line: 1.8;
|
|
|
|
/* Eyebrow — small mono labels above titles. */
|
|
--ks-type-eyebrow-size: 0.7rem;
|
|
--ks-type-eyebrow-track: 0.18em;
|
|
|
|
/* Wordmark — IMPECCABLE in the header. */
|
|
--ks-type-wordmark-size: 1.15rem;
|
|
--ks-type-wordmark-track: 0.42em;
|
|
|
|
/* Mono — code, terminal, audit lines. */
|
|
--ks-type-mono-size: 0.72rem;
|
|
--ks-type-mono-track: 0.22em;
|
|
|
|
/* ============================================================
|
|
Motion.
|
|
============================================================ */
|
|
--ks-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ============================================================
|
|
Light mode — pale surfaces, dark ink type, and kinpaku kept as the
|
|
real brand gold. Activated via html.light on
|
|
<html> (set by theme.js + inline FOUC guard in Base.astro).
|
|
============================================================ */
|
|
html.light {
|
|
color-scheme: light;
|
|
|
|
/* Brand gold — same fills as dark mode (logo, buttons, marks).
|
|
For decorative small text on paper, use patina. Use --ks-link-on-paper
|
|
for body-sized links that need stronger contrast. */
|
|
--ks-kinpaku: oklch(84% 0.19 80.46);
|
|
--ks-kinpaku-pale: oklch(86% 0.07 84);
|
|
--ks-kinpaku-rich: oklch(77% 0.13 82);
|
|
--ks-kinpaku-deep: oklch(61% 0.085 78);
|
|
--ks-kinpaku-ink: var(--ks-patina);
|
|
|
|
/* Text links + active nav on paper — patina, not fill gold. */
|
|
--ks-link-on-paper: var(--ks-patina-deep);
|
|
--ks-link-on-paper-hover: var(--ks-patina);
|
|
--ks-link-on-paper-line: oklch(49% 0.08 188 / 0.42);
|
|
--ks-nav-active: var(--ks-patina-deep);
|
|
|
|
/* Patina — brand values for fills; deep for text on paper. */
|
|
--ks-patina: oklch(70% 0.12 188);
|
|
--ks-patina-pale: oklch(82% 0.07 188);
|
|
--ks-patina-deep: oklch(49% 0.08 188);
|
|
|
|
--ks-vermilion: oklch(52% 0.16 35);
|
|
|
|
/* Surfaces — warm paper and cream panels. */
|
|
--ks-lacquer: oklch(97% 0.012 95);
|
|
--ks-lacquer-deep: oklch(94% 0.014 95);
|
|
--ks-lacquer-raised: oklch(99% 0.008 95);
|
|
--ks-graphite: oklch(91% 0.012 95);
|
|
--ks-graphite-2: oklch(88% 0.014 95);
|
|
|
|
/* Text — dark ink on paper. */
|
|
--ks-champagne: oklch(18% 0.02 95);
|
|
--ks-text: oklch(25% 0.018 95);
|
|
--ks-text-muted: oklch(45% 0.015 95);
|
|
--ks-text-faint: oklch(55% 0.012 95);
|
|
--ks-text-mute-deep: oklch(65% 0.01 95);
|
|
|
|
/* Rules — dark hairlines. */
|
|
--ks-rule: oklch(25% 0.02 95 / 0.12);
|
|
|
|
/* Code — light chips, dark text. */
|
|
--ks-code-fg: oklch(28% 0.02 95);
|
|
--ks-code-bg: var(--ks-graphite);
|
|
--ks-code-block-fg: oklch(30% 0.02 95);
|
|
--ks-code-block-bg: var(--ks-lacquer-raised);
|
|
--ks-code-block-border: var(--ks-rule);
|
|
--ks-code-cmd: var(--ks-link-on-paper);
|
|
}
|