Designing a UI System

Goal

Produce a visual identity that feels human, distinct, and premium. The system must reject the "default bootstrap/tailwind" look. It should have "soul"—intentionality in every curve, color, and gap.

When to Use

• •Starting a new project.
• •Rebranding an existing application.
• •When a UI looks "too generic" or "like a template."

Instructions

1. The "Anti-Slop" Color Palette

Avoid the "Safe Blue" (#3B82F6) and "Cool Gray" default.

• •Input: Extract the "Vibe" (e.g., "Cyber-Noir", "Organic-Calm", "Swiss-Brutalist").
• •Process:
  • •Primary: Pick a distinct hue. If Blue, make it Electric Ultramarine or Deep Indigo, not "Link Blue".
  • •Neutrals: NEVER use pure gray. Tint them with the primary hue or a complementary hue (e.g., Warm Sand, Cool Slate, Blue-Black).
  • •Accents: Use unusual combinations (e.g., Olive Green + Acid Yellow, Navy + Coral).
  • •Dark Mode: Don't just invert. Use deep, rich backgrounds (Charcoal, Midnight, Deep Forest), not pure #000000.

2. Typography with Character

Stop using Inter/Roboto/System-UI by default. They are the "Times New Roman" of 2026.

• •Headings: Choose a font with flavor. A sharp serif (Fraunces), a wide grotesque (Space Grotesk), or a monospaced display (JetBrains Mono).
• •Body: Readable but distinct (e.g., Plus Jakarta Sans, Satoshi, IBM Plex Sans).
• •Scale: Use a dramatic scale (Major Third or Perfect Fourth). Huge headings, readable body.

3. Spacing & Rhythm (The "Breath")

• •Micro-Whitepace: Tight packing for data-heavy areas.
• •Macro-Whitespace: Enormous gaps for marketing/editorial areas.
• •Rule: If in doubt, double the padding. "Air" is luxury.

4. Radius & Depth

• •Radius: Be opinionated. Either Fully Round (Pill), Soft (16px+), or Sharp (0px). Don't do the generic 4px.
• •Depth: Stop using default drop shadows. Use:
  • •Glows: Colored shadows (box-shadow: 0 10px 30px -10px var(--brand-color-alpha)).
  • •Borders: 1px solid borders in low-opacity for that "technical" look.
  • •Glass: Backdrop-filter blur (carefully).

5. Motion Tokens

Static UIs feel dead. Define:

• •--ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6) (Bouncy, playful).
• •--ease-squish: cubic-bezier(0.25, 1, 0.5, 1) (Premium, snappy).

Constraints

✅ Do

• •BAN the default Tailwind color palette. You MUST generate a custom tailwind.config.ts theme.
• •BAN "Inter" as the primary font unless the brand specifically demands "invisible" type.
• •ENFORCE a "Tinted Neutral" system. Grays must have a hue.
• •ENFORCE 4.5:1 contrast for body text, but allow lower contrast for "decorative" large text (if accessible alternatives exist).
• •Use clamp() for fluid typography that scales with the viewport.

❌ Don't

• •DO NOT use the "Start-up Blue" (#3B82F6).
• •DO NOT use pure black (#000000) or pure white (#FFFFFF) for backgrounds. It harms eye comfort.
• •DO NOT mix more than 2 sans-serifs. (One Serif + One Sans is the classic "Soulful" pairing).
• •DO NOT forget focus states. Custom focus rings (offset, colored) are a hallmark of quality.

Output Format

• •tailwind.config.ts: Fully customized theme.
• •global.css: CSS Variables for non-Tailwind contexts.
• •typography.md: Rationale for font choices.

Dependencies

• •designer/brand-identity/SKILL.md (Source of the "Vibe")