title: "@stnd/styles" status: active maturity: tree type: package tags:

• package
• stnd

@stnd/styles

The CSS typography and design system framework for the Standard Ecosystem.

Overview

@stnd/styles is a comprehensive design system based on classical book design, the Golden Ratio, and OKLCH color spaces. It provides structural layout grids, clean typography scales, and automated color themes for all Standard applications with zero configuration.

1. Mathematical Spacing & Ratios

The system rejects arbitrary pixel coordinates. All spacing, font scaling, and line heights are tied to three mathematical constants:

• Golden Ratio ($\phi \approx 1.618$): Governs structural widths, block margins, and main layout columns.
• Silver Ratio ($\theta \approx 1.414$): Governs the typographic scale and base vertical rhythm.
• Halfstep ($\sqrt{\phi} \approx 1.272$): Square root of the Golden Ratio, used for subheadings, margins, and inline gaps.

2. Typographic Scale

Standard applies a strict modular font scale to prevent typographic clashes. Body font sizes map to CSS custom properties:

| CSS Variable | Scale Class | Value / Application | | :--- | :--- | :--- | | --scale-8 | .scale-8 | Large Display Title | | --scale-4 | h1 | Primary Document Header | | --scale-2 | h2 | Subheadings | | --scale | body | Base Body Text ($1\text{rem}$) | | --scale-d2 | .small, small | Captions, Side Notes | | --scale-d3 | .smaller | Footnotes | | --scale-d4 | .micro | Meta Labels, Short Codes | | --scale-d5 | .nano | Micro-badges |

3. Spacing Grid (Baseline Rhythm)

Vertical rhythm is managed through a base unit --space (usually $1\text{rem}$ / $16\text{px}$). Multiples and fractions are locked:

• Standard Spacing (Multiples):
  • --space-2, --space-4, --space-8, --space-12
• Sub-units (Fractions):
  • --space-half (0.5x), --space-third (0.33x), --space-d4 (0.25x), --space-d8 (0.125x)

Elements align to this grid through a strict rule: the sum of an element's font-size, line-height, and margins must always be a multiple of --space.

4. Color System (OKLCH Color Space)

Instead of hardcoding colors, the system generates complete color palettes dynamically. By using OKLCH color mathematics, one seed color generates borders, backgrounds, surfaces, and active states with uniform perceived brightness:

• --color-accent: Seed brand highlight color.
• --color-background / --color-foreground: Automatically calculated base canvas colors.
• --color-surface: Card/panel backgrounds.
• --color-border: Border colors.
• --color-success / --color-warning / --color-error / --color-info: Consistent status indicators.

5. Layout Modes & Templates

Specialized styling rules load automatically depending on document attributes:

• Prose Mode (.prose): Restricts reading width to an optimal measure ($\approx 65\text{ch}$) to prevent eye strain.
• Dark Mode: Evaluated via system settings (prefers-color-scheme) or overridden with the .theme-dark class.
• E-Ink Mode (.standard-eink): Strips out all transforms, blurs, and animations, switching colors to pure high-contrast black and white to prevent ghosting on e-readers.

Integration

In your main SCSS stylesheet or Astro entry point:

// Load standard variables and layouts
import "@stnd/styles/standard.scss";

Style Files Anatomy

• standard.scss: Framework index.
• _standard-01-token.scss: Variable dictionary.
• _standard-02-color.scss: Color space equations.
• _standard-03-typography.scss: Typography stacks.
• _standard-06-prose.scss: Prose limits and vertical alignments.
• _standard-11-forms.scss: Field components.
• _standard-32-eink.scss: High-contrast rules.

What's next — open

• [ ] CSS framework audit / cleanup — verify that everything is still up to our standard (the initial draft is old; a cleanup is likely possible).

🔗 Liens & Normes

Ce paquet de styles implémente la charte visuelle et les tokens de l'écosystème Standard. Pour plus de détails sur les spécifications graphiques et de code, consultez :

• Architecture Système : 4.1 Architecture
• Principes de Code : 4.2 Code Standards
• Normes de Documentation : 4.9 Normes README
• Pilier Central : STANDARD.md
• Charte Graphique : 3.1 Color System et 3.2 Typography