​
Themes

Clay is one core system that expresses itself through three interchangeable theme packs. Theme packs are emotional moods of the same product: the layout, typography, component behavior, and consent rules stay constant, while color, composition, mascot palette, and motion pacing shift to match the moment a user is in. A onboarding card, a personality story, and a private late-night reflection should all feel like Clay, just at different temperatures.
Themes change atmosphere, not architecture. Every theme uses the same components, the same spacing rhythm, the same consent affordances, and the same information hierarchy. Only surface expressions shift.

​
Theme A — Acid Lime

Acid Lime is Clay’s light, optimistic surface. It is the home of onboarding, discovery, opportunity review, readiness, empty states, active recommendations, launch moments, and any flow where the user is being asked to move forward. The mood is fresh, friendly, energetic, open, and curious without becoming loud.

​
Palette

TokenHexMood
acid-lime#D9FF00Energy, discovery, readiness, primary momentum signal
clay-pink#FF78BCSoft support, warmth, friendship accents
cream#F7F3EEDefault light background, warm paper canvas
white#FFFFFFCards, sheets, and elevated surfaces
almost-black#1C1718Primary text, strong buttons, ink
warm-taupe#C6AF9BComfort, balance, clay material, quiet grounding

​
Feel

Fresh, optimistic, friendly, energetic, open, and curious. Bright enough to feel new, calm enough to handle a long onboarding.

​
Use it when

  • The user is ready to act, send, draft, or accept.
  • Clay has a strong recommendation worth surfacing.
  • A flow needs energy: start, continue, introduce, draft, send.
  • The user is onboarding, exploring, or deciding what to discover next.
  • An empty state needs warmth instead of silence.

​
UI personality

1

Use large white cards

Cards breathe on cream. Let the surface stay spacious and the typography carry the energy.
2

Keep shadows minimal

Light resting borders and hairline dividers do most of the structural work.
3

Lean on bold typography

Strong, confident type does the work that neon would otherwise do.
4

Let the mascot stay bright

Clay stays in its happiest posture and carries the most saturated color on the screen.
5

Reserve acid lime for real action

Use lime only for CTAs that are genuinely available right now. Do not lime-up decorative chrome.

​
Avoid

Do not flood the screen with neon, color long passages of body text in lime, or treat acid lime as generic celebration. Lime is a readiness signal, not a decoration.

​
Theme B — Editorial / Purple + Orange

Editorial is Clay’s expressive surface. It is the home of the landing page, explanation panels, docs-like education, comparison views, trust-building content, communities, profiles, events, personality reports, and creative campaigns. The mood is expressive, creative, unexpected, artistic, magazine-like, social, and warm without becoming chaotic.

​
Palette

TokenHexMood
electric-purple#8B60FFPersonality, creativity, expression, editorial voice
tomato-orange#FF3D0AConversation, action, expressive handoffs
acid-lime#D9FF00Bright accents, readiness pulses, signal chips
cream#F7F3EEPage canvas, editorial panels, warm paper background
almost-black#1C1718Primary text, strong display type, headlines
warm-taupe#C6AF9BMaterial warmth, grounding tags, quiet accents

​
Feel

Expressive, creative, unexpected, artistic, magazine-like, social, and warm without becoming chaotic. The product explains itself and shows off personality without losing trust.

​
Use it when

  • Clay needs to explain what it is, what it does, or why an opportunity fits.
  • The user is comparing opportunities, profiles, communities, or events.
  • A consent or reasoning surface needs careful, careful-toned language.
  • A surface is about personality, communities, profiles, events, or narrative.

​
UI personality

1

Commit to large typography

Editorial surfaces earn their overhead by saying things worth reading. Let the display type do real work.
2

Use editorial grids

Asymmetric, magazine-style compositions help the user scan instead of scrolling a uniform card wall.
3

Crop unexpectedly but deliberately

Surprise the eye with controlled composition: oversized mascots, deliberate bleed, intentional whitespace blocks.
4

Let the mascot pose stronger

Mascots adopt more confident postures, expressive accessories, and slightly experimental silhouettes.
5

Pair purple with orange intentionally

Use tomato orange for handoffs, conservation, and action accents. Use electric purple for personality voice. Do not let either dominate neutrals.

​
Avoid

No decorative drop caps. No fake newspaper styling. No repeated uppercase eyebrow labels on every section. No random collage clutter. No purple-blue AI orb gradients.

​
Theme C — Dark Plum

Dark Plum is Clay’s private surface. It is the home of private mode, reflection, consent review, focus sessions, sensitive opportunity review, messaging, late-night browsing, settings, and deep signal inspection. The mood is comfortable, nighttime, reflective, focused, intimate, cozy, and safe.

​
Palette

TokenHexMood
dark-plum#3B232DBackground, deep private canvas, intimate atmosphere
cream#F7F3EEText, quiet surfaces, warm readability on dark
acid-lime#D9FF00Readiness, focused action accents, signal chips
electric-purple#8B60FFPersonality accents, creative identity highlights
clay-pink#FF78BCEmpathy, warmth, support, comforting mascot states
warm-taupe#C6AF9BMaterial grounding, balanced accent for private surfaces

​
Feel

Comfortable, nighttime, reflective, focused, intimate, cozy, and safe. The interface slows down so the user can.

​
Use it when

  • The user is reviewing private context or memory.
  • A recommendation has sensitive fit reasons that need calm framing.
  • Clay is showing what can and cannot be shared, and with whom.
  • The user is messaging, tuning settings, or browsing opportunities slowly.

​
UI personality

1

Set the stage on dark plum

The full background sits on the plum canvas. Cream text carries readability without glare.
2

Use dark chocolate and plum-tinted cards

Cards stay low-contrast and tonal, never floating on top of the background.
3

Soften the accents

Glowing moments become subtle pulses. Mascot accents become warmer and less saturated except for meaningful moments.
4

Slow the mascot down

Mascots become warmer, slower, and quieter. They keep users company without creating pressure to act.
5

Pause before consent surfaces

Consent dialogs on dark plum should feel unhurried, with clear reverse paths and no celebratory motion.

​
Avoid

No cyberpunk neon. No purple-blue glow backgrounds. No hologram sci-fi motifs. Private mode should feel calm and intimate, never club-lit.

​
How themes are chosen

Theme packs are emotional moods, not separate products. Choosing a theme means choosing the temperature a surface should feel like at the moment a user enters it.

Atmosphere shifts

Color, composition, mascot palette, and motion pacing change to match the moment.

Architecture stays constant

Layout, information architecture, component behavior, and consent affordances never change between themes.

Light Lime for momentum

Use Acid Lime when the user is moving: onboarding, acting, discovering, deciding.

Editorial for storytelling

Use Editorial when the surface explains, compares, or expresses personality.

Dark Plum for reflection

Use Dark Plum when the user is reviewing private context, giving consent, or browsing late at night.

Consent is theme-agnostic

Consent controls look the same on every theme and never depend on color alone.
A good rule of thumb: if the dominant question on the screen is “what should I do next?” lean Acid Lime. If the dominant question is “what is this, and why does it fit me?” lean Editorial. If the dominant question is “show me what I have shared and what I control,” lean Dark Plum.

Design language

The visual and component system that every theme pack reuses.

Mascot

How Clay’s expressions, accessories, and palettes shift across themes.

Components

Buttons, inputs, cards, dialogs, and how each theme expresses them.

Motion

Pacing and easing tokens that each theme applies differently.

Landing page section spec

How the landing route composes themes section by section.

Introduction

Start here for the product thesis behind the three themes.