This entire product site is authored, validated, and rendered with Sights.See how it works

Semantic theming

One theme changes the whole site. Content keeps its meaning.

Sights themes define roles such as brand, text, subtle surface, focus, display type, content width, section rhythm, and motion. Components consume those roles without knowing a site's literal values.

A page preview beside semantic tokens for brand, accent, inverse, and subtle surfaces

Validated foundations

The theme covers the decisions that should be shared.

A finite token contract keeps site identity expressive while preventing arbitrary selectors or page-authored visual values from becoming another escape hatch.

  • Semantic color

    Page, surface, subtle, inverse, brand, accent, text, muted text, border, focus, and contrast roles form explicit pairs.

  • Typography

    Local font faces, body and heading families, weights, nine semantic size roles, and line-height roles produce one readable scale.

  • Spacing

    Ten foundation steps plus section and gutter roles keep rhythm consistent across components and viewports.

  • Layout

    Reading and wide container widths let components share alignment without page-specific width controls.

  • Shape and focus

    Small and large radii, borders, action treatments, and a high-contrast focus role make interaction consistent.

  • Motion

    Duration, distance, easing, stagger interval, and reduced-motion behavior control the feel of declared semantic presets.

Expressive section tones

Authors choose communicative weight, not a color name.

A section may ask for default, subtle, inverse, or brand treatment when its manifest supports tone. The active theme supplies the complete contextual palette for text, borders, emphasis, and actions.

That keeps a page portable between identities. A Sights consumer can move from a restrained editorial theme to an energetic product theme without editing the structured content.

  • DefaultContinue the primary reading surface with the ordinary text hierarchy.
  • SubtleGroup supporting explanation on a quiet alternate surface.
  • InverseCreate a strong high-contrast band for proof, architecture, or operational detail.
  • BrandReserve the product identity surface for decisive openings and calls to action.

Clean separation

Meaning belongs in the page. Presentation belongs in the theme.

Meaning belongs in the page. Presentation belongs in the theme.
DecisionPage contentWhat the reader needsTheme contractHow the site expresses it
Section emphasisSemantic toneSurface and foreground colors
Information hierarchyHeading and body contentType roles and rhythm
Action importancePrimary or secondary actionButton treatment and states
Media meaningLocal source and alt textCrop, fit, radius, and layout
Motion intentReveal, stagger, or parallaxDuration, distance, easing, reduction

Theme questions

How far can a Sights theme go?

Can two Sights sites look substantially different?

Yes. Color roles, local fonts, typography scales, spacing, widths, radii, focus treatment, and motion create a strong identity. Components remain structurally consistent while the expression changes.

Can a theme contain arbitrary CSS?

No. Theme data follows a finite schema of semantic roles. Trusted site-owned component CSS may use the compiled tokens, but theme JSON is not a selector or utility-class escape hatch.

How are contrast pairs handled?

The theme declares paired foreground and surface roles where contrast can be determined. Validation rejects known invalid combinations before the site renders.

Why require complete typography and spacing scales?

Partial overrides create ambiguous foundations. A consumer may inherit the reference scales or replace an entire scale so every component resolves against one coherent system.

From expression to output

See how the themed site becomes portable production files.

Delivery keeps the static baseline durable while making every script, redirect, metadata file, and discovery artifact explicit.

Explore static-first delivery