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.
Accessibility floor: WCAG 2.2 AA. All small (≤14px) text passes 4.5:1 on its rendered background — the --color-accent-text and --color-eyebrow-on-sky tokens exist specifically to clear this on paper and cosmic surfaces. Interactive targets meet the 24px minimum (SC 2.5.8); the .backlink rule pins this explicitly. prefers-reduced-motion: reduce is honored across the starfield, comet, hero video, autoplay artwork videos, and card-hover transforms.

Tokens

Color

Paper-mode (light) surfaces and text. --color-accent is the brand red used for fills and borders; --color-accent-text is the slightly darkened variant used for small text (12px eyebrow labels) so it clears WCAG AA on --color-paper.

Ink--color-ink
Paper--color-paper
Surface--color-surface
Accent (fills)--color-accent
Accent (text)--color-accent-text
Link--color-link
Header glass--header-glass-bg

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 (self-hosted, weights 600/700) is reserved for the homepage hero wordmark and any element wired through --font-display. The cosmic-theme nav also routes through it for letterform continuity.
UI Sans DM Sans (self-hosted variable woff2, latin + latin-ext, regular + italic) covers headings, eyebrows, buttons, nav, labels, and any element using --font-sans. Default body weight is 500 so cascaded sans descendants get a touch of heft instead of bare 400.
Body Typeface Newsreader (self-hosted variable woff2, latin + latin-ext, regular + italic) is the body text family via --font-serif. Designed for long-form screen reading with an optical-size axis (6..72); pairs with DM Sans by design. Georgia is the system fallback.
Scale Strategy Display type is capped and reserved for the homepage. Ordinary pages use compact titles, a 68-character reading measure (--measure), and generous line height.
Display

Speculative landscapes

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

News

DM Sans 800 / --type-title / page heroes / max 36px
Section title

Selected Work

DM Sans 800 / --type-section / page sections / max 30px
Eyebrow/meta

Portfolio

DM Sans 800 / --type-xs / .eyebrow / 12px uppercase, 0.18em tracking
Body

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

Newsreader (variable, opsz 6..72) / 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 (cosmic-dark only)

These tokens activate when the body is in cosmic mode without theme-light. The theme-light class re-maps each on-sky token to its paper-mode equivalent in design-system.css, so a single rule referencing --ink-on-sky stays legible in both modes.

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
Eyebrow on Sky--color-eyebrow-on-sky
Control BG on Sky--control-bg-on-sky
Control Border on Sky--control-border-on-sky

Theme Switching

The body class defaults to theme-cosmic. static/js/theme-boot.js adds theme-light when localStorage as-theme=light is set, before first paint. :root declares color-scheme: light dark so OS chrome (scrollbars, native pickers) flips with the active theme. Mobile address-bar tint follows the OS preference via per-scheme <meta name="theme-color"> tags. The frosted-glass sticky header uses --header-glass-bg, which the theme-light block remaps from cosmic sky to low-alpha paper.

Motion Tokens

Settle

--ease-settle Comet

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

--dur-twinkle Cooldown

8 hours between comet triggers.

--comet-cooldown-ms

Starfield

Density scales with viewport area: 60 stars on a phone, up to 160 on ultra-wide (area / 10000, clamped). Sizes 1.0–2.3px, peak twinkle opacity 0.62, cadence 3.4–7.2s per cycle with 0–5.5s entry delay. 9% of stars take an accent tint (--star-accent-1/2/3) at higher base opacity. prefers-reduced-motion: reduce drops all animation and pins opacity to a static value via the JS branch in site.js.

Display Font

--font-display — Clash Display with the DM Sans + system stack as fallback; used for the homepage hero wordmark on the starfield canvas and the cosmic nav.

Page Patterns

HomepageRandom static artwork hero, comet wordmark, and statement band 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