info@agency-os.ai Design system v0.1 Fast · accessible · tokenized

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.

Ink#1C1E24 · foreground
Teal#2E9E9E · accent
Deep teal#1F7A7A · interactive
Soft teal#E7F5F4 · tint
Cream#FAFAFA · page
Alt surface#F1F4F7 · bands
Muted ink#4A4F59 · body
Mist#D3DBE4 · lines on dark
Border#E2E4E9 · hairlines

Typography

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.

Statement · 66 / 1.06
Ready to stop experimenting?
Section · 52 / 1.08
One team. Zero handoffs.
Pillar · 26 / 1.25
Senior-Only Team
Card · 21 / 1.3
AI Agents & Automation
Body · 16 / 1.6
Most clients see their first working prototype in 14 days. We move at startup speed with enterprise rigor: weekly demos, tight feedback loops, zero wasted sprints.
Label · mono 12
Product design · iOS engineering · Brand

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.

Primary Secondary Ghost Dark

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/hero

Hero. Page-leading hero in four variants, from program pages with stats to simple interior banners.

aos/feature-story

Feature story. Magazine-style asymmetric promo for a single story.

aos/pullquote

Pullquote. Editorial quote as a full-width break or an in-content pin.

aos/tldr

TL;DR. Quick-read summary box with bullet takeaways for long posts.

aos/values-pillars

Values pillars. Three or four mission pillars in an editorial band.

aos/numbered-reasons

Numbered reasons. Parallel numbered list for ranked arguments.

aos/timeline

Timeline. Vertical timeline for arcs, steps, or event history.

aos/process-steps

Process steps. Numbered horizontal step cards for how-to flows.

aos/tabs

Tabs. Switchable panels for parallel content.

aos/accordion

Accordion. Editable Q&A in section or card variants.

Data and proof

aos/stat-row

Stat row. Four-up stat cards or a divided row with labels.

aos/cost-breakdown

Cost breakdown. Editorial cost table with subtotals and a net figure.

aos/aid-table

Aid table. Four-column reference table for structured data.

aos/net-price-card

Net price card. Four-question estimator with an AI-written explanation.

aos/credentials-row

Credentials row. Accreditation and credential cards with mono badges.

aos/employer-wall

Employer wall. Monochrome logo wall with text badges.

aos/testimonial-wall

Testimonial wall. Mosaic of short quotes with an optional highlight.

People and audiences

aos/people-grid

People grid. Cards with initials, tags, names, and roles.

aos/counselor-card

Counselor card. Single-person pin with photo, contact, and booking link.

aos/audience-router

Audience router. Self-identification cards that route each visitor to the right path.

aos/program-paths

Program paths. Three-up comparison of routes to the same outcome.

News and events

aos/mix-grid

News + events grid. Mixed grid of stories and event cards.

aos/event-schedule

Event schedule. Hour-by-hour agenda with times and locations.

aos/document-library

Document library. Typed document cards: policy, handbook, form.

aos/info-cards

Info cards. Kicker, title, body, link. The workhorse grid.

Conversion and media

aos/cta-band

CTA band. Callout band with apply, visit, and rolling variants.

aos/form

Form. Branded inquiry and RSVP forms with routing.

aos/decision-demo-form

Decision concierge. Three fields in, a private personalized welcome page out.

aos/figure

Figure. Image with caption or split-layout variants.

aos/video

Video. 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 wizard

Guided page builder. Five steps from intent to a complete draft page, assembled from the block library.

Post writer

Topic to post. Type a topic, get a structured post: plan, sections, and imagery slots.

Rewrite

Inline rewriting. Select any block and rewrite it for tone, length, or reading level.

Alt text

Vision alt text. Descriptive alt text generated for image blocks, editable before save.

SEO + GEO

Grading sidebar. Scores each page for search and for how AI assistants read and cite it.

Site search

AI search. Visitors ask in plain language; answers cite real site pages.

Chat goals

A chatbot with a job. Give the assistant a goal and it works toward it, then queues the follow-up email.

Auto-blog

Topic queue. A queue of topics becomes a steady publishing cadence, on schedule.

Lead nurture

Nurture writer. Every captured lead gets a personal, on-voice reply drafted for review.

Control panel

One 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
Translate: