◈ Brand

Design System

Colors, typography, components, and visual language for the Glue brand. Everything you need to build with the system.

01 · Color Palette

Colors

Primary

Yellow
#FACC15
Gold
#EAB308
Amber
#F59E0B

Dark Foundation

Background
#0A0A0B
Surface
#18181B
Elevated
#27272A
Border
#3F3F46

Semantic

Success
#22C55E
Error
#EF4444
Warning
#F59E0B
Info
#3B82F6
02 · Typography

Fonts & Scale

Display / Brand — JetBrains Mono
GLUE
Heading Medium
Labels and metadata
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Body / UI — Inter
Body Heading
Body text for paragraphs and descriptions. Clean, readable, neutral. Designed to step back and let content breathe.
Semibold for emphasis and labels
03 · Components

UI Elements

Buttons

Primary Ghost Small Tag Filled Tag Outline

Info Boxes

▲ Note

This is an info callout box. Used for tips, warnings, and important notes throughout the documentation.

▲ Warning

This is a warning callout. Used when an action could have destructive consequences or requires extra attention.

Feature Cells

01
Title
Description text goes here. Hover to see the inverted state.
02
Title
Another cell with content. They stack responsively.
03
Active State
Yellow background variant for emphasis.
04 · Iconography

Icons

Line icons, 1.5px stroke weight, rounded caps and joins, 24×24 base grid.

Speed
Worktree
Layers
Lock
Settings
Package
Terminal
File
05 · Voice & Tone

How Glue Talks

Direct
No fluff. Say what you mean. Short sentences. Active voice.
Technical
Respect the developer audience. Don't dumb things down. Code over prose.
Warm
Not cold or corporate. Glue has personality. "You" not "users."
Confident
Not arrogant. "Here's how it works" — not "we're the best." Show, don't tell.
VISUAL MOTIFS
· · ·
· · ·
· · ·
Dot Grid
Connections, structure
⬡ ⬡
⬡
⬡ ⬡
Honeycomb
Adhesion, binding
┌──┐
│▸▸│
└──┘
Box Drawing
Terminal, structure
06 · Design Tokens

CSS Variables

/* Copy into your project */ :root { /* Brand */ --glue-yellow: #FACC15; --glue-gold: #EAB308; --glue-amber: #F59E0B; /* Backgrounds */ --glue-bg: #0A0A0B; --glue-surface: #18181B; --glue-surface-elevated: #27272A; /* Borders */ --glue-border: #3F3F46; --glue-border-bright: #52525B; /* Text */ --glue-text: #FAFAFA; --glue-text-secondary: #A1A1AA; --glue-text-muted: #71717A; /* Typography */ --glue-font-mono: 'JetBrains Mono', monospace; --glue-font-sans: 'Inter', sans-serif; }