dc Isaac D'Césares

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.

.type-display
Human intelligence has texture.
.type-h2
Headings are warm, composed, and deliberate.
.type-body
Body copy stays legible and precise across reference pages, presentations, code-adjacent writing, and institutional material. It should feel careful without feeling stiff.
.type-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

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.

Status Semantics

All contrast pairs passing --color-success-text
3 tokens deprecated --color-warning-text
Build failed: contrast gate --color-error-text

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.

05 / Reference

Every token, every ratio — generated, not hand-typed.

The table and the contrast matrix below are rendered directly from tokens/membrane.tokens.json by the same build script that writes the CSS. There is no second copy to fall out of sync.

Do / Don't

Consume the semantic tier, not the primitive.

Do

background: var(--color-action-primary);

Retheme is automatic — the semantic token already carries its light-dark() pair.

Don't

background: var(--color-terracotta);

Reaches into a Tier 1 primitive directly — the exact pattern that once forced dark mode to redefine primitives per theme.

Do

color: var(--color-warning-text);

5.0:1 on --color-bg-primary — passes WCAG AA for body text.

Don't

color: var(--color-warning);

2.3:1 as text on cream — this token is a fill/badge color, not a text color.

Do

min-height: var(--size-touch-target);

Meets the 44px WCAG 2.5.5 minimum by construction.

Don't

min-height: 44px;

Same value today, but a literal — it silently drifts the moment the token changes.

Token Table

All tokens, searchable.

TokenCategoryDescription
--bg-glow-focal Glow
--bg-glow-focal-loaded Glow
--bg-glow-sage Glow
--bg-glow-teal Glow
--bg-glow-terracotta Glow
--blur-backdrop Blur Backdrop blur for translucent surfaces (nav bars, veils).
--border-accent Border
--border-default Border
--border-emphasis Border
--border-width-medium Border-width
--border-width-thick Border-width
--border-width-thin Border-width
--code-bg Code
--code-border Code
--code-comment Code
--code-function Code
--code-keyword Code
--code-number Code
--code-string Code
--code-text Code
--color-action-primary Color / Semantic Primary CTAs and key interactive accents. Replaces direct use of --color-terracotta on interactive elements.
--color-action-secondary Color / Semantic Secondary/navigational actions.
--color-amber Color / Primitive Builder energy. Fill/badge use only — fails text contrast on cream; use semantic warning-text for text.
--color-amber-10 Color / Tint
--color-amber-light Color / Primitive
--color-bg-primary Color / Semantic
--color-bg-secondary Color / Semantic
--color-bg-tertiary Color / Semantic
--color-border-default Color / Semantic
--color-border-emphasis Color / Semantic
--color-burgundy Color / Primitive Heritage depth.
--color-burgundy-10 Color / Tint
--color-burgundy-light Color / Primitive
--color-charcoal Color / Primitive Dark canvas. Never pure black.
--color-cream Color / Primitive Light canvas. Never pure white.
--color-error Color / Semantic
--color-error-text Color / Semantic
--color-focus Color / Semantic Focus indicator color. v2.0: dark mode now remaps to teal-light (raw teal was ~3:1 on charcoal).
--color-info Color / Semantic
--color-neutral-100 Color / Neutral
--color-neutral-200 Color / Neutral
--color-neutral-300 Color / Neutral
--color-neutral-400 Color / Neutral
--color-neutral-50 Color / Neutral
--color-neutral-500 Color / Neutral
--color-neutral-600 Color / Neutral
--color-neutral-700 Color / Neutral
--color-neutral-800 Color / Neutral
--color-neutral-900 Color / Neutral
--color-overlay-bg Color / Semantic Scrims and image-readability layers. Intentionally identical in both modes.
--color-sage Color / Primitive Growth. Fill/icon use; use semantic success-text for text on light surfaces.
--color-sage-10 Color / Tint
--color-sage-light Color / Primitive
--color-selection Color / Semantic Text selection highlight.
--color-success Color / Semantic Fills, icons, large text (≥3:1). For body-size text use success-text.
--color-success-text Color / Semantic
--color-teal Color / Primitive Secondary brand. The digital register: technology, depth, Rio's ocean.
--color-teal-08 Color / Tint
--color-teal-10 Color / Tint
--color-teal-12 Color / Tint
--color-teal-20 Color / Tint
--color-teal-dark Color / Primitive
--color-teal-light Color / Primitive
--color-terracotta Color / Primitive Primary brand. The human register: earth, hands, making, Brazilian clay.
--color-terracotta-10 Color / Tint
--color-terracotta-20 Color / Tint
--color-terracotta-dark Color / Primitive
--color-terracotta-light Color / Primitive
--color-text-accent Color / Semantic
--color-text-on-accent Color / Semantic v2.0: flips to charcoal in dark mode — white on the lightened terracotta was 3.3:1.
--color-text-primary Color / Semantic
--color-text-secondary Color / Semantic
--color-text-tertiary Color / Semantic Metadata, placeholders. v2.0: darkened from neutral-400 (2.5:1) to pass WCAG AA 4.5:1 on bg-primary and bg-secondary.
--color-warning Color / Semantic Fills and badges with dark text on top. Never use as text on light surfaces — 2.3:1.
--color-warning-text Color / Semantic
--container-full Container
--container-lg Container
--container-md Container
--container-sm Container
--container-xl Container
--duration-fast Duration
--duration-normal Duration
--duration-slow Duration
--duration-slower Duration
--ease-default Ease
--ease-in Ease
--ease-out Ease
--ease-spring Ease
--elevation-modal Elevation
--elevation-overlay Elevation
--elevation-raised Elevation
--focus-ring Focus
--focus-ring-offset Focus
--font-mono Font
--font-sans Font
--font-serif Font
--gradient-depth Gradient
--gradient-divider Gradient
--gradient-membrane Gradient Signature gradient, human → digital. v2.0: endpoints now lighten in dark mode per spec §12.2.
--gradient-subtle Gradient
--gradient-warmth Gradient
--leading-body Leading
--leading-body-lg Leading
--leading-code Leading
--leading-display Leading
--leading-heading Leading
--leading-label Leading
--leading-small Leading
--leading-subheading Leading
--opacity-heavy Opacity
--opacity-light Opacity
--opacity-medium Opacity
--opacity-overlay Opacity
--opacity-subtle Opacity
--photo-border-radius Photo
--photo-dim-dark Photo Recommended brightness() factor for photos on dark surfaces (spec §12.2 rule 6). Applied by the consumer, not automatically.
--photo-shadow Photo
--photo-warmth Photo
--radius-full Radius
--radius-lg Radius
--radius-md Radius
--radius-sm Radius
--radius-xl Radius
--shadow-glow-teal Shadow v2.0: dark variant added (was unmapped).
--shadow-glow-warm Shadow
--shadow-lg Shadow
--shadow-md Shadow
--shadow-sm Shadow
--site-margin Layout
--size-icon-lg Size Feature icons.
--size-icon-md Size Standard icons.
--size-icon-sm Size Inline icons.
--size-icon-xl Size Hero icons.
--size-nav Size Navigation bar height, desktop.
--size-nav-mobile Size Navigation bar height, mobile.
--size-touch-target Size WCAG 2.5.5 minimum interactive target.
--space-1 Space
--space-10 Space
--space-12 Space
--space-16 Space
--space-2 Space
--space-20 Space
--space-24 Space
--space-3 Space
--space-32 Space
--space-4 Space
--space-5 Space
--space-6 Space
--space-8 Space
--state-disabled-opacity State
--text-base Text Compatibility alias.
--text-body Text
--text-body-lg Text
--text-code Text
--text-display Text
--text-h1 Text
--text-h2 Text
--text-h3 Text
--text-h4 Text
--text-lg Text Compatibility alias.
--text-md Text Compatibility alias.
--text-sm Text Compatibility alias.
--text-small Text
--text-xl Text Compatibility alias.
--text-xs Text
--tracking-body Tracking
--tracking-display Tracking
--tracking-heading Tracking
--tracking-label Tracking
--tracking-small Tracking
--tracking-subheading Tracking
--transition-default Transition
--transition-fast Transition
--transition-slow Transition
--weight-bold Weight
--weight-medium Weight
--weight-regular Weight
--weight-semibold Weight
--z-base Z
--z-dropdown Z
--z-modal Z
--z-nav Z
--z-overlay Z
--z-sticky Z
--z-toast Z
--z-tooltip Z

Contrast Matrix

40 pairs, gate-checked on every build.

Generated from the exact same computation that fails npm run build:tokens if a pair regresses — see scripts/build-tokens.mjs.

ModeForegroundBackgroundRatioMinimumStatus
light --color-text-primary --color-bg-primary 13.93:1 7.0:1 Pass
light --color-text-primary --color-bg-secondary 12.64:1 7.0:1 Pass
light --color-text-secondary --color-bg-primary 6.73:1 4.5:1 Pass
light --color-text-secondary --color-bg-secondary 6.10:1 4.5:1 Pass
light --color-text-tertiary --color-bg-primary 5.12:1 4.5:1 Pass
light --color-text-tertiary --color-bg-secondary 4.64:1 4.5:1 Pass
light --color-text-accent --color-bg-primary 5.11:1 4.5:1 Pass
light --color-text-on-accent --color-action-primary 4.93:1 4.5:1 Pass
light --color-action-primary --color-bg-primary 4.57:1 3.0:1 Pass
light --color-action-secondary --color-bg-primary 5.11:1 3.0:1 Pass
light --color-focus --color-bg-primary 5.11:1 3.0:1 Pass
light --color-focus --color-bg-secondary 4.64:1 3.0:1 Pass
light --color-success --color-bg-primary 3.68:1 3.0:1 Pass
light --color-success-text --color-bg-primary 5.68:1 4.5:1 Pass
light --color-success-text --color-bg-secondary 5.15:1 4.5:1 Pass
light --color-warning-text --color-bg-primary 4.96:1 4.5:1 Pass
light --color-warning-text --color-bg-secondary 4.50:1 4.5:1 Pass
light --color-error --color-bg-primary 4.69:1 3.0:1 Pass
light --color-error-text --color-bg-primary 5.47:1 4.5:1 Pass
light --color-error-text --color-bg-secondary 4.97:1 4.5:1 Pass
dark --color-text-primary --color-bg-primary 14.48:1 7.0:1 Pass
dark --color-text-primary --color-bg-secondary 13.00:1 7.0:1 Pass
dark --color-text-secondary --color-bg-primary 6.39:1 4.5:1 Pass
dark --color-text-secondary --color-bg-secondary 5.74:1 4.5:1 Pass
dark --color-text-tertiary --color-bg-primary 5.23:1 4.5:1 Pass
dark --color-text-tertiary --color-bg-secondary 4.69:1 4.5:1 Pass
dark --color-text-accent --color-bg-primary 6.45:1 4.5:1 Pass
dark --color-text-on-accent --color-action-primary 5.18:1 4.5:1 Pass
dark --color-action-primary --color-bg-primary 5.18:1 3.0:1 Pass
dark --color-action-secondary --color-bg-primary 6.45:1 3.0:1 Pass
dark --color-focus --color-bg-primary 6.45:1 3.0:1 Pass
dark --color-focus --color-bg-secondary 5.79:1 3.0:1 Pass
dark --color-success --color-bg-primary 7.78:1 3.0:1 Pass
dark --color-success-text --color-bg-primary 7.78:1 4.5:1 Pass
dark --color-success-text --color-bg-secondary 6.98:1 4.5:1 Pass
dark --color-warning-text --color-bg-primary 9.06:1 4.5:1 Pass
dark --color-warning-text --color-bg-secondary 8.13:1 4.5:1 Pass
dark --color-error --color-bg-primary 5.14:1 3.0:1 Pass
dark --color-error-text --color-bg-primary 5.14:1 4.5:1 Pass
dark --color-error-text --color-bg-secondary 4.61:1 4.5:1 Pass
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.