The molecular-ring identity.
The complete visual system for Indole — the marks, the color, the type, and the few rules that hold them together. Read it top to bottom. Then design in the brand, with the brand.
01 The idea
Indole is the molecule in jasmine.
Indole is the aromatic molecule responsible for jasmine’s scent — the small, specific thing that makes the whole bloom unmistakable. Two registers tell one story.
Two registers, one story — the structure and the scent. They are never mixed inside a single lockup.
02 Logo system
One mark, three forms.
The lockup is the signature. The wordmark serves tight horizontal contexts. The ring alone carries favicons, app icons, and avatars — the identity collapsed to its core.
Sub-brand lockups
The product family extends the same mark — the ring and wordmark hold, the product name follows in terracotta. The platform reads as one system.
Clear space
Keep one ring-height of padding clear on every side. Nothing enters the box — not type, not rules, not other marks.
Minimum size
Hold the full lockup down to roughly 24px tall. Below that, drop the wordmark and let the ring carry the identity.
lockup · ≥ 24pxring · < 24px03 Secondary register
The jasmine register — expressive, never the identifier.
A sanctioned secondary mark for editorial and hero moments: the jasmine flower paired with the wordmark set in Voyage. It is a flourish, not a logo.
Where the primary mark always wins. The header, the favicon, and every first-touch surface stay the molecular lockup. The jasmine register appears only after the identity is established — and the two registers are never combined in one lockup.
04 Color
Warm paper, deep indigo, one terracotta spark.
Indigo is the workhorse and carries the brand. Terracotta is spent sparingly — one focal element at a time. Butter is an accent surface, never the page.
Background system
Warm paper by default · butter-yellow for signature accent bands · dark indigo for high-impact sections.
Indigo ramp · --indigo-50 → 900
Terracotta ramp · --terracotta-50 → 900
State colors
Functional only — feedback, status, validation. They sit outside the brand palette.
05 Typography
Outfit leads. Plus Jakarta Sans carries.
Outfit gives the brand its display voice and the wordmark. Plus Jakarta Sans does all the reading work. Voyage is reserved for the jasmine register, as outlines only.
Human Pathfinding.
ABCDEFGHIJKLM abcdefghijklm 0123456789
A shortlist you can defend.
Indole turns a hard question — who do I need to know? — into an evidence-backed shortlist you can act on. Short declarative sentences. Concrete claims over adjectives. Sentence case everywhere.
06 Usage
A short list of do and don’t.
The system stays calm when a few rules hold. Lead with the lockup, keep terracotta rare, and never let the two registers collide.
✓ Do
- ✓Lead with the molecular lockup as the identifier.
- ✓Ground layouts in warm paper; reverse to cream on indigo.
- ✓Spend terracotta on one focal element per view.
- ✓Drop to the ring alone below ~24px.
✕ Don’t
- ✕Mix the molecular and jasmine registers in one lockup.
- ✕Set body text in Voyage, or in the Outfit wordmark face.
- ✕Recolor the mark or fill the ring with terracotta.
- ✕Crowd the lockup or sit it on a busy ground.
07 Accessibility
Every pairing is contrast-gated.
No token pair ships until it clears WCAG. Ink on paper, cream on indigo, ink on butter — all gated to AA or AAA before they enter the system.