Documentation

Style Guide

Complete visual design system and implementation guidelines

LLM Instructions

Copy the complete style guide in markdown format to share with AI assistants for consistent design implementation.

Color Palette

Primary Colors

Accent Colors

Gradients

Navy Gradient

linear-gradient(135deg, #0A1628 0%, #1a3259 50%, #2c4a7c 100%)

Accent Gradient

linear-gradient(to bottom right, #06B6D4, #2DD4BF)

Typography

Font Family

'Didact Gothic', sans-serif

Display / Hero

The quick brown fox jumps over the lazy dog

text-5xl font-bold

H1 Heading

The quick brown fox jumps over the lazy dog

text-3xl font-bold

H2 Heading

The quick brown fox jumps over the lazy dog

text-2xl font-bold

H3 Heading

The quick brown fox jumps over the lazy dog

text-xl font-semibold

Body Text

The quick brown fox jumps over the lazy dog

text-base leading-relaxed

Small Text

The quick brown fox jumps over the lazy dog

text-sm

Caption / Label

The quick brown fox jumps over the lazy dog

text-xs

Components

Cards

Card Example

Background: bg-white/5 or bg-[#111c35]
Border: border border-white/10
Radius: rounded-2xl (16px)

Buttons

Input Fields

Badges

Primary BadgeSecondary Badge

Code Blocks

Inline Code

Use inline code for short snippets.

Code Block

function example() {
  return "Hello World";
}

Spacing & Layout

Container Max Width

max-w-7xl (1280px) for main content

max-w-4xl (896px) for narrow content

Padding

px-6 lg:px-8 (standard container padding)

Common Gaps

gap-4 (16px) - component spacing

space-y-6 (24px) - section spacing

space-y-12 (48px) - large section spacing