Design System

Style Guide

Foundations for the Aldrin Espinosa portfolio — colors, type scale, and components.

Colors

Canvas

--color-canvas

#F7F6F2

Surface

--color-surface

#FFFFFF

Ink

--color-ink

#1C1B19

Ink 2

--color-ink-2

#5C5A54

Ink 3

--color-ink-3

#8A877E

Border

--color-border

#E4E1D9

Accent

--color-accent

#2E5E50

Accent Ink

--color-accent-ink

#F7F6F2

Inverse

--color-inverse

#FFFFFF

Typography

Storefronts, built to last.

Display / XXLFraunces Light · 84 / 86 · -2.5%

Editorial by default

Display / XLFraunces Light · 56 / 62 · -1.5%

20+

Stat / NumberFraunces Light · 52 / 56 · -1.5%

Section heading

Heading / H2Fraunces Regular · 40 / 46 · -1%

Card title

Heading / H3Fraunces Regular · 24 / 30 · -0.5%

Section label

EyebrowInter Medium · 13 / 16 · +8% · UPPER

Lead paragraph text for intros and summaries.

Body / LargeInter Regular · 20 / 31

Default paragraph text used throughout the page body.

BodyInter Regular · 16 / 26

Supporting and secondary copy.

Body / SmallInter Regular · 14 / 22

Button & UI label

LabelInter Medium · 15 / 20

metadata · domain · caption

Mono / MetaInter Medium · 13 / 18 · +2%

Font sizing

A modular px scale shared across the type styles. Display sizes use Fraunces; UI/body sizes use Inter.

Display XXL 84 px · 8.4rem
Display XL 56 px · 5.6rem
Stat 52 px · 5.2rem
Heading H2 40 px · 4.0rem
Heading H3 24 px · 2.4rem
Body Large 20 px · 2.0rem
Body 16 px · 1.6rem
Label 15 px · 1.5rem
Body Small 14 px · 1.4rem
Eyebrow / Meta 13 px · 1.3rem

Fonts

Placeholder — font files are not yet in assets/. Samples below fall back to system fonts until Fraunces and Inter .woff2 files are added and the @font-face blocks in theme.liquid are uncommented.

Fraunces

Display & headings — Light 300, Regular 400

Inter

UI & body — Regular 400, Medium 500, SemiBold 600

Buttons

Three button styles. All use a pill radius, Inter SemiBold 16, and 16 / 28 px padding. Hover states are not defined in Figma — the values below are sensible defaults.

Default
Disabled