Component Library

Canonical button. Variants: primary (red), secondary, ink, light, light-blue, 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.

Insights-post layout: article hero (back link, meta, share), blueprint frame, and prose body. Wraps BaseLayout; powers the /insights posts.

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.

Generalized "trusted-rail" layout carried under the hero: a fixed intro cell plus a slotted full-bleed band. Used on /projects, /workflows, /team, and /insights.

Full-bleed ambient LED spectrum-analyzer band with variant + ghost props. Slots into IntroRail; also previewed on /band-preview.

Full-bleed ambient band of pulsing color segments (DataRobot-inspired, rebuilt in the brand palette). Slots into IntroRail; used on /workflows.

Full-bleed ambient nodes-and-edges band with traveling pulses. A slottable IntroRail band; shown on /band-preview.

Empty full-bleed strip that reserves band space (identical footprint to the real bands) until a final animation is designed.

Blog category filter pill-bar, persisted across View Transitions. Used on the blog index and category archives.

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.

Full-bleed client-praise marquee - sibling to LogoCarousel (outer frame, infinite hover-pausable track of quote cards; optional intro cell). Renders the featured subset of data/testimonials.ts. Rendered by the /fragments/testimonials route and embedded on /team via TestimonialEmbed.

Pulls the TestimonialRotator into a page via a same-origin, auto-sizing iframe to the noindexed /fragments/testimonials route - so the quote text stays out of the search index while the host page stays indexed. Used on /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.

Searchable, filterable flip-card board of the full client roster. Data-driven from data/clientWork.ts. Used on /projects.

Highlighted-clients block (GridFrame + scrollspy rail) built from ClientHighlight cells. Data-driven from data/caseStudies.ts. Used on /projects.

Renders multi-color pixel-art scenes from lib/pixelScenes.ts; theme-aware sibling to PixelIcon. Used on the homepage.

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