Color Palette

A sophisticated system combining warm, muted undertones with purposeful accents. The primary Teal provides stability, Gold adds warmth, and Coral drives action.

Primary: Teal

50#f4f8f8

100#e4eeee

200#bed7d9

300#8dbec0

400#549ea2

500 (Base)#2e5e60

600#204547

700#142f30

800#0b1c1d

900#050c0c

950#020505

Secondary: Gold

50#fdfbf8

100#faf7ed

200#f3ebd5

300#ecdeb5

400#e4cf8e

500#ddbe5f

600#bf9924

700#826716

800#4d3d0c

900#211a05

950#0e0b02

Accent: Coral

50#fdf8f5

100#faede6

200#f4d5c5

300#efb69a

400#e99165

500#e46525

600#ad4612

700#752e0a

800#451a05

900#1e0b02

950#0d0501

Neutral

50#f9fafa

100#f4f6f6

200#e3e8e8

300#c7d1d1

400#abb9ba

500#819698

600#677d7e

700#506162

800#394546

900#222a2a

950#171c1c

Semantic & Surface

Success
#e4fbed

Warning
#fbf3e4

Error
#fbe4e4

Info
#e4edfb

Primary Surface
#f9fafa

Secondary Surface
#f4f6f6

Tertiary Surface
#e3e8e8

Inverse Surface
#222a2a

Typography

RatedEleven uses Playfair Display for sophisticated headers and Inter for effortless readability. JetBrains Mono is used for technical data.

Playfair Display

Weights: 400, 500, 600, 700, 800, 900

Inter

Weights: 100-900

JetBrains Mono

Weights: Standard

Type Scale

7xl | 16.000rem | 256px
Playfair Display | 400

Aa

6xl | 11.313rem | 181px
Playfair Display | 400

Display

5xl | 8.000rem | 128px
Playfair Display | 400

Hero

4xl | 5.625rem | 90px
Playfair Display | 400

Headline

3xl | 4.000rem | 64px
Playfair Display | 400

Title

2xl | 2.813rem | 45px
Playfair Display | 400

Section

xl | 2.000rem | 32px
Playfair Display | 400

Subsection

lg | 1.438rem | 23px
Inter | 400

Lead Paragraph

base | 1.000rem | 16px
Inter | 400

The quick brown fox jumps over the lazy dog.

sm | 0.688rem | 11px
Inter | 400

Helper text and secondary information.

xs | 0.500rem | 8px
Inter | 400

Micro labels

Semantic Styles

/* H1 Style */
font-size: 11.313rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.0;

/* Body Style */
font-family: Inter; font-size: 1rem; font-weight: 400; line-height: 1.6;

/* Button Style */
font-weight: 600; letter-spacing: 0.02em; text-transform: none;

/* Overline */
font-size: 0.5rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
            

Spacing & Layout

RatedEleven is defined by generous 32px whitespace around content blocks. This "breathing room" signals intentionality.

Spacing Scale (Base: 8px)

4px

8px

12px

16px

24px

32px

Signature

48px

64px

Layout Gaps

Section Gap: 48px (Mobile) / 64px-80px (Desktop)
Component Gap: 16px (Mobile) / 24px (Desktop)
Element Gap: 8px
Container Max-Width: 960px (Desktop) / 1120px (Wide)

Breakpoints

xs: <640px
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

Effects

Subtle shadows and minimal border radius (4px) create a refined, grounded feel.

Shadows (Elevation)

Elevation 0

none

Elevation 1

0 1px 2px (4%)

Elevation 2

0 2px 6px (8%)

Elevation 3

0 4px 12px (12%)

Elevation 4

0 8px 24px (16%)

Border Radius

Small: 2px

Base: 4px

Full: 9999px

Logo & Identity

Use the Full Logo for headers and primary placement. Use the Icon for favicons and small contexts.

Full Logo

Dark Background Variant

Icon

                Usage Guidelines:

                - Clear Space: 25% of height

                - Min Width (Logo): 120px

                - Min Size (Icon): 32px

UI Components

Examples of the design system applied to common elements.

Buttons

Input Fields

Email Address

We'll never share your email.

Quick Reference

:root {
  --color-primary-500: #2e5e60;
  --color-secondary-500: #ddbe5f;
  --color-accent-500: #e46525;
  --color-neutral-50: #f9fafa;
  
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  
  --spacing-base: 8px;
  --spacing-block: 32px; /* Signature */
  
  --radius-base: 4px;
  --border-default: 1px solid #e3e8e8;
}
            