The Membrane Palette, rendered as a living token system.

A reference surface for work that moves between human pedagogy and digital precision. Every specimen below is bound to tokens/design-tokens.css, so the showcase changes when the system changes.

Explore the registers Read the specification

--color-terracotta --color-cream --color-teal --font-serif --space-4

Human Register

Warm, pedagogical, tactile.

Used for education, ethics, community, invitation, and voice.

Terracotta--color-terracotta

Amber--color-amber

Burgundy--color-burgundy

The Membrane

The translation surface.

Warm cream and neutral grays hold the tension without flattening it into white space.

Warm Cream--color-cream

Warm Gray--color-neutral-200

Bridge Gradient--gradient-membrane

Digital Register

Precise, systemic, deep.

Used for code, structure, navigation, analytical surfaces, and technical clarity.

Deep Teal--color-teal

Sage--color-sage

Charcoal--color-charcoal

01 / Palette

Color as semantic register, not decoration.

The palette is organized around what a surface is doing: warming a human moment, clarifying a digital one, or holding the membrane between them.

Neutral Scale

Warm grays keep structure human.

50 100 200 300 400 500 600 700 800 900

Ambient System

Glow is contextual.

Warm ambient--bg-glow-terracotta

Digital ambient--bg-glow-teal

Growth ambient--bg-glow-sage

02 / Typography

Three voices, one hierarchy.

Fraunces carries human authority, Instrument Sans keeps reading precise, and JetBrains Mono makes the builder layer visible without becoming the whole personality.

--font-serif / --text-display

Human intelligence has texture.

--font-serif / --text-h2

Headings are warm, composed, and deliberate.

--font-sans / --text-body

Body copy stays legible and precise across reference pages, presentations, code-adjacent writing, and institutional material. It should feel careful without feeling stiff.

--font-mono / --text-code

const membrane = bridge("pedagogy", "systems");

03 / Components

Patterns built from tokens, not presets.

This is not a component library. The showcase demonstrates how product surfaces should assemble buttons, cards, forms, and code panels using the same underlying vocabulary.

Interface Specimen

Warm invitation, digital confidence.

Primary action Secondary action

Reference label

Example Card

Learning platforms with institutional memory.

Cards use warm surfaces, small radii, restrained borders, and a terracotta accent only when the content asks for emphasis.

Code Specimen

design-tokens.css

/* Human to digital */
:root {
  --color-terracotta: #B35530;
  --color-cream: #FAF6EE;
  --color-teal: #1B756D;
}

04 / Rhythm

Spacing, motion, and theme behavior are part of the voice.

The 4px spacing base gives the system a measured cadence. Motion is modest, accessible, and only used to clarify interaction.

Spacing Scale

Every gap is named.

--space-28px

--space-416px

--space-832px

--space-1664px

--space-2496px

Motion Tokens

Subtle, not theatrical.

Fast150ms

Normal250ms

Slow400ms

Springease-spring

Dark Mode

Same membrane, different depth.

Light canvas

Warm cream, warm neutrals, terracotta emphasis, teal navigation.

Dark canvas

Charcoal depth, lightened accents, borders instead of heavy shadow.

Human intelligence, amplified with technological intentionality.

This showcase is a working reference for that proposition: the same CSS custom properties shape color, type, spacing, state, code, and atmosphere.