Make It Yours

Customisation

Transform Catalyst into your project. Changing a colour isn't enough — this guide covers the high-impact levers that actually differentiate your design: personality, radius, gray temperature, typography, and layouts.

Why projects “look like Catalyst”

If you only change the primary colour, your project will still have the same border radius, gray tones, typography, and layout patterns. These elements define visual identity far more than hue alone. Use the presets and levers below to create a distinct look.

Design Personality Presets

Pick a personality, copy the prompt, and let AI transform your project. Each preset adjusts multiple levers for a cohesive look.

Corporate

Serious, trustworthy, professional. Sharp corners, cool grays, restrained palette.

Sharp radius (0.25rem)
Cool gray (hue 220)
Deep blue primary
Subtle shadows

Read AGENTS.md and design/DESIGN.md, then apply the "Corporate" design personality:

1. In app/globals.css, update :root:
   - Change --radius from 0.625rem to 0.25rem
   - Update the gray scale to use a cool tint (add hue 220 to all gray values)
   - Change primary hue from 220 to 215 (deeper blue)

2. Reduce shadow intensity across components (prefer border over shadow)

3. Keep animations minimal and professional

The result should feel serious, trustworthy, and enterprise-ready.

Friendly

Warm, approachable, welcoming. Rounded corners, warm grays, cheerful colours.

Rounded radius (1rem)
Warm gray (hue 30)
Teal/green primary
Medium shadows

Read AGENTS.md and design/DESIGN.md, then apply the "Friendly" design personality:

1. In app/globals.css, update :root:
   - Change --radius from 0.625rem to 1rem
   - Update the gray scale to use a warm tint (add hue 30 to all gray values)
   - Change primary hue from 220 to 165 (teal/green)

2. Add gentle box-shadows to cards and interactive elements

3. Keep animations smooth and bouncy (use ease-out curves)

The result should feel warm, approachable, and human.

Minimal

Clean, stark, focused. No radius, pure grays, monochrome palette.

No radius (0)
Pure neutral gray
Monochrome palette
No shadows

Read AGENTS.md and design/DESIGN.md, then apply the "Minimal" design personality:

1. In app/globals.css, update :root:
   - Change --radius from 0.625rem to 0
   - Keep gray scale neutral (no tint, pure achromatic)
   - Change primary to a dark gray (use gray-800 as primary-500)

2. Remove all box-shadows from components

3. Reduce visual hierarchy — use spacing and typography only

4. Remove gradients and decorative elements

The result should feel stark, focused, and distraction-free.

Bold

Energetic, confident, dynamic. Large radius, vibrant colours, strong shadows.

Large radius (1rem)
Neutral gray
Vibrant primary
Heavy shadows

Read AGENTS.md and design/DESIGN.md, then apply the "Bold" design personality:

1. In app/globals.css, update :root:
   - Change --radius from 0.625rem to 1rem
   - Keep gray neutral but increase contrast (darker 900, lighter 100)
   - Change primary to a vibrant hue (purple 280 or orange 25)
   - Increase chroma in primary scale (0.15 → 0.22)

2. Add strong box-shadows to floating elements

3. Use larger text sizes for headings

4. Make animations more pronounced

The result should feel energetic, confident, and attention-grabbing.

Create Your Own

Mix and match the levers from other tabs to create a custom personality. Use this template prompt:

Custom Design Personality

Read AGENTS.md and design/DESIGN.md, then apply a custom design personality:

1. Border radius: [0 / 0.25rem / 0.625rem / 1rem / 9999px]
2. Gray temperature: [cool (hue 220) / neutral (no hue) / warm (hue 30)]
3. Primary colour: [hue number, e.g. 220 for blue, 165 for teal, 280 for purple]
4. Shadow style: [none / subtle / medium / heavy]
5. Animation style: [minimal / smooth / bouncy / dramatic]

Apply these changes to app/globals.css and ensure consistency across components.

Preview in Demo

Next Steps

Preview Changes

See all components with your new tokens

Colour Reference

Full documentation of the colour system

Back to Setup

Continue the setup guide