Migrated from DESIGN.md v2.4 (2026-07-08). Uses the theme-pack palette (Acid Lime / Editorial / Dark Plum) and the developer CSS variable block as the current implementation baseline. The mascot, motion, themes, and components contracts are split out into dedicated pages; this page is the system overview and link hub.

​
Design Language

Clay is an AI opportunity platform. The interface should feel like a precise shadcn-style product surface warmed by soft clay, cream paper texture, one dominant emotional accent at a time, and a playful mascot that helps without turning the platform into a toy. We call this the Living Clay Studio: moldable, tactile, and serious around decisions, consent, and action. Vibrant enough to feel new, grounded enough to handle private reflections, recommendations, and introductions. This page is the visual system overview. The deep contracts live on dedicated pages for Mascot, Motion, Themes, Components, and Consent.

​
On this page

​
Brand DNA

Tactile

Texture, grain, soft depth, and physicality. The system should feel held in the hand, not projected from a cold machine.

Bright

Acid lime and fresh accents create energy. Color signals readiness, momentum, and fit.

Expressive

Purple, orange, pink, and mascot variation let personality show up without making product controls noisy.

Adaptive

The same component system shifts mood through theme packs, mascot posture, accent color, and motion pacing.

Useful

Every surface should answer “what should I do next?” faster than a chat transcript can.

Consentful

Private reflections are never exposed by the UI. Sharing states must be explicit, legible, and reversible. See Consent.
Clay is not a chatbot, a resume tool, a dating app, or a marketplace. It is a living context layer for opportunity. Every visual move should make the user feel more oriented, not more distracted.

​
Color tokens

The fresh theme-pack palette is implemented in apps/landing/src/app/globals.css and lives beside the developer token block at the bottom of this page.
TokenHexRole
cream#F7F3EEDefault light background and warm paper canvas
white#FFFFFFCards, sheets, popovers, and elevated surfaces
almost-black#1C1718Primary text and strong buttons
clay-muted#686868Secondary text
clay-line#DEDAD2Borders and dividers
dark-plum#3B232DDark mode background and intimate private canvas
acid-lime#D9FF00Energy, discovery, readiness, primary momentum
electric-purple#8B60FFPersonality, creativity, expression
tomato-orange#FF3D0AConversation, action, excitement
clay-pink#FF78BCEmpathy, friendship, support
warm-taupe#C6AF9BComfort, balance, clay, natural materials

Lime is a Signal

Acid lime is not decoration. Use it for readiness, active state, high-confidence recommendations, and moments where the user can move forward.

Purple is Personality

Electric purple belongs to personality, creative identity, storytelling, and expressive fit. Do not use it as a generic AI glow.

Orange is Action

Tomato orange belongs to conversation, action, energy, and expressive handoffs. Use it sparingly in product surfaces.

Pink is Support

Clay pink belongs to empathy, friendship, warmth, and supportive mascot states. It should soften, not dominate.

Taupe is Grounding

Warm taupe adds material warmth. Use it for clay texture, quiet tags, and balancing saturated accents.

No Generic AI Gradient

Do not use purple-blue orb gradients, neon cyan/purple glows, or bokeh backgrounds. If depth is needed, use paper grain, clay shadows, or plum tonal layering.
Consent must remain explicit. Sharing, intros, and data control need clear labels, icons, and reversible states. Use theme-appropriate accents, but never rely on color alone for permission meaning. See Consent.
Motion tokens are documented in full on the Motion page; values must match this developer block.

​
Typography

Typography should feel bold, rounded, conversational, and helpful. Product labels stay plain. Brand moments can use large display settings, but interface labels, chips, fields, and dashboard data must stay readable and familiar. Use sentence case. Avoid all-caps except tiny metadata where the product already proves it remains legible.
RoleSizeWeightLine heightUse
Hero4.5rem8000.95Landing claims and theme-board hero type
H13.5rem8001Major route titles
H22.625rem7501.05Section leads, concept panels
H32rem7001.1Cards, dialogs, dashboard panels
Body1.125rem4001.55Explanations, notes, messages
Caption0.875rem5001.35Metadata, hints, state labels
The Helpful Type Rule: if text explains an action, it must be readable before it is stylish. No tiny low-contrast labels for consent, fit reasons, or controls.
Font stack:
  • Primary target: Geist then Inter then system sans.
  • Current landing implementation: Manrope display and Inter body until the app font stack is migrated.
  • Numeric and data: the body font with tabular numbers where available.

​
Layout and spacing

  • 12-column desktop grid for landing and wide dashboard surfaces.
  • 4 columns on tablet.
  • 1 column on mobile.
  • Maximum wide-layout content width: 1440px.
  • Page padding: 96px desktop, 48px tablet, 24px mobile where the surface is not intentionally full-bleed.

​
Shape and shadow

Clay should feel tactile, not bubbly.
  • Cards, dialogs, inputs, and panels use 8px radius by default.
  • Small controls and icon buttons use 6px.
  • Pills, avatars, and progress beads may use 999px.
  • Editorial panels, theme-board samples, and mascot showcase modules may use 20px, 28px, or 40px when the surface is clearly a brand artifact rather than a repeated product control.
  • Mascot and decorative clay forms can be organic and soft.
  • Product controls should not become blob-shaped.
The Soft Edge Discipline Rule: rounded corners are allowed, but they must feel precise. Avoid toy-like bubble UI and over-rounded rectangles.
Shadows should make surfaces feel layered and touchable. They should never look like generic drop shadows from a template.
TokenValueUse
shadow-hairline0 0 0 1px rgba(28, 23, 24, 0.08)Resting border substitute
shadow-card0 12px 36px rgba(28, 23, 24, 0.08)Standard card lift
shadow-popover0 24px 64px rgba(28, 23, 24, 0.14)Dialogs, popovers
shadow-soft0 4px 16px rgba(28, 23, 24, 0.04)Theme-board samples and quiet UI
shadow-clay0 18px 42px rgba(198, 175, 155, 0.28)Mascot and tactile brand objects
shadow-plum0 24px 72px rgba(59, 35, 45, 0.34)Dark mode hero panels

​
Materials

Clay material language is how the system becomes fun and fresh without becoming noisy.

Paper

Cream, lightly grained, used for pages and editorial panels.

Clay

Matte, soft, hand-formed texture for mascot, swatches, icons, and generated moodboard imagery.

Fresh signal glass

Very subtle translucent tints for active fit bars, readiness chips, and focus rings. Do not use full glassmorphism panels.

Ink

High-contrast almost-black text, hairline rules, crisp icons.

Plum velvet

Deep dark surfaces for private focus mode, with acid-lime, electric-purple, clay-pink, and warm-taupe accents.
Texture should be visible in generated imagery and brand surfaces. In product UI, texture should be subtle enough not to reduce legibility.

​
Themes

Theme packs are emotional moods of the same product. Layout, typography, component behavior, and consent rules stay constant. Color, composition, mascot palette, and motion pacing shift. The full theme contracts live on Themes.

Acid Lime

Energetic and optimistic. Light mode for onboarding, discovery, opportunity review, readiness, and high-fit opportunity routes. Palette: acid-lime, clay-pink, cream, white, almost-black, warm-taupe.

Editorial (Purple + Orange)

Expressive and creative for storytelling, communities, profiles, personality reports, and trust-building. Palette: electric-purple, tomato-orange, acid-lime, cream, almost-black, warm-taupe.

Dark Plum

Cozy and intimate for private mode, reflection, consent review, late-night browsing, and messaging. Palette: dark-plum, cream, acid-lime, electric-purple, clay-pink, warm-taupe.
Theme packs change atmosphere, composition, and pacing. They do not change core layout, information architecture, consent affordances, or component behavior.

​
Components

Components should never compete with the mascot. Buttons are simple. Cards are spacious. Inputs are quiet. The mascot provides emotion; the UI provides clarity. Product controls stay familiar and shadcn-inspired even when brand surfaces become expressive. The full component contract lives on Components — covering buttons, inputs, cards, dialogs, navigation, sidebar, profile, chat, dashboard, and feed.

​
Mascot

The Clay mascot is the emotional interface. It reacts to user actions, communicates system states, and evolves alongside the user, while product components keep the workflow clear. Anatomy, expressions, accessories, animations, evolution, and rendering rules live on Mascot.

​
Motion

Motion should make Clay feel responsive and alive without slowing work. Movement uses motion and ease tokens; one expressive entrance per brand surface; respect for reduced motion; no elastic bounce on consent or privacy decisions. The full motion contract — token table, principles, and reduced-motion behavior — lives on Motion.

​
Developer tokens

These tokens are the implementation baseline. Keep code and generated assets aligned with these names even if the underlying CSS framework changes. 
:root {
  --cream: #f7f3ee;
  --white: #ffffff;
  --almost-black: #1c1718;
  --dark-plum: #3b232d;
  --acid-lime: #d9ff00;
  --electric-purple: #8b60ff;
  --tomato-orange: #ff3d0a;
  --clay-pink: #ff78bc;
  --warm-taupe: #c6af9b;

  --clay-paper: var(--cream);
  --clay-panel: var(--white);
  --clay-ink: var(--almost-black);
  --clay-muted: #686868;
  --clay-line: #dedad2;

  --radius-xs: 8px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-brand-sm: 12px;
  --radius-brand-md: 20px;
  --radius-brand-lg: 28px;
  --radius-brand-xl: 40px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --shadow-hairline: 0 0 0 1px rgba(23, 23, 23, 0.08);
  --shadow-card: 0 12px 36px rgba(23, 23, 23, 0.08);
  --shadow-popover: 0 24px 64px rgba(23, 23, 23, 0.14);
  --shadow-soft: 0 4px 16px rgba(28, 23, 24, 0.04);
  --shadow-clay: 0 18px 42px rgba(198, 175, 155, 0.28);
  --shadow-plum: 0 24px 72px rgba(59, 35, 45, 0.34);

  --motion-fast: 150ms;
  --motion-standard: 250ms;
  --motion-slow: 400ms;
  --ease-clay: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-private: cubic-bezier(0.4, 0, 0.2, 1);
}

​
Implementation guardrails

Do

  • Use acid-lime only for momentum, discovery, positive action, and readiness. - Use electric-purple for personality, creativity, expression, and editorial storytelling. - Use tomato-orange for conversation, action, and expressive campaign energy. - Use clay-pink for empathy, support, warmth, and mascot-led connection. - Use dark-plum for private, nighttime, reflective, and intimate surfaces. - Make sharing, permission, and trust gates explicit through labels, icons, copy, and reversible controls instead of color alone. - Keep shadcn-style product components familiar and precise. - Use texture in generated images and brand moments. - Keep private-mode surfaces calm and dark-plum, not neon. - Translate private context into shareable fit signals.

Don't

  • Build Clay as a passive chatbot surface. - Make every section a card grid. - Use decorative purple-blue orb gradients. - Use mascot expression in a way that trivializes consent or privacy.
  • Rely on color alone for state; pair color with labels, icons, or copy. - Copy the reference brand name, logo, exact mascot, or slogans.

Themes

The Acid Lime, Editorial, and Dark Plum theme packs in depth.

Mascot

Anatomy, expressions, accessories, animations, evolution, and rendering.

Components

Buttons, inputs, cards, dialogs, navigation, sidebar, profile, chat, dashboard, and feed.

Motion

Motion tokens, easing, principles, and reduced-motion behavior.

Consent

How sharing, permission, and trust gates stay explicit and reversible.

Introduction

Back to the platform overview and product contract.