Skip to main content

Design system

Style Guide

The visual design system of Lumen Atelier — colour palette, type scale, UI elements, spacing, and component reference.

Colour palette

#FAF7F2

Background / Paper

#141312

Primary text / Ink

#6E6760

Secondary text / Subtle

#E7DED3

Borders / Hairline

#C45D3D

CTA / Accent (Terracotta)

#2E4AD9

Secondary accent (Blue)

#D9B65E

Highlight / Warm gold

Typography scale

Display serif

text-7xl / xl:text-8xl · font-serif

An editorial studio.

Heading 1 — serif

text-4xl / lg:text-5xl · font-serif

Selected Work — 2024

Heading 2 — serif

text-2xl / lg:text-3xl · font-serif

The Brief: Coherence Without Erasure

Pull quote / blockquote

text-xl / lg:text-2xl · font-serif · italic

“Design is thinking made visible — we take that responsibility seriously.”

Body text — sans

text-base · font-sans · leading-relaxed

We build brand identities, editorial systems, and digital experiences for organisations that believe the quality of communication reflects the quality of thought. Every typographic choice, every layout decision, every colour carries meaning — and that meaning either serves the content or competes with it.

Small / Caption

text-sm · font-sans · text-subtle

Harto Collective — Brand Identity System, 2024. Delivered across print, digital, and environmental formats. All rights reserved.

Label / meta text

text-xs · tracking-widest · uppercase

Paris & London — Est. 2017 — Available globally

UI elements

Buttons

Primary (Accent) Secondary (Ink outline) Ghost / Text link Accent link →

Tags / Badges

branding editorial digital campaign typography spatial Active filter Selected

Form elements

Dividers

Border-left accent rule

Spacing scale

1
2
4
6
8
10
12
16
20

ProjectCard component

JournalCard component