Design System

A cohesive design language built on the principles of clarity, purpose, and timeless beauty. Inspired by Dieter Rams' principles of good design.

Less, but better

Design Principles

Inspired by Dieter Rams' ten principles of good design

Good design is innovative

The possibilities for innovation are not exhausted.

Good design makes a product useful

A product is bought to be used. It has to satisfy not only functional, but also psychological and aesthetic criteria.

Good design is aesthetic

The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being.

Good design is unobtrusive

Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art.

Good design is honest

It does not make a product more innovative, powerful or valuable than it really is.

Typography

Our carefully curated type system combines decorative and functional fonts

Fugue Display

Our signature decorative font for hero sections and major headlines

Beauty

font-fugue text-5xl md:text-6xl lg:text-7xl

Serif Display

Young Serif for elegant headings

Designing with Purpose

font-serif text-4xl md:text-5xl lg:text-6xl font-medium

Imperial

Playfair Display for sophisticated subheadings

Classical Touch

font-imperial text-3xl md:text-4xl font-medium

Sans Display

Inter for contemporary headings

Modern Clean

font-sans text-2xl md:text-3xl font-medium

Lead

Thoughtful and purposeful design choices

text-lg md:text-xl text-muted-foreground

Body

Good design is as little design as possible.

text-base text-muted-foreground

About Fugue

Fugue is our signature decorative font, designed to add a unique artistic touch to key moments in our interface. It combines modern aesthetics with classical calligraphic influences.

Character Set

123

Numerals

!@#

Special Characters

Design Evolution

Our journey from minimalist elegance to rich, natural palettes

Original Essence

primary

#B8805F

surface

#FAF6F3

accent

#E7D5C8

text

#1A1A1A

muted

#6B7280

Our initial design focused on minimalism with a signature brown accent

Current Evolution

Expanded into a rich, natural palette while maintaining our core identity

Current System

A warm, earthy palette inspired by natural materials

brown

#FAF6F3

100

#F3EBE4

200

#E7D5C8

300

#D4B8A2

400

#C19B7E

500

#B8805F

600

#A66B4A

700

#8B573C

800

#6F462F

900

#523325

sage

#F4F7F4

100

#E6EDE6

200

#D1DED1

300

#B3C7B3

400

#95AF95

500

#779777

600

#5F7B5F

700

#4B614B

800

#3A4B3A

900

#2B372B

clay

#FAF5F3

100

#F3E9E4

200

#E7D3C8

300

#D4B5A2

400

#C1977E

500

#B87C5F

600

#A6654A

700

#8B523C

800

#6F412F

900

#533025

sand

#FDFAF6

100

#F9F2E8

200

#F2E4D1

300

#E8D1B3

400

#DDBE95

500

#D2AA77

600

#C79659

700

#B37F3C

800

#8F652F

900

#6B4B23

Semantic Colors

success

light

DEFAULT

dark

warning

light

DEFAULT

dark

error

light

DEFAULT

dark

info

light

DEFAULT

dark

surface

light

muted

subtle

DEFAULT

emphasized

text

primary

secondary

muted

subtle

inverse

Surface Colors

Used for different surface levels and layering

Sage Accent

Natural, calming green tones for organic elements

Clay Accent

Warm, earthy tones for grounding elements

Spacing & Grid

A consistent spacing system for harmony and rhythm

Spacing Scale

0.5rem (8px)

0.75rem (12px)

base

1rem (16px)

1.5rem (24px)

2rem (32px)

2.5rem (40px)

2xl

3rem (48px)

Layout Patterns

Container

Maximum width container with responsive padding

w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8

Grid Columns

Responsive grid layouts with gap utilities

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

Flex Layout

Flexible layouts with space utilities

flex items-center justify-between space-x-4

Layout Guidelines

• Use consistent spacing scales to maintain visual rhythm
• Employ grid systems for responsive, organized layouts
• Maintain breathing room between elements
• Consider mobile-first approaches to spacing
• Use flexible layouts that adapt to content

Components

Reusable interface elements built with consistency and accessibility in mind

Buttons

Interactive elements for user actions

Input Fields

Form controls for user data entry

Badges

Labels and status indicators

New

Featured

Coming Soon

Deprecated

Cards

Containers for related content

Card Title

Cards can contain various types of content and maintain consistent padding.

Theme Toggle

Switch between light and dark modes

Adapts to user preferences

Component Guidelines

View Source

• Maintain consistent spacing and sizing across components
• Use semantic HTML elements for better accessibility
• Ensure components are keyboard navigable
• Provide visual feedback for interactive states
• Follow ARIA best practices for complex components