diff options
Diffstat (limited to '_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens')
5 files changed, 357 insertions, 0 deletions
diff --git a/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/base.css b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/base.css new file mode 100644 index 0000000..6b8272a --- /dev/null +++ b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/base.css @@ -0,0 +1,113 @@ +/* ============================================================ + Pantograph — base element styling + ------------------------------------------------------------ + A light, opinionated reset that binds the tokens to real + elements. Optional for consumers, but every specimen card, + component card, and UI kit in this system assumes it. + ============================================================ */ + +*, *::before, *::after { box-sizing: border-box; } + +html { -webkit-text-size-adjust: 100%; } + +body { + margin: 0; + background-color: var(--surface-page); + color: var(--text-body); + font: var(--role-body); + letter-spacing: var(--tracking-normal); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + +/* Headings default to the engraved display voice */ +h1, h2, h3, h4, h5, h6 { + margin: 0 0 var(--space-3); + color: var(--text-strong); + font-family: var(--font-sans); + font-weight: var(--weight-semibold); + line-height: var(--leading-snug); + letter-spacing: var(--tracking-tight); + text-wrap: balance; +} +h1 { font: var(--role-h1); letter-spacing: var(--tracking-tight); } +h2 { font: var(--role-h2); } +h3 { font: var(--role-h3); } + +p { margin: 0 0 var(--space-4); text-wrap: pretty; } + +a { + color: var(--link); + text-decoration: none; + text-underline-offset: 0.18em; + text-decoration-thickness: 1px; + transition: color var(--dur-fast) var(--ease-out); +} +a:hover { color: var(--link-hover); text-decoration: underline; } + +strong, b { font-weight: var(--weight-semibold); color: var(--text-strong); } + +code, kbd, samp, pre { + font-family: var(--font-mono); + font-size: 0.92em; +} + +code { + background: var(--surface-code); + border: var(--border-thin) solid var(--border-hairline); + border-radius: var(--radius-xs); + padding: 0.08em 0.36em; + color: var(--ink-1); +} + +pre { + font-size: var(--text-sm); + line-height: var(--leading-mono); + margin: 0; +} +pre code { background: none; border: none; padding: 0; } + +hr { + border: 0; + height: 1px; + background: var(--border-hairline); + margin: var(--space-6) 0; +} + +/* The engraved-tick rule: THE standard section separator. + Short ticks with every 5th at double height (see + --tick-gradient in tokens/spacing.css). Height = the tall + tick; short ticks center on the same axis. */ +.panto-tick-rule { + border: 0; + height: var(--tick-h-major); + background: var(--tick-gradient); + opacity: 0.85; + margin: var(--space-6) 0; +} + +::selection { background: var(--green-soft); color: var(--ink-0); } + +:focus-visible { + outline: var(--border-thick) solid var(--focus-ring); + outline-offset: 2px; +} + +/* Long-form documentation prose — the primary face, set larger + and looser for comfortable reading */ +.panto-prose { + font: var(--role-prose); + color: var(--text-body); + max-width: var(--container-prose); +} +.panto-prose p { margin-bottom: var(--space-5); } + +/* Engraved eyebrow / kicker label */ +.panto-eyebrow { + font-family: var(--font-display); + font-weight: var(--weight-semibold); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--text-faint); +} diff --git a/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/colors.css b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/colors.css new file mode 100644 index 0000000..7fef466 --- /dev/null +++ b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/colors.css @@ -0,0 +1,87 @@ +/* ============================================================ + Pantograph — Color tokens + ------------------------------------------------------------ + Inspired by a 1970s Post Versalog slide rule: an eggshell + bamboo body printed in black, red, and green. There is NO + pure white and NO pure black anywhere in the system. + + Base ramp = warm "paper" (eggshell) surfaces and "ink" + (deep blue-black) marks. Two engraved accents: instrument + red and instrument green. Use accents like a draftsman — + sparingly, for emphasis and meaning, never as fields. + ============================================================ */ + +:root { + /* --- Paper (near-white surfaces, faint warm tint, lightest → deepest) --- */ + --paper-0: #FCFAF5; /* raised cards, popovers, code surfaces */ + --paper-1: #F8F4EB; /* default page background */ + --paper-2: #EFE9DC; /* sunken / secondary fields, table stripes */ + --paper-3: #DFD7C6; /* hairline rules, dividers, engraved ticks */ + --paper-4: #C7BCA4; /* strong borders, disabled fills */ + + /* --- Ink (deep blue-black marks, darkest → lightest) --- */ + --ink-0: #161B27; /* near-black blue ink: max-contrast headings */ + --ink-1: #1E2533; /* primary body text, the default mark color */ + --ink-2: #3B4456; /* secondary text, captions */ + --ink-3: #6E6B5C; /* muted / warm-gray metadata */ + --ink-4: #8C8470; /* faint hints, placeholder text */ + + /* --- Instrument Red (cursor line, warnings, the C/D scale) --- */ + --red-deep: #8F2B22; + --red: #B23A2E; /* the canonical slide-rule red */ + --red-soft: #E7C3BB; /* tinted backgrounds */ + --red-wash: #EBD9D0; /* faintest red wash on paper */ + + /* --- Instrument Green (folded scales, success, positive) --- */ + --green-deep: #245138; + --green: #2F6B4A; /* the canonical slide-rule green */ + --green-soft: #BCD2BF; /* tinted backgrounds */ + --green-wash: #D6DECB; /* faintest green wash on paper */ + + /* --- Brass (the cursor / hardware accent, used very rarely) --- */ + --brass: #9A7B3F; + + /* ============================================================ + Semantic aliases — reference THESE in components, not the + raw ramp above. + ============================================================ */ + + /* Surfaces */ + --surface-page: var(--paper-1); + --surface-card: var(--paper-0); + --surface-sunken: var(--paper-2); + --surface-code: #F4EEE1; /* code blocks: a hair warmer than card */ + --surface-inverse: var(--ink-1); + + /* Text */ + --text-strong: var(--ink-0); + --text-body: var(--ink-1); + --text-muted: var(--ink-2); + --text-faint: var(--ink-3); + --text-placeholder: var(--ink-4); + --text-on-ink: var(--paper-0); + --text-on-accent: var(--paper-0); + + /* Lines */ + --border-hairline: var(--paper-3); + --border-default: var(--paper-4); + --border-strong: var(--ink-3); + --rule-tick: var(--paper-4); + + /* Accents */ + --accent: var(--red); /* primary brand accent */ + --accent-deep: var(--red-deep); + --link: var(--red-deep); + --link-hover: var(--red); + + /* Status */ + --status-danger: var(--red); + --status-danger-bg: var(--red-wash); + --status-success: var(--green); + --status-success-bg:var(--green-wash); + --status-info: var(--ink-2); + --status-info-bg: var(--paper-2); + + /* Focus ring */ + --focus-ring: var(--green); +} diff --git a/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/fonts.css b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/fonts.css new file mode 100644 index 0000000..637c1a1 --- /dev/null +++ b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/fonts.css @@ -0,0 +1,19 @@ +/* ============================================================ + Pantograph — Webfonts + ------------------------------------------------------------ + Two families, loaded from Google Fonts. The system runs on a + single primary face plus a monospace — minimal by design, the + way the product is. See readme.md → VISUAL FOUNDATIONS. + + Saira Condensed → THE primary face. Display, headings, UI, + body, labels, prose. Tall, narrow, and + precise — engraved-instrument character. + IBM Plex Mono → code, terminals, the panto CLI, tabular + numerals — the machine voice. + + Saira Condensed loads 400–700 (plus 400/500 italic) so it can + carry running body copy, not just display. @import MUST be the + first statement, before any other rule. + ============================================================ */ + +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Saira+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap'); diff --git a/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/spacing.css b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/spacing.css new file mode 100644 index 0000000..b06cdc8 --- /dev/null +++ b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/spacing.css @@ -0,0 +1,72 @@ +/* ============================================================ + Pantograph — Spacing, radius, borders, shadow, motion + ------------------------------------------------------------ + A slide rule is a precision instrument: spacing is rigid and + gridded (4px base unit), corners are barely rounded (the body + has sharp machined edges), and shadows are shallow and warm, + like an object resting on a drafting table — never glassy + blue drop-shadows. + ============================================================ */ + +:root { + /* Spacing scale (4px base) */ + --space-0: 0; + --space-1: 0.25rem; /* 4px */ + --space-2: 0.5rem; /* 8px */ + --space-3: 0.75rem; /* 12px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.5rem; /* 24px */ + --space-6: 2rem; /* 32px */ + --space-7: 3rem; /* 48px */ + --space-8: 4rem; /* 64px */ + --space-9: 6rem; /* 96px */ + + /* Radius — machined, minimal. Nothing pill-shaped except by intent. */ + --radius-none: 0; + --radius-xs: 2px; /* inputs, code chips */ + --radius-sm: 3px; /* buttons, badges */ + --radius-md: 5px; /* cards, panels */ + --radius-lg: 8px; /* large surfaces, dialogs */ + --radius-pill: 999px; /* tags, switches — use deliberately */ + + /* Border widths */ + --border-thin: 1px; + --border-medium: 1.5px; + --border-thick: 2px; + + /* Shadows — warm, low, like ink/paper on a table. Tinted with + ink, never neutral gray, never blue. Keep them shallow. */ + --shadow-xs: 0 1px 0 rgba(30, 37, 51, 0.06); + --shadow-sm: 0 1px 2px rgba(30, 37, 51, 0.10); + --shadow-md: 0 2px 6px rgba(30, 37, 51, 0.12), 0 1px 0 rgba(30, 37, 51, 0.04); + --shadow-lg: 0 8px 24px rgba(30, 37, 51, 0.16); + --shadow-inset: inset 0 1px 2px rgba(30, 37, 51, 0.10); + + /* Engraved-tick separator: THE standard section break. + A ruled scale — short ticks every --tick-pitch, with every + 5th tick at DOUBLE height, all centered on a common axis. + The short ticks sit 20% shorter than a plain rule would, so + the tall ones stand out without making the whole rule tall. + Drive size with --tick-h-major (= the rule's height); the + short tick is exactly half of it. */ + --tick-pitch: 8px; /* spacing between ticks */ + --tick-h-major: 14px; /* tall (every-5th) tick = rule height */ + --tick-h-minor: calc(var(--tick-h-major) / 2); /* short tick — half the tall one */ + --tick-gradient: + repeating-linear-gradient(90deg, var(--rule-tick) 0 1px, transparent 1px var(--tick-pitch)) + 0 50% / 100% var(--tick-h-minor) repeat-x, + repeating-linear-gradient(90deg, var(--rule-tick) 0 1px, transparent 1px calc(var(--tick-pitch) * 5)) + 0 50% / 100% var(--tick-h-major) repeat-x; + + /* Motion — mechanical, precise, no bounce. Like a sliding cursor. */ + --ease-slide: cubic-bezier(0.3, 0.0, 0.2, 1); /* @kind other */ + --ease-out: cubic-bezier(0.2, 0.0, 0.0, 1); /* @kind other */ + --dur-fast: 120ms; /* @kind other */ + --dur-base: 200ms; /* @kind other */ + --dur-slow: 320ms; /* @kind other */ + + /* Layout */ + --container-prose: 720px; /* documentation reading column */ + --container-wide: 1140px; /* app / marketing max width */ + --sidebar-width: 264px; +} diff --git a/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/typography.css b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/typography.css new file mode 100644 index 0000000..be943df --- /dev/null +++ b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/typography.css @@ -0,0 +1,66 @@ +/* ============================================================ + Pantograph — Typography tokens + ------------------------------------------------------------ + Two voices. Minimal, like the product: + • Saira Condensed — THE primary face. Display, headings, + UI, body, prose, eyebrows, scale numerals. Tall and + narrow; reads as engraved instrument lettering. + • IBM Plex Mono — code, terminals, the panto CLI, tabular + numerals, anything "machine". + + --font-sans / --font-serif / --font-display all resolve to + Saira Condensed, so role tokens and existing components keep + working while the system runs on a single primary face. + ============================================================ */ + +:root { + /* Families — one primary face, one mono */ + --font-primary: 'Saira Condensed', 'Arial Narrow', sans-serif; + --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; + + /* Aliases — all point at the primary face (legacy role names) */ + --font-display: var(--font-primary); + --font-sans: var(--font-primary); + --font-serif: var(--font-primary); + + /* Type scale (1.250 major-third, rooted at 16px) */ + --text-2xs: 0.6875rem; /* 11px — tick labels, legal */ + --text-xs: 0.75rem; /* 12px — captions, eyebrows */ + --text-sm: 0.875rem; /* 14px — secondary UI text */ + --text-base: 1rem; /* 16px — body */ + --text-md: 1.125rem; /* 18px — lead paragraph */ + --text-lg: 1.375rem; /* 22px — h4 / card titles */ + --text-xl: 1.75rem; /* 28px — h3 */ + --text-2xl: 2.25rem; /* 36px — h2 */ + --text-3xl: 3rem; /* 48px — h1 */ + --text-4xl: 4rem; /* 64px — display */ + --text-5xl: 5.5rem; /* 88px — hero display */ + + /* Weights */ + --weight-regular: 400; + --weight-medium: 500; + --weight-semibold: 600; + --weight-bold: 700; + + /* Line heights */ + --leading-tight: 1.05; /* display */ + --leading-snug: 1.25; /* headings */ + --leading-normal: 1.5; /* UI / sans body */ + --leading-relaxed: 1.7; /* serif prose */ + --leading-mono: 1.6; /* code */ + + /* Letter spacing */ + --tracking-label: 0.14em; /* ALL-CAPS engraved labels */ + --tracking-tight: -0.01em; /* large display */ + --tracking-normal: 0; + + /* ---- Semantic roles ---- */ + --role-display: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display); + --role-h1: var(--weight-bold) var(--text-3xl)/var(--leading-snug) var(--font-display); + --role-h2: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans); + --role-h3: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans); + --role-body: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans); + --role-prose: var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-primary); + --role-code: var(--weight-regular) var(--text-sm)/var(--leading-mono) var(--font-mono); + --role-label: var(--weight-semibold) var(--text-xs)/1 var(--font-display); +} |