Brand Guidelines

The Callero visual system

A single source of truth for Callero's color, typography, logo, and component styling. Every token here mirrors what's already in production, so the brand stays consistent across every page.

01 — Color

Color system

Callero's palette is built on warm neutrals with a deep, trustworthy blue and a teal accent. Colors are defined as OKLCH design tokens in globals.css and consumed through Tailwind utilities like bg-primary and text-muted-foreground.

Brand palette

Primary / Trust Blue

--primaryoklch(0.32 0.105 248)

Primary buttons, links, focus rings, key brand moments.

Secondary / Charcoal

--secondaryoklch(0.22 0.012 265)

Secondary buttons and high-contrast UI accents.

Accent / Teal

--accentoklch(0.54 0.13 202)

Interactive highlights, outcome markers, hover surfaces.

Neutrals, text & backgrounds

Background

--backgroundoklch(0.985 0.004 90)

Warm off-white page background.

Foreground

--foregroundoklch(0.17 0.015 265)

Primary body and heading text.

Card

--cardoklch(1 0.001 90)

Card and elevated surface backgrounds.

Muted

--mutedoklch(0.965 0.004 90)

Subtle section and fill backgrounds.

Muted Foreground

--muted-foregroundoklch(0.47 0.013 265)

Secondary text, captions, descriptions.

Border / Input

--borderoklch(0.895 0.005 90)

Hairline borders, dividers, input outlines.

State colors

Hover (primary)

bg-primary/92 hover:shadow-md

92% opacity of its base token

Hover (secondary)

bg-secondary/85

85% opacity of its base token

Hover (surface)

bg-muted

100% opacity of its base token

Active (press)

active:scale-[0.98]

100% opacity of its base token

Focus ring

ring-ring/40 ring-[3px] ring-offset-1

40% opacity of its base token

Selection

::selection

18% opacity of its base token

Disabled

opacity-50

50% opacity of its base token

Status & data

Destructive / Error

--destructiveoklch(0.52 0.22 27)

Errors, destructive actions, critical alerts only.

Chart 1

--chart-1oklch(0.54 0.13 202)

Primary data series in charts.

Chart 2

--chart-2oklch(0.32 0.105 248)

Secondary data series in charts.

Elevation

Shadows are layered and tinted toward the ink (not pure black) for a softer, more premium depth. Use them sparingly to separate interactive surfaces, never as decoration.

shadow-xs

Inputs, resting buttons

shadow-sm

Primary buttons, small cards

shadow-md

Button hover, popovers

shadow-lg

Dialogs, raised panels

02 — Typography

Typography

Callero uses Geist Sans for all UI and content, with Geist Mono reserved for eyebrows, code, and tokens. Headings are semibold with tightened tracking; body copy uses relaxed line-height for readability.

Primary typeface

Geist Sans

Aa Bb Cc 0123456789 — used for headings, body, navigation, and all interface text.

font-sans · --font-geist-sans

Mono typeface

Geist Mono

Aa Bb Cc 0123456789 — eyebrows, tokens, code.

font-mono · --font-geist-mono

Type scale

Display / H1

text-4xl/5xl · font-semibold · tracking-[-0.032em] · leading-[1.05]

Build your brokerage

Heading / H2

text-3xl/4xl · font-semibold · tracking-[-0.024em] · leading-[1.12]

Section heading

Heading / H3

text-xl · font-semibold · tracking-[-0.018em] · leading-[1.2]

Subsection heading

Lead

text-lg/xl · text-muted-foreground · leading-relaxed

A larger intro paragraph used beneath headings to set context.

Body

text-base · leading-relaxed · text-pretty

Standard body copy. Comfortable line-height keeps long passages readable across the marketing site.

Small / Caption

text-sm · text-muted-foreground

Supporting captions, labels, and helper text.

Mono / Eyebrow

font-mono · text-sm · uppercase · tracking-widest

Eyebrow label

Rules

Headings: font-semibold, tracking-tight, text-balance. Tightened tracking and snug line-heights give a premium hierarchy — H1 -0.032em / 1.05, H2 -0.024em / 1.12, H3 -0.018em / 1.2.
Body: leading-relaxed (1.625) with text-pretty, and a global -0.011em letter-spacing for a precise feel.
Maximum two families: Geist Sans + Geist Mono. Never introduce a third typeface.
Color pairing: headings use text-foreground; secondary copy uses text-muted-foreground.

03 — Logo

Logo usage

The Callero wordmark is the primary identity. Use the transparent lockup on light surfaces and the inverted lockup on dark surfaces. The icon mark is reserved for compact contexts like favicons and app tiles.

Lockups & variants

Primary · on light

Inverted · on dark (brightness-0 invert)

Icon · scalable SVG

Icon · light 32px

Icon · dark 32px

Clear space & minimum size

Clear space: keep padding equal to the height of the "C" on all sides.
Standard height: 32px (h-8) in nav and footer.
Minimum height: 20px; below this, use the icon mark instead.
Scaling: always w-auto to preserve aspect ratio.

Do & don't

Use the transparent lockup on light backgrounds and the inverted lockup on dark backgrounds for contrast.

Don't

Don't recolor, stretch, rotate, add shadows, or place the logo on low-contrast or busy backgrounds.

04 — Components

Component styles

These are the live component tokens used across the site. Reuse them as-is to keep buttons, links, forms, cards, alerts, and navigation consistent on every page.

Buttons

Variants

variant: default · secondary · outline · ghost · link · destructive

Sizes & state

size: sm (h-8) · default (h-9) · lg (h-10) · shadow-sm hover:shadow-md · active:scale-[0.98] · focus-visible:ring-[3px] ring-offset-1

Links

Inline primary link Muted navigation linktext-primary underline-offset-4 decoration-primary/40 hover:decoration-primary · nav: hover:text-foreground

Forms

Work email

h-10 · bg-card · border-input · rounded-md · hover:border-muted-foreground/40 · focus-visible:ring-ring/35 ring-[3px]

Cards

Standard card

bg-card with a hairline border, rounded-2xl, and a primary border on hover.

Muted panel

bg-muted/30 for alternating sections and quiet groupings.

Alerts & badges

NEWHighlightError

Outcome marker (.outcome-check) for results and confirmation lists.

badges: bg-primary / bg-accent/12 / bg-destructive/12 · rounded · text-xs font-bold

Nav / header

Callero

fixed header · h-8 logo · links text-muted-foreground hover:text-foreground · primary CTA button