Elegant Design System Reference

Minimalist Design Language

Elegant Design System

A sophisticated, serif-driven aesthetic emphasizing clarity, timeless design, and classical typography for refined interfaces.

3 Color tokens 6 Type styles 4 Shadow levels 0px Radius Times New Roman

Foundation

Color Tokens

The refined color palette extracted from elegant minimal design, using pure black, dark gray, and off-white to create timeless interfaces with maximum clarity and contrast.

Black

#000000

Primary text · UI foreground · Critical CTAs

Dark Gray

#808080

Secondary text · Disabled states · Muted UI

Off-White

#FFFFFF

Page background · Card surface · Primary canvas

Typography

Type Scale

Times New Roman serif typography establishes authority and timelessness. Two weights—400 for body text and 700 for hierarchy—create visual clarity without complexity.

Primary Times New Roman Headings · Body · UI · Buttons

Monospace Courier New Code · Token values · Badges

Display Build what matters 32px · 700 · 1.2

H1 The quick brown fox 32px · 700 · 1.2

H2 The quick brown fox jumps 24px · 700 · 1.3

H3 The quick brown fox jumps over 20px · 700 · 1.3

Body The quick brown fox jumps over the lazy dog 16px · 400 · 1.6

Caption The quick brown fox jumps over the lazy dog 14px · 400 · 1.5

Layout

Spacing & Shapes

8px base grid — every spacing token is a multiple of 8. Sharp corners (0px radius) throughout maintain formal, classical geometry.

Spacing Scale

8px xs

16px sm

24px md

32px lg

48px xl

64px 2xl

Border Radius

Sharp 0px

Shadows

Level 0 Flat · no elevation

Level 1 Cards · hover state

Level 2 Dropdowns · popovers

Level 3 Modals · overlays

Border Widths

Thin 1px

Opacity

Full 100%

Disabled 50%

Z-index / Layering

Base 1

Sticky Header 10

Dropdown 100

Modal 1001

Elevation

Depth & Surfaces

Off-white surfaces with black borders create calm, minimalist hierarchy. No color variation—only black accents and structural borders maintain visual distinction.

Page Background

Primary canvas — the foundation everything sits on

Base · #FFFFFF

Card / Panel Surface

Content containers · elevated surfaces with borders

Elevated · #FFFFFF

Primary Surface #FFFFFF

Text / UI #000000

Muted #808080

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — sharp geometry, formal styling, and classical typography.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #000000 bg · #FFFFFF text · 0px radius · 12px 24px padding · 44px height. Secondary: #FFFFFF bg · #000000 border · 1px. Ghost: transparent bg · #808080 border. All use Times New Roman 16px/700.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #000000 border 1px · 0px radius · 44px height · 10px 12px padding. Focus: 2px outline offset, box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.2).

Card

Content container — bordered surface with padding

.card

Repository name

A brief description of this project. It's open source and has refined styling.

#FFFFFF bg · #000000 border 1px · 0px radius · 24px padding. Title: 16px/700/#000000. Body: 16px/400/#808080. CTA: primary black button.

Badges

Status indicators — All states unified

.badge

Open Closed Draft

12px/700 · 4px 8px padding · 0px radius. All badges: #000000 bg · #FFFFFF text. Unified design language across all states.

Guidelines

Do's & Don'ts

Principles for consistent application of the elegant design language across surfaces and contexts.

Do — Embrace

Maintain pure black (#000000) for all primary text and UI elements
Use Times New Roman serif typography consistently across all text roles
Apply sharp 0px border radius to all components for formal consistency
Respect the 8px baseline spacing scale for padding, margins, and gaps
Center-align error state pages for calm, focused presentations
Maintain generous line heights (1.5–1.6) for optimal readability

Don't — Avoid

Introduce rounded corners or curved elements; maintain sharp geometry
Use colors outside the defined grayscale palette
Apply heavy shadows or gradients that contradict the flat aesthetic
Mix typefaces; Times New Roman is the sole typographic voice
Use light gray backgrounds; reserve white for primary surfaces
Create button text smaller than 16px; readability is non-negotiable

Webflow

Preview

Remixes of Webflow