Your dev environment, in your pocket.

Brand guidelines for Appostle -- a mobile app for monitoring and controlling AI coding agents from anywhere.

Brand Guide v1.0

1.2 Color Palette

Color Palette

A restrained dark-mode palette built around a single pink accent. Surfaces layer from deep to elevated.

Primary
#C52669
Accent Bright
#e04f8b
Surface 0
#181818
Surface 1
#1f1f1f
Surface 2
#262626
Surface 3
#3d3d3d
Foreground
#fafafa
FG Muted
#a0a0a0
FG Subtle
#525252
Border
#2a2a2a
Border Accent
#333333

Semantic Tokens

Success #16a34a
Warning #f59e0b
Danger #dc2626
Info #3886E5
1.3 Typography

Typography

System font stack for maximum performance and native feel. Monospace for code and metadata.

Heading 1
34pxBold (700)-0.02em
Heading 2
26pxBold (700)-0.01em
Heading 3
22pxSemibold (600)
Heading 4
20pxSemibold (600)
Body text renders at 14px with normal weight. Designed for long-form readability on dark backgrounds.
14pxNormal (400)
Caption text at 10px medium weight for metadata and timestamps
10pxMedium (500)
const agent = await appostle.connect();
Monospace13pxui-monospace
1.4 Buttons

Buttons

Four button families covering primary actions, secondary options, ghost affordances, and pill toggles.

Fill: #C52669 / Text: #fff / Radius: 8px
Fill: #3d3d3d / Text: #fafafa / Radius: 8px
Fill: transparent / Border: hairline / Radius: 8px
Fill: #C52669 / Radius: 9999px
Fill: #262626 / Radius: 9999px
1.5 Spacing

Spacing

A 4px base unit with a 10-step scale. Every measurement in the system derives from this grid.

sp-1
4px
sp-2
8px
sp-3
12px
sp-4
16px
sp-6
24px
sp-8
32px
sp-12
48px
sp-16
64px
sp-24
96px
sp-32
128px
1.6 Motion

Motion

Two named easing curves and three duration tiers. Motion is purposeful and quick -- never decorative.

Standard
cubic-bezier(0.7, 0, 0.3, 1)

Primary easing for transitions, transforms, and layout shifts. Starts fast, decelerates smoothly.

Gentle
cubic-bezier(0.45, 0.05, 0.55, 0.95)

Subtle, symmetric easing for ambient animations and state changes that should feel natural.

Durations

Fast
100ms
Base
160ms
Slow
240ms
1.7 Shadows

Shadows

Three elevation tiers for dark-mode depth. Shadows use pure black at varying opacities.

Small
0 2px 4px rgba(0,0,0,0.25)
Medium
0 4px 8px rgba(0,0,0,0.20)
Large
0 12px 24px rgba(0,0,0,0.40)
1.8 Icons

Icons

Lucide icon library, outline style, stroke width 2. Three size tiers for different contexts.

Library: Lucide
Style: Outline
Stroke: 2px
14px
14px
16px
16px
16px
16px
20px
20px
20px
20px
20px
1.9 Voice

Voice & Tone

How Appostle speaks. Direct, confident, developer-to-developer. No fluff, no marketing-speak.

Tagline
Your dev environment, in your pocket.
Tone
Direct, confident, developer-to-developer. We speak as peers, not vendors. Technical accuracy over simplification.
Audience
Developers who use AI coding agents daily and want real-time control from anywhere -- not just notifications, full interaction.
Pillar
Freedom
Pillar
Control
Pillar
Mobility
Pillar
Transparency