Skip to main content

CatalystOS Design System

A comprehensive design system built with Tailwind CSS, shadcn/ui, and our brand guidelines

Brand Colors

Catalyst Orange

#FF5500

Primary brand color

Platform Black

#212121

Text and accents

Success Green

#00D084

Positive states

Trust Blue

#0366D6

Links and info

Typography

Heading 1

text-6xl font-bold (60px)

Heading 2

text-5xl font-bold (48px)

Heading 3

text-4xl font-bold (36px)

Heading 4

text-3xl font-semibold (30px)

Heading 5

text-2xl font-semibold (24px)

Heading 6

text-xl font-medium (20px)

Large body text for emphasis

text-lg (18px)

Regular body text for content

text-base (16px)

Small text for captions

text-sm (14px)

8px Grid System

p-0.5
4px (0.25rem)
p-1
8px (0.5rem)
p-2
16px (1rem)
p-3
24px (1.5rem)
p-4
32px (2rem)
p-5
40px (2.5rem)
p-6
48px (3rem)
p-8
64px (4rem)
p-10
80px (5rem)
p-12
96px (6rem)
p-16
128px (8rem)

Interactive Components

Buttons
Various button styles and states
Form Elements
Input fields and form controls

This field is required

Badges
Status indicators and labels
Default
Secondary
Outline
Destructive
Custom
Success
Info
Alerts
Contextual feedback messages
Tabs
Organize content into tabs

This is the overview tab content. Use tabs to organize related content.

Semantic Utility Classes

Padding Utilities
Consistent spacing utilities that enforce the 8px grid

.section-padding

Standard section padding: py-12 lg:py-16 px-4 sm:px-6 lg:px-8

Example content with section-padding

.hero-padding

Hero section padding: pt-16 lg:pt-20 pb-12 lg:pb-16 px-4 sm:px-6 lg:px-8

Example hero content with hero-padding

.container-padding

Horizontal container padding: px-4 sm:px-6 lg:px-8

Example with container-padding (horizontal only)

.card-base

Base card styling: p-6 rounded-lg border border-gray-200 hover:border-catalyst-orange transition-colors

This is a card with .card-base styling. Hover to see the border color change.
Button Size Utilities
Standardized button sizes with 44px minimum touch targets on mobile
px-3 py-1.5 text-sm - min-height: 44px
px-4 py-2 text-base - min-height: 44px
px-6 py-3 text-lg
Best Practices
Do's and don'ts for using the design system

✓ Do's

  • Use semantic utility classes like .section-padding
  • Stick to the 8px grid system for spacing
  • Use predefined button size classes
  • Maintain 44px minimum touch targets

✗ Don'ts

  • Use arbitrary values like p-[37px]
  • Create one-off utility classes
  • Mix different spacing scales
  • Override design tokens without approval

Animations

Static

no animation

Static

no animation

Static

no animation