Brand identity
Brand guidelines.
Typography, an original color system, and the operating guidelines — the reference for anyone building on top of the Cocoontrix identity.
Typography
Display / UI · Manrope
Manrope 400–800
Geometric-humanist, precisely spaced, quietly premium. Carries the headlines and the wordmark.
Body · Inter
Inter 400–700
The workhorse for running text and dense UI. Neutral, legible at every size, endlessly reliable.
Mono · IBM Plex Mono
IBM Plex Mono 400–600
Signals the technical layer — labels, code, data, metadata. The engineering fingerprint.
Color system · brand
An original palette: warm Ink and Silk anchor the brand; Ember carries transformation; Aperture is the cool, technical counterpoint.
Ember
Primary accent — transformation & emergence. AA on Ink for text + UI.
Ink
Primary dark / default surface. AAA paired with Silk.
Silk
Primary light / paper. AAA paired with Ink.
Aperture
Cool secondary — data, links, quiet UI. AA on Ink.
Warm neutral scale · N50 → N900
N50
#F5F2EB
N100
#E8E3D8
N200
#D0C9BA
N300
#ABA394
N400
#847D6E
N500
#625C50
N600
#47423A
N700
#302C26
N800
#201D18
N900
#14130E
Success
Teal — distinct from typical AI-agency greens.
Warning
AA large text / UI on Ink.
Error
AA on Ink for text + UI.
Dark mode
Silk on Ink
Muted text uses N300 · Ember for accents.
Light mode
Ink on Silk
Muted text uses N500 · Ember-dark for accents.
WCAG AA notes
Ink ⇄ Silk — ~15:1. Passes AAA for body at any size, both directions.
Ember on Ink — ~5.2:1. AA for normal text, UI, and icons.
Ember on Silk — ~2.9:1. Large text / graphics only — use Ember-dark #A8642A (~4.8:1) for body on light.
Aperture on Ink — ~4.6:1. AA for links and secondary UI text.
Brand guidelines
✓ Logo — do
- Keep clear space of at least x (the ring weight) on all sides.
- Use Ink, Silk, or Ember only — one color per placement.
- Reverse to Silk on dark; Ink on light.
- Drop blades below 24px; ring-only below that.
✕ Logo — don't
- Recolor the blades separately or add gradients.
- Rotate, stretch, skew, or outline the mark.
- Add drop shadows, glows, or bevels.
- Place on busy imagery without a solid backing.
Iconography
Aperture-derived line
2px strokes, round caps and joins, drawn on a 24px grid. Geometry echoes the mark's arcs — no filled pictograms.
Illustration
Geometric, φ-based
Line-led compositions in Ink + Ember on Silk. Abstract, structural, never mascots or literal AI clichés.
Photography
Architectural & macro
High-contrast light, warm shadow, and macro texture (thread, silk, material). Humans present but restrained.
Motion
The aperture opens
Ease-out, 300–500ms. Every transition should feel like emergence — blades rotate, forms reveal. No bounce, no spin for spin’s sake.
Border radius
φ-tuned corners
Controls 12px · cards 20px · tiles/app icon 22%. Consistent softening, never fully pill-shaped except tags.
Shadow
Quiet elevation
Warm-tinted, low-spread shadows. Prefer surface-tone steps over heavy drop shadows — depth by material, not blur.
Spacing
4px base rhythm
Scale of 4 · 8 · 12 · 20 · 32 · 52 · 84. Generous, premium whitespace — the layout should breathe.
Grid
12-column φ layout
12 columns, max-width 1120px, φ-proportioned section rhythm. Content left-anchored, ample margins.
Backgrounds
One or two tones
Ink or Silk carry 90% of surfaces. Ember appears in small, deliberate doses — accents, not fields.