Brand Kit

Design system and brand guidelines for consistent UI development

Color Palette

Semantic color tokens using CSS variables with Tailwind integration. All colors support opacity modifiers.

Brand Blues

Primary brand color - teal-inspired blues

Tailwind: bg-brand-500, text-brand-600, border-brand-200

Accent Emerald-Navy

Secondary accent color - deep navy with emerald undertones

Tailwind: bg-accent-500, text-accent-600, border-accent-200

Highlight Sand

Warm highlight color - soft sandy tones

Tailwind: bg-highlight-500, text-highlight-600, border-highlight-200

Success Teal

Success states - vibrant teal

Tailwind: bg-success-500, text-success-600, border-success-200

Warning Ochre

Warning states - warm ochre

Tailwind: bg-warning-500, text-warning-600, border-warning-200

Danger Clay

Error states - muted clay red

Tailwind: bg-danger-500, text-danger-600, border-danger-200

Typography

Primary typeface: Nunito with system font fallbacks

Font Weights

Regular400 - Body text, descriptions

Semibold600 - Headings, labels, buttons

Bold700 - Strong emphasis

Type Scale

text-xs0.75rem / 1remCaptions, labels

The quick brown fox jumps over the lazy dog

text-sm0.875rem / 1.25remSmall body text

The quick brown fox jumps over the lazy dog

text-base1rem / 1.5remBody text

The quick brown fox jumps over the lazy dog

text-lg1.125rem / 1.75remLarge body text

The quick brown fox jumps over the lazy dog

text-xl1.25rem / 1.75remSmall headings

The quick brown fox jumps over the lazy dog

text-2xl1.5rem / 2remSection headings

The quick brown fox jumps over the lazy dog

text-3xl1.875rem / 2.25remPage headings

The quick brown fox jumps over the lazy dog

text-4xl2.25rem / 2.5remHero headings

The quick brown fox jumps over the lazy dog

Spacing

Consistent spacing scale using Tailwind defaults

Token	REM	Pixels	Usage	Visual
`2`	0.5rem	8px	Tight spacing
`4`	1rem	16px	Default spacing
`6`	1.5rem	24px	Card padding
`8`	2rem	32px	Section spacing
`12`	3rem	48px	Large gaps
`16`	4rem	64px	Section padding (mobile)
`20`	5rem	80px	Section padding (tablet)
`24`	6rem	96px	Section padding (desktop)

Border Radius

Rounded corners for different component types

Small

rounded-lg

0.5rem

Badges, tags

Medium

rounded-xl

0.75rem

Buttons, inputs

Large

rounded-2xl

1rem

Cards, containers

Full

rounded-full

9999px

Pills, avatars

Shadows

Elevation system for creating depth

Elevation

Small

shadow-sm

Subtle elevation

Elevation

Default

shadow

Cards at rest

Elevation

Medium

shadow-md

Dropdown menus

Elevation

Large

shadow-lg

Modals, popovers

Elevation

Extra Large

shadow-xl

Hero cards

Component Styles

Pre-built component classes defined in globals.css

Primary Button

bg-gradient-to-r from-brand-600 to-accent-600 px-6 py-3 rounded-xl text-white font-semibold shadow-lg hover:-translate-y-0.5

Secondary Button

border-2 border-zinc-300 bg-white px-6 py-3 rounded-xl text-zinc-700 font-semibold hover:border-zinc-400

Card

Card Title

Card content goes here

rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm hover:shadow-lg

Gradient Heading

Gradient Heading

bg-gradient-to-r from-zinc-900 via-brand-900 to-accent-900 bg-clip-text text-transparent

Design Principles

Guidelines for maintaining consistency

Visual Hierarchy

• Use gradient headings for emphasis
• Maintain consistent font weights
• Apply proper spacing between sections
• Use shadows to create depth

Interaction

• Subtle hover animations (-translate-y-0.5)
• Clear focus states (ring-2)
• Smooth transitions (duration-300)
• Accessible touch targets (min 44x44px)

Color Usage

• Brand colors for primary actions
• Accent for secondary elements
• Highlight for warmth and emphasis
• Semantic colors for states

Accessibility

• WCAG AA contrast ratios
• Keyboard navigation support
• Screen reader friendly markup
• Focus-visible indicators