01 · Brand
Brand & identity
AgencyOK is a curated directory. The design is editorial and minimal — it gets out of the way and lets the agencies speak. No gradients, no heavy shadows, no hero animations.
Logo mark
agencyok
Voice & tone
02 · Colors
Color system
Warm neutral base with a single blue accent. Never more than one accent color at a time. Category tags use muted pastels — never neon.
Base palette
Category tag colors
Never use a second accent color. If you need to show different statuses (verified, featured, category), use the pre-defined token colors — don't invent new ones.
03 · Type
Typography
Three typefaces only. Fraunces for editorial headings, DM Sans for UI text, DM Mono for data and code.
Fraunces — Serif · editorial · headings
Find the right agency for any project
DM Sans — Sans-serif · UI · body
A curated directory of design and development agencies.
DM Mono — Monospace · data · code
$1,299/mo · 2021 · renlar.com
Type scale
Hero title
64px / -2px / 400
Find the right agency
Page title
42px / -1.2px / 400
Design agencies
Card title
18px / -0.4px / 400
Renlar
Body
14.5px / 1.75 / 300
Unlimited graphic design on a flat monthly subscription.
Label
11px / 500 / uppercase
ABOUT · SERVICES · PRICING
Mono data
12px / DM Mono / 400
$1,299/mo · 2021 · renlar.com
04 · Components
Components
Buttons
Badges
VerifiedFeaturedDesignDevelopmentContentMotion
Inputs
05 · Tech
Tech stack overview
Next.js 15 App Router · Supabase · Stripe · Vercel
The entire color system lives in CSS custom properties on :root. No theme library needed — just reference tokens like var(--accent).
No Tailwind. The design guide HTML uses plain CSS. The Next.js build can use inline styles + CSS vars to stay pixel-perfect with the reference. Don't introduce a new styling system.