@stnd/styles 0.5.0

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @stnd/styles
+
+## 0.5.0
+
+### Minor Changes
+
+- Folio Load order
+
+## 0.4.0
+
+### Minor Changes
+
+- Folio order
+
+## 0.3.0
+
+### Minor Changes
+
+- 2d0ae02: NPM Test
+
+## 0.2.0
+
+### Minor Changes
+
+- 6d8888a: First release

package/README.md

@@ -0,0 +1,116 @@
+---
+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:
+
+```scss
+// 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](../../apps/stnd.build/modules/manual/content/4-system/4.1-architecture.md)
+- **Principes de Code** : [4.2 Code Standards](../../apps/stnd.build/modules/manual/content/4-system/4.2-code-standards.md)
+- **Normes de Documentation** : [4.9 Normes README](../../apps/stnd.build/modules/manual/content/4-system/4.9-readme-standard.md)
+- **Pilier Central** : [STANDARD.md](../../STANDARD.md)
+- **Charte Graphique** : [3.1 Color System](../../apps/stnd.build/modules/manual/content/3-graphics/3.1-color-system.md) et [3.2 Typography](../../apps/stnd.build/modules/manual/content/3-graphics/3.2-typography-and-typefaces.md)

package/TOKENS.md

@@ -0,0 +1,415 @@
+# Standard Design Tokens
+
+> Canonical reference for all CSS custom properties exposed by `@stnd/styles`.
+> Source files: `_standard-01-token.scss`, `_standard-02-color.scss`, `_standard-03-typography.scss`, `_standard-06-prose.scss`, `_standard-14-analog.scss`.
+
+## Frontmatter Configuration
+
+Standard Garden maps document-level frontmatter directly into CSS custom properties on the document root. The frontmatter key is the CSS property name without the `--` prefix.
+
+For example, `foreground: "#1a1a1a"` becomes `--foreground: #1a1a1a`. See `packages/utils/theme-tokens.js` for the canonical token list.
+
+---
+
+## Ratios
+
+| Token                 | Default | Description        |
+| --------------------- | ------- | ------------------ |
+| `--ratio-golden`      | `1.618` | Golden ratio (φ)   |
+| `--ratio-silver`      | `1.414` | Silver ratio (√2)  |
+| `--ratio-halfstep`    | `1.272` | Half-step ratio    |
+| `--ratio-quarterstep` | `1.128` | Quarter-step ratio |
+| `--ratio-eighthstep`  | `1.062` | Eighth-step ratio  |
+
+## Base Measurements
+
+| Token                | Default                               | Description                                |
+| -------------------- | ------------------------------------- | ------------------------------------------ |
+| `--font-size`        | `1rem`                                | Root font size                             |
+| `--optical-ratio`    | `var(--ratio-silver)`                 | Ratio driving the modular scale            |
+| `--line-height`      | `var(--optical-ratio)`                | Base line height                           |
+| `--space`            | `1rlh`                                | Official rhythm unit                       |
+| `--leading`          | `calc((line-height - 1) * font-size)` | Space between cap-height and next baseline |
+| `--nl`               | `calc(leading * line-height)`         | Newline — full vertical unit               |
+| `--trim`             | `calc(leading / 2)`                   | Half-leading trim                          |
+| `--max-width`        | `1024px`                              | Maximum content width                      |
+| `--font-size-mobile` | `1.1rem`                              | Font size override on mobile               |
+
+## Spacing Scale
+
+Derived from `--baseline` (1rlh).
+
+| Token                      | Value                    |
+| -------------------------- | ------------------------ |
+| `--space`                  | `var(--baseline)`        |
+| `--space-1` … `--space-12` | `calc(var(--space) * N)` |
+| `--space-d2`               | `calc(var(--space) / 2)` |
+| `--space-d3`               | `calc(var(--space) / 3)` |
+| `--space-d4`               | `calc(var(--space) / 4)` |
+
+## Optical Harmony Scale
+
+Powered by `pow(var(--optical-ratio), N)`.
+
+| Token        | Exponent | Description            |
+| ------------ | -------- | ---------------------- |
+| `--scale-d5` | -2       | Smallest (floor: 9px)  |
+| `--scale-d4` | -1.5     |                        |
+| `--scale-d3` | -1       |                        |
+| `--scale-d2` | -0.5     |                        |
+| `--scale`    | 0        | Base (= `--font-size`) |
+| `--scale-2`  | 1        |                        |
+| `--scale-3`  | 2        |                        |
+| `--scale-4`  | 3        |                        |
+| `--scale-5`  | 4        |                        |
+| `--scale-6`  | 5        |                        |
+| `--scale-7`  | 6        |                        |
+| `--scale-8`  | 7        | Largest                |
+
+## T-Shirt Size Aliases
+
+| Token         | Maps to      |
+| ------------- | ------------ |
+| `--size-3xs`  | `--scale-d5` |
+| `--size-2xs`  | `--scale-d4` |
+| `--size-xs`   | `--scale-d3` |
+| `--size-sm`   | `--scale-d2` |
+| `--size-base` | `--scale`    |
+| `--size-lg`   | `--scale-2`  |
+| `--size-xl`   | `--scale-3`  |
+| `--size-2xl`  | `--scale-4`  |
+| `--size-3xl`  | `--scale-5`  |
+| `--size-4xl`  | `--scale-6`  |
+| `--size-5xl`  | `--scale-7`  |
+| `--size-6xl`  | `--scale-8`  |
+
+## Line Widths
+
+| Token               | Default                           | Description                                   |
+| ------------------- | --------------------------------- | --------------------------------------------- |
+| `--line-width-xs`   | `24rem`                           | Extra small                                   |
+| `--line-width-sm`   | `32rem`                           | Small                                         |
+| `--line-width-md`   | `42rem`                           | Medium (default reading width)                |
+| `--line-width-lg`   | `50rem`                           | Large                                         |
+| `--line-width-xl`   | `60rem`                           | Extra large                                   |
+| `--line-width-full` | `calc(100vw - space*2)`           | Full viewport minus gutters                   |
+| `--line-width`      | `var(--measure, --line-width-md)` | Active line width (themeable via `--measure`) |
+
+## Line Heights
+
+| Token                   | Default                | Description         |
+| ----------------------- | ---------------------- | ------------------- |
+| `--line-height`         | `var(--optical-ratio)` | Base line height    |
+| `--line-height-compact` | `calc(1 + (lh-1)/2)`   | Tight line height   |
+| `--line-height-relaxed` | `calc(1 + (lh-1)*1.5)` | Relaxed line height |
+
+## Letter Spacing
+
+| Token                | Default   | Description      |
+| -------------------- | --------- | ---------------- |
+| `--tracking-tight`   | `-0.01em` | Tight tracking   |
+| `--tracking-neutral` | `0em`     | Neutral tracking |
+| `--tracking-open`    | `0.01em`  | Open tracking    |
+
+## Stroke & Radius
+
+| Token               | Default                         | Description                              |
+| ------------------- | ------------------------------- | ---------------------------------------- |
+| `--stroke-width`    | `max(1px, 0.06rem)`             | Hairline stroke                          |
+| `--stroke-width-lg` | `calc(stroke-width * 2)`        | Heavy stroke                             |
+| `--radius`          | `var(--corner, var(--leading))` | Border radius (themeable via `--corner`) |
+| `--filter-blur`     | `blur(8px)`                     | Standard blur filter                     |
+
+## Gaps
+
+| Token               | Default                               | Description           |
+| ------------------- | ------------------------------------- | --------------------- |
+| `--gap-body`        | `clamp(space, 0.5vi+0.5rlh, space-3)` | Body gutter           |
+| `--gap-grid`        | `0.25lh`                              | Grid gutter           |
+| `--gap-body-mobile` | `var(--space)`                        | Body gutter on mobile |
+| `--gap-mobile`      | `1rlh`                                | General gap on mobile |
+
+## Z-Index
+
+| Token            | Value  | Use case            |
+| ---------------- | ------ | ------------------- |
+| `--z-base`       | `1`    | Above flow          |
+| `--z-dropdown`   | `1000` | Dropdowns, popovers |
+| `--z-modal`      | `1060` | Modals, dialogs     |
+| `--z-toast`      | `1090` | Toast notifications |
+| `--z-image-zoom` | `9999` | Image lightbox      |
+
+## Animation
+
+| Token             | Default                        | Description           |
+| ----------------- | ------------------------------ | --------------------- |
+| `--duration-fast` | `0.2s`                         | Quick interactions    |
+| `--duration`      | `0.5s`                         | Standard duration     |
+| `--ease`          | `cubic-bezier(0.5, 0, 0.5, 1)` | Standard easing curve |
+| `--transition`    | `var(--duration) var(--ease)`  | Shorthand transition  |
+
+## Breakpoints
+
+| Token                 | Default  | Description       |
+| --------------------- | -------- | ----------------- |
+| `--breakpoint-mobile` | `600px`  | Mobile breakpoint |
+| `--breakpoint-sm`     | `768px`  | Small screen      |
+| `--breakpoint-lg`     | `1024px` | Large screen      |
+| `--breakpoint-wide`   | `1440px` | Wide screen       |
+
+---
+
+## Colors — OKLCH Spectrum
+
+Generated from `--color-accent` seed via OKLCH hue rotation.
+
+| Token              | Hue  | Description   |
+| ------------------ | ---- | ------------- |
+| `--pigment-red`    | 25°  | Error red     |
+| `--pigment-yellow` | 85°  | Warning amber |
+| `--pigment-green`  | 145° | Success green |
+| `--pigment-cyan`   | 190° | Info cyan     |
+| `--pigment-blue`   | 240° | Link blue     |
+| `--pigment-purple` | 300° | Magic purple  |
+
+Supporting tokens: `--dna-l`, `--dna-c`, `--dna-h`, `--safe-c`, `--safe-l`.
+
+## Colors — Light Palette
+
+| Token                      | Default                   | Description       |
+| -------------------------- | ------------------------- | ----------------- |
+| `--color-light-background` | `white`                   | Page background   |
+| `--color-light-foreground` | `#262626`                 | Text color        |
+| `--color-light-accent`     | `var(--color-foreground)` | Accent color      |
+| `--color-light-red`        | `#b14c42`                 | Dusty red clay    |
+| `--color-light-orange`     | `#d78a5a`                 | Trail-worn orange |
+| `--color-light-yellow`     | `#c8a840`                 | Parchment mustard |
+| `--color-light-green`      | `#5e9d80`                 | Sage green        |
+| `--color-light-cyan`       | `#6ba4b6`                 | Glacier teal      |
+| `--color-light-blue`       | `#4f81a4`                 | Faded blueprint   |
+| `--color-light-magenta`    | `#7a6c91`                 | Dusk lavender     |
+| `--color-light-link`       | `#4f81a4`                 | Link color        |
+
+## Colors — Dark Palette (auto-generated)
+
+Auto-derived from light palette via `color-mix(in oklch, light 80%, white)`.
+Themes can override individual values.
+
+| Token                     | Default                        | Description       |
+| ------------------------- | ------------------------------ | ----------------- |
+| `--color-dark-background` | `#0f0f0f`                      | Page background   |
+| `--color-dark-foreground` | `#dbdbdb`                      | Text color        |
+| `--color-dark-accent`     | `var(--color-light-accent)`    | Accent color      |
+| `--color-dark-red`        | auto                           | Lightened red     |
+| `--color-dark-orange`     | auto                           | Lightened orange  |
+| `--color-dark-yellow`     | auto                           | Lightened yellow  |
+| `--color-dark-green`      | auto                           | Lightened green   |
+| `--color-dark-cyan`       | auto                           | Lightened cyan    |
+| `--color-dark-blue`       | auto                           | Lightened blue    |
+| `--color-dark-magenta`    | auto                           | Lightened magenta |
+| `--color-dark-link`       | auto                           | Lightened link    |
+| `--color-dark-on-accent`  | `var(--color-dark-background)` | Text on accent    |
+
+## Colors — Auto-Accent Strategies
+
+Standard provides three automatic strategies to generate an accent color from your foreground text hue. By default, the system uses the `triadic` strategy for a balanced contrast. You can explicitly override `--color-[light/dark]-accent` in your theme using any of these strategies:
+
+| Token | Description |
+| --- | --- |
+| `--color-[light/dark]-accent-complementary` | Opposite side of the color wheel (+180°). Provides maximum, aggressive contrast. |
+| `--color-[light/dark]-accent-triadic` | A third of the way around (+120°). Balanced, strong but natural contrast (Default). |
+| `--color-[light/dark]-accent-analogous` | Next to the seed color (+30°). Harmonious, subtle, camaïeu effect. |
+
+## Colors — Semantic
+
+Active tokens that resolve to light or dark palette.
+
+| Token                | Description                          |
+| -------------------- | ------------------------------------ |
+| `--color-background` | Page background                      |
+| `--color-foreground` | Primary text                         |
+| `--color-accent`     | Primary accent                       |
+| `--color-header`     | Heading color (fallback: foreground) |
+| `--color-red`        | Red hue                              |
+| `--color-orange`     | Orange hue                           |
+| `--color-yellow`     | Yellow hue                           |
+| `--color-green`      | Green hue                            |
+| `--color-cyan`       | Cyan hue                             |
+| `--color-blue`       | Blue hue                             |
+| `--color-magenta`    | Magenta hue                          |
+| `--color-success`    | = `--color-green`                    |
+| `--color-warning`    | = `--color-yellow`                   |
+| `--color-error`      | = `--color-red`                      |
+| `--color-info`       | = `--color-blue`                     |
+| `--color-link`       | Link color                           |
+| `--color-italic`     | Italic text color                    |
+| `--color-bold`       | Bold text color                      |
+| `--color-on-accent`  | Text on accent background            |
+
+## Colors — Computed
+
+| Token                  | Value                       | Description              |
+| ---------------------- | --------------------------- | ------------------------ |
+| `--color-muted`        | `foreground 60%`            | Muted text               |
+| `--color-subtle`       | `foreground 40%`            | Subtle text / decoration |
+| `--color-border`       | `foreground 10%`            | Default border           |
+| `--color-surface-low`  | `foreground 3%` opaque      | Slight surface tint      |
+| `--color-surface`      | `foreground 3%` opaque      | Secondary background     |
+| `--color-surface-high` | `foreground 5%` transparent | Hover state              |
+| `--color-darker`       | `dark 15%` transparent      | Shadow helper            |
+| `--color-light`        | light background            | Pole light               |
+| `--color-dark`         | light foreground            | Pole dark                |
+| `--color-shadow`       | `dark 5%` transparent       | Shadow color base        |
+
+## Surface Elevation
+
+Progressive foreground tinting for depth. Pairs with shadow presets.
+
+| Token                     | Tint            | Shadow        | Use case                |
+| ------------------------- | --------------- | ------------- | ----------------------- |
+| `--color-surface-lowest`  | 14% (background) | none          | Page background         |
+| `--color-surface-low`     | 7%              | `--shadow`    | Cards, inputs           |
+| `--color-surface`         | 3%              | `--shadow-lg` | Raised panels, popovers |
+| `--color-surface-high`    | 7%              | `--shadow-xl` | Overlays, drawers       |
+| `--color-surface-highest` | 14%             | `--shadow-xl` | Modals, toasts          |
+
+## Shadows (Layered System)
+
+Composable shadow primitives. Combine freely with comma-separated values.
+
+### Building Blocks
+
+| Token              | Description                  |
+| ------------------ | ---------------------------- |
+| `--shadow-ambient` | Subtle ground-contact shadow |
+| `--shadow-lift`    | Directional elevation shadow |
+| `--shadow-glow`    | Accent-tinted halo           |
+| `--shadow-inset`   | Pressed/recessed effect      |
+| `--shadow-ring`    | Border-like inset ring       |
+
+### Composed Presets
+
+| Token         | Composition           | Description                     |
+| ------------- | --------------------- | ------------------------------- |
+| `--shadow`    | ambient               | Default subtle shadow           |
+| `--shadow-lg` | ambient + lift        | Medium elevation                |
+| `--shadow-xl` | ambient + lift + glow | High elevation with accent glow |
+
+### Usage
+
+```css
+/* Use presets */
+box-shadow: var(--shadow-lg);
+
+/* Or compose custom combinations */
+box-shadow: var(--shadow-ring), var(--shadow-lift);
+box-shadow: var(--shadow-inset), var(--shadow-ambient);
+```
+
+## Borders
+
+| Token                  | Value                             | Description                           |
+| ---------------------- | --------------------------------- | ------------------------------------- |
+| `--border`             | `stroke-width solid border-color` | Default border                        |
+| `--border-transparent` | `stroke-width solid transparent`  | Transparent border (layout stability) |
+| `--border-accent`      | `stroke-width solid accent 7%`    | Accent-tinted border                  |
+
+## Tooltip
+
+| Token                  | Default                         | Description        |
+| ---------------------- | ------------------------------- | ------------------ |
+| `--tooltip-background` | `#1a1a1a`                       | Tooltip background |
+| `--tooltip-text`       | `#ffffff`                       | Tooltip text       |
+| `--tooltip-ease`       | `cubic-bezier(0.25, 1, 0.5, 1)` | Tooltip animation  |
+
+---
+
+## Typography — Font Stacks
+
+| Token              | Default                      | Description      |
+| ------------------ | ---------------------------- | ---------------- |
+| `--font-sans`      | Instrument Sans, system-ui   | Sans-serif stack |
+| `--font-serif`     | Newsreader, Instrument Serif | Serif stack      |
+| `--font-monospace` | IBM Plex Mono, ui-monospace  | Monospace stack  |
+
+## Typography — Semantic Roles
+
+| Token              | Default            | Description |
+| ------------------ | ------------------ | ----------- |
+| `--font-text`      | `var(--font-sans)` | Body text   |
+| `--font-header`    | `"Inter"` | Headings    |
+| `--font-interface` | `var(--font-sans)` | UI elements |
+
+## Typography — Weights
+
+| Token                  | Default                     | Description    |
+| ---------------------- | --------------------------- | -------------- |
+| `--font-weight`        | `400`                       | Body weight    |
+| `--font-weight-bold`   | `600`                       | Bold weight    |
+| `--font-header-weight` | `700`                       | Heading weight |
+| `--font-weight-h1`     | `var(--font-header-weight)` | H1 weight      |
+| `--font-weight-h2`     | `max(header*0.85, body)`    | H2 weight      |
+| `--font-weight-h3`     | `max(header*0.85, body)`    | H3 weight      |
+| `--font-weight-h4`     | `var(--font-weight)`        | H4 weight      |
+| `--font-weight-h5`     | `var(--font-weight)`        | H5 weight      |
+| `--font-weight-h6`     | `var(--font-weight)`        | H6 weight      |
+
+## Typography — OpenType Features
+
+| Token                        | Default                          | Description              |
+| ---------------------------- | -------------------------------- | ------------------------ |
+| `--font-inter-feature`       | `"calt", "cv05", "cv11", "ss03"` | Inter-specific features  |
+| `--font-instrument-feature`  | `"figa", "ss01", "ss02", "ss05"` | Instrument Sans features |
+| `--font-feature`             | `""`                             | Body text features       |
+| `--font-variation`           | `"wdth" 95`                      | Body text variation axes |
+| `--font-header-feature`      | `""`                             | Header features          |
+| `--font-header-variation`    | `""`                             | Header variation axes    |
+| `--font-monospace-feature`   | `""`                             | Monospace features       |
+| `--font-monospace-variation` | `""`                             | Monospace variation axes |
+| `--font-interface-feature`   | `"dlig", "zero"`                 | Interface features       |
+| `--font-interface-variation` | `""`                             | Interface variation axes |
+| `--font-list-feature`        | `"dlig", "tnum", "zero"`         | List features            |
+| `--font-list-variation`      | `""`                             | List variation axes      |
+
+## Typography — Other
+
+| Token                          | Default        | Description           |
+| ------------------------------ | -------------- | --------------------- |
+| `--font-letter-spacing`        | `normal`       | Body letter spacing   |
+| `--font-header-letter-spacing` | `normal`       | Header letter spacing |
+| `--font-header-line-height`    | `1`            | Header line height    |
+| `--list-indent`                | `var(--space)` | List indentation      |
+
+---
+
+## Layout — Prose Grid
+
+| Token                       | Default                       | Description              |
+| --------------------------- | ----------------------------- | ------------------------ |
+| `--content-width`           | `min(--line-width, 100%)`     | Content column width     |
+| `--content-width-sm`        | `max(space-2 - space, space)` | Sidebar margin inset     |
+| `--content-width-editorial` | `minmax(0, --space-2)`        | Editorial column         |
+| `--content-width-feature`   | `minmax(0, --space-4)`        | Feature column           |
+| `--content-width-hero`      | `minmax(0, 1fr)`              | Hero (full bleed) column |
+
+## Analog (Noise Overlay)
+
+| Token                     | Default      | Description     |
+| ------------------------- | ------------ | --------------- |
+| `--noise-overlay`         | SVG data URI | Noise texture   |
+| `--noise-overlay-opacity` | `0.08`       | Overlay opacity |
+| `--noise-overlay-blend`   | `multiply`   | Blend mode      |
+
+---
+
+## Forced Colors (High Contrast)
+
+Under `@media (forced-colors: active)`:
+
+| Token                | Maps to      |
+| -------------------- | ------------ |
+| `--color-background` | `Canvas`     |
+| `--color-foreground` | `CanvasText` |
+| `--color-accent`     | `Highlight`  |
+| `--color-border`     | `CanvasText` |
+| `--color-muted`      | `GrayText`   |

package/_standard-00-reset.scss

@@ -0,0 +1,74 @@
+/* =========================== */
+/* RESET                       */
+/* =========================== */
+
+/* Disable view transition animations - instant page swaps
+::view-transition {
+  animation-duration: 0s !important;
+}
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation: none !important;
+}
+*/
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box;
+  border-width: 0;
+  scrollbar-width: thin;
+}
+
+/* 
+ * Modern targeted reset (replaces the old `* { margin: 0; padding: 0 }`).
+ * This prevents the framework from destroying the native margins/paddings of complex 
+ * embedded editors (like CodeMirror/Obsidian) or third-party web widgets, while still 
+ * perfectly resetting the standard web typography and layout elements.
+ */
+html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6, img, span, a {
+  margin: 0;
+  padding: 0;
+  border: 0 solid;
+}
+
+button, input, select {
+  margin: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+img,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none !important;
+}
+
+script {
+  display: none !important;
+}

package/_standard-00-variables.scss

@@ -0,0 +1,54 @@
+/**
+ * @component SCSS Variables & Mixins
+ * @category Foundation
+ * @description Responsive breakpoints and rhythm application mixins for consistent
+ * vertical rhythm and spacing across all elements. These mixins ensure proper
+ * spacing application for rhythm-aware components.
+ *
+ * @prop {variable} $mobile Mobile breakpoint (480px)
+ * @prop {variable} $small Small screen breakpoint (768px)
+ * @prop {variable} $large Large screen breakpoint (1024px)
+ * @prop {variable} $wide Wide screen breakpoint (1440px)
+ *
+ * @example
+ * // Using breakpoint variables
+ * @media (min-width: $small) {
+ *   font-size: 1.2rem;
+ * }
+ *
+ * // Using rhythm mixin
+ * @include apply-rhythm {
+ *   margin-bottom: var(--space);
+ * }
+ *
+ * @since 0.1.0
+ * @see standard-01-token.scss
+ */
+
+$mobile: 600px;
+$small: 768px;
+$large: 1024px;
+$wide: 1440px;
+
+$text-elements: "a, kbd, div, span, mark, callout-title::before, span, li::before, button, legend, fieldset, label, li, h1, h2, h3, h4, h5, h6, p:not(:has(img)), figcaption, dt, dd, label, td, th, .callout, code, .lined, aside";
+
+$rhythm-simple-tags: ".alert, #comments, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, li, dl, dt, dd, p, pre, figure, hr, form, fieldset, button, aside, .callout, .card, .box, .btn, .grid";
+$rhythm-double-tags: "table,  blockquote, div:has(.video), section, article, header, footer, hr, #comments, .callout,  pre, figure, p:has(img), section, .box, .card, .small, .editorial, .feature, .hero, .full, .scroll, hr, aside, .stnd-code-block";
+$rhythm-tags: $rhythm-simple-tags + ", div, " + $rhythm-double-tags;
+
+$elements-boxed: "blockquote, pre, .alert, aside, .card, .callout, img, iframe, .outset";
+
+%surface {
+  border: none;
+  /* Raised effect for all surfaces */
+  box-shadow: var(--shadow-raised);
+  background: var(--color-surface);
+  border-radius: var(--radius);
+}
+
+%padding-text {
+  padding: var(--space-d4) var(--space-d2);
+}
+
+$stnd-scope: ":root, body" !default;
+$stnd-theme-scope: ":root" !default;