Brand System
Visual identity and usage guidelines for AgentHands. This reference ensures consistency across all touchpoints.
Color Palette
Primary Accent
#3A4F7A
Signals, thin lines, section markers, small icons, subtle buttons.
Secondary Accent
#4B5D73
Secondary structure, diagram strokes, supporting elements.
Background
#FAFAF8
All page backgrounds. Warm off-white, used consistently.
Text
#111111
Headlines, body text, primary content.
Muted Text
#5F6368
Secondary text, descriptions, labels.
Border
#E0E0DC
Dividers, card borders, section separators.
Typography
Inter is the sole typeface. Hierarchy is created through weight, size, and letter-spacing — never through decorative fonts.
Display
5xl / semibold
Intelligence that works quietly.
H1
3xl / semibold
Section Heading
H2
xl / semibold
Subsection Heading
Body
base / normal
Body text for descriptions and content blocks. Comfortable reading length.
Small
sm / normal
Captions, labels, and supporting detail.
Marker
xs / normal tracking-widest uppercase
SECTION MARKER
UI Usage Rules
Do
- Use accents sparingly — thin lines, section markers, small icons, subtle buttons.
- Maintain generous white space and calm layouts.
- Use a single font family (Inter) with hierarchy from weight, size, and spacing.
- Use thin borders (1px) and subtle dividers.
- Buttons should be outlined or very light fill.
- Keep content organized for fast comprehension.
Don't
- No large filled color blocks.
- No gradients or glassmorphism.
- No dark hero backgrounds.
- No decorative fonts or multiple typefaces.
- No heavy animation libraries.
- No hype language ('revolutionary,' 'game-changing').
- If color is the first thing noticed, it is wrong.
Button Styles
Buttons use outlined or very light fills. Accent color appears on borders and text, not as solid backgrounds at rest.
Section Markers
Section heading follows the marker.
The thin accent line and uppercase label establish a consistent rhythm across all sections. This pattern replaces heavy section backgrounds.