Design System

Source-of-truth examples for Anne Spalter Studios: cosmic tokens, typography, layout rules, logo usage, motion, and reusable public components.

Principles

Artwork Leads

The interface stays quiet. Color comes primarily from Anne's work; UI color is reserved for links, status, and small accents.

Scale Has Limits

Use a compact set of type and spacing steps so hierarchy is clear without billboard-scale headers on ordinary pages.

Readable Archives

Legacy text, embeds, and news entries must fit the same reading measure, link treatment, and mobile rules as new content.

Components, Then Pages

Build pages from repeatable cards, bands, forms, and media blocks. One-off page styling should be the exception.

Research inputs: NN/g visual-design principles, NN/g usability heuristics, USWDS design tokens, USWDS accessible color, Brad Frost's Atomic Design, and Vandelay's designer list.

Compliance

Source of Truth

Token foundations live in static/css/design-system.css. Public components and approved cosmic rules live in static/css/site.css. This page shows the contract those files expose.

Type Scale

Homepage display type caps at 50px. Page titles cap at 36px, section titles at 30px, rich-text headings at 32px, and ordinary text at 18px.

No Inline Presentation

Templates do not carry ad hoc inline styles. Token demos use named classes, and imported legacy markup is normalized by the rich-text rules.

Guardrails

The visual check scans key templates for overflow, logo scale, oversized text, card counts, media bounds, component contracts, and non-FX inline presentation.

Enforced rule: ordinary visible text must stay at or below 38px, with display-sized text limited to intentional homepage and design-system examples.
Public CSS contract: type scale, spacing, color, borders, shadows, cards, buttons, form controls, motion, media, site chrome, archive controls, and legacy rich text must be expressed through shared tokens and component classes.

Tokens

Color

Ink--color-ink
Paper--color-paper
Surface--color-surface
Accent--color-accent
Link--color-link

Spacing

These bars show the spacing steps used for page padding, grid gaps, section rhythm, form spacing, and card interiors. Layouts should use these tokens instead of one-off margins.

--space-2 --space-3 --space-4 --space-5 --space-6 --space-7

Type Scale Examples

Display

Anne Spalter

--type-display Page title

Artwork

--type-title Section title

Selected Work

--type-section Rich text h1

Anne Morgan Spalter

--type-content-h1 Card title

Future Trains

--type-card-title Eyebrow/meta

Portfolio

--type-xs / .eyebrow UI/body

Studio updates and archive notes use readable body text.

--type-base

Typography

Display Typeface Clash Display is used for hero wordmarks, navigation, and cosmic card titles. System sans remains the practical UI fallback for metadata, forms, and controls.
Body Typeface Georgia is used for body copy. The serif texture gives short artist statements and archive text a more typographic, art-book character.
Scale Strategy Display type is capped and reserved for the homepage. Ordinary pages use compact titles, a 68-character reading measure, and generous line height.
Display

Speculative landscapes

Clash Display / --type-display / homepage only / max 50px
Page title

News

System sans / --type-title / page heroes / max 36px
Section title

Selected Work

System sans / --type-section / page sections / max 30px
Eyebrow/meta

Portfolio

System sans / --type-xs / uppercase metadata labels only
Body

Anne Spalter is a visual artist and digital art pioneer whose practice moves between painting, animation, printmaking, sculpture, and immersive symbolic landscapes.

Georgia / 16-18px / 1.55-1.65 line height

Components

Form Controls

Message received.

Page Hero

Artwork

Filterable archive view for artwork, named series, dates, and media.

2026

Status & Empty States

Message received.

No artworks match your filters

Try removing a filter or changing your search term.

Homepage Hero

Anne Spalter

Speculative landscapes, digital systems, painting, animation, and sculptural forms from a pioneer of digital fine art.

Artwork Browser Controls

Showing 12 of 141 artworks

Statement Band

Digital art, mythic landscapes, and speculative worlds.

Anne Spalter is a visual artist and digital art pioneer whose work moves between painting, animation, printmaking, sculpture, and immersive symbolic landscapes.

Read biography

Artwork Cards

Collection List Row

Title Date Medium Dimensions
Magical Weekend Magical Weekend 2026 Video Future Landscapes

Artwork Detail Metadata

Legacy News Card

MuseFrame Women's Month Feature
2026-03-29

MuseFrame Women's Month Feature

MuseFrame: Women's Month Feature In March 2026, Anne Spalter was featured as part of Women's Month on MuseFrame, a collaboration with Art & Vault and theHUGxyz. Curated by Farrah Carbonell and powered by Art Domains, the feature showcases Anne's vibrant...

Read update

Instagram Feed Card

Instagram embed

Cosmic & Motion

Sky Surface

Sky--sky
Star Accent 1--star-accent-1
Star Accent 2--star-accent-2
Star Accent 3--star-accent-3
Link on Sky--link-on-sky
Control BG on Sky--control-bg-on-sky
Control Border on Sky--control-border-on-sky

Motion Tokens

Settle

--ease-settle Comet

--ease-comet / --dur-comet Twinkle

--dur-twinkle Cooldown

8 hours between comet triggers.

--comet-cooldown-ms

Display Font

--font-display — Clash Display with sans fallback; used for hero headline on the starfield canvas.

Page Patterns

HomepageRandom static artwork hero, comet wordmark, and four-column artwork grid below.Open page WorkFilterable square artwork cards with medium, named series, and five-year date ranges.Open page NewsInstagram studio updates contained on their own page, not mixed into the homepage grid.Open page AboutCompact page hero plus one readable content column with normalized legacy embeds.Open page ContactTwo-column studio inquiry page with expressive cosmic form controls.Open page