A design-first agentic framework. Spec the brand once. Agents build it everywhere.
01 / direction
Intent
A brutalist geometric system where structure is the primary aesthetic. Form follows function with uncompromising rigor: every element serves a purpose, every grid line is visible, every corner is 90 degrees. Designed for builders who value clarity over decoration and honest structure over superficial polish.
Hero style
Split · left-aligned
Asymmetric two-column lockup. No centered hero. Content sits inside the visible grid.
Feature layout
Bento
Unequal proportions. 2fr 1fr 1fr or 3fr 1fr — never three equal columns.
Density
Bimodal
Airy intro blocks alternate with dense data zones. Section rhythm follows the same pattern.
Grid
visible-borders
Section color
all-neutral
Image aspect
4:3 uniform
CTA density
minimal
02 / mark
Logo
Three canonical lockups — horizontal, vertical, mark. Each proven on dark, light, and accent surfaces. Concentric pink rings (mark) at three opacity tiers — geometry of overlapping fields, never centered.
Horizontal · on darklogo-on-dark-horizontal.svg
Vertical · on darklogo-on-dark-vertical.svg
Mark · on lightlogo-on-light-mark.svg
Mark · on darklogo-on-dark-mark.svg
Mono · on accentlogo-mono-on-dark-mark.svg
03 / palette
Colors
Dark-mode-first. Deep charcoal surfaces (#181818 → #262626) with pink accent (#C52669). Foreground is near-white (#fafafa). Solid hex values exclusively — no gradients, no rgba, no transparency.
Primary
#C52669
accent · brand
Secondary
#181818
bg · base
Whites
#fafafa
fg · primary
Blacks
#121212
deep base
bg-base
#181818
bg-surface
#1f1f1f
bg-elevated
#262626
bg-inverted
#fafafa
fg-primary
#fafafa
fg-secondary
#a0a0a0
fg-muted
#6b6b6b
fg-subtle
#525252
accent-base
#C52669
accent-hover
#d03d7e
accent-active
#a52158
accent-subtle
#e04f8b
border-subtle
#222222
border-default
#2a2a2a
border-strong
#333333
04 / type
Typography
Three families: Hero for headlines and buttons (geometric sans), Body for prose, Alt mono for captions and metadata. Tight line-heights — never above 1.5. Captions and buttons render lowercase.
H1 · Hero 700 · 64 / 1.15 / -5
Design is the contract.
H2 · Hero 700 · 26 / 1.2 / -0.3
A design-first agentic framework.
H3 · Hero 600 · 22 / 1.3 / -0.2
Spec once. Build everywhere.
H4 · Hero 600 · 20 / 1.3 / -0.1
Brand becomes API. Agents build to it.
H5 · Body 100 · 24 / 1.5
The system reads your brief, then builds against it — no interpretation, no drift.
H6 · Body 500 · 16 / 1.5
Tokens, not opinions. Contract, not screenshots.
Body Base · Body 400 · 14 / 1.43
Appostle is a design-first agentic framework. Define your brand as a typed contract — colors, type, motion, voice, bans — and agents implement it across web, mobile, native, and marketing surfaces. The .md files in .appostle/brand/ aren't documentation; they're the source of truth that AI builds against.
Body Small · Body 400 · 12 / 1.33
Compatible with Claude Code, Codex, OpenCode. The contract feeds every agent — same brief, same output, every build.
fill #C52669 · text #ffffff · radius 8 · padding 32
Secondary
fill #3d3d3d · text #fafafa · radius 8 · padding 16
Text / ghost
fill transparent · text #a0a0a0 · padding 8
Pills
active fill #C52669 · inactive border #333333 · radius 9999
06 / spacing
Spacing
4px base unit. Scale: 0, 4, 6, 8, 12, 16, 24, 32, 36, 48, 64, 80, 96, 128. Mobile uses the compact end; desktop uses the generous end. Negative space is functional breathing room — never decorative.
Scale
4
8
12
16
24
32
48
64
96
128
Tokens
Section gap
48 / 320
Container pad
16 / 32
Card pad
16 / 32
Element gap
12 / 24
Max width
1200
mobile / desktop
07 / motion
Motion
Functional, not theatrical. Animate only opacity and transform. When you notice the animation, it's too much. Three durations, four easing curves. Standard for interactions, expressive for ambient.
Easings
defaultcubic-bezier(0.7, 0, 0.3, 1)S-curve
entercubic-bezier(0.45, 0.05, 0.55, 0.95)soft
exitcubic-bezier(0.45, 0.05, 0.55, 0.95)soft
expressivecubic-bezier(0.16, 1, 0.3, 1)ambient
Durations
instantedge case100ms
fastmicro feedback160ms
normalprimary transitions240ms
slowdeliberate500ms
glacialedge case800ms
08 / icons
Icons
Lucide outline at stroke weight 2. Three sizes — 14 (compact), 16 (default), 20 (prominent). Color inherits from surrounding text. No filled icons, no decorative variants.
check
close
chevron
arrow
code
done
add
square
play
pause
grid
menu
activity
spinner
pulse
box
09 / elevation
Shadows
Three tiers only. Diffused, low-opacity, neutral black. Shadows communicate depth — never decoration. Dark-mode shadows are stronger than light-mode (0.25 base opacity vs 0.02). The only place blur is permitted.
primary
rgba(0,0,0,0.25) 0 2px 4px
Cards · elevated surfaces
elevated
rgba(0,0,0,0.20) 0 4px 8px
Modals · dropdowns · floating panels
glow
rgba(0,0,0,0.40) 0 12px 24px
Highest elevation · overlay backdrop
10 / status
Status
Standard semantic colors. Square pills only — no rounded badges. Foreground is always the high-contrast pair specified in the token table.
running
#16a34a / #ffffff
success
stalled
#f59e0b / #181818
warning
failed
#dc2626 / #ffffff
danger
paired
#3886E5 / #ffffff
info
11 / voice
Voice
Appostle speaks like a confident peer, not a marketing department. Short declarative sentences. Technical precision without jargon. The user is a professional who ships — the voice respects that.
Tagline
Design is the contract.
Tone
Direct, confident, technical but accessible. Action-oriented verbs — spec, enforce, ship, build to. No marketing jargon, no AI hype, no clichés. Speaks designer-to-engineer.
Audience
Designers and engineers tired of watching agents reinterpret the brand on every PR. Appostle treats the brand spec as a typed contract — colors, type, motion, voice, bans — that agents build against rather than guess at.
Pillars
Contract
typed brand spec · enforced, not suggested
Agentic
agents read the spec · agents build the surface
Composable
one brief feeds web · mobile · native · marketing
Honest
the contract wins · no hallucinated brand
12 / bans
Bans
The constraints that keep this brand brutalist. Every item below is forbidden — not discouraged. If you reach for one of these, the answer is somewhere else.
No border-radius of any value — all corners 90 degrees
No drop shadows or depth via blur — borders, layering, grid
No gradients or color stops — solid opaque fills only
No opacity, rgba, or transparency — every color a solid hex
No backdrop-filter or filter: blur — surfaces stay sharp
No circular UI elements — squares, rectangles, geometric SVG
No floating labels — label above, error below, never inline
No serif typefaces — geometric sans-serif exclusively
No generic icon libraries — custom SVG or ASCII only
No emojis in interface, copy, or messaging
No centered hero or feature sections — asymmetric or left
No three equal columns — 2fr 1fr 1fr, 3fr 1fr, etc.
No decorative ornaments, swashes, or visual filler
No easing other than linear in interactions — no bounce
No image filters, desaturation, or color grading
No rounded image corners — 90-degree crops only
No line-height above 1.5 — tight and dense always
No hover states without state change — function only
No decorative whitespace — structural breathing room only
No AI clichés: Seamless, Elevate, Unleash, Revolutionize, Transform
No parallax, infinite scroll, or lazy-load animations
No card components with consistent padding + drop shadows
No invisible max-width containers — grid expresses limits
No aspect ratios outside {1:1, 4:3, 16:9, 21:9}
No varying line thickness — single grid line weight, always