Start a project
Home  /  Brand
Internal

Brand guidelines

Visual identity reference for the Axxellance brand. Typography, color, logo treatments, and design tokens — documented for everyone who works on the site.

Logo

The primary logo mark at various sizes. Placeholder shown — replace with final artwork. The mark uses a geometric "A" drawn from the brand color, with a crossbar cutout creating negative space. Always rendered on the primary background.

Favicon 16×16
Social Avatar 32×32
App Icon 64×64
Logo Small 128×128
Logo Default 200×200
Axxellance
Axxellance

Color

The full Axxellance palette. All values are defined as CSS custom properties on :root — update once and the entire site follows.

Background
--bg #1a1410 Primary page background
Background
--bg-elev #221a14 Elevated sections, cards, footer
Background
--bg-soft #2a2018 Hover states, pill backgrounds
Background
--surface #2f2419 Card and surface backgrounds
Border
--line rgba(217, 178, 130, 0.12) Subtle borders, dividers
Border
--line-strong rgba(217, 178, 130, 0.28) Strong borders, hover states
Text
--text #f4ead8 Primary body and heading text
Text
--text-muted #b8a890 Secondary / muted body text
Text
--text-dim #87796a Meta, labels, placeholders
Brand
--brand #d4a574 Primary accent, links, buttons
Brand
--brand-2 #c08552 Secondary brand accent
Brand
--brand-soft #e8c89a Button hover, soft highlights
Brand
--accent #f4ead8 Cream accent

Typography

Three font families loaded via Google Fonts. The pairing is intentional — Fraunces brings editorial warmth, Inter provides clean utility, and JetBrains Mono signals technical craft.

Fraunces --font-display
Aa
The quick brown fox jumps over the lazy dog.
Weights 300, 400, 500, 600 (roman + italic) Usage Display, headings, display quotes
Inter --font-sans
Aa
The quick brown fox jumps over the lazy dog.
Weights 300, 400, 500, 600 Usage Body text, UI elements, paragraphs
JetBrains Mono --font-mono
Aa
The quick brown fox jumps over the lazy dog.
Weights 400, 500 Usage Code, labels, breadcrumbs, stats, meta

Design Tokens

Consistent values for spacing, radii, and motion — used across every component and layout.

Border Radius

--r-sm
8px
Small elements, inline code, icons
--r-md
14px
Cards, inputs, sidebars, forms
--r-lg
22px
Project cards, blog cards, step cards
--r-xl
32px
CTA banners, form wraps, large containers

Spacing

--container
1280px
Max content width
--gutter
clamp(1rem, 3vw, 2rem)
Container side padding
--section-y
clamp(4rem, 10vw, 8rem)
Section vertical padding

Motion

--ease
cubic-bezier(0.22, 1, 0.36, 1)
Primary easing used across all hover effects, scroll reveals, and transitions.
--ease (primary)
--ease-out
linear (reference)
Back to site

Return home