Skip to main content
ESTOPIA™engineering studio / scotland / remote

( STYLE GUIDE )

Design System.

Visual and typographic standards for the Estopia brand and web properties.

Typography

TYPEFACE

Inter

TYPE SCALE

Display / 200px / Inter Bold

Aa

H1 / 64px / Inter Bold

Heading One

H2 / 48px / Inter Bold

Heading Two

H3 / 32px / Inter Bold

Heading Three

H4 / 24px / Inter Semi Bold

Heading Four

Body Large / 18px / Inter Regular

Body text large — used for lead paragraphs

Body / 16px / Inter Regular

Body text — used for general content and descriptions

Small / 14px / Inter Regular

Small text — used for captions and metadata

Caption / 12px / Inter Medium

CAPTION TEXT — LABELS AND TAGS

Colors

PRIMARY

Black

#0A0A0A

White

#FFFFFF

Dark

#1E1E1E

GRAYS

Gray 900

#1D1D1F

Gray 700

#595959

Gray 500

#808080

Gray 300

#E0E0E0

Gray 100

#F8F8F8

ACCENTS

Lavender

#E5DAF6

Mint

#DAEFE5

Peach

#F6E5DA

Sky

#DAE7F6

Components

BUTTONS

Primary

Secondary

View All →

Ghost

PILLS / TAGS

ActiveInactive

FORM INPUTS

Default

Spacing

SPACING SCALE

4px
8px
12px
16px
24px
32px
48px
64px
80px
120px

Grid

1440px canvas / 48px margins / 1344px content width / 24px gutter