Design System

A comprehensive showcase of our brand elements, colors, typography, and components. This system ensures consistency across all user interfaces.

Color Palette

Stone Palette (Foundation)

Used for backgrounds, borders, text, and secondary elements. Darker shades (700-900) provide excellent contrast for body text and headings.

stone-50

#F8F7F4

stone-100

#F3F1EC

stone-150

#EDEBE6

stone-200

#D8D5CE

stone-300

#A9A59D

stone-400

#8A857D

stone-500

#706C65

stone-600

#4B4740

stone-700

#3A3530

stone-800

#2A2520

stone-900

#1A1510

Sage Green Palette (Primary Accent)

Used for CTAs, active states, success indicators, and primary interactive elements

sage-50

#F3F5F3

sage-100

#E6EAE6

sage-200

#C8D3C8

sage-400

#7D9A7D

sage-500

#6B7F6B

sage-600

#5A6B5A

sage-700

#475647

sage-800

#3A4A3A

Rust Palette (Warnings & Attention)

Sophisticated burnt sienna for warnings, alerts, and gentle attention - warm and elegant, never alarming

rust-50

#FBF7F5

rust-100

#F7EDE8

rust-200

#EDD6CA

rust-400

#D4886C

rust-500

#C87A5A

rust-600

#A96345

rust-700

#8B4E35

rust-800

#6E3A23

Orange Palette (Energetic Accents)

Vibrant and energetic orange for attention-grabbing elements, highlights, and calls-to-action that need visual impact

orange-50

#FFF7ED

orange-100

#FFEDD5

orange-200

#FED7AA

orange-400

#FB923C

orange-500

#F97316

orange-600

#EA580C

orange-700

#C2410C

Wine Palette (Errors & Critical States)

Deep burgundy for true errors and destructive actions - serious and elegant, never panicked

wine-50

#FAF5F6

wine-100

#F4E8EA

wine-200

#E5CDD1

wine-500

#A84D5C

wine-600

#8C3F4D

wine-700

#6F323E

Semantic Colors

Primary (Sage)

CTAs, active states, success, completion

Secondary (Stone)

Light gray for secondary elements

Warning (Rust)

Warnings, alerts, gentle attention

Error (Wine)

Errors, destructive actions, critical states

Muted (Stone)

Subtle text and backgrounds

Background

Main background color

Visual Hierarchy Comparison

Before: Stone Only

Everything feels muted and disabled

You have 5 credits remaining

Lacks energy and clear hierarchy

After: Sophisticated Earth Tones

Elegant hierarchy with natural warmth

You have 5 credits remaining

Elegant, warm, and sophisticated

Color Usage Guidelines

Sage Green Usage

Primary CTAs and action buttons

Active navigation states

Success indicators and confirmations

Interactive element hover states

Progress bars (completed state)

Rust Usage

Low credit warnings (gentle)

Important notices and alerts

Processing states (active work)

Upsell and upgrade prompts

File validation warnings

Wine Usage

Upload/processing failures

Destructive actions (delete, etc)

Critical errors only

Account/payment issues

Blocking states

Stone Usage

All backgrounds and surfaces

Body text and headings

Borders and dividers

Secondary buttons and links

Disabled states

Sophisticated Warning Examples

Low Credits Notice

Graceful, non-alarming credit warnings

Running Low on Credits

You have 3 credits remaining. Consider adding more to keep your workflow smooth.

Processing State

Active work in progress

Processing Your Files

AI is analyzing 5 documents. This may take a moment...

Critical Error

True errors that block progress

Upload Failed

This PDF appears to be password-protected. Please remove the password and try again.

Success State

Completion and achievement

All Files Processed!

Successfully renamed 5 documents. Ready for download.

Typography

Font Family

Manrope

Display / H1

The quick brown fox jumps over the lazy dog

Body Large

The quick brown fox jumps over the lazy dog. This is our primary body text size for important content.

Body Regular

The quick brown fox jumps over the lazy dog. This is our standard body text for most content.

Body Small

The quick brown fox jumps over the lazy dog. This is our small body text for secondary information.

Caption

The quick brown fox jumps over the lazy dog. Used for captions and metadata.

Icons

Icon Library

We use Lucide React icons for consistency and accessibility. All icons should be 16px (w-4 h-4) for small elements, 20px (w-5 h-5) for medium elements, and 24px (w-6 h-6) for large elements.

Navigation & Actions

Check

Success, completion

AlertTriangle

Warnings, errors

Info

Information, help

Lightbulb

Tips, insights

RefreshCw

Loading, sync

Settings

Configuration

Content & Files

Folder

File containers

Clipboard

Copy, documents

Star

Favorites, ratings

MessageSquare

Comments, chat

Quote

Testimonials

ExternalLink

External links

Security & Trust

Lock

Security, privacy

Shield

Protection, trust

HelpCircle

Help, support

Icon Usage Guidelines

Sizing

w-4 h-4 (16px): Small icons in text, badges

w-5 h-5 (20px): Standard icons in buttons, form elements

w-6 h-6 (24px): Large icons in cards, navigation

w-8 h-8 (32px): Hero icons, empty states

Color & Context

Inherit from text: Use text-stone-600 for neutral contexts

Semantic colors: Match status (green for success, red for error)

Interactive states: Use hover:opacity-80 for hover effects

Accessibility: Ensure sufficient contrast with backgrounds

Spacing & Layout

Border Radius

Shadows

Elevation & Surface Levels

Card Surfaces Reference

Base Surface

Page-level containers. No elevation.

bg: surface-0, border: stone-200

Secondary Surface

Default card. Subtle elevation.

bg: surface-1, border: stone-300, shadow-1

Inset Surface

Inner grouping inside cards.

bg: surface-2, border: stone-300

Nested Inset inside Card

Use inset for inner content wells.

Inset content area

Elevated Overlay on Base

Demonstrates separation by elevation.

shadow-2 on base background

Sophisticated Elevation Scale

Our elevation system creates refined visual hierarchy through precise shadows, subtle backgrounds, and thoughtful depth perception. Each level is carefully calibrated to maintain elegance while establishing clear spatial relationships.

Level 0 - Base Surface

Primary background elements

Content on base surface surface

Background: white

Border: stone-200

Shadow: none

Z-index: 0

Level 1 - Subtle Elevation

Cards, input fields, secondary content

Content on subtle elevation surface

Background: white

Border: stone-200

Shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24)

Z-index: 10

Level 2 - Moderate Elevation

Dialogs, pop-ups, important overlays

Content on moderate elevation surface

Background: white

Border: stone-200

Shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23)

Z-index: 20

Level 3 - Prominent Elevation

Modals, tooltips, floating elements

Content on prominent elevation surface

Background: white

Border: stone-200

Shadow: 0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23)

Z-index: 30

Level 4 - Maximum Elevation

Navigation drawers, floating action buttons

Content on maximum elevation surface

Background: white

Border: stone-200

Shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22)

Z-index: 40

Container Surface Patterns

Essential container patterns that establish visual hierarchy for content organization and user interface structure.

Secondary Surface Container

Intermediate elevation for grouped content and secondary sections

secondary surface container content

Background: var(--surface-1-bg)

Border: var(--surface-1-border)

Shadow: elevation-1 (add with Card elevation={1})

Usage: Cards, testimonials, feature sections

Inset Content Container

Embedded content areas within larger surfaces

inset content container content

Background: var(--surface-2-bg)

Border: var(--surface-2-border)

Shadow: none (inset effect)

Usage: Form fields, data displays, content wells

Neutral Content Well

Clean containers for neutral or secondary information

neutral content well content

Background: var(--surface-0-bg)

Border: var(--surface-0-border)

Shadow: none

Usage: Clean content separation, subtle grouping

Semantic States in Containers

How warnings and errors appear within container patterns

Success

Clear visibility in light containers

Warning

Enhanced contrast within container

Error

Action required or failed operation

Information

Neutral note inside containers

System: background: 50 + border-l-4: 400/500 + header text-800 + body text-700 for each semantic palette.

Usage: Place semantic blocks inside surface-secondary orsurface-base. Do not change the card background.

Card Variant Mapping

How Card props correspond to surface tiers

Base: variant="base", typically elevation=0 on page background (tokens: --surface-0-*).
Secondary: variant="secondary", default cards with subtle depth elevation=1 (tokens: --surface-1-*).
Inset: variant="inset", inner content wells inside cards, usually elevation=0 (tokens: --surface-2-*).

Refined Background Variations

Subtle gradients and semantic colors enhance depth perception while maintaining visual harmony.

Stone Gradient Surface

Elegant stone gradient with subtle elevation

stone gradient surface content surface

Background: stone-50 to stone-100

Border: stone-200

Shadow: Level 1 elevation

Effect: Subtle gradient

Success Semantic Surface

Sage hues for positive actions and confirmations

success semantic surface content surface

Background: sage-50 to sage-100

Border: sage-200

Shadow: Level 1 elevation

Semantic: Success, completion

Warning Semantic Surface

Rust tones for caution and gentle alerts

warning semantic surface content surface

Background: rust-50 to rust-100

Border: rust-200

Shadow: Level 1 elevation

Semantic: Warning, attention

Error Semantic Surface

Wine shades for critical states and errors

error semantic surface content surface

Background: wine-50 to wine-100

Border: wine-200

Shadow: Level 1 elevation

Semantic: Error, critical

Sophisticated Inset Effects

Advanced inset techniques and glassmorphism create depth and modern visual appeal.

Refined Inset Surface

Embedded content with gentle inner shadow

Refined inset content area

Background: stone-50

Border: stone-200

Shadow: inset 0px 2px 4px rgba(0,0,0,0.06)

Glass Morphism Effect

Frosted glass with backdrop blur

Glass morphism content

Background: white/70

Backdrop: backdrop-blur-md

Border: white/30

Shadow: 0px 8px 32px rgba(0,0,0,0.12)

Elevated Glass Surface

High elevation with glassmorphism

Elevated glass content

Background: white/60

Backdrop: backdrop-blur-lg

Border: white/40

Shadow: 0px 20px 40px rgba(0,0,0,0.15)

Comprehensive Elevation Context

A sophisticated interface demonstration showcasing all elevation levels in harmonious interaction.

Sophisticated Layered Interface

Complete elevation hierarchy from base to maximum

Base Content Layer (Level 0)

Primary background with foundational content

Interactive Card

Level 1 elevation for secondary content and interactive elements.

Important Dialog

Level 2 elevation for dialogs and overlays that require user attention.

Premium Feature Panel

Level 3 elevation with glassmorphism for sophisticated overlays.

Pro Feature

Contextual tooltip with prominent elevation

File processing completed successfully

Elevation Hierarchy:

Base (Level 0) → Cards (Level 1) → Dialogs (Level 2) → Panels (Level 3) → FAB (Level 4)

Design Principles:

Consistent shadows, semantic colors, glassmorphism, and thoughtful spacing create depth without complexity.

Comprehensive Elevation Guidelines

Strategic Level Usage

When to apply each elevation level

Base Surface: Primary backgrounds, main content areas (white background)

Secondary Surface: Container cards, testimonials, feature sections (stone-100 + stone-300 border + shadow-sm)

Inset Container: Embedded content areas, form fields, data displays (stone-50 + stone-300 border)

Level 1: Elevated cards, input fields, secondary content with subtle shadow

Level 2: Dialogs, pop-ups, dropdowns, important overlays

Level 3: Modals, tooltips, floating panels, prominent elements

Level 4: Navigation drawers, floating action buttons, maximum emphasis

Implementation Excellence

Best practices for consistent elevation

Material Design Shadows: Use precise rgba values for realistic depth perception

Consistent Light Source: Shadows consistently from top-left for coherent spatial relationships

Semantic Color Harmony: Match elevation colors to content semantics (sage for success, rust for warnings)

Progressive Enhancement: Higher elevations use more pronounced shadows and effects

Performance Conscious: Use CSS transforms over layout-affecting properties

Accessibility & Inclusion

Ensuring elevation serves all users

Contrast Preservation: Ensure text remains readable against elevated backgrounds

Focus Indicators: Elevated elements maintain clear focus states for keyboard navigation

Motion Sensitivity: Respect prefers-reduced-motion for shadow transitions

Color Blindness: Elevation provides alternative depth cues beyond color

High Contrast Mode: Maintain elevation hierarchy in high contrast environments