Modular Web System

Foundation

One shared shell for reusable websites

The foundation keeps structure, navigation and design tokens shared while content pages remain independent.

Visual tokens

Colors

Eight shared roles cover page, surface, text, border and navigation states.

  • --color-background
  • --color-surface
  • --color-text
  • --color-muted
  • --color-copy
  • --color-border
  • --color-inverse-text
  • --color-nav-active-bg

Text styles

Typography

The page title above is H1. This section heading is H2; the samples complete the shared reading hierarchy.

H3 · --font-size-heading-3

Clear section heading

Lead copy introduces a page without replacing its heading.

Body copy remains the default for durable reading across screen sizes.

Small text supports labels and secondary information.

Layout tokens

Spacing and measures

A compact four-step spacing scale complements the existing page gutter and section spacing.

  • --space-1
  • --space-2
  • --space-3
  • --space-4
--measure-heading

Heading measure

--measure-copy

Copy measure keeps longer text readable without filling the full content width.

Base elements

Surfaces and elements

Borders, two corner levels, one subtle elevation and the shared control height form the base set.

--radius-small

Small corner

--radius-medium

Medium corner

--shadow-small

Subtle elevation

Basic action

Interaction states

Buttons and links

Shared actions retain readable normal, hover, keyboard focus and disabled states.