Crane Financial Brand Guide

The definitive reference for designers, developers, and marketers. Every color, typeface, component pattern, and animation used across cranefinancial.org — documented in one place.

Updated March 2026 · Astro + Tailwind · Internal Use Only

Logo

The Crane Financial mark is a solo crane icon. It appears in navy blue on light backgrounds and inverted white on dark backgrounds. Minimum clear space equals the height of the crane's wing.

/* Logo files */ /images/crane-solo-blue.png — Solo crane icon (blue gradient) /images/crane-solo-blue-256.png — Solo crane icon (256x256) /images/crane-logo-black.png — Full logo w/ text (dark) /images/crane-logo-white.png — Full logo w/ text (light/on dark) /favicon.png — Browser tab icon (256x256) /* Dark background usage */ filter: brightness(0) invert(1); opacity: 0.85;

Color System

A restrained, sophisticated palette. Navy and gold carry the brand. Action blue drives CTAs. Status colors are used sparingly for data and feedback.

Primary Brand

Navy

#1E3A5F

--color-navy

Navy Deep

#152C4A

--color-navy-deep

Gold

#C49A5C

--color-gold

Gold Bright

#D4AA6A

--color-gold-bright

Action / CTA

Action Blue

#3B6FD4

--color-action

Action Hover

#2F5BB8

--color-action-hover

Action Light

#DEEAF8

--color-action-light

Dark Theme

Midnight

#0B1521

--color-midnight

Midnight Soft

#111D2E

--color-midnight-soft

Midnight Card

#162640

--color-midnight-card

Midnight Elevated

#1C3050

--color-midnight-elevated

Light Theme / Backgrounds

Paper

#F5F6FA

--color-paper

Warm Grey

#EBEEF5

--color-warm-grey

Steel

#C5CBD9

--color-steel

Gold Light

#F5EDE0

--color-gold-light

Text

Primary Text

#0B1521

--color-text-primary

Body Text

#3A4456

--color-text-body

Muted

#6B7588

--color-text-muted

On Dark

#EEF1F6

--color-text-on-dark

Status / Data

Growth

#22C36B

--color-growth

Signal / Alert

#E04E4E

--color-signal

Typography

Three font families form the type system. Urbanist for headings, Inter for body copy, and JetBrains Mono for data and technical elements. All are self-hosted as variable WOFF2 files.

Urbanist — Display & Headings

--font-heading Weights: 400–800 Variable WOFF2 font-display: swap

Inter — Body copy, UI text, descriptions. Designed for readability at small to medium sizes with generous line-height and clear letterforms.

--font-body Weights: 400–700 Variable WOFF2

JetBrains Mono — $1,247,000 in tax savings · 0.16em tracking · 128px padding

--font-mono Weights: 400–700 Numbers, data, code, labels

Type Scale

H1 Hero

68px desktop 52px tablet 40px mobile Weight 800 -0.04em Line-height 1.0

H2 Section Header

48px Weight 700 -0.025em Line-height 1.08

H3 Card & Subsection Titles

20–24px Weight 700 -0.01 to -0.02em

Body — 16–18px · Inter Regular · Line-height 1.7–1.75 · Used for paragraphs, descriptions, and long-form content across light and dark backgrounds.

16–18px Weight 400 Line-height 1.7–1.75

Gold Eyebrow Navy Eyebrow

12px Weight 600 Uppercase 0.16em tracking 20px line before

Gold Gradient Text

linear-gradient(135deg, #E0B97A, #C49A5C, #A07840) background-clip: text

Buttons

Four button variants across three sizes. All buttons use 10px border-radius, 600 weight, and animate transform + box-shadow on hover. Arrow icons translate 3px right on hover.

Variants

Action (Primary CTA)

Navy (Secondary)

Outline (On Dark)

Ghost (On Light)

/* Sizes */
.btn-lg  → padding: 16px 32px font-size: 16px
.btn-md  → padding: 12px 24px font-size: 14px
.btn-sm  → padding: 9px 18px font-size: 13px /* All buttons */
border-radius: 10px
font-weight: 600
transition: transform 0.2s, box-shadow 0.2s
hover: translateY(-2px)
active: translateY(0)

Spacing & Layout

Consistent spacing tokens used throughout. Container max-widths, section padding, and component gaps follow a deliberate rhythm.

Section Padding

Section

128px top/bottom

Section SM

96px top/bottom

Mobile

80px top/bottom

Containers

.inner

max-width 1200px

.inner-wide

max-width 1400px

Padding

0 24px

Common Gaps

Grid gap

80px

Card gap

24px

Card gap SM

16px

Component

32px

/* Border-radius tokens */
Cards: 14–16px
Sections: 20px
Buttons: 10px
Inputs: 10px
Small items: 6–8px
Pills/Badges:100px

Component Patterns

Recurring UI patterns and their key properties. All cards use consistent border, radius, and hover behavior.

Dark Card

Used in hero, data room, and dark sections for elevated content surfaces.

background: --color-midnight-card (#162640) border: 1px solid rgba(255,255,255,0.07) border-radius: 14–16px padding: 28px backdrop-filter: blur(12px) hover: translateY(-4px)

Light Card

Used on paper/grey backgrounds. FAQ items, service cards, feature blocks.

background: white border: 1px solid rgba(0,0,0,0.05) border-radius: 14px hover shadow: 0 2px 12px rgba(0,0,0,0.04) hover border: rgba(0,0,0,0.08)

Hero Badge

Pill-shaped label above the hero headline. Pulsing dot animation.

padding: 6px 14px 6px 8px border-radius: 100px border: 1px solid rgba(196,154,92,0.25) background: rgba(196,154,92,0.06) font: 12px / 600 / uppercase / 0.06em color: --color-gold

Data Metric Card

KPI display in data room. Value + label + change badge.

label: 11px / uppercase / 0.08em / 500 value: --font-mono / 32px / 700 badge up: --color-growth bg 0.08 badge gold: #A07840 / --color-gold-muted bg

FAQ Accordion

Expandable question/answer with + icon that rotates to × on open.

question: 16px / 600 / padding 22px 24px icon: 28px / radius 8px / --navy-10 bg icon open: rotate(45deg) / --navy bg / white answer: max-height 0→300px / opacity 0→1

Testimonial Quote

Centered quote with oversized quote mark, avatar, name, and role.

quote: Urbanist / 28px / 600 / italic mark: 80px / 800 / --color-gold-muted avatar: 48px circle / --navy-10 bg name: 15px / 600 role: 13px / --text-muted

Nav (Transparent → Solid)

Fixed nav transitions from transparent (hero) to white glass on scroll.

height: 80px solid bg: rgba(255,255,255,0.92) backdrop: blur(20px) saturate(180%) links: 14px / 500 / radius 6px CTA: 14px / 600 / radius 8px / --navy bg

Form / Modal

Lead capture modal with backdrop blur. Clean field styling.

overlay: rgba(0,0,0,0.7) / blur(4px) modal: max-width 560px / radius 20px shadow: 0 24px 80px rgba(0,0,0,0.3) inputs: --paper bg / radius 10px submit: --action bg / radius 12px / 700

Motion & Animation

Three easing curves. Scroll-triggered reveal animations. Only animate transform and opacity — never transition-all. Stagger children by 80ms increments.

Easing Curves

--ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94) /* General UI */ --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1) /* Scroll reveals */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1) /* Playful bounces */

Reveal Animations (hover to preview)

.rv-up

translateY(50px) → 0

.rv-scale

scale(0.9) → 1

.rv-left

translateX(-50px) → 0

.rv-fade

opacity 0 → 1

/* Stagger pattern */ [data-stagger] > *:nth-child(1) → delay: 0ms [data-stagger] > *:nth-child(2) → delay: 80ms [data-stagger] > *:nth-child(3) → delay: 160ms [data-stagger] > *:nth-child(4) → delay: 240ms /* Reveal duration */ duration: 0.8s easing: var(--ease-out-expo) trigger: IntersectionObserver (threshold 0.15)

Responsive Breakpoints

Mobile-first approach with two primary breakpoints. Content reflows to single column on mobile.

Desktop

Above 1024px — full layouts, multi-column grids, floating hero cards.

H1: 68px Hero: 2-col grid, gap 80px Steps: 4-col grid Data: 4-col grid FAQ: 1fr 2fr grid (sticky left)

Tablet (≤ 1024px)

Mid-range layouts. Reduced columns, simplified hero.

H1: 52px Hero: 1-col, cards hidden Steps: 2-col grid Data: 2-col grid FAQ: 1-col, unstick left

Mobile (≤ 768px)

Single column throughout. Reduced type scale and spacing.

H1: 40px H2: 32px Section padding: 80px 0 All grids: 1-col Nav: hamburger + full-screen overlay

Global Texture

SVG fractal noise overlay on body::after for subtle grain across all pages.

element: body::after opacity: 0.3 pointer-events: none type: SVG feTurbulence fractalNoise

Usage Rules

Guidelines for maintaining brand consistency across new pages, ads, and marketing materials.

✓ Do

Use Urbanist for all headings, Inter for body copy
Use gold (#C49A5C) as the premium accent sparingly
Use Action Blue (#3B6FD4) for all primary CTAs
Keep heading letter-spacing tight (-0.02 to -0.04em)
Use generous line-height (1.7+) on body paragraphs
Alternate dark/light sections for visual rhythm
Use the gold gradient text for emphasis on key phrases
Keep headings to 3-5 words at large display sizes
Add hover states to every interactive element
Use JetBrains Mono for all numbers, stats, and data
Image overlays: gradient-to-top with rgba(11,21,33,0.25)
Use subtle box-shadows with brand color tinting

✕ Don't

Use default Tailwind palette colors (indigo-500, blue-600, etc.)
Use generic fonts (Arial, Roboto, system defaults)
Use transition-all — only animate transform and opacity
Use flat shadow-md — use layered, color-tinted shadows
Put gold on gold or navy on navy backgrounds
Use the same font for headings and body text
Skip hover, focus-visible, and active states on buttons
Use random spacing — stick to the defined tokens
Place the logo below 30px height
Use bright/saturated colors outside the defined palette
Add emojis or playful elements to the UI
Use purple gradients or any default "AI slop" aesthetics

Crane Financial Brand Guide · Internal Reference · cranefinancial.org