Decorative circle in brand green with a thin dark grey outline, featuring typographic elements from the styleguide.

The principles

behind the brand

Built for coherence, adoption, and responsible progress

This guide defines how structure, value, and vision work together at scale. It establishes coherence across contexts and dimensions, enabling the brand to evolve with intention across channels, audiences, and time.

Brand Identity?
Put some thought into it.

Color System

This color palette blends mute naturals with a vibrant green – balancing calm, rationale and steadiness with signal, momentum and acceleration. Inspired by early web aesthetics, where fluorescent green letters beamed against dark screens, this system transposes that suspense for the present – connecting organic and artificial, representing human thought and digital gestalt.

The absence of the 'obligatory' CTA color represents the conscious choice of necessity over noise, implying clarity across all content. Designed for both light and dark modes, the combination of colors ensures accessibility across all devices.

Ash

#F4F4F4

Charcoal

#2B3234

Verve

#67FF56

Fundamental Elements

Verve Light

#B9FF9B

Verve Dark

#39D029

Interactive Signals

Carbon

#B4C4C5

Graphite

#585E5E

Qubit

#202627

Radical Particles

This color palette blends mute naturals with a vibrant green, balancing calm with energy. Inspired by early web aesthetics, where fluorescent letters declared contrast against dark screens, this system transposes that tension for the present – connecting organic and artificial, representing human thought and digital gestalt.

The absence of the 'obligatory' CTA color represents the conscious choice of necessity over noise, commanding minimalism and clarity across all content. Designed for both light and dark modes, the color system ensures accessibility, consistency, and confidence across all devices.

Ash

#F4F4F4

Charcoal

#2B3234

Verve

#67FF56

Fundamental Elements

Verve Light

#B9FF9B

Verve Dark

#39D029

Interactive Signals

Carbon

#B4C4C5

Graphite

#585E5E

Qubit

#202627

Radical Particles

This color palette blends mute naturals with a vibrant green, balancing calm with energy. Inspired by early web aesthetics, where fluorescent letters declared contrast against dark screens, this system transposes that tension for the present – connecting organic and artificial, representing human thought and digital gestalt.

The absence of the 'obligatory' CTA color represents the conscious choice of necessity over noise, commanding minimalism and clarity across all content. Designed for both light and dark modes, the color system ensures accessibility, consistency, and confidence across all devices.

Fundamental Elements

Ash

#F4F4F4

Charcoal

#2B3234

Verve

#67FF56

Interactive Signals

Verve Light

#B9FF9B

Verve Dark

#39D029

Radical Particles

Carbon

#B4C4C5

Graphite

#585E5E

Qubit

#202627

Main elements

Ash

#F4F4F4

Charcoal

#2B3234

Verve

#67FF56

Interactive Signals

Verve Light

#B9FF9B

Verve Dark

#39D029

Neutral Minerals

Carbon

#B4C4C5

Graphite

#585E5E

Qubit

#202627

Typographic System

Combining four typefaces, each with a clear and distinct role, the typographic system is rooted in the neo-editorial logic.

It pairs the sculptural presence of the serif TT Barrels, that evokes editorial confidence and crafted precision, with the geometric calm of Neue Hans Kendrick, a sans serif that delivers modern balance and readability. Decorative layers such as Paris script and FT Fatts introduce moments of play and volume, serving as visual interludes and typographic layers. Together, the fonts form a system that feels both editorial and modular, combined for expression, clarity, and rhythm across all formats.

Desktop

For big screens and viewports over 1920px width.

Laptop

For regular screens and viewports up to 1920px width.

Mobile

For smaller screens and viewports under 478 px.

Headline

H1 Desktop

Unique headline, appears once per page

Headline

H1 Laptop

Unique headline, appears once per page

Headline

H1 Mobile

Unique headline, appears once per page

Subline to main Headline & Section

H2 Desktop & Laptop

Used as subline to the main headline of the page and as section indicator

Subline & Section

H2 Mobile

Used as subline and as section indicator

Subline & Section

Variant: Smaller. H2 Mobile

Used as subline and as section indicator

A strong introduction clearly guides visitors, sets the right expectations, and quickly communicates the purpose of your page—making your content easy to understand and engaging from the start.

H3 Desktop

Introduction

A strong introduction clearly guides visitors, sets the right expectations, and quickly communicates the purpose of your page—making your content easy to understand and engaging from the start.

H3 Laptop & Mobile

Introduction

Module Headline

H4 Desktop

Subsection Headlines

Variant of H4

Variant: Script. H4 Desktop

Commentary Headlines

Module Headline

H4 Laptop

Subsection Headlines

Variant of H4

Variant: Script. H4 Laptop

Commentary Headlines

Module Headline

Variant: Script. H4 Mobile

Subsection Headlines

Variant of H4

Variant: Script. H4 Mobile

Commentary Headlines

TOKYO
PARIS

H5 Desktop

Highlight copy with decorative intention

TOKYO
PARIS

H5 Laptop

Highlight copy with decorative intention

TOKYO
PARIS

H5 Mobile

Highlight copy with decorative intention

2
2
2
2
2
2

H5 Numbers Desktop

Numbers

H5 Numbers Laptop

Numbers

H5 Numbers Mobile

Numbers

Image headline

H6 Desktop, Laptop & Mobile

Subline for images

Little details like a source

H7 Desktop, Laptop & Mobile

Sources and Details

A paragraph is like a friendly chat – keeping it short and simple. Making sure the message stays clear, inviting, and easy to follow.

Paragraph Desktop

Copy & context.

A paragraph is like a friendly chat – keeping it short and simple. Making sure the message stays clear, inviting, and easy to follow.

Paragraph Laptop & Mobile

Copy & context.

  • + I am a list
  • + Because
  • + Lists are structure

List Desktop

Just a list.

  • + I am a list
  • + Because
  • + Lists are structure

List Laptop & Mobile

Just a list.

I could be a story

Variant: Story. Paragraph Desktop & Laptop

Use this to direct attention on a message.

I could be a story

Variant: Story. Paragraph Mobile

Use this to direct attention on a message.

Headline

H1 Mobile

Unique headline, appears once per page.

Subline to main Headline & Section

H2 Mobile

Used as Subline to the main headline of the page and as section indicator.

A strong introduction clearly guides visitors, sets the right expectations, and quickly communicates the purpose of your page—making your content easy to understand and engaging from the start.

H3 Mobile

Introduction or Summary of the page

Module Headline

H4 Mobile

Subsection Headlines

Variant of H4

Variant: Script. H4 Mobile

Subsection Headlines

TOKYO
PARIS

H5 Mobile

HIghlight copy with decorative intention.

Image Description

H6 Mobile

Copy & Context.

Tone of Voice

Confident, intentional, and precise. Clarity is valued over jargon and structure over noise, making complex topics accessible without oversimplifying them. Every word is a conscious choice to inform, and to be precise. Humor, if present, is a playful critique on the current discourse.

Accessibility

"The power
of the web
is in its universality."

Tim Berners-Lee
Inventor of the worldwide web

Accessibility equals what everyone can perceive and use. Legibility, contrast, spacing, and motion balance are foundational, not afterthoughts. Colors, sizes, and states meet inclusive standards across all modes.

Interaction & Motion

Motion clarifies relationships, establishes rhythm, and rewards curiosity—always supporting comprehension. It is playful, minimal, and invites to discovery.

Micro-interactions: Subtle parallax, gentle hover states, and cursor-responsive images present but never loud.

Storytelling moments: Quotes in TT Barrels appear letter-by-letter, sticky on scroll—editorial cadence brought to interface.

Numerics as texture: FT Fatts layered in Verve/Charcoal for data highlights.

Human touch: Parisscript labels (e.g., “current kanban”) bring warmth to operational elements.

Scroll choreography: Vertical-to-horizontal-to-vertical transitions on long project pages—measured, readable, purposeful.