Brand
Assets and usage for press, social, and integrations.
Identity
Wordmark
aeiq
Zen Dots, graphite, lowercase. Treated as a single unit.
Brandmark
æ
Compact joined "ae" mark. Used for the favicon, app icon, and square placements.
Anatomy
Typeface
Zen Dots
Weight
400
Tracking
0
Color
#0a0a0b
Clear space
1× æ height
Min size
14px
Favicon glyph
æ
Treatment
Single unit
The three glyphs share a baseline and are treated as one mark.
Typography
Zen Dots
aeiq
Wordmark only. Never body copy.
Exo 2
Aa Bb Cc
Display sans — geometric, sci-fi register. H1s and the display utility. 500–700.
Inter
Aa Bb Cc
Body, sub-heads, eyebrows, UI. 300–700.
Color
The product surface model is a four-tier elevation ladder: paper for the outer shell, card as the primary reading surface (whisper-tinted off-white, not flat white), elevated for surfaces that lift above the card (popovers, secondary buttons, cards-on-cards), and inset families inside the card for grouped controls. Depth comes from value contrast, not drop shadows. Border and hover are chrome. The accent is reserved for the wordmark, primary CTA, focus, and active state — never decorative.
Accent
Accent
--color-accent
#0a0a0b
Wordmark, primary CTA, links, focus.
Accent hover
--color-accent-hover
#000
Pressed state for the primary CTA.
Accent dim
--color-accent-dim
#52525b
Secondary accent for marginalia.
Accent bg
--color-accent-bg
#0000000f
Translucent wash for pills, callouts, and active state.
Ink
Primary
#0a0a0b / 92%
Titles.
Text
#0a0a0b / 85%
Body copy.
Secondary
#0a0a0b / 54%
Lead, captions.
Muted
#0a0a0b / 36%
Eyebrows, section marks.
Surfaces
Paper
--color-paper
#f3f3f4
Outer shell and page background. Sidebar, app frame, and the canvas cards float above.
Card
--color-card
#fcfcfd
Primary reading and working surface — whisper-tinted off-white, not flat white.
Card elevated
--color-card-elevated
#fff
Pure white. Surfaces that lift above the card: popovers, secondary buttons, cards-on-cards.
Card subtle
--color-card-subtle
#f8f8f9
Gentle grouped controls and quiet internal sections inside the card.
Card muted
--color-card-muted
#ededf0
Stronger inset trays, wells, and action panes inside the card.
Inverse
--color-ink-card
#0a0a0b
Rare dark moments: composer, strong contrast panels, brand-weight surfaces.
Chrome
Border
--color-border
#0000000f
Hairline between surfaces and around controls.
Divider
--color-divider
#0000000a
Softer section breaks inside content.
Hover
--color-hover
#00000008
Hover wash on rows, cards, and interactive controls.
Selection
--color-selection
#0000001a
Selection and highlight wash.
Status
Success
#2e8f71
Completed quests, resolved events.
Warning
#b98a47
Warnings and pending states.
Error
#b85c5c
Errors and destructive actions.
Info
#0a0a0b
Informational state and data.
Iconography
Outline strokes, rounded caps, 1.5px weight. Icons inherit color via currentColor.
Do — stroke, not fill. Filled marks are reserved for third-party brand glyphs (GitHub, X, LinkedIn).
Do — inherit color via currentColor.
Don't — mix stroke weights in the same view. For emphasis, adjust opacity, not stroke.
Usage guidelines
Downloads
Open Graph Image
1200 × 630px
LinkedIn Banner
1584 × 396px — right-aligned for profile photo clearance
X / Twitter Banner
1500 × 500px
Logo
400 × 400px — graphite mark on white
Logo — Paper
400 × 400px — graphite mark on neutral paper
Logo — Dark
400 × 400px — white mark on graphite
Icon
512 × 512px — graphite mark on white
Icon — Dark
512 × 512px — white mark on graphite
Favicon
512 × 512px — graphite mark on transparent