Component Library

Canonical button. Variants: primary (red), secondary, ink, light, outline, outline-light (white border for colored bands), ghost, plus a --lg size. Link buttons get a pixel arrow (global.css).

Small metadata pill for tech stacks and labels — the bare .tag span. The component form with a marker is ChipList.

Bordered content card — eyebrow, title, body, link. A recurring pattern, not yet a single canonical class.

Monospace inline code (.prose code) — a bordered chip on a cool background.

Multi-line code panel (.prose pre) — ink-black background, light monospace, horizontal scroll. The canonical block used across blog and docs.

// astro.config.mjs
export default defineConfig({
  output: 'static',
  site: 'https://redbridgenet.com',
})

Data table (.prose table) — label-style uppercase headers, hairline cell borders, subtle header fill.

Pull quote (.prose blockquote) — accent left border, subtle fill, italic.

Hairline horizontal rule (.prose hr) for separating content blocks.

Full-bleed hero band with the graph-paper wash and animated decorative blocks. Snaps its height to the grid so the bottom divider lands on a wash line. Blocks are swappable: grayscale default, or the colorized COLOR_HERO_BLOCKS option (with `slow`, used on /brand).

Framed content column with hairline edge-rails and corner markers. Wraps one or more GridRows; open-topped to sit under a GridHero, or `closed` for standalone.

A padded row inside a GridFrame, with a bottom divider and "+" markers at the rail intersections.

Reference-doc layout: GridHero, blueprint frame, a sticky scrollspy TOC rail, and prose content. Powers the /docs collection.

Site footer — blueprint-framed four-column layout with brand + social, site nav, live recent posts, and the build/reference links.

Eyebrow + headline + optional subhead block; left- or center-aligned. The standard section lead-in.

Fixed sidebar navigation with the brand mark, pixel-icon links, active-route state, and a mobile toggle.

Prev/next pagination control with page position, used on the paginated blog index.

Stacked blog/projects feed with an optional scrollspy sidebar rail (shown once there are enough items).

A single feed item (post or project) with pixel-icon, metadata, and X/LinkedIn share actions.

Blog post card with optimized featured image, category, and reading time; supports a featured variant.

Row of large display-figure stat tiles; caption style toggles between short caps and sentence-case.

Label/value spec strip for case-study metadata (Client, Type, Platform, …).

Delivery checklist with status badges (e.g. DELIVERED / IN FLIGHT).

Pill chips for tags, tech stacks, and service lists; optional accent "›" marker for tech-stack lists.

Grid of icon + title + body feature cards (e.g. a "The Solution" feature set).

Horizontal architecture flow — node cards joined by arrows; collapses to a vertical stack on mobile.

Full-bleed "Great work for great companies" client logo marquee — outer blueprint frame, fixed intro cell, infinite hover-pausable track with optional linked cells. Data from data/carousel.ts. Used on the homepage and /team.

Stylized map of the western US in the blueprint language — graph-paper wash, hairline state outlines, accent city markers with leader-line labels. Pins from data/locations.ts. Built for a "Where we are" section; currently unplaced.

Interactive animated process timeline — numbered nodes on a rail that draws (accent fill) as steps light up in sequence on scroll-in; hover/focus to pin a step. Horizontal on desktop, vertical on mobile. Used for "How we work" on /workflows.

Renders an 8-bit pixel-art icon by name (from lib/pixelIcons.ts); inherits currentColor and stays crisp at any size.