mates-design

Color scheme CSS — Mates Green

Light and dark overrides for the color selected in the top header (data-theme-color="mates-green"). Copy this block and rewrite the values for your brand.

/* Color scheme: Mates Green (mates-green)

   From tokens.css — primary / secondary / tertiary overrides.

   Copy, rename data-theme-color, and rewrite values for your brand.

   Apply with: <html data-theme-color="mates-green"> */

:root[data-theme-color="mates-green"] {
    --md-color-primary: #00968c;
    --md-color-primary-hover: #007d74;
    --md-color-primary-active: #00695c;
    --md-color-on-primary: #eeeeee;
    --md-color-primary-muted: #e0f2f1;
    --md-color-on-primary-muted: #00251a;
    --md-color-border-primary: #00968c;
    --md-color-border-focus-input: #00968c;
    --md-color-focus-ring: #00968c;
    --md-state-press-bg: rgba(0, 150, 140, 0.08);
    --md-state-selected-text: #007d74;
    --md-state-selected-border: #00968c;
    --md-state-activated-bg: #00968c;
    --md-state-activated-hover-bg: #007d74;
    --md-glow-focus: 0 0 0 0.25rem rgba(0, 150, 140, 0.22);
    --md-color-secondary: #00796b;
    --md-color-on-secondary: #ffffff;
    --md-color-secondary-container: #e0f2f1;
    --md-color-on-secondary-container: #00251a;
    --md-color-secondary-hover: #00695c;
    --md-color-secondary-muted: #f0faf9;
    --md-color-tertiary: #0a9abf;
    --md-color-on-tertiary: #ffffff;
    --md-color-tertiary-container: #e0f7fa;
    --md-color-on-tertiary-container: #003344;
    --md-color-tertiary-hover: #0882a3;
    --md-color-tertiary-muted: #e6f7fb;
}

[data-theme="dark"][data-theme-color="mates-green"] {
    --md-color-primary: #00968c;
    --md-color-primary-hover: #007d74;
    --md-color-primary-active: #00695c;
    --md-color-on-primary: #eeeeee;
    --md-color-primary-muted: #002420;
    --md-color-on-primary-muted: #2dd4bf;
    --md-color-border-primary: #00968c;
    --md-color-border-focus-input: #00968c;
    --md-color-focus-ring: #00968c;
    --md-state-selected-text: #5eead4;
    --md-state-selected-border: #00968c;
    --md-state-activated-bg: #00968c;
    --md-state-activated-hover-bg: #007d74;
    --md-glow-focus: 0 0 0 0.25rem rgba(0, 150, 140, 0.25);
    --md-color-secondary: #4db6ac;
    --md-color-on-secondary: #002420;
    --md-color-secondary-container: #004d40;
    --md-color-on-secondary-container: #e0f2f1;
    --md-color-secondary-hover: #80cbc4;
    --md-color-secondary-muted: #001a16;
    --md-color-tertiary: #38bdf8;
    --md-color-on-tertiary: #003344;
    --md-color-tertiary-container: #003a5c;
    --md-color-on-tertiary-container: #e0f7fa;
    --md-color-tertiary-hover: #7dd3fc;
    --md-color-tertiary-muted: #001a2e;
}

Backgrounds & Foregrounds

Each swatch shows a background token paired with the correct foreground (text/icon) token. Use these pairs together to guarantee legible contrast.

Aa --md-color-on-primary

Primary

bg: --md-color-primary

fg: --md-color-on-primary

Aa --md-color-on-primary-muted

Primary Muted

bg: --md-color-primary-muted

fg: --md-color-on-primary-muted

Aa --md-color-on-secondary

Secondary

bg: --md-color-secondary

fg: --md-color-on-secondary

Aa --md-color-on-secondary-container

Secondary Container

bg: --md-color-secondary-container

fg: --md-color-on-secondary-container

Aa --md-color-on-tertiary

Tertiary

bg: --md-color-tertiary

fg: --md-color-on-tertiary

Aa --md-color-on-tertiary-container

Tertiary Container

bg: --md-color-tertiary-container

fg: --md-color-on-tertiary-container

Aa --md-color-text

Background

bg: --md-color-background

fg: --md-color-text

Aa --md-color-text

Surface

bg: --md-color-surface

fg: --md-color-text

Aa --md-color-text

Surface Raised

bg: --md-color-surface-raised

fg: --md-color-text

Aa --md-color-text

Surface Sunken

bg: --md-color-surface-sunken

fg: --md-color-text

Aa --md-color-text

Surface Overlay

bg: --md-color-surface-overlay

fg: --md-color-text

Aa --md-color-on-error

Error

bg: --md-color-error

fg: --md-color-on-error

Aa --md-color-error

Error Muted

bg: --md-color-error-muted

fg: --md-color-error

Aa --md-color-on-success

Success

bg: --md-color-success

fg: --md-color-on-success

Aa --md-color-success

Success Muted

bg: --md-color-success-muted

fg: --md-color-success

Aa --md-color-on-warning

Warning

bg: --md-color-warning

fg: --md-color-on-warning

Aa --md-color-warning

Warning Muted

bg: --md-color-warning-muted

fg: --md-color-warning

Aa --md-state-hover-text

Hover State

bg: --md-state-hover-bg

fg: --md-state-hover-text

Aa --md-state-press-text

Press State

bg: --md-state-press-bg

fg: --md-state-press-text

Aa --md-state-selected-text

Selected State

bg: --md-state-selected-bg

fg: --md-state-selected-text

Aa --md-state-activated-text

Activated State

bg: --md-state-activated-bg

fg: --md-state-activated-text

Primitive — Blue Scale

--md-blue-50

#e8f4fd

--md-blue-100

#c4e3f5

--md-blue-200

#7ec9ed

--md-blue-300

#2fabdf

--md-blue-400

#0289bc

--md-blue-500

#0179a7

--md-blue-600

#0172ad

--md-blue-700

#015a8a

--md-blue-800

#014368

--md-blue-900

#012d47

--md-blue-950

#011c2e

Primitive — Grey Scale

--md-grey-50

#f8fafc

--md-grey-100

#f1f5f9

--md-grey-200

#e2e8f0

--md-grey-300

#cbd5e1

--md-grey-400

#94a3b8

--md-grey-500

#64748b

--md-grey-600

#475569

--md-grey-700

#334155

--md-grey-800

#1e293b

--md-grey-900

#0f172a

--md-grey-950

#020617

--md-white

#ffffff

--md-black

#000000

Semantic — Primary

--md-color-primary

#00968c

--md-color-primary-hover

#007d74

--md-color-primary-active

#00695c

--md-color-on-primary

#eeeeee

--md-color-primary-muted

#002420

--md-color-on-primary-muted

#2dd4bf

Semantic — Secondary

--md-color-secondary

#4db6ac

--md-color-secondary-hover

#80cbc4

--md-color-on-secondary

#002420

--md-color-secondary-container

#004d40

--md-color-on-secondary-container

#e0f2f1

--md-color-secondary-muted

#001a16

Semantic — Tertiary

--md-color-tertiary

#38bdf8

--md-color-tertiary-hover

#7dd3fc

--md-color-on-tertiary

#003344

--md-color-tertiary-container

#003a5c

--md-color-on-tertiary-container

#e0f7fa

--md-color-tertiary-muted

#001a2e

Semantic — Surface

--md-color-background

#23272f

--md-color-surface

#262b34

--md-color-surface-raised

#2a2f3b

--md-color-surface-sunken

#252a37

--md-color-surface-overlay

#1e2230

Semantic — Text

--md-color-text

#e6eaf0

--md-color-text-muted

#8892a6

--md-color-text-placeholder

#525d6e

--md-color-text-disabled

#404a5c

--md-color-text-inverse

#23272f

Semantic — Border

--md-color-border

#383f52

--md-color-border-strong

#545d72

--md-color-border-primary

#00968c

--md-color-border-focus-input

#00968c

--md-color-divider

#383f52

Semantic — Focus & State

--md-color-focus-ring

#00968c

--md-state-hover-bg

rgba(255, 255, 255, .05)

--md-state-hover-text

#e6eaf0

--md-state-press-bg

rgba(0, 150, 140, .08)

--md-state-press-text

#f1f5f9

--md-state-selected-bg

rgba(255, 255, 255, .1)

--md-state-selected-text

#5eead4

--md-state-selected-border

#00968c

--md-state-activated-bg

#00968c

--md-state-activated-text

#ffffff

--md-state-activated-hover-bg

#007d74

--md-state-selected-hover-bg

rgba(255, 255, 255, .08)

Note: --md-state-disabled-opacity = 0.38 | --md-state-disabled-bg-opacity = 0.10 (numeric, not color tokens)

Functional — Status (Error / Success / Warning)

--md-color-error

#f87171

--md-color-error-muted

#450a0a

--md-color-on-error

#450a0a

--md-color-success

#00c853

--md-color-success-muted

#002a12

--md-color-on-success

#ffffff

--md-color-warning

#fbbf24

--md-color-warning-muted

#431407

--md-color-on-warning

#431407

Overlay

--md-color-scrim

rgba(0, 0, 0, .5)

--md-color-scrim-light

rgba(0, 0, 0, .25)

Glow Effects

--md-glow-primary

0 .13rem .38rem rgba(255, 255, 255, .03)

--md-glow-primary-lg

0 .31rem 1rem rgba(255, 255, 255, .1)

--md-glow-focus

0 0 0 .25rem rgba(0, 150, 140, .25)

--md-glow-error

0 .19rem .63rem rgba(0, 0, 0, .1)

--md-glow-success

0 .19rem .63rem rgba(0, 0, 0, .1)

Focus Ring

Focus preview

--md-focus-ring-color

#00968c

--md-focus-ring-width

.13rem

--md-focus-ring-offset

.19rem

--md-focus-ring-glow

0 0 0 .25rem rgba(0, 150, 140, .25)

Elevation

--md-elevation-0

none

--md-elevation-1

0 .06rem .19rem rgba(0, 0, 0, .2), 0 .06rem .13rem rgba(0, 0, 0, .18)

--md-elevation-2

0 .25rem .38rem rgba(0, 0, 0, .24), 0 .13rem .25rem rgba(0, 0, 0, .16)

--md-elevation-3

0 .63rem .94rem rgba(0, 0, 0, .28), 0 .25rem .38rem rgba(0, 0, 0, .18)

--md-elevation-4

0 1.25rem 1.56rem rgba(0, 0, 0, .32), 0 .5rem .63rem rgba(0, 0, 0, .2)

--md-elevation-5

0 2rem 2.5rem rgba(0, 0, 0, .36), 0 .75rem 1rem rgba(0, 0, 0, .22)

Shadow

--md-shadow-card

0 .06rem .19rem rgba(0, 0, 0, .2), 0 .06rem .13rem rgba(0, 0, 0, .18)

--md-shadow-card-hover

0 .19rem .38rem rgba(0, 0, 0, .04), 0 .06rem .19rem rgba(0, 0, 0, .03)

--md-shadow-dropdown

0 5px 5px -3px rgba(0, 0, 0, .5), 0 8px 10px 1px rgba(0, 0, 0, .42), 0 3px 14px 2px rgba(0, 0, 0, .36)

--md-shadow-drawer

0 1.25rem 1.56rem rgba(0, 0, 0, .32), 0 .5rem .63rem rgba(0, 0, 0, .2)

--md-shadow-dialog

0 2rem 2.5rem rgba(0, 0, 0, .36), 0 .75rem 1rem rgba(0, 0, 0, .22)

--md-button-shadow-hover

0 .13rem .38rem rgba(0, 0, 0, .35), 0 .25rem .75rem rgba(0, 0, 0, .28)

Shape / Radius

--md-radius-none

0

--md-radius-xs

.25rem

--md-radius-sm

.38rem

--md-radius-md

.5rem

--md-radius-lg

.75rem

--md-radius-xl

1rem

--md-radius-2xl

1.5rem

--md-radius-full

624.94rem

Typography — Font Families

--md-font-family

The quick brown fox jumps over the lazy dog.

"Inter", system-ui, -apple-system, sans-serif

--md-font-mono

const x = (a + b) => a * b;

"JetBrains Mono", "Fira Code", "Cascadia Code", monospace

Typography — Font Sizes

Aa

--md-text-xs

.75rem

Aa

--md-text-sm

.88rem

Aa

--md-text-md

1rem

Aa

--md-text-base

1rem

Aa

--md-text-lg

1.13rem

Aa

--md-text-xl

1.25rem

Aa

--md-text-2xl

1.5rem

Aa

--md-text-3xl

1.88rem

Aa

--md-text-4xl

2.25rem

Typography — Font Weights

Bold

--md-weight-light

300

Bold

--md-weight-regular

400

Bold

--md-weight-medium

500

Bold

--md-weight-semibold

600

Bold

--md-weight-bold

700

Typography — Line Heights

--md-leading-tight

The quick brown fox jumps over the lazy dog.
Pack my box with five dozen liquor jugs.

1.2

--md-leading-snug

The quick brown fox jumps over the lazy dog.
Pack my box with five dozen liquor jugs.

1.375

--md-leading-normal

The quick brown fox jumps over the lazy dog.
Pack my box with five dozen liquor jugs.

1.5

--md-leading-relaxed

The quick brown fox jumps over the lazy dog.
Pack my box with five dozen liquor jugs.

1.625

Spacing

--md-space-1

.25rem

--md-space-2

.5rem

--md-space-3

.75rem

--md-space-4

1rem

--md-space-5

1.25rem

--md-space-6

1.5rem

--md-space-8

2rem

--md-space-10

2.5rem

--md-space-12

3rem

--md-space-16

4rem

Control Sizes — Heights

--md-control-height-xs

2rem

--md-control-height-sm

2.25rem

--md-control-height-md

2.5rem

--md-control-height-lg

3rem

--md-control-height-xl

3.5rem

Control Sizes — Padding X & List Row

--md-control-padding-x-sm

.75rem

--md-control-padding-x-md

1rem

--md-control-padding-x-lg

1.38rem

--md-list-row-min-height

3rem

Motion — Duration

--md-duration-fast

80ms

--md-duration-short

.12s

--md-duration-base

.18s

--md-duration-medium

.24s

--md-duration-slow

.36s

Motion — Easing

--md-easing-standard

cubic-bezier(.2, 0, 0, 1)

--md-easing-decelerate

cubic-bezier(0, 0, 0, 1)

--md-easing-accelerate

cubic-bezier(.3, 0, 1, 1)

--md-easing-spring

cubic-bezier(.22, 1, .36, 1)

Design Tokens