Appostle is a mobile app for monitoring and controlling local AI coding agents from anywhere. This is the brand system that surrounds it — dark-mode-first, card-native, written for builders who already know what they're doing.
Direct, confident, technical but accessible. Action-oriented verbs — ship, orchestrate, assign, hand off. No marketing jargon, no AI hype, no "elevate / seamless / revolutionize".
Short declarative sentences. Technical precision without jargon. The user is a professional who ships — the voice respects that.
Software developers using AI coding agents (Claude Code, Codex, OpenCode) who want to monitor and control them from anywhere — phone, tablet, desktop.
A contemporary visual system built entirely around dynamic card compositions. Each card is a responsive, interactive building block that scales from mobile to desktop without compromise. Visual breathing room (320px desktop section spacing), intentional scale variation through asymmetric bento grids, micro-interactions that reveal depth and hierarchy. Minimalist, performance-conscious, grid-native.
Horizontal, vertical, and mark-only — each proven against light and dark. Mono variants are auto-derived from the master SVGs.
Dark-mode-first. Deep charcoal #181818 → #262626 with pink accent #C52669. Foreground is near-white. Status colors are standard semantic.
Three families. Inter for hero and body, Source Code Pro for alt. Captions and buttons are lowercase. Scale runs from 64px (h1) down to 10px (label).
Primary on accent, secondary on surface, ghost text, pill toggle. Pressed: opacity 0.85. Disabled: opacity 0.5. All button text lowercase.
1px border, surface fill, 8px radius. Hover lifts the elevation and shifts the border — never colour alone. Padding is 16px on mobile, 32px on desktop. Internal gaps follow 12 / 24.
Section gap scales from 48px on mobile to 320px on desktop — whitespace is treated as material, not absence. Motion is functional: animate only opacity and transform.
From art-direction.bans — the constraints that keep the system honest. Read these before designing anything new.
No static card layouts — every card surface must support hover states, focus rings, or animated transitions.
No rectangular card grids with uniform aspect ratios — vary card sizes using CSS Grid fr units.
No card shadows with fixed blur-radius and spread values — use layered rgba() borders or background-clip.
No cards with rounded corners exceeding 8px — maintain sharp, modern 4–8px border-radius only.
No stacked cards using margin-top for spacing — use grid gap or flexbox gap exclusively.
No cards without a clear visual boundary — every card has a 1px border, background differentiation, or layered background.
No hardcoded card widths — use minmax(), auto-fit, or auto-fill.
No cards that don't respond to viewport changes.
No card content with vertical padding exceeding 32px — keep 16px (mobile) / 32px (desktop).
No mix of filled and outlined card styles in the same section — choose one pattern per layout zone.
No cards with centered text alignment — left-aligned or grid-aligned only.
No decorative card elements that don't inform the content hierarchy.
No card hover states with colour changes alone — also require shadow elevation, border shift, or background highlight.
No generic card titles without supporting metadata, tags, or visual indicators.
No cards with more than one primary CTA — secondary actions are buttons / links.
No skeuomorphic textures or faux-3D bevels — depth is communicated through z-axis layering only.
No card animations exceeding 300ms duration on hover or focus.
No cards without sufficient whitespace — at least 12px (mobile) / 24px (desktop) gaps within cards.
No drop shadows with opacity > 0.2 and blur > 8px — keep shadows subtle and structural.
No cards with font-weight exceeding 600 for body content — readability over weight.