Fluid Design System

The core design philosophy is hybrid responsive design:

Continuous Fluid Scaling: All design tokens (typography, spacing) scale continuously based on viewport size.
Breakpoint Constraints: Major structural changes or legibility limits are enforced using media queries (breakpoints).

1. Core Implementation & Units

A. Units of Measure

Base Font Size: 62.5% on the <html> element to set 1rem = 10px, simplifying the use of rem for accessibility and sizing calculations.
Sizing/Spacing: Primarily use rem and clamp() for fluid scaling. Use px only for 1px borders or other fixed visual details.
Fluid Values: Use clamp(min-size, fluid-rate, max-size) for all fluid parameters (typography, margin, padding, line height, line spacing, etc.).
- The fluid rate should be based on vw (viewport width) within a controlled range (e.g., calc(1rem + 1vw)).

B. CSS Variables (Design Tokens)

All design parameters must be exposed as CSS Variables (Custom Properties) to ensure themeability and maintainability.

Naming Convention: See Naming Systems: CSS
Theming: All colors and key component-level sizes must support a light/dark mode switch via CSS variables, following the structure established by Shadcn-Svelte’s theming system.

2. Fluid Scaling (Utopia.fyi)

The fluid scales for typography and spacing will be generated using principles derived from Utopia.fyi.

A. Fluid Typography Scale

Tooling: Use the clamp() generator from Utopia or a similar calculator.
Implementation:
- Define four fluid steps (e.g., 320px to 1500px).
- Define a minimum and maximum font size for the base body text.
- Define a typographic ratio (e.g., 1.25 for H2 from H3).

CSS Variable Example:

:root {
  /* Base Body Text: scales from 16px (1.6rem) to 18px (1.8rem) */
  --font-body: clamp(1.6rem, calc(1.5rem + 0.25vw), 1.8rem);
  /* Heading 1: scales from 32px (3.2rem) to 48px (4.8rem) */
  --font-h1: clamp(3.2rem, calc(2.5rem + 3vw), 4.8rem);
}