Brand System

Style Guide

The complete design system for bradley.io. Colors, typography, components, and patterns that define the brand.

Color Palette

Brand Colors

Primary
--brand-primary
Deep
--brand-deep
Secondary
--brand-secondary
Steel
--brand-steel

Backgrounds

Dark
--brand-bg
Dark Alt
--brand-bg-alt
Text
--brand-text
Muted
--brand-muted

Semantic Colors

Success
--brand-success
Warning
--brand-warning
Error
--brand-error
Info
--brand-info

Gradient

.text-gradient — from-sf-orange to-sf-cyan

Typography

Display — Outfit

300Systems Building Systems — Light
400Systems Building Systems — Regular
500Systems Building Systems — Medium
600Systems Building Systems — Semibold
700Systems Building Systems — Bold
800Systems Building Systems — Extrabold

Mono — JetBrains Mono

400const forge = "AI" — Regular
500const forge = "AI" — Medium

Heading Scale

h1 — text-5xl / text-6xl

The Forge

h2 — text-4xl / text-5xl

Platform Services

h3 — text-2xl / text-3xl

Modular Architecture

h4 — text-xl

Service Details

Body Text

AI-powered automation platform that transforms how organizations operate. Modular. Intelligent. Built for the businesses that refuse to wait. Each module is an independent microservice with its own API.

Secondary text uses the muted color for supporting information, captions, and metadata. It maintains readability while establishing visual hierarchy.

Status Badges

ProductionIn DevelopmentPlanned

Used in PageHeader to indicate the status of each service or feature.

Button Styles

Button Sizes

Component Showcase

PageHeader

AI Provider

Production

Multi-model orchestration with tenant billing. The brain of the platform.

StatGrid

20+
Years of Data
6
Platform Services
99%
Accuracy
10x
Faster

FeatureCard

AI Categorization

Machine learning models that understand your business logic. 99%+ confidence on transaction categorization.

Real-Time Processing

API-first integrations that connect your existing tools into a unified, intelligent pipeline.

CalloutBox

Platform Architecture

Every module is an independent microservice with its own API. The AI layer discovers what it needs.

Pro Tip

Use the modular approach to snap services together like legos. Each one works independently.

Important

Read-only mode should be used first when connecting new data sources. Build trust before enabling writes.

Deployed

The financial pipeline is live and processing transactions in real-time.

IntegrationBadges

Platform Services

AI ProviderDistrictsRadio CoverageIntelligenceFinancial PipelineForm Engine

Animation Patterns

Fade Up (Scroll Triggered)

delay: 0s
Animated Section 1
delay: 0.1s
Animated Section 2
delay: 0.2s
Animated Section 3

Float Animation

Glow Pulse

Used for the "Systems Building Systems" badge indicator

Spacing & Layout

Container

.container-page — max-w-6xl mx-auto px-4 sm:px-6 lg:px-8

Grid Patterns

2-column grid (platform cards)

Card 1
Card 2
Card 3
Card 4

3-column grid (service cards)

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

4-column grid (stats)

Stat 1
Stat 2
Stat 3
Stat 4

Card Patterns

Default Card

bg-sf-dark-alt with border-sf-steel/10. Standard container for content.

Hover State

border-sf-orange/30 with shadow-lg. Active or highlighted state.

Accent Card

Top accent bar using team/section color. Used for team member cards.

Tags & Code

Service Tags

COREGEOMEDIAINTELFINANCEDOCS

Inline Code

Use inline code for technical terms like API endpoints or variable names.

Code Block

const site = {
  name: "bradley.io",
  thesis: "Frontier Technologist",
  projects: 84,
  streak: "42 days",
}