Internal reference

Brand & Style Guide

Colors, typography, logos, spacing, and UI patterns for Red Bridge Internet.

Brand Components

Logo

Brand mark — light

SVG · /favicon.svg

Brand mark — dark

Counter matches background

Full wordmark — light

viewBox 0 0 719 136 · mark + "redbridge"

Full wordmark — red

All brand red · mark + "redbridge"

Full wordmark — accent

White on brand red

Colors

✓

Accent · Brick Ember

--color-accent

#b80c09

✓

Accent Hover

--color-accent-hover

#8f0907

✓

Secondary · Yale Blue

--color-secondary

#0b4f6c

✓

Secondary Hover

--color-secondary-hover

#083b50

Sky · Bright Sky

--color-sky

#01baef

✓

Text · Ink Black

--color-text

#040f16

✓

Text Muted

--color-text-muted

#55656e

Background · Ghost White

--color-bg

#fbfbff

BG Subtle

--color-bg-subtle

#f1f4f8

Border

--color-border

#dbe1e8

Code BG

--color-code-bg

#eef2f6

Typography

Display — Figtree

The quick brown fox

--font-display · 600 for headings

UI / Body — Figtree

The quick brown fox

--font-sans · weights 300–700

Labels — Space Mono

San Francisco · Est. 2009

--font-label · eyebrows, tags, small caps

Monospace

const brand = 'redbridgenet'

--font-mono · system stack

Type Scale

Display --text-display clamp(3rem, 5vw + 1rem, 4.5rem)

Display

6xl --text-6xl 3rem / 48px

Heading One

5xl --text-5xl 2.5rem / 40px

Heading Two

4xl --text-4xl 2rem / 32px

Heading Three

3xl --text-3xl 1.75rem / 28px

Section Head

2xl --text-2xl 1.375rem / 22px

Subheading

xl --text-xl 1.25rem / 20px

Large body

lg --text-lg 1.125rem / 18px

Lead text

base --text-base 1rem / 16px

Body copy

sm --text-sm 0.875rem / 14px

Small / labels

xs --text-xs 0.8125rem / 13px

Eyebrow / caption

Text Utilities

.eyebrow San Francisco · Est. 2009

.eyebrow--muted San Francisco · Est. 2009

.lead We build and manage marketing websites for technology companies.

.display-xl Display XL

.display-lg Display LG

.display-md Display MD

Figtree Weights

300 · Light

400 · Regular

500 · Medium

600 · SemiBold

700 · Bold

Spacing

4px base unit · 13 steps

--space-1 0.25rem / 4px

--space-2 0.5rem / 8px

--space-3 0.75rem / 12px

--space-4 1rem / 16px

--space-5 1.25rem / 20px

--space-6 1.5rem / 24px

--space-8 2rem / 32px

--space-10 2.5rem / 40px

--space-12 3rem / 48px

--space-16 4rem / 64px

--space-20 5rem / 80px

--space-24 6rem / 96px

--space-32 8rem / 128px

Border Radius

UI components and primitives (buttons, tags, cards, inline code, dividers) live in the component catalog. This page covers the design foundations.

--radius-sm

0.25rem / 4px

--radius

0.375rem / 6px

--radius-lg

0.5rem / 8px

50%

Circle

Icons

8-bit pixel-art system · authored as ASCII grids in src/lib/pixelIcons.ts · render with <PixelIcon name="…" /> (inherits currentColor)

Navigation & content

projects

Briefcase

workflows

Stacked layers

team

Person bust

goals

Speech bubble

blog

Article page

document

Document page

Arrows & status

arrow-right

Forward / next

arrow-left

Back / previous

arrow-ne

External link / visit

check

Checkmark

Features & specs

calculator

Calculator

lock

Padlock / secure

target

Target / aim

code

Code brackets

chart

Bar chart

gear

Gear / settings

spark

Spark · AI mark

image

Framed image

UI controls

menu

Hamburger menu

close

copy

Copy / duplicate

Token Reference

All tokens defined in src/styles/tokens.css

Layout

--container-max: 1120px
--sidebar-width: 200px
--topbar-height: 64px
--container-padding: var(--space-6)

Line Heights

--lh-tight: 1.05
--lh-snug: 1.2
--lh-normal: 1.5
--lh-relaxed: 1.65

Tracking

--tracking-display: -0.02em
--tracking-eyebrow: 0.18em

Transitions

--transition-fast: 150ms ease
--transition-base: 200ms ease