Design System Showcase

Complete reference for TimoDeChau.com design tokens and components, featuring the Pink and Air Force Blue color palette.

Color Palette

Pink

Hex: #ff006e

HSL: 334 100% 50%

var(--primary)

Air Force Blue 700

Hex: #3C5365

HSL: 206 25% 32%

var(--accent)

Air Force Blue 500

Hex: #658798

HSL: 200 20% 50%

var(--secondary)

Air Force Blue 50

Hex: #F0F3F5

HSL: 204 20% 95%

var(--secondary-50)

Air Force Blue 100

Hex: #E0E7EB

HSL: 202 22% 90%

var(--secondary-100)

Air Force Blue 200

Hex: #C1CFD9

HSL: 205 24% 80%

var(--secondary-200)

Air Force Blue 300

Hex: #A2B7C5

HSL: 204 23% 70%

var(--secondary-300)

Air Force Blue 400

Hex: #849FAE

HSL: 201 21% 60%

var(--secondary-400)

Air Force Blue 600

Hex: #516C78

HSL: 198 19% 39%

var(--secondary-600)

Air Force Blue 800

Hex: #263A52

HSL: 213 37% 24%

var(--secondary-800)

Air Force Blue 900

Hex: #13223B

HSL: 218 51% 15%

var(--secondary-900)

Air Force Blue 950

Hex: #0E1316

HSL: 203 22% 7%

var(--secondary-950)

Warm Cream

Hex: #FAF8F5

HSL: 36 33% 97%

var(--background)

Typography

Display Large

56px / Weight 700 / Line height 1.1

Display Medium

48px / Weight 700 / Line height 1.15

Heading 1

36px / Weight 700 / Line height 1.2

Heading 2

28px / Weight 600 / Line height 1.3

Heading 3

20px / Weight 600 / Line height 1.4

Body Large

18px / Weight 400 / Line height 1.6

Body Regular

16px / Weight 400 / Line height 1.6

Body Small

14px / Weight 400 / Line height 1.5

Caption

12px / Weight 500 / Line height 1.4

Buttons

Badges

Featured

NEW

Popular

Shadows

Subtle

Class: shadow-subtle

Medium

Class: shadow-medium

Strong

Class: shadow-strong

Primary

Class: shadow-primary

Form Elements

Email Input

Text Input

Cards

Subtle Shadow

Default card with subtle shadow

Medium Shadow

Elevated card with medium shadow

Featured Card

Card with primary color border

This page serves as validation that the design system implementation matches the specification. All colors, typography scales, shadows, and component variants should match the design document.

LinkCard Component

The primary hero component for splash pages and content listings.

🎯

Standard Variant

Default LinkCard with subtle shadow and hover effects

⭐

Featured Variant

Featured variant with primary border accent

📎

Compact Variant

Smaller variant for secondary content

Badge Component

Status indicators for content metadata.

New Featured Popular Category 2 days ago

Button Component

Interactive buttons with multiple variants and sizes.