Clave — Brand Guidelines

Build in sync.

Brand guidelines

Logo

The Clave wordmark in pixel-grid form. Use on dark, light, or branded surfaces.

Clear space

Maintain a minimum clear space equal to the height of the logo on all sides.

Minimum size

24px height minimum

Don'ts

Don't stretch

Don't rotate

Don't recolor

Don't add effects

Color

Most tech products use cold blues and purples. Clave uses sienna — warm, earthy, human. In a product about human+AI collaboration, the warmth is the statement.

Primary

Black

#000000

White

#FFFFFF

Sienna

#C26A3A

Sienna scale

#FDF5F0

100

#FBE9DD

200

#F5CFB5

300

#EDB088

400

#E08C5A

500

#C26A3A

600

#A8552B

700

#8B4323

800

#71371E

900

#5C2E1A

950

#331510

Neutral scale

#FAFAFA

100

#F5F5F5

200

#E5E5E5

300

#D4D4D4

400

#A3A3A3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0A0A0A

Semantic

Success

#17B169

Error

#E5484D

Warning

#F5A623

Info

#0091FF

Typography

Geist Sans

Primary typeface

Geist Mono

Code & data

Geist Pixel Square

Logo only

Type scale

Hero — 48px / Bold / -0.03em

Build in sync.

Page title — 32px / Semibold / -0.02em

Project overview

Section — 24px / Semibold / -0.02em

Active issues

Card title — 20px / Semibold / -0.01em

Implement auth flow

Body large — 16px / Regular / 1.6lh

Clave brings human intent and AI capability into a shared workspace, keeping every project moving.

Body default — 14px / Regular / 1.5lh

Each issue tracks what needs to happen, who's responsible, and how AI can accelerate it.

Label — 13px / Medium

Status

Caption — 12px / Medium / Uppercase / 0.05em

IN PROGRESS

Mono inline — 13px Mono

CLV-123 main 2m ago

Weights

400 · Regular

500 · Medium

600 · Semibold

700 · Bold

Iconography

2px stroke, round caps, round joins. Color inherits from text.

Layers

CheckCircle2

Brain

Circle

Plus

Settings

Filter

ArrowRight

ChevronDown

LayoutGrid

MessageSquare

FileText

Users

Zap

Clock

Tag

GitBranch

Sizes

16px

18px

20px

24px

Surfaces

Cards

Base

6px radius

Small

6px radius

Medium

12px radius

Large

12px radius

Floating

12px radius

Modal

12px radius

Fullscreen

16px radius

Components

Buttons

Input

Search issues...

Issue card

CLV-142

Implement OAuth2 flow

In Progress

2h ago

Badges

BacklogTodoIn ProgressDoneCanceled

Voice

No issues yet. Create one to get started.

AI is working on this issue.

Failed to save. Check your connection.

Start building

Don't

It looks like you haven't created any issues! Why not get started?

Your AI teammate is hard at work!

Oops! Something went wrong. We're really sorry about that!

Get started for free today!

Copy rules

Sentence caseNo emojisShort labelsVerb-first actions

Dark mode

Clave is dark-mode first. All surfaces, text, and interactive states are designed for dark backgrounds by default.

Color mapping

Token	Light	Dark
Background	#FFFFFF	#0A0A0A
Surface	#F5F5F5	#171717
Elevated	#FFFFFF	#1C1C1C
Border	#E5E5E5	#262626
Text primary	#0A0A0A	#FAFAFA
Text secondary	#525252	#A3A3A3
Text tertiary	#A3A3A3	#737373

Preview

LIGHT

CLV-142

Implement OAuth2 flow

In Progress

DARK

CLV-142

Implement OAuth2 flow

In Progress

In context

A realistic issue list demonstrating typography, color, spacing, and component patterns in context.

Search issues...

CLV-198Fix authentication timeout on mobileIn Progress

2h ago

CLV-197Add batch export for board dataIn Review

4h ago

CLV-195Implement keyboard shortcutsTodo

1d ago

CLV-192Migrate to edge runtimeIn Progress

2d ago

CLV-189Update onboarding copyBacklog

3d ago

CLV-186Research caching strategiesDone

5d ago