Background
--color-bg
#FFFFFF
Page background; primary canvas.
ⓘ
Gradient Veil Pattern
Two background-image layers stacked in CSS — a horizontal gradient on top creates a solid reading zone that fades to transparent, revealing the repeating topography tile below.
background-image:
linear-gradient(
to right,
var(--color-bg) 35%, /* solid zone */
transparent 70% /* fade end */
),
url('/topography.svg'); Move 35% to widen the text zone. Move 70% to show more texture behind copy.
The Agency Fund Presents
Agentic Workflows Club Design System
A one-page reference for the visual language of agenticworkflowsclub.org: color tokens, typography, components, and spacing. Everything on this page is rendered with the same tokens the live site uses.
Think editorial, not SaaS. One type family. One accent color. Generous whitespace. Sharp corners.
01 / Colors
Eight tokens do ninety-five percent of the work.
The site declares its palette as CSS custom properties on :root. The brand blue
(--color-accent: #69c) is the only color that ever carries emphasis — everything else
is a neutral, a surface, or a quiet supporting accent.
Core tokens
Surface
--color-surface
#F5F5F5
Image wells, inset panels, code blocks.
Pill background
--color-pill-bg
#F0F0F0
Inline pills, quiet inset surfaces.
Border
--color-border
#E5E5E5
Hairline dividers, section separators.
Text
--color-text
#111111
Body copy and headlines.
Muted
--color-muted
#666666
Eyebrow labels, dates, meta copy.
Accent — Club Blue
--color-accent
#6699CC
Primary button, links, one accent word per headline. Do not overuse.
Positive
--color-positive
#4A7A4A
Reserved for positive states.
Extended accents
Accent — darker
(stylesheet)
#4A7FB5
Hover / pressed on primary buttons.
Accent — tint
--color-link (dark theme)
#7FB3DE
Links in dark-theme variant.
Coral
(stylesheet)
#C97474
Sunburst mark, outer-edge page glow. Decoration only.
Coral tint
(stylesheet)
#E89A9A
Companion tint for coral.
Sage
(stylesheet)
#A2CBA2
Pale companion to --color-positive.
02 / Typography
One family. Two weights. A signature label.
Montserrat handles every role — headings, body, labels, buttons. The uppercase tracked-out eyebrow is the brand's single most recognizable typographic move; it appears above almost every content block.
Agentic Workflows Club
Learn Enough Claude Code & Cowork To Be Dangerous
A minimally viable AI policy
AI is giving some significant leverage while leaving others behind. Agentic Workflows Club is a virtual meetup where practitioners share those high-leverage workflows openly.
Up Next / Meetup #1
Got such an AI workflow worth sharing? Submit your workflow.
02b / Markdown Prose
Code in context — always legible, never raw.
Guide and TEST dialogs render MDX via innerHTML. Two distinct surfaces: inline
chips for short tokens, a permanently-dark block for multi-line commands. The dark block
never inverts — --color-code-bg is fixed regardless of page colour scheme,
so shell output is always readable on the Catppuccin canvas.
Inline code
Install gh with Homebrew, then run
gh auth login --web
and follow the prompts.
- Font
--font-mono— system monospace stack- Size
- 12.5px
- Background
--color-surface- Border
- 1px
--color-border - Radius
- 4px
- Padding
- 2px 6px
Code block
gh auth login --web --git-protocol https --hostname github.com
! First copy your one-time code: ABCD-1234
Open this URL to continue in your web browser:
https://github.com/login/device- Background
--color-code-bg#1e1e2e — fixed, never inverts- Text
--color-code-text#cdd6f4 Catppuccin Mocha- Radius
- 8px
- Padding
- 16px 20px
- Focus ring
- none — suppressed with
outline: none
03 / Components
Structure through rhythm, not through chrome.
The only rounded component is the primary button (6px). Everything else is flat fills, hairline dividers, and generous padding. No shadows. No gradients.
Primary button
bg #6699CC, white text, 14/600, padding 12px 28px, radius 6px.
Hover darkens to #4A7FB5. No shadow, no border.
Ghost button
Same geometry as primary; 1px accent border, transparent fill. Use as secondary only.
Inline link
Want to hear about future meetups? Subscribe here.
Accent color with matching underline. No button chrome — it's just emphasized prose.
Category grid
00Teaching & Education
03Operations & Admin
01Research & Analysis
04Public Sector & Civic Tech
02Software Development
05Language & Accessibility
Each row is padding 20px 48px and a hairline divider — no card, no background.
Two-digit numerals give the grid a program-note feel.
Content card (blog item)
[illustration well · #F5F5F5]
Guide
AI 101
A visual guide to AI for working professionals.
Pale gray image well, eyebrow tag, bold title, short description in muted gray. No border, no shadow — it's editorial layout.
Meetup announcement
Up Next / Meetup #1
Learn Enough Claude Code & Cowork To Be Dangerous
April 30, 2026 · 6pm EAT · Online (Zoom)
Learn More & Sign Up →Centered stack: eyebrow → headline with one accent word → meta line → decorative coral sunburst → primary CTA. The sunburst is the only organic mark on the whole brand.
Brand marks — The Agency Fund
Three official variants — sail-right (default), sail-left (footer / dark), and stacked (compact).
Shipped inline with fill="currentColor", so the logo follows CSS color
and flips automatically in dark mode without a second white asset.
04 / Spacing
Generous, not tight.
The feel comes from whitespace more than from any single element. Narrow reading column, big vertical rhythm between sections, hairline dividers instead of cards.
Content column
~1022px max-width, centered
Outer gutter soaks up the rest of the viewport.
Reading column
520–660px
Keeps measure around 60–75 characters.
Section rhythm
40px · section-level padding
Large blocks run 300–480px tall.
Button padding
12px 28px
Distinct shape without feeling bulky.
Category tile padding
20px 48px
Wider horizontal air → reads as a program note.
Corner radius
6px on buttons · 0px elsewhere
Sharp corners are the default.
05 / Diagrams
Charts that keep the brand's restraint.
Data visualizations are where design systems usually fracture — every chart library ships with its own palette, its own radius, its own shadow. This is the pattern for area charts: smooth splines, a gradient-to-transparent fill under each line, the accent blues for series colors, and no chrome beyond a single hairline border on the card.
Area Chart – Interactive
Showing total visitors for the last 3 months
Desktop Mobile
Curves are monotone cubic splines. Each series gets a
<linearGradient> fill that fades from its line color at full saturation
down to full transparency at the baseline — this is the detail that makes the chart
read as air and density rather than as a solid shape. Desktop uses the accent tint
(#7FB3DE), Mobile uses sage (#A2CBA2) — so the
chart stays inside the existing palette instead of introducing new chart colors.
06 / Do's & Don'ts
Four rules for staying on-brand.
Do · Eyebrow every section
Start every content block with the 14px / 500 / uppercase / letter-spacing 1.4px / #666 label. It's the brand's typographic fingerprint — without it, a section of Montserrat stops feeling like Agentic Workflows Club.
Do · Reserve the blue
Use #6699CC in at most three places per view — primary CTA, inline links,
one accent word per headline. Coral is decoration only; it never becomes a second
action color.
Do · Lean on whitespace & rules
Structure through vertical rhythm and #E5E5E5 hairlines, not bordered or
shadowed cards. When you'd reach for a card, try spacing + a divider first.
Don't · Add chrome
No drop shadows. No gradients. No glassmorphism. No bordered hero panels. The identity depends on restraint — any single piece of heavy chrome will read as off-brand the moment it lands on the page.
07 / Workshop Rail
Follow-along page component.
Learn enough to be dangerous.
A vertical timeline of workshop beats. Each beat expands into a horizontal row of cards. Nine card types cover the full range of facilitator cues — from verbatim prompts to non-interactive slides and checklists.
Beat dot · three states
Default
Active (open beat)
Done
Pills · two variants
PROMPT ACTION DEMO DISCUSS ON SCREEN WHILE WE WAIT SLIDES CHECKLIST LINK POLL
Accent = facilitator action required. Surface = informational.
Card types · all nine
PROMPT
Use Claude in Chrome to visit my org's website. Read the :root CSS variables and extract a DESIGN.md.
ACTION
Open your Cowork project. Enable Claude in Chrome in the Connectors menu.
DISCUSS
AI is infrastructure, not a product category. The question is how much leverage you can extract from it before everyone else does.
ON SCREEN
Claude Cowork project open, Claude in Chrome enabled in Connectors. Pointed at the live org website.
WHILE WE WAIT
Claude is reading real CSS variables from the live DOM. Not guessing from screenshots. This is the source of truth.
CHECKLIST
LINK
fieldmark.sh
Upload your session transcript to get behavioral scores back.
POLL
What does AI look like in your work today?
Scale of 1–5: how confident are you to run a Cowork session on your own?
DEMO
Live tour of the four surfaces
Switch between browser tab, Desktop app, Cowork project, and a Claude Code terminal. 30 seconds each.
Beat interaction · click to expand, click a card to open dialog