Style Guide

Colors

Primary Colors

#ffda8f

Primary Accent

#202221

Primary Background

Secondary Colors

#171918

Secondary Background

#d1d5db

Text Secondary

#9ca3af

Text Muted

Accent Colors

#10b981

Success

#f59e0b

Warning

#ef4444

Error

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text - Additional information or secondary content.

Lead text - Standout text for important information.

Code Example

<h1 class="text-6xl font-bold">Page Title</h1>
<h2 class="text-4xl font-bold">Section Title</h2>
<p class="text-base text-gray-300">Regular paragraph text.</p>

Buttons

Primary Button

<Button>Primary Button</Button>

Secondary Button

<Button variant="secondary">Secondary Button</Button>

Outline Button

<Button variant="outline">Outline Button</Button>

Forms

Text Input

Textarea

Code Example

<div>
  <label class="block text-sm font-medium mb-2" for="name">Name</label>
  <input 
    id="name" 
    type="text" 
    class="w-full bg-transparent border border-gray-600 rounded-md py-2 px-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-[#ffda8f]/50 focus:border-transparent"
    placeholder="Enter your name"
  >
</div>

Cards

Default Card

This is a basic card with a subtle shadow and rounded corners.

Interactive Card

Hover over this card to see the interactive effect.

Spacing

Spacing Scale

4px

8px

16px

32px

64px