Brand and style guide — v1.0
The system behind Captifly.
Every surface Captifly ships — product, site, deck, docs — is built from the tokens on this page. Copy a value, follow the rule, and the result will look like us.
- Palette
- 13 tokens
- Type
- Geist / Inter
- Radius
- 0.875rem
- Mode
- Dark first
Foundations
Four rules that decide everything else
When a decision isn't covered by a token, these settle it.
Dark by default
Captifly lives beside the work, not in front of it. Obsidian recedes so captured content leads.
Signal over surface
Colour is information. Electric means act, mint means verified, cyan means live. Never decoration.
Evidence, not adjectives
Show the artifact — the workflow, the step, the diff. The product proves the claim.
Consent is visible
Every capture surface makes state legible. Trust is a design requirement, not a policy page.
Identity
Logo and lockups
The mark is Cap inside a gradient tile. The wordmark is Geist Semibold, tracking -0.025em. They ship together unless space forbids it.
Do
- Use the full lockup wherever space allows
- Keep clear space equal to the height of the mark
- Place the mark on obsidian, navy, or a brand gradient
- Minimum width: 96px lockup, 24px mark
Don't
- Recolour the mark outside the brand gradient
- Rotate, skew, or add drop shadows to the wordmark
- Place the lockup on busy photography without a scrim
- Rebuild the wordmark in a different typeface
Character
Cap
Cap is a fly with good glasses and better judgment. He appears where the product is watching work happen — never as a mascot for its own sake, never more than once per screen.
Personality
Observant, dry, quietly competent. Never goofy.
Scale
48–320px. Below 48px use the mark tile instead.
Placement
Edge of frame, three-quarter view, drifting in.
Never
No speech bubbles, hats, costumes, or emoji faces.
Colour
Obsidian ground, electric signal
Defined in oklch for perceptual consistency. Click any value to copy it.
Surfaces
oklch(0.162 0.014 258.4)
Primary canvas. Every surface begins here.
oklch(0.191 0.036 268.2)
Panel base, section bands, footer.
oklch(0.208 0.04 265.8)
Popovers, drawers, elevated glass.
oklch(0.228 0.033 265.7)
Cards and inputs resting on the canvas.
Brand
oklch(0.563 0.24 263.8)
Primary action. The single most important colour in the system.
oklch(0.725 0.162 238.3)
Eyebrows, active states, focus rings, link hover.
oklch(0.541 0.247 293)
Gradient terminus, intelligence and AI surfaces.
oklch(0.511 0.23 277)
Mid-gradient anchor, chart series, ambient glow.
Accents and neutrals
oklch(0.844 0.146 209.3)
Capture signals, live indicators, motion trails.
oklch(0.851 0.165 172.2)
Success, verified, consent granted.
oklch(0.554 0.041 257.4)
Secondary text, dividers, grid lines.
oklch(0.975 0.005 258.3)
Foreground text on dark. Never pure white.
Colour
Gradients
Three gradients. No others. Angle is always 120° unless it wraps a container edge.
linear-gradient(120deg, var(--electric), var(--violet))
Primary buttons, logo mark, headline accents.
linear-gradient(120deg, var(--neon), var(--electric) 45%, var(--violet))
Gradient text, hero emphasis, data flow lines.
linear-gradient(120deg, var(--cyan), var(--mint))
Live capture states and signal visualisation only.
Type
Geist for structure, Inter for reading
Headings use Geist with tight negative tracking. Body copy uses Inter at 1.6 line height. Geist Mono carries tokens, code, and data labels.
Capture how work happens
Work intelligence, on the fly
From screen to structured workflow
Automation discovery
Captifly turns everyday activity into documentation, insight, and AI-ready process data.
Consent required before any capture session begins.
DESIGN SYSTEM
Components
UI elements
Radius 0.875rem. Borders are 10% cloud. Panels are a 165° surface-to-navy fade, never flat fills.
Buttons
One primary per view. Minimum touch target 44px.
Badges and states
State colour is semantic. Never pick one for looks.
Glow border panel
Reserved for the single most important card in a section.
Glass
20px blur, 150% saturation. Headers and floating overlays only.
Motion
Movement means something happened
Easing is always cubic-bezier(0.22, 1, 0.36, 1). Nothing loops faster than three seconds.
Language
Voice and tone
We write like a senior operator explaining something to a peer: short sentences, real nouns, no hype.
Precise, never clinical
DoCaptifly detects the steps people actually repeat.
NotCaptifly leverages next-gen synergistic process telemetry.
Confident, never boastful
DoDocumentation that writes itself as work happens.
NotThe world's most revolutionary AI platform, ever.
Consent-first, always
DoNothing is captured until someone says yes.
NotAlways-on monitoring for total visibility.
Concrete, never vague
DoCut a 14-step reconciliation to 4.
NotUnlock unprecedented operational efficiency.
Standards
Accessibility is part of the brand
A design that fails contrast isn't on brand, however good it looks.
- Body text meets WCAG AA (4.5:1) on every surface token
- Focus rings are 2px neon with 2px offset, never removed
- Touch targets are at least 44×44px
- Colour never carries meaning alone — pair it with a label or icon
- Every decorative image is aria-hidden; every meaningful one has alt text
- prefers-reduced-motion disables all animation
Downloads
Get the assets
Logos, mascot renders, and the token file are available on request for press, partners, and integrations.
Captifly brand kit
SVG and PNG lockups, Cap renders, the oklch token sheet, and usage terms.