/* =========================================================================== Commonplace House Style — design/maeda Drop-in runtime layer: design tokens (light + true-dark inversion), base element styles, and the three brand motifs. Usage: 1. Copy this file and the sibling /fonts directory into your project. 2. @import "./commonplace.css"; (or add to your bundler entry) 3. Toggle dark mode by adding class "theme-dark" (or "dark") to . Tokens are shadcn/ui-compatible: --background, --foreground, --primary, --border, --ring, --destructive, --muted, --accent, chart + sidebar tokens all resolve from the five raw primitives below. Override the five and the whole system follows. =========================================================================== */ /* ---- Typeface (self-hosted, SIL OFL) ---- */ /* Place the four .woff2 files in ../fonts relative to this stylesheet. On macOS/iOS native clients, use SF Pro / SF Mono instead (see HOUSE_STYLE). */ @font-face { font-family: 'iA Writer Quattro'; src: url('../fonts/iAWriterQuattroS-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'iA Writer Quattro'; src: url('../fonts/iAWriterQuattroS-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'iA Writer Quattro'; src: url('../fonts/iAWriterQuattroS-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'iA Writer Quattro'; src: url('../fonts/iAWriterQuattroS-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } :root { /* === The five raw primitives — everything flows from here === */ --white: #ffffff; --gray-20: #d6d6d6; /* hairlines, borders */ --gray-50: #6f6f6f; /* muted text, dividers — WCAG AA 4.5:1 on white */ --gray-90: #1a1a1a; /* body text */ --black: #000000; /* primary text, emphasis, action */ /* === Semantic aliases === */ --text-color: var(--black); --bg-color: var(--white); --border-color: var(--gray-20); --text-light: var(--gray-50); /* === Functional safety signal — the ONLY permitted hue === */ --danger: #c0362c; /* destructive / irreversible actions only */ /* === Type === */ --font-sans: 'iA Writer Quattro', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-mono: var(--font-sans); /* deliberately identical */ --text-base: 17px; /* reading base */ --leading-prose: 1.55; --measure: 680px; /* reading column cap */ --tracking-tight: -0.015em; /* headings */ --tracking-chrome: 0.07em; /* uppercase UI labels */ /* === Rhythm / spacing === */ --space-xxs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 96px; --spacing: 1rem; --spacing-lg: 2.5rem; --spacing-xl: 6rem; --container-pad: 1.5rem; /* container side padding */ --max-width: 880px; /* web page cap (reading col stays --measure) */ /* === Shape & motion === */ --radius: 0; /* flat & square; full=9999px only for circles */ --hairline: 1px; --shadow: none; --transition: color 0.15s linear, opacity 0.15s linear; /* === Line-weight grammar (one stroke hierarchy, chrome + the work) === */ --rule-hair: 1px; /* dividers, hairlines */ --rule-object: 1.5px; /* object outlines */ --rule-frame: 2px; /* frames, titleblocks */ /* === The work supplies the colour: neutral (non-hue) canvas ground === */ --bg-canvas: #e6e6e6; /* grey ground so the work reads; still not a colour */ /* === Pressed-in-monochrome selected state (selection reads without hue) === */ --active-bg: color-mix(in srgb, var(--text-color) 10%, transparent); --active-border: var(--gray-50); /* === shadcn/ui-compatible token surface (all monochrome) === */ --background: var(--bg-color); --foreground: var(--text-color); --card: var(--bg-color); --card-foreground: var(--text-color); --popover: var(--bg-color); --popover-foreground: var(--text-color); --primary: var(--text-color); /* ink, never blue */ --primary-foreground: var(--bg-color); --secondary: var(--bg-color); --secondary-foreground: var(--text-color); --muted: var(--bg-color); --muted-foreground: var(--text-light); --accent: color-mix(in srgb, var(--text-color) 7%, transparent); /* 7% ink wash */ --accent-foreground: var(--text-color); --destructive: var(--danger); --destructive-foreground: #ffffff; --border: var(--border-color); --input: var(--border-color); --ring: var(--text-color); /* monochrome data-viz ramp */ --chart-1: var(--black); --chart-2: var(--gray-90); --chart-3: var(--gray-50); --chart-4: var(--gray-20); --chart-5: var(--gray-90); /* sidebar (same inversion logic) */ --sidebar: var(--bg-color); --sidebar-foreground: var(--text-color); --sidebar-primary: var(--text-color); --sidebar-primary-foreground: var(--bg-color); --sidebar-accent: color-mix(in srgb, var(--text-color) 7%, transparent); --sidebar-accent-foreground: var(--text-color); --sidebar-border: var(--border-color); --sidebar-ring: var(--text-color); } /* === True dark inversion: swap the five primitives, everything follows === */ html.theme-dark, html.dark, [data-theme='dark'], .dark { --white: #0d0d0d; --gray-20: #2a2a2a; --gray-50: #8b8b8b; --gray-90: #d4d4d4; --black: #f0f0f0; --danger: #e0554b; --bg-canvas: #1a1a1a; /* dark canvas ground */ } /* =========================================================================== Base element styles =========================================================================== */ * { border-radius: var(--radius); box-shadow: var(--shadow); } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-color); background: var(--bg-color); font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.2; } a { color: inherit; text-decoration: none; transition: var(--transition); } a:hover { opacity: 0.5; } /* recede, never light up */ hr { border: 0; border-top: var(--hairline) solid var(--border-color); } ::selection { background: var(--text-color); color: var(--bg-color); } *:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--ring); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-20); } ::-webkit-scrollbar-thumb:hover { background: var(--gray-50); } html { scroll-behavior: smooth; } /* Dark-mode content images sit against near-black without blasting */ html.theme-dark img:not([role='icon']), html.dark img:not([role='icon']), [data-theme='dark'] img:not([role='icon']) { filter: brightness(0.92); } /* Reading column helper (≤680px) and web page cap (880px) */ .prose-measure { max-width: var(--measure); margin-inline: auto; } .page-measure { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--container-pad); } /* =========================================================================== The three motifs — the brand's only ornament =========================================================================== */ /* 1. Trailing arrow on links */ .arrow-link::after { content: ' →'; color: var(--text-light); } .arrow-link { transition: var(--transition); } .arrow-link:hover { opacity: 0.5; } /* Text-as-link button, uppercase + tracked, trailing arrow */ .btn-arrow { display: inline-flex; align-items: center; gap: var(--space-xs); background: transparent; border: 0; padding: 0; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-color); cursor: pointer; transition: var(--transition); } .btn-arrow::after { content: '→'; color: var(--text-light); } .btn-arrow:hover { opacity: 0.5; } .btn-arrow:disabled { opacity: 0.5; cursor: default; } /* 2. Asterisk section divider */ .divider-asterisk { text-align: center; padding-block: 3.5rem; color: var(--text-light); } .divider-asterisk::before { content: '* * *'; letter-spacing: 0.5em; } /* 3. Uppercase tracked chrome labels (UI furniture) */ .label-chrome { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--tracking-chrome); color: var(--text-light); } .label-chrome-sm { font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); } /* =========================================================================== Panel & control primitives (1px hairline, darken-on-hover) =========================================================================== */ .house-panel { border: var(--hairline) solid var(--border-color); background: var(--bg-color); } .house-panel-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-chrome); color: var(--text-light); } .house-control-label { font-size: 0.75rem; color: var(--text-light); line-height: 1.3; } .house-readout-value { font-weight: 700; font-variant-numeric: tabular-nums; } .house-rule { border-top: var(--hairline) solid var(--border-color); } .house-control { border: var(--hairline) solid var(--border-color); background: transparent; transition: var(--transition); } .house-control:hover { border-color: var(--gray-50); } /* darken, not lighten */ /* Pressed-in-monochrome selected state (no hue) */ .house-control[aria-selected='true'], .house-control.is-active { background: var(--active-bg); border-color: var(--active-border); } /* Active nav reads as an underline, never a colour change */ [aria-current='page'] { text-decoration: underline; text-underline-offset: 4px; } /* Titleblock furniture (drafting surfaces) */ .house-frame { border: var(--rule-frame) solid var(--border-color); } .house-frame-bound { border: var(--rule-object) solid var(--border-color); } .house-cell { border-top: var(--rule-hair) solid var(--border-color); } .house-cell-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: var(--tracking-chrome); color: var(--text-light); } .house-cell-value { font-weight: 700; font-variant-numeric: tabular-nums; }