Skip to content
Isaac D'Césares

The Membrane Palette, rendered as a living design system.

Tokens, a component library and a contrast gate for work that moves between human pedagogy and digital precision. Every specimen on this page is the real library — link one stylesheet and write HTML.

Browse components Read the specification
index.htmlInstall
<!-- The whole system: tokens + base + components -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/idcesares/The-Membrane-Palette@2.2.0/membrane.css">

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
Steel Blue · data only--color-chart-5
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. Components only ever see the semantic tier.

Neutral Scale

Warm grays keep structure human.

50 100 200 300 400 500 600 700 800 900

Register Pairs

Text and wash, gate-checked together.

--color-human-text --color-digital-text
success warning error info

Every -text token is verified at ≥4.5:1 on its own -bg wash, on the page, and on cards — in both modes.

Data Colors

Six series, validated — not picked.

chart-1Terracotta
chart-2Teal
chart-3Amber
chart-4Burgundy
chart-5Steel blue
chart-6Green

Each step was searched within its brand hue, then checked as a set in both modes: neighbors stay ≥ 11.5 ΔE apart under protanopia and deuteranopia, ≥ 16 for full-color vision, and every series is ≥ 3:1 on page and cards. Assign in order; never cycle. See Chart.

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--text-display · Fraunces 700
Human intelligence has texture.
.type-h1--text-h1 · Fraunces 700
Translation, not decoration.
.type-h2--text-h2 · Fraunces 600
Headings are warm, composed, and deliberate.
.type-h3--text-h3 · Fraunces 600
Learning platforms with institutional memory
.type-h4--text-h4 · Instrument Sans 600
The bridge from headline to body
.type-body-lg--text-body-lg · Instrument Sans 400
Lead paragraphs open a section with a little more air.
.type-body--text-body · Instrument Sans 400
Body copy stays legible and precise across reference pages, presentations, code-adjacent writing, and institutional material. It should feel careful without feeling stiff.
.type-small--text-small · Instrument Sans 400
Captions, metadata, and supporting detail.
.type-label--text-xs · Instrument Sans 500, uppercase
Overline · navigational landmark
.type-code--text-code · JetBrains Mono 400
const membrane = bridge("pedagogy", "systems");

03 / 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
In-outease-in-out

Dark Mode

Same membrane, different depth.

Both cards hold identical markup. Each sets data-theme on itself, and every token inside resolves to that mode — no override blocks, no duplicated hex values.

Light canvas

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

Human Digital

Contrast gate passing

Dark canvas

Charcoal depth, lightened accents, deeper shadows, lighter elevated surfaces.

Human Digital

Contrast gate passing

04 / Components

A component library made of tokens.

Framework-free components in one stylesheet. Classes name the thing (mp-button), data-* attributes choose the option, and ARIA drives the state — so the look and what assistive tech hears can't disagree.

Composed Specimen

One form, nine components, zero custom CSS.

ID

AI Literacy for Educators

with Isaac D'Césares · 6 weeks

Enrolling

Materials arrive here.

Format

Composed Specimen

Progress, at a glance.

Educators trained

3,214

18% vs. last year

64%

Bring one real problem

Week one starts from your classroom, not from the tool.

ID AL AI
Pedagogy LLMs

Layout

Text

Reference for Text

Tone (muted, subtle, human, digital) and reading measure for running copy — combine with the .type-* size classes instead of writing inline color or max-width.

Classes
.mp-text
data-tone
muted · subtle · human · digital
data-measure
boolean

Tones and measure

Workshop

AI literacy, from the classroom up

Six weeks for educators who want to use AI with intention — warm in how we teach, precise in how we build.

Updated 3 days ago · v2.1

View HTML
Text · Tones and measure
<div class="mp-stack" data-gap="2">
  <p class="mp-text type-label" data-tone="human">Workshop</p>
  <h3 class="type-h3">AI literacy, from the classroom up</h3>
  <p class="mp-text type-body-lg" data-tone="muted" data-measure>Six weeks for educators who want to use AI with intention — warm in how we teach, precise in how we build.</p>
  <p class="mp-text type-small" data-tone="subtle">Updated 3 days ago · <span class="mp-text" data-tone="digital">v2.1</span></p>
</div>

05 / Compositions

Complete compositions

Choose a reference by what someone needs to understand or do. These references connect the same components into visual compositions and complete tasks, including bilingual exploration and a form journey.

Workshop opening with a teaching question, preparation panel and learning journey. Workshop opening with a teaching question, preparation panel and learning journey.

Invite someone to learn

Workshop

A human opening, an ordered path and practical preparation. Use it to introduce a learning experience.

View workshop Source for workshop
Form journey: an illustrative bilingual working reference. Form journey: an illustrative bilingual working reference.

Complete a task

Form journey

Enter a learning goal, correct errors, review and edit your choices, then try a local confirmation with deliberate failure and retry.

View form journey Source for form journey
Visual language specimen combining an organic trace with precise routes, editorial typography and warm surfaces. Visual language specimen combining an organic trace with precise routes, editorial typography and warm surfaces.

Compose with original artwork

Visual language

Organic gestures meet precise frames across a website opening, presentation cover and teaching card. Includes six original constructions with editable SVG downloads.

View visual language Source for visual language

All six contain illustrative content. See the composition guide for adaptation notes, creative freedom and the visual review rubric, and the visual language guide for motifs, arrangements and editable assets.

Complete task patterns · Accessibility evidence and remaining checks

06 / Reference

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

The tables below are rendered from tokens/membrane.tokens.json by the same build that writes the CSS, and the component gallery above from each component's README. There is no second copy to fall out of sync.

Do / Don't

The rules the build enforces.

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

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

Don't 
background: var(--color-terracotta);

A Tier 1 primitive never changes with the theme. Component CSS that does this fails the build.

Do 
<button class="mp-button" aria-busy="true">

State comes from ARIA: the spinner appears and assistive tech hears "busy".

Don't 
<button class="mp-button is-loading">

Invented state classes do nothing visually and announce nothing.

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

Gate-checked at ≥4.5:1 on page, card and warning-wash surfaces — 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 
<a class="mp-button" data-variant="secondary">

Options are data-* attributes with a closed set of values, listed in the manifest.

Don't 
<a class="mp-button mp-button--outline">

That class doesn't exist. The docs lint rejects any class or value the CSS doesn't implement.

For Agents

Readable by people and by models.

The component API and index are generated from source. Composition guidance adds reviewed examples of complete pieces.

manifest.jsonexcerpt
{
  "slug": "button",
  "attributes": {
    "data-variant": ["secondary", "ghost", "danger"],
    "data-size": ["sm", "lg"]
  },
  "states": [":disabled", "[aria-busy=\"true\"]", …]
}

Token Table

All tokens, searchable.

PreviewTokenCategoryDescription
--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 v2.1: lightened from #7D776E (3.7:1 on code-bg, failing WCAG AA for text) to 5.2:1.
--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-primary-hover Color / Semantic Hover/pressed fill for primary actions. Mixes toward text-primary, so it darkens in light mode and lightens in dark mode — contrast with text-on-accent always increases.
--color-action-secondary Color / Semantic Secondary/navigational actions.
--color-action-secondary-hover Color / Semantic Hover/pressed fill for secondary actions.
--color-amber Color / Primitive Making 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-active Color / Semantic Neutral pressed/selected wash. Pair with bg-hover.
--color-bg-elevated Color / Semantic Surfaces that float above the page: dialogs, popovers, menus. In dark mode elevation reads as a lighter surface, not just a deeper shadow.
--color-bg-hover Color / Semantic Neutral hover wash for quiet controls (ghost buttons, nav links, table rows, accordion summaries). Works on any surface because it is a translucent overlay.
--color-bg-inverse Color / Semantic Inverted surface for tooltips and high-attention chips. Pair with text-inverse.
--color-bg-primary Color / Semantic Page background — the membrane surface.
--color-bg-secondary Color / Semantic Cards and alternating sections.
--color-bg-tertiary Color / Semantic Nested containers, neutral tag fills, progress tracks.
--color-border-default Color / Semantic Decorative dividers and card outlines. Too faint to be the only boundary of a control — use border-input there.
--color-border-emphasis Color / Semantic Emphasized separation; hover border for quiet surfaces.
--color-border-input Color / Semantic Boundary of form controls (inputs, checkboxes, switches). ≥3:1 against page and card surfaces per WCAG 1.4.11 — border-default is decorative and too faint to be a control's only boundary.
--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-chart-1 Color / Semantic Categorical chart series 1 (terracotta — human register; the brand's lead series). Assign in order, never cycle; validated as a set (adjacent CVD ΔE ≥ 11.5, ≥3:1 on page and cards in both modes).
--color-chart-2 Color / Semantic Categorical chart series 2 (teal — digital register). Assign in order, never cycle; validated as a set (adjacent CVD ΔE ≥ 11.5, ≥3:1 on page and cards in both modes).
--color-chart-3 Color / Semantic Categorical chart series 3 (amber). Assign in order, never cycle; validated as a set (adjacent CVD ΔE ≥ 11.5, ≥3:1 on page and cards in both modes).
--color-chart-4 Color / Semantic Categorical chart series 4 (burgundy). Assign in order, never cycle; validated as a set (adjacent CVD ΔE ≥ 11.5, ≥3:1 on page and cards in both modes).
--color-chart-5 Color / Semantic Categorical chart series 5 (steel blue). Assign in order, never cycle; validated as a set (adjacent CVD ΔE ≥ 11.5, ≥3:1 on page and cards in both modes).
--color-chart-6 Color / Semantic Categorical chart series 6 (green). Assign in order, never cycle; validated as a set (adjacent CVD ΔE ≥ 11.5, ≥3:1 on page and cards in both modes).
--color-cream Color / Primitive Light canvas. Never pure white.
--color-digital-bg Color / Semantic Digital-register wash. Pair with digital-text.
--color-digital-text Color / Semantic Digital-register text: tech-stack tags, code-adjacent labels. ≥4.5:1 on page, card, and digital-bg surfaces.
--color-error Color / Semantic Error fills, icons, invalid-control borders, danger buttons (≥3:1).
--color-error-bg Color / Semantic Error surface. Pair with error-text.
--color-error-hover Color / Semantic Hover/pressed fill for destructive actions.
--color-error-text Color / Semantic Error body text and validation messages (≥4.5:1 on page, card, and error-bg).
--color-focus Color / Semantic Focus indicator color. v2.0: dark mode now remaps to teal-light (raw teal was ~3:1 on charcoal).
--color-human-bg Color / Semantic Human-register wash for tags, avatars, callouts. Pair with human-text.
--color-human-text Color / Semantic Human-register text: overlines, tags, pull quotes, active nav. ≥4.5:1 on page, card, and human-bg surfaces.
--color-info Color / Semantic Informational fills and icons.
--color-info-bg Color / Semantic Informational surface. Pair with info-text.
--color-info-text Color / Semantic Informational body text (4.5:1 on page, card, and info-bg).
--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-bg Color / Semantic Success surface for alerts and badges. Pair with success-text.
--color-success-text Color / Semantic Success body text (≥4.5:1 on page, card, and success-bg).
--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 Inline links and interactive text.
--color-text-inverse Color / Semantic Text on bg-inverse.
--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 Primary body text and headings.
--color-text-secondary Color / Semantic Supporting text: ledes, descriptions, captions.
--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-bg Color / Semantic Warning surface. Pair with warning-text.
--color-warning-text Color / Semantic Warning body text (≥4.5:1 on page, card, and warning-bg).
--container-full Container
--container-lg Container
--container-md Container
--container-sm Container
--container-xl Container
--duration-fast Duration Micro-interactions: hover color, press, exits.
--duration-loop Duration Period of continuous loading loops (progress, skeleton; spinners turn at half). New in v2.1 — replaces literal seconds in components.
--duration-normal Duration Standard: entrances, state changes, popovers.
--duration-slow Duration Larger surfaces: card lift, section reveals.
--duration-slower Duration Page-level: view transitions, hero entrance. Stays 150ms under reduced motion for essential feedback.
--ease-default Ease General purpose: hover and color changes.
--ease-in Ease Leaving: accelerates away (a respectful exit).
--ease-in-out Ease State changes that neither enter nor leave (§8.1 rule 3). New in v2.1 — the rule existed without a token.
--ease-out Ease Entering: decelerates into place (welcoming).
--ease-spring Ease Playful overshoot for small toggles only (the switch thumb). Never on surfaces or text.
--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
--measure Layout Maximum line length for body copy (DESIGN-SYSTEM.md §3.5 rule 5).
--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-control-lg Size Prominent control height (hero CTAs).
--size-control-md Size Default control height (buttons, inputs, tabs). Equals touch-target.
--size-control-sm Size Compact control height for dense, pointer-driven UI. Components grow it to control-md on coarse pointers.
--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 Minimum interactive target (WCAG 2.5.5 AAA; the AA floor in 2.5.8 is 24px).
--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 deprecated 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 deprecated Text Compatibility alias.
--text-md deprecated Text Compatibility alias.
--text-sm deprecated Text Compatibility alias.
--text-small Text
--text-xl deprecated 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-enter Transition Something appearing: dialogs, menus, toasts, tooltips. New in v2.1.
--transition-exit Transition Something leaving — faster than its entrance, so the interface never waits on a goodbye. New in v2.1.
--transition-fast Transition
--transition-slow Transition
--transition-state Transition A control changing state in place: switch, checkbox, tab indicator, chevron. New in v2.1.
--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

Every pair, both modes, on every build.

Generated from the exact computation that fails npm run build:tokens if a pair regresses — including hover fills, status washes and code syntax colors. See the GATE list in 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-primary --color-bg-elevated 13.93:1 7.0:1 Pass
light --color-text-primary --color-bg-active 11.52: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-secondary --color-bg-tertiary 5.32:1 4.5:1 Pass
light --color-text-secondary --color-bg-elevated 6.73:1 4.5:1 Pass
light --color-text-secondary --color-bg-hover 6.04: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-tertiary --color-bg-elevated 5.12:1 4.5:1 Pass
light --color-text-accent --color-bg-primary 5.11:1 4.5:1 Pass
light --color-text-accent --color-bg-secondary 4.64:1 4.5:1 Pass
light --color-text-inverse --color-bg-inverse 12.64:1 4.5:1 Pass
light --color-text-on-accent --color-action-primary 4.93:1 4.5:1 Pass
light --color-text-on-accent --color-action-primary-hover 5.92:1 4.5:1 Pass
light --color-text-on-accent --color-action-secondary 5.51:1 4.5:1 Pass
light --color-text-on-accent --color-action-secondary-hover 6.51:1 4.5:1 Pass
light --color-text-on-accent --color-error 5.05:1 4.5:1 Pass
light --color-text-on-accent --color-error-hover 6.06: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-action-secondary --color-bg-secondary 4.64:1 3.0:1 Pass
light --color-action-secondary --color-bg-tertiary 4.04:1 3.0:1 Pass
light --color-border-input --color-bg-primary 4.11:1 3.0:1 Pass
light --color-border-input --color-bg-secondary 3.73:1 3.0:1 Pass
light --color-border-input --color-bg-elevated 4.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-focus --color-bg-elevated 5.11:1 3.0:1 Pass
light --color-human-text --color-bg-primary 6.26:1 4.5:1 Pass
light --color-human-text --color-bg-secondary 5.68:1 4.5:1 Pass
light --color-human-text --color-human-bg 5.51:1 4.5:1 Pass
light --color-human-text --color-human-bg 5.02:1 4.5:1 Pass
light --color-digital-text --color-bg-primary 7.23:1 4.5:1 Pass
light --color-digital-text --color-bg-secondary 6.56:1 4.5:1 Pass
light --color-digital-text --color-digital-bg 6.32:1 4.5:1 Pass
light --color-digital-text --color-digital-bg 5.76:1 4.5: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-success-text --color-success-bg 5.09:1 4.5:1 Pass
light --color-success-text --color-success-bg 4.65:1 4.5:1 Pass
light --color-warning-text --color-bg-primary 6.08:1 4.5:1 Pass
light --color-warning-text --color-bg-secondary 5.51:1 4.5:1 Pass
light --color-warning-text --color-warning-bg 5.63:1 4.5:1 Pass
light --color-warning-text --color-warning-bg 5.15: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 6.20:1 4.5:1 Pass
light --color-error-text --color-bg-secondary 5.63:1 4.5:1 Pass
light --color-error-text --color-error-bg 5.42:1 4.5:1 Pass
light --color-error-text --color-error-bg 4.94:1 4.5:1 Pass
light --color-info-text --color-bg-primary 7.23:1 4.5:1 Pass
light --color-info-text --color-info-bg 6.32:1 4.5:1 Pass
light --color-info-text --color-info-bg 5.76:1 4.5:1 Pass
light --color-success-text --color-bg-elevated 5.68:1 4.5:1 Pass
light --color-warning-text --color-bg-elevated 6.08:1 4.5:1 Pass
light --color-error-text --color-bg-elevated 6.20:1 4.5:1 Pass
light --color-text-primary --color-bg-hover 11.31:1 7.0:1 Pass
light --color-text-primary --color-bg-active 11.52:1 7.0:1 Pass
light --color-text-secondary --color-bg-elevated 6.73:1 4.5:1 Pass
light --color-focus --color-bg-active 4.23:1 3.0:1 Pass
light --color-chart-1 --color-bg-primary 4.57:1 3.0:1 Pass
light --color-chart-1 --color-bg-secondary 4.15:1 3.0:1 Pass
light --color-chart-2 --color-bg-primary 3.61:1 3.0:1 Pass
light --color-chart-2 --color-bg-secondary 3.27:1 3.0:1 Pass
light --color-chart-3 --color-bg-primary 3.86:1 3.0:1 Pass
light --color-chart-3 --color-bg-secondary 3.50:1 3.0:1 Pass
light --color-chart-4 --color-bg-primary 6.00:1 3.0:1 Pass
light --color-chart-4 --color-bg-secondary 5.44:1 3.0:1 Pass
light --color-chart-5 --color-bg-primary 3.80:1 3.0:1 Pass
light --color-chart-5 --color-bg-secondary 3.45:1 3.0:1 Pass
light --color-chart-6 --color-bg-primary 3.62:1 3.0:1 Pass
light --color-chart-6 --color-bg-secondary 3.29:1 3.0:1 Pass
light --code-text --code-bg 12.04:1 4.5:1 Pass
light --code-keyword --code-bg 5.16:1 4.5:1 Pass
light --code-string --code-bg 7.95:1 4.5:1 Pass
light --code-function --code-bg 8.64:1 4.5:1 Pass
light --code-comment --code-bg 5.11:1 4.5:1 Pass
light --code-number --code-bg 8.18: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-primary --color-bg-elevated 12.50:1 7.0:1 Pass
dark --color-text-primary --color-bg-active 11.12: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-secondary --color-bg-tertiary 5.01:1 4.5:1 Pass
dark --color-text-secondary --color-bg-elevated 5.52:1 4.5:1 Pass
dark --color-text-secondary --color-bg-hover 5.53: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-tertiary --color-bg-elevated 4.51:1 4.5:1 Pass
dark --color-text-accent --color-bg-primary 6.45:1 4.5:1 Pass
dark --color-text-accent --color-bg-secondary 5.79:1 4.5:1 Pass
dark --color-text-inverse --color-bg-inverse 12.64:1 4.5:1 Pass
dark --color-text-on-accent --color-action-primary 5.18:1 4.5:1 Pass
dark --color-text-on-accent --color-action-primary-hover 6.22:1 4.5:1 Pass
dark --color-text-on-accent --color-action-secondary 6.45:1 4.5:1 Pass
dark --color-text-on-accent --color-action-secondary-hover 7.44:1 4.5:1 Pass
dark --color-text-on-accent --color-error 5.14:1 4.5:1 Pass
dark --color-text-on-accent --color-error-hover 6.19: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-action-secondary --color-bg-secondary 5.79:1 3.0:1 Pass
dark --color-action-secondary --color-bg-tertiary 5.06:1 3.0:1 Pass
dark --color-border-input --color-bg-primary 3.88:1 3.0:1 Pass
dark --color-border-input --color-bg-secondary 3.48:1 3.0:1 Pass
dark --color-border-input --color-bg-elevated 3.35: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-focus --color-bg-elevated 5.57:1 3.0:1 Pass
dark --color-human-text --color-bg-primary 6.57:1 4.5:1 Pass
dark --color-human-text --color-bg-secondary 5.89:1 4.5:1 Pass
dark --color-human-text --color-human-bg 5.77:1 4.5:1 Pass
dark --color-human-text --color-human-bg 5.15:1 4.5:1 Pass
dark --color-digital-text --color-bg-primary 6.45:1 4.5:1 Pass
dark --color-digital-text --color-bg-secondary 5.79:1 4.5:1 Pass
dark --color-digital-text --color-digital-bg 5.54:1 4.5:1 Pass
dark --color-digital-text --color-digital-bg 4.95:1 4.5: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-success-text --color-success-bg 6.55:1 4.5:1 Pass
dark --color-success-text --color-success-bg 5.77: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-warning-text --color-warning-bg 7.49:1 4.5:1 Pass
dark --color-warning-text --color-warning-bg 6.66: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 6.44:1 4.5:1 Pass
dark --color-error-text --color-bg-secondary 5.78:1 4.5:1 Pass
dark --color-error-text --color-error-bg 5.70:1 4.5:1 Pass
dark --color-error-text --color-error-bg 5.10:1 4.5:1 Pass
dark --color-info-text --color-bg-primary 6.45:1 4.5:1 Pass
dark --color-info-text --color-info-bg 5.54:1 4.5:1 Pass
dark --color-info-text --color-info-bg 4.95:1 4.5:1 Pass
dark --color-success-text --color-bg-elevated 6.71:1 4.5:1 Pass
dark --color-warning-text --color-bg-elevated 7.82:1 4.5:1 Pass
dark --color-error-text --color-bg-elevated 5.56:1 4.5:1 Pass
dark --color-text-primary --color-bg-hover 11.06:1 7.0:1 Pass
dark --color-text-primary --color-bg-active 9.39:1 7.0:1 Pass
dark --color-text-secondary --color-bg-elevated 5.52:1 4.5:1 Pass
dark --color-focus --color-bg-active 4.18:1 3.0:1 Pass
dark --color-chart-1 --color-bg-primary 5.18:1 3.0:1 Pass
dark --color-chart-1 --color-bg-secondary 4.65:1 3.0:1 Pass
dark --color-chart-2 --color-bg-primary 5.87:1 3.0:1 Pass
dark --color-chart-2 --color-bg-secondary 5.27:1 3.0:1 Pass
dark --color-chart-3 --color-bg-primary 5.46:1 3.0:1 Pass
dark --color-chart-3 --color-bg-secondary 4.91:1 3.0:1 Pass
dark --color-chart-4 --color-bg-primary 3.57:1 3.0:1 Pass
dark --color-chart-4 --color-bg-secondary 3.21:1 3.0:1 Pass
dark --color-chart-5 --color-bg-primary 5.58:1 3.0:1 Pass
dark --color-chart-5 --color-bg-secondary 5.01:1 3.0:1 Pass
dark --color-chart-6 --color-bg-primary 4.65:1 3.0:1 Pass
dark --color-chart-6 --color-bg-secondary 4.18:1 3.0:1 Pass
dark --code-text --code-bg 12.04:1 4.5:1 Pass
dark --code-keyword --code-bg 5.16:1 4.5:1 Pass
dark --code-string --code-bg 7.95:1 4.5:1 Pass
dark --code-function --code-bg 8.64:1 4.5:1 Pass
dark --code-comment --code-bg 5.11:1 4.5:1 Pass
dark --code-number --code-bg 8.18:1 4.5:1 Pass

07 / Brand marks

The name, outlined.

Set in Fraunces 700 with WONK, shaped with real kerning and converted to paths, so the files need no font. Leave clear space equal to the height of the lowercase d on every side. Use the file — never retype, recolor or stretch the mark.

Isaac D'Césares
Wordmark Full formal: presentations, articles, institutional use. Download SVG
Isaac D'Césares
Wordmark, reversed Cream on charcoal, teal or terracotta. Download SVG
D'Césares
Compact Navigation, footers, watermarks. Download SVG
D'Césares
Compact, reversed Cream on dark surfaces. Download SVG
dc
Monogram Terracotta d, teal c: the two registers meeting. Download SVG
dc
Monogram, reversed Single color on dark surfaces. Download SVG
dc
App icon Favicon, avatar, app contexts — background included. Download SVG
dc
App icon, dark For dark home screens and dark social avatars. Download SVG

Human intelligence, amplified with technological intentionality.

This showcase is a working reference for that proposition: the same custom properties shape color, type, spacing, state, code, and atmosphere — and this band is just data-theme="dark" on a section.