name	soul-signature-design
description	TwinMe (Soul Signature) frontend design rules — dark-only Claura system, glass surfaces, anti-generic-AI-design guidance. Use when building or reviewing any TwinMe UI.
user-invocable	false

Soul Signature Design

"Perhaps we are searching in the branches for what we only find in the roots." - Rami

TwinMe's design captures authentic personality, not generic AI personas.

Source of truth

The authoritative token spec lives in twin-ai-learn/CLAUDE.md ("Design System (Dark Mode — Claura)") and src/index.css. This skill is the philosophy + anti-pattern layer; never restate token values here — they drift (a previous version of this skill described a light ivory theme long after the product went dark, and actively sabotaged design work).

The system in one breath

Dark-only. #13121a night-sky base with four sun-driven ambient gradient orbs (amber/copper + one purple accent). Every card/panel is dark glass: rgba(255,255,255,0.06) fill, blur(42px), rgba(255,255,255,0.10) border. Primary CTA is a light pill — #F5F5F4 background, #110f0f text, rounded-[100px]. Sidebar is FLAT (no rounded pill edges). ThemeContext is hard-locked dark; there is no light mode.

Typography

Instrument Serif — hero/display/auth titles and narrative voice only. Always negative letter-spacing.
Geist/Inter — ALL UI text (body, labels, buttons, nav). 500 is the base body weight. (A previous version of this skill said "avoid Inter" — that's the OLD light theme talking; ignore any such instinct.)

Hard rules

NO EMOJIS anywhere in user-facing UI. Icons are lucide-react.
NEVER navy blue, never neon, never flat white/opaque cards on app surfaces.
English copy only.
Suggestion chips rounded-[46px]; floating navbar rounded-[32px] pill; active sidebar nav = full pill fill, never an underline or left border.

Anti-slop (what makes it NOT look AI-generated)

Specific beats generic: real data, real numbers, the user's actual words — never lorem, never fake testimonials, never "[Your insight here]".
Restraint: one accent moment per view. If everything glows, nothing does.
No purple-to-pink gradient washes, no bouncing entrances, no spinning 3D blobs, no glassmorphism-on-everything (glass is for surfaces, not text).
Empty states say what's true and what to do next — never decorative filler.

Motion

Micro-interactions < 200ms (cubic-bezier(0.4, 0, 0.2, 1)); content reveals 200-300ms; page transitions 300-500ms.
Subtle hover lift (translateY(-2px) + soft shadow) over scale/bounce.
Nothing auto-plays or loops indefinitely; respect prefers-reduced-motion.

Review checklist (when judging a screen)

Does it read as the night-sky glass system, or did a flat/light/navy surface sneak in?
Is the hierarchy carried by Instrument Serif (display) vs Geist (UI), with negative tracking on headings?
Could any visible string have come from a template? Replace with the user's real data or cut it.
Are CTAs the light pill, chips 46px, navbar 32px, sidebar flat?

Soul Signature Design

"Perhaps we are searching in the branches for what we only find in the roots." - Rami

TwinMe's design captures authentic personality, not generic AI personas.

Source of truth

The system in one breath

Typography

Instrument Serif — hero/display/auth titles and narrative voice only. Always negative letter-spacing.

Geist/Inter — ALL UI text (body, labels, buttons, nav). 500 is the base body weight. (A previous version of this skill said "avoid Inter" — that's the OLD light theme talking; ignore any such instinct.)

Hard rules

NO EMOJIS anywhere in user-facing UI. Icons are lucide-react.

NEVER navy blue, never neon, never flat white/opaque cards on app surfaces.

English copy only.

Suggestion chips rounded-[46px]; floating navbar rounded-[32px] pill; active sidebar nav = full pill fill, never an underline or left border.

Anti-slop (what makes it NOT look AI-generated)

Specific beats generic: real data, real numbers, the user's actual words — never lorem, never fake testimonials, never "[Your insight here]".

Restraint: one accent moment per view. If everything glows, nothing does.

No purple-to-pink gradient washes, no bouncing entrances, no spinning 3D blobs, no glassmorphism-on-everything (glass is for surfaces, not text).

Empty states say what's true and what to do next — never decorative filler.

Motion

Micro-interactions < 200ms (cubic-bezier(0.4, 0, 0.2, 1)); content reveals 200-300ms; page transitions 300-500ms.

Subtle hover lift (translateY(-2px) + soft shadow) over scale/bounce.

Nothing auto-plays or loops indefinitely; respect prefers-reduced-motion.

Review checklist (when judging a screen)

Does it read as the night-sky glass system, or did a flat/light/navy surface sneak in?

Is the hierarchy carried by Instrument Serif (display) vs Geist (UI), with negative tracking on headings?

Could any visible string have come from a template? Replace with the user's real data or cut it.

Are CTAs the light pill, chips 46px, navbar 32px, sidebar flat?

soul-signature-design