Brand

Cicero brand guidelines.

Logo, colour palette, and typography. Use this page as a quick reference when building anything under the Cicero name.

Home/Brand

Logo

The Cicero mark.

Two variants: white for dark surfaces, dark for light surfaces. Always use the version that gives the highest contrast against its background.

Cicero logo (white)

For dark backgrounds. This is the primary variant used across the site.

Download PNG

Cicero logo (dark)

For light backgrounds. Use for print, letterhead, and documents.

Download PNG

Colour palette

Three colours do the work.

Cicero blue for accents and interactive elements. Charcoal for surfaces and primary text. White for backgrounds and reversed text.

Cicero Blue

#1D4ED8

Primary accent. Buttons, links, focus states, hover.

CSS var: --accent

Cicero Blue Dark

#1E3A8A

Hover / pressed state. Also used in the CTA band gradient.

CSS var: --accent-hover

Charcoal

#0A0A0A

Primary text. Header background. Dark sections.

CSS vars: --fg, --bg-dark

Slate Grey

#6B7280

Secondary text. Metadata, captions, muted labels.

CSS var: --fg-muted

White

#FFFFFF

Primary background. Card surfaces. Reversed text on dark.

CSS var: --bg

Blue Tint

#EFF6FF

Hover tints on blue-accented elements. Badges. Subtle emphasis.

CSS var: --accent-soft

Typography

Inter Tight, weights 400 to 700.

A single family with tight letter-spacing on headings and generous line-height on body copy.

Heading · 700 (Bold)

H1, H2 headlines

Subhead · 600 (Semibold)

H3, section labels, buttons

Medium · 500

Nav links, card titles

Body · 400 (Regular)

Paragraphs and long-form text