Ideaology

Design

Brand System

Colors, typography, spacing, motion — and the rules that bind them. The brand is governed.

The visual identity is the protocol's first economic asset: it signals who this is for before any number on the page does. Ideaology positions against the neon-and-meme aesthetic that dominates crypto. We borrow from private banking, intellectual journals, and contemporary art catalogs: warm parchment, dense ink, restrained metallic accent.

The goal: a serious investor opens the site and reads "adults are running this protocol" before they read a single line of copy.

1. Color system

1.1 Core palette

Token Hex RGB Role
ink #0A0A14 10, 10, 20 Primary background (dark mode), primary text (light mode)
canvas #F5F2E8 245, 242, 232 Primary background (light mode), primary text (dark mode)
aurum #D4A24C 212, 162, 76 Primary accent — value, premium, gold leaf
plasma #7B5CFF 123, 92, 255 Secondary accent — energy, Solana lineage
mist #1C1C28 28, 28, 40 Card/surface on dark; subtle borders
smoke #8C8A7F 140, 138, 127 Muted text, captions, dividers on light
signal #5BE3A9 91, 227, 169 Success, health, positive APR
alarm #FF6B6B 255, 107, 107 Risk, liquidation, negative deltas

1.2 Extended tints

Generated by shifting lightness ±10 / ±20 / ±30 from each core token. Used sparingly — never for branding moments, only for state (hover, pressed, disabled).

aurum-light  #E0BC75    aurum-dark  #A87F30
plasma-light #9A82FF    plasma-dark #5A3FCC
mist-light   #2A2A38    mist-dark   #12121C

1.3 The defaults rule

  • Default page: ink background, canvas text. The site is dark-first because financial data is read at night and the gold accent sings against deep ink.
  • Cards: mist background, 1px aurum/15% border, canvas text.
  • Numbers (TVL, APR, balances): always canvas or aurum, never plasma.
  • Plasma is reserved for: interactive states (hover glow, focus ring), gauge/vote indicators, "live" badges.
  • Signal / alarm appear only on data that has a positive/negative interpretation. Never decorative.

1.4 Anti-patterns

  • ❌ No neon gradients across full-width banners
  • ❌ No purple-to-pink crypto-bro background washes
  • ❌ No emoji in product surfaces (whitepaper, governance, modal headers)
  • ❌ No more than two accent colors visible in a single viewport
  • ❌ No pure #FFFFFF — always canvas (#F5F2E8) for warmth

2. Typography

Family Role License
Fraunces Display (h1, hero, large numerals, whitepaper section headers) SIL OFL, Google Fonts
Inter UI body, paragraphs, labels, form inputs SIL OFL, Google Fonts
JetBrains Mono Token amounts, wallet addresses, technical data Apache 2.0, Google Fonts

2.1 Scale

display-xl   72px / 80px line-height   Fraunces 400 (light, optical 144)
display-lg   56px / 64px               Fraunces 400 (light, optical 144)
display-md   40px / 48px               Fraunces 500
heading-lg   28px / 36px               Fraunces 500
heading-md   22px / 30px               Inter 600
heading-sm   18px / 26px               Inter 600
body-lg      17px / 28px               Inter 400
body         15px / 24px               Inter 400
caption      13px / 20px               Inter 500, +0.02em tracking
mono-lg      17px / 24px               JetBrains Mono 500
mono         14px / 20px               JetBrains Mono 500

2.2 Type rules

  • All display text is Fraunces — never Inter at huge sizes. This is the brand's most distinctive choice.
  • All numbers in tables, position values, balances → JetBrains Mono for alignment.
  • Tracking: display tightened to -0.02em; captions opened to +0.02em.
  • No all-caps body text. Reserved for one-word labels only (e.g., "SUPPLY" in a stat card).

3. Spacing & layout

3.1 8px grid

All spacing in multiples of 4 (preferred 8) up to 64, then 96 / 128. No arbitrary values.

0  4  8  12  16  24  32  48  64  96  128

3.2 Page rhythm

Surface Padding Max width
Page outer 24px mobile / 48px desktop 1200px content
Card 24px none (fills column)
Modal 32px 480px
Hero section 96px vertical 1200px

3.3 Radii

Token Value Use
radius-sm 6px Inline pills, badges
radius-md 10px Buttons, inputs
radius-lg 16px Cards, modals
radius-xl 24px Hero containers

Never use circular radii except on avatars and the wallet button.

4. Surfaces & depth

Solana DeFi sites tend to overuse glassmorphism. We don't. Depth is signaled by borders and color contrast, not blur.

Layer Treatment
Base background flat ink
Surface 1 (cards) mist, 1px aurum/15% border
Surface 2 (popovers) mist-light, 1px aurum/25% border, subtle shadow 0 8px 32px rgba(0,0,0,0.4)
Active state border becomes solid aurum; inner glow 0 0 0 1px aurum/40%

Shadows are deep, soft, and always cast downward only — never radial. Light source is implicitly above.

5. Iconography

  • Source: Lucide (open source, MIT, consistent line weight).
  • Stroke: 1.5px at 24px size. Never bolder.
  • Color: matches the text it sits beside. Accent icons (e.g., the IDEA flame) use aurum.
  • No filled icons in nav or buttons. Outlined only.

The protocol mark — a stylized flame / torch — is reserved for: favicon, wallet button avatar, footer, whitepaper cover, social avatars. Never appears in nav or as a watermark inside content.

6. Motion

Element Easing Duration
Button hover ease-out 120ms
Card hover lift (translateY -2px) ease-out 160ms
Modal enter cubic-bezier(0.16, 1, 0.3, 1) 240ms
Page transition crossfade 200ms
Number ticker spring stiffness 80 damping 20 —
Toast slide-up + fade 180ms in / 240ms out

No bouncing, no parallax, no scroll-triggered animations on the landing page beyond a single fade-in for the hero. The brand is calm.

7. Photography & illustration

  • No stock photos of people pointing at laptops or "diverse hands shaking."
  • If illustration is used: line-art only, single-stroke weight, aurum on ink. Think 18th-century intaglio engraving, not Web3 isometric.
  • Charts and data visualizations follow the same restraint: aurum for the primary series, plasma for the secondary, smoke for axes/grid. No rainbow categorical palettes.

8. Voice & tone (visual interaction)

While this is a visual brand doc, the interaction copy matters because it touches the visual system:

  • Buttons use verb-first imperatives: "Stake", "Vote", "Repay" — not "Click here to stake."
  • Modals open with the action, not "Are you sure?" — e.g., headline "Lock 1,000 IDEA for 4 years" not "Confirm lock."
  • Toasts are brief, factual, single-sentence. Success uses signal icon; failure uses alarm. No exclamation marks.
  • Numbers are always shown with appropriate precision: 4 sig figs for prices, 2 dp for APR, full integers for token amounts where decimals would be misleading.

9. Brand applications

Surface Treatment
dApp This system, dark-first
Whitepaper (web view) Light-first variant: canvas bg, ink text, aurum for h2 underlines
Whitepaper PDF Light, single-column, Fraunces for headings, Inter for body
Social cards Dark, single large Fraunces headline, no logos crowding
Pitch deck Dark, generous whitespace, one chart per slide
Logo wordmark "IDEOLOGY" in Fraunces Display 144 optical, kerned tight, all-caps, canvas on ink

10. Implementation reference

The app/ directory implements this brand exactly. Key files:

  • app/tailwind.config.js — exports all tokens as Tailwind theme extensions (bg-ink, text-canvas, text-aurum, etc.)
  • app/src/styles/globals.css — font imports, base reset, custom utility classes
  • app/src/components/ — components consume design tokens, never raw hex

If a designer or contributor wants to deviate from this system: file a governance-style proposal in the design channel. The brand is governed.