Internal reference. Not indexed.

PH Beauty Club design system

Every value on this page is painted from the PHBC Tokens variable collection. Resize the window to watch the breakpoint modes switch.

viewport

1. Colour primitives

WCAG contrast is shown against parchment-200 and white for dark colours, and against ox-900 and ox-700 for light ones. Body text needs 4.5, large text and UI 3.0. Ink-900 is the value from Tin's brief; the shipped article ink is #2A211B, pending her call.

ox-950
ox-900
ox-800
ox-700
ox-400
ink-900
ink-600
sage-800
sage-700
sage-200
parchment-50
parchment-100
parchment-200
parchment-300
parchment-400
white
vermillion-500
canary-500
canary-100
canary-900
lake-500 (reserved)
powder-400 (reserved)

2. Semantic colour

Classes bind to these, never to primitives. Each alias points at one primitive, so a palette change is one edit.

text/heading
text/body
text/muted
text/link
text/link-hover
text/accent
text/on-dark
text/on-dark-muted
surface/page
surface/card
surface/subtle
surface/tint
surface/inverse
surface/footer
action/primary
action/primary-hover
action/on-primary
border/subtle
border/strong
border/input
focus/ring
focus/ring-on-dark
state/selected
state/selected-hover
accent/glyph
accent/underline-light
accent/underline-dark
On dark surface
Parchment text on ox-900, with the muted alias below
text/on-dark-muted: this line replaces the plum #C9A0AC used by the ticker today.
action/primary on inverse

3. Typography

Two families: Young Serif 400 for display and headings (never synthesised bold), Archivo 400/600/700 for everything else. Sizes step down per breakpoint through variable modes; the meta line shows the computed value at the current width.

display-1
Home hero only

The home of the PH Beauty community

display-2
Interior heroes, hub titles

Homegrown brands, all in one place

display-3
Article, brand and event titles

Ferca Beauty, your first makeup, elevated

heading-1
Section headings

Beauty stories, up close

heading-2
Article H2, panel headings

What to reach out about

heading-3
Card titles, article H3

Belo Essentials

heading-4
Card names, wordmark, footer labels

Get the releases in your inbox

lead
Hero subheads, standfirsts

Discover homegrown brands, track every release, and meet the people behind them.

prose
Article and event body copy

There is a very specific memory a lot of us share: sneaking into your mom's vanity, or your older sister's makeup bag, and trying on a colour that was way too bold for a first attempt. FERCA Beauty is building an entire brand around that memory.

body
Default copy, intros, form fields

A living index of homegrown Filipino beauty brands, from the OGs to this year's launches, with founders, categories, and ethical identifiers.

body-sm
Nav, footer, buttons, card meta

Directory · Reads · Events · Contribute · About · Contact

caption
Filters, back links, table cells, figcaptions

Dr. Vicki Belo · Est. 1990 · Metro Manila

label
Eyebrows, badges, table headers, tags. Smallest size on the site.

By PH Beauty Releases

4. Space

A 4px base. Padding, margin and gap snap to these; section padding and the container gutter step down per breakpoint.

space/2
space/4
space/8
space/12
space/16
space/20
space/24
space/32
space/40
space/48
space/64
space/80
space/96

Section padding and gutter (per breakpoint)

section/lg
section/md
section/sm
container/gutter

5. Layout and measure

One container (1320px) and three reading widths. The boxes below stop growing at their measure token.

measure/prose caps article body copy so lines stay around 70 characters at the prose size. This paragraph is padded to show where it stops.
measure/lead caps hero subheads and standfirsts.
measure/narrow caps CTA copy, empty states and form intros.

6. Shape and elevation

Four radii. Three shadows, all tinted with ox-900 rather than black; shadows are not variables in Webflow, so their values live in this doc and the class library.

radius/sm
radius/md
radius/pill
radius/round

Shadows

shadow/sm
shadow/md
shadow/lg
underline (nav current)

Motion

fast 150ms for colour and border changes, base 200ms for transforms and shadows, easing ease. Everything respects prefers-reduced-motion. Not variables; documented here and enforced in the class library.