Design system v0.1
One system. Thirty blocks. Assembled in minutes.
Every Agency OS site ships from the same foundation: a tokenized palette, a two-level type scale, and a library of thirty production blocks, with an AI layer that drafts, rewrites, and grades content inside the editor. This page documents all of it.
Color
A palette that lives in tokens.
Every color on every page references a custom property. Swap the token, and the whole system follows. No hard-coded values outside the root.
#1C1E24 · foreground#2E9E9E · accent#1F7A7A · interactive#E7F5F4 · tint#FAFAFA · page#F1F4F7 · bands#4A4F59 · body#D3DBE4 · lines on dark#E2E4E9 · hairlinesTypography
Two display levels. Nothing in between.
Instrument Sans carries the interface, Cormorant Garamond carries short editorial emphasis, and JetBrains Mono carries labels and data. Statements and section titles are the only display sizes; everything else is content scale.
Buttons
Four intents, one geometry.
Primary carries the conversion moment on any surface. Secondary and ghost step back without disappearing. Dark holds its own on light bands.
Block library
Thirty blocks, ready in the editor.
Every block is native to the block editor, carries the system tokens, and ships with sensible defaults. Editors assemble pages; they never style them.
Structure and story
aos/heroHero. Page-leading hero in four variants, from program pages with stats to simple interior banners.
aos/feature-storyFeature story. Magazine-style asymmetric promo for a single story.
aos/pullquotePullquote. Editorial quote as a full-width break or an in-content pin.
aos/tldrTL;DR. Quick-read summary box with bullet takeaways for long posts.
aos/values-pillarsValues pillars. Three or four mission pillars in an editorial band.
aos/numbered-reasonsNumbered reasons. Parallel numbered list for ranked arguments.
aos/timelineTimeline. Vertical timeline for arcs, steps, or event history.
aos/process-stepsProcess steps. Numbered horizontal step cards for how-to flows.
aos/tabsTabs. Switchable panels for parallel content.
aos/accordionAccordion. Editable Q&A in section or card variants.
Data and proof
aos/stat-rowStat row. Four-up stat cards or a divided row with labels.
aos/cost-breakdownCost breakdown. Editorial cost table with subtotals and a net figure.
aos/aid-tableAid table. Four-column reference table for structured data.
aos/net-price-cardNet price card. Four-question estimator with an AI-written explanation.
aos/credentials-rowCredentials row. Accreditation and credential cards with mono badges.
aos/employer-wallEmployer wall. Monochrome logo wall with text badges.
aos/testimonial-wallTestimonial wall. Mosaic of short quotes with an optional highlight.
People and audiences
aos/people-gridPeople grid. Cards with initials, tags, names, and roles.
aos/counselor-cardCounselor card. Single-person pin with photo, contact, and booking link.
aos/audience-routerAudience router. Self-identification cards that route each visitor to the right path.
aos/program-pathsProgram paths. Three-up comparison of routes to the same outcome.
News and events
aos/mix-gridNews + events grid. Mixed grid of stories and event cards.
aos/event-scheduleEvent schedule. Hour-by-hour agenda with times and locations.
aos/document-libraryDocument library. Typed document cards: policy, handbook, form.
aos/info-cardsInfo cards. Kicker, title, body, link. The workhorse grid.
Conversion and media
aos/cta-bandCTA band. Callout band with apply, visit, and rolling variants.
aos/formForm. Branded inquiry and RSVP forms with routing.
aos/decision-demo-formDecision concierge. Three fields in, a private personalized welcome page out.
aos/figureFigure. Image with caption or split-layout variants.
aos/videoVideo. Branded frame for embedded or uploaded video.
AI assistance
The editor drafts. The system checks.
A custom-built AI layer works inside the editor, grounded in the site’s own content and brand voice. Everything it produces lands as ordinary blocks that an editor can change or discard.
Page wizardGuided page builder. Five steps from intent to a complete draft page, assembled from the block library.
Post writerTopic to post. Type a topic, get a structured post: plan, sections, and imagery slots.
RewriteInline rewriting. Select any block and rewrite it for tone, length, or reading level.
Alt textVision alt text. Descriptive alt text generated for image blocks, editable before save.
SEO + GEOGrading sidebar. Scores each page for search and for how AI assistants read and cite it.
Site searchAI search. Visitors ask in plain language; answers cite real site pages.
Chat goalsA chatbot with a job. Give the assistant a goal and it works toward it, then queues the follow-up email.
Auto-blogTopic queue. A queue of topics becomes a steady publishing cadence, on schedule.
Lead nurtureNurture writer. Every captured lead gets a personal, on-voice reply drafted for review.
Control panelOne switchboard. Every AI feature listed, toggled, and configured on a single screen.
The homepage you just browsed was assembled from this system. If you would like the same foundation under your site, we should talk.
Start a conversation