Design System

Button System

A consistent collection of call-to-action styles used throughout the Justin Quek digital experience. Each button serves a distinct purpose, creating a clear visual hierarchy while maintaining an elegant editorial aesthetic.

Design System

Button System

A cohesive collection of call-to-action styles designed to create clear visual hierarchy while maintaining the Justin Quek editorial design language.

Typography Sample — Justin Quek Editorial v3 (Squarespace + Dark Mode)
The Collection

Where craft meets
quiet confidence

Each piece is designed with restraint, letting materials and proportion carry the story rather than ornament.

Chapter one

The material story

Sourced from small workshops, every surface is chosen for how it ages, not just how it first appears. The grain, the weight, the way light sits on it — nothing is accidental.

Chapter two

The finishing hand

Nothing leaves the studio until it has been checked, touched, and approved by hand. Consistency is a promise, not a coincidence.

Explore the full range
View the collection →
Reference — heading scale

All heading levels

H1 / .hero-title — Playfair Display 500
Editorial headline
H2 — Playfair Display 500

A section heading

H3 — Playfair Display 500

A subsection heading

H4 — Playfair Display 500

A minor heading

H5 — DM Sans 600
A small label heading
H6 — DM Sans 600, uppercase
Meta or category label
Body copy

This is a body paragraph set at 16px with 1.6 line height, giving it room to breathe while staying easy to scan across longer sections of copy. Links inherit the surrounding color and shift to gold on hover.

This paragraph uses .text-muted — useful for captions, secondary descriptions, or de-emphasized copy.

Colour tokens
Body text (light bg) — #1A1A1A
Muted (light bg) — rgba(26,26,26,.65)
Gold accent — #D4AF37
Body text (dark bg) — #F5F3EE
Gold accent (dark bg) — #E8C766
Dark surface — #14130F
On a dark background

Same type system, inverted surface

Body copy, headings, muted text and the gold accent all remap automatically here — no separate stylesheet needed. Links still shift to gold on hover, just a slightly brighter shade for contrast.

Muted text stays legible too, instead of disappearing into the background.