Koni Finance — Design System v5.2

01 / brand

Wordmark, K-mark, app icon, multi-brand color system.

The Koni Studio family uses color as the product differentiator. Same icon shape (K with a notch). Same wordmark structure (kon> + product designator). What tells the products apart is the green.

Wordmark — Option B ★ chosen

Calligraphic f flourish on finance — institutional tone, reads as "serious financial software."

Structure: k · on · > · finance
Accent: #00FF7B
Ink: #E8EAEE
Format: SVG

Wordmark — Option A alternative

All clean modern sans — energetic, crypto-native, lighter visual weight.

— K-mark / favicon scale —

16

32

64

128

88 · iOS

56

32

16 · fav

App icon ★ platform · fixed colors

The platform-installed mark for iOS, Android, macOS, browser favicon, and PWA. Colors are fixed: black canvas, spring-green K-mark — it does not follow the theme accent. The icon sits on user wallpapers and dock backgrounds, not Koni Finance surfaces, so recognition wins over theme harmony.

Canvas #000000 · pure black

Mark #00FF7B · spring green

Format SVG · viewBox 1000 × 1000

Corner radius 128 / 1000 · 12.8 %

Padding 25 % inset · K fills the live area

Min size 16 px · browser favicon

// exception to the v5.2 theme-adaptive logo rule:
// app icons live OFF-canvas — they sit on user wallpapers,
// not on Koni Finance surfaces. fixed colors guarantee
// recognition across every host context.

— wordmark anatomy —

a. K with notch Brand-green letterform. The diagonal notch is the recurring family glyph.

b. "on" — ink white Geometric open-counter. Pairs visually with the K's structure.

c. ">" chevron CLI prompt. Hints at "next layer" / architectural progression.

d. Product designator "finance" — full form. Abbreviated .fi reserved for compact contexts.

★ v5.2 · critical rule Logo color adapts per theme. Same token as UI accent.

v5.1 hypothesised a separate theme-immutable brand token. v5.2 reverses that. Bright #00FF7B on the light theme background #F8F9FB measures only ~1.7:1 contrast — the logo visually disappears. WCAG 1.4.3 technically exempts logotypes, but a logo a visitor can't see does not aid brand recognition; it erodes it. The logo follows the same --accent token as the rest of the UI — bright spring green #00FF7B on dark, darker spring green #00A453 on light. Same hue family, preserved identity.

// dark theme data-theme="dark"

Book a walkthrough → UI accent · #00FF7B

✓ logo K + chevron = #00FF7B ✓ UI accent (button) = #00FF7B

// light theme data-theme="light"

Book a walkthrough → UI accent · #00A453

✓ logo K + chevron = #00A453 (darkened with --accent) ✓ UI accent (button) = #00A453 (passes WCAG AA 3:1)

Use case Dark theme Light theme Rationale

Logo / wordmark #00FF7B #00A453 Adapts per theme via --accent. Same hue family preserves identity; legibility wins over absolutism.

UI accent · buttons, focus, AI ★ marker #00FF7B #00A453 Same --accent token. Interactive components require WCAG AA 3:1 on light backgrounds.

App icon · iOS / Android / favicon / PWA #00FF7B on #000 #00FF7B on #000 Fixed colors — exception. Lives on user wallpapers, not Koni surfaces. Black canvas + spring green for guaranteed recognition.

Marketing assets · OG images, slides, print #00FF7B #00FF7B No CSS theme to follow. Use canonical brand hex on the fixed dark background.

× Wrong

/* Hardcoded brand hex on the logo: stays
   #00FF7B in light mode — only 1.7:1 contrast,
   logo visually disappears */
.logo-wordmark .glyph--k,
.logo-wordmark .chevron {
  fill: #00FF7B;
}

+ Right

/* SVG uses currentColor; CSS sets color on
   the parent. --accent switches per theme,
   logo follows it. */
.logo-wordmark,
.favicon-mark {
  color: var(--accent);
}
/* SVG path: fill="currentColor" */

// v5.2 reversal rationale · legibility-in-practice beats spec-compliance-on-paper
// brand identity preserved through hue family (spring-green-ish), not exact hex

— Koni Studio family —

k

Koni Studio

#A3E635 · Lime

k

Koni Finance

#00FF7B · Spring green

k

Koni Wallet

#FFD700 · Yellow

s

Senti

#34D399 · Emerald

02 / color

Tokens. Dual-mode. Accent is rare and meaningful.

Every Koni Finance surface ships in dark default + light toggle. Theme persists to localStorage and syncs to OS preference on first visit. The accent is treated as a precious resource — applied only to actions, focus, and the one section that earns special emphasis.

// accent / dark

#00FF7B

Spring green · Koni Finance brand color · 13.5:1 on bg

+ apply to

Primary CTAs — "Book a walkthrough"
Active states — current section nav, hover on links
Focus rings — keyboard navigation
Selection highlight — ::selection
Climax accents — cascade box border, FOS box, AI layer

− never apply to

Body text decoration
Generic icons
Diagram fill colors
Background fills (except --accent-soft)

— surface & ink tokens —

Dark · default

data-theme="dark"

--bg page background #0B0D11

--bg-elev card / elevated #14171C

--bg-elev-2 nested elevation #1D2027

--bg-sunk inset areas #07080B

--ink primary text #E8EAEE

--ink-mid secondary #B3B6BD

--ink-soft tertiary / meta #898E9A

--ink-faint placeholder #5F6573

--line default divider #2A2E36

--line-soft subtle divider #1F232A

--line-bold emphasis #3A3E48

Light · toggle

data-theme="light"

--bg page background #F8F9FB

--bg-elev card / elevated #FFFFFF

--bg-elev-2 nested elevation #F1F2F5

--bg-sunk inset areas #ECEEF2

--ink primary text #13151A

--ink-mid secondary #565B66

--ink-soft tertiary / meta #898E9A

--ink-faint placeholder #B5B9C2

--accent spring green / dark #00A453

--line default divider #E2E5EA

--line-bold emphasis #CDD0D8

— semantic colors —

--positive confirmations only #34D399 emerald

--warning pending operations #F59E0B amber

--negative errors only · rare #EF4444 red

03 / typography

Inter for voice. JetBrains Mono for structure.

Two families. One specific weight per element. Inter at 400/500/600. JetBrains Mono at 400/500. Weight 700 is forbidden — it's too heavy for the calm-confident voice.

token--text-display

size56–72px

weight600

tracking-0.03em

The financial OS.

token--text-h1

size40–48px

weight600

tracking-0.025em

Section heading text

token--text-h2

size28–32px

weight600

Sub-section heading

token--text-h3

size20–24px

weight600

Card title, feature name

token--text-body-lg

size18px

weight400

Lead paragraph weight — used for hero sub-line and the lead under every section heading. Quiet authority, no shouting.

token--text-body

size16px

weight400

Default body text. Readable density. Inter at 16 with 1.55 line-height — the workhorse, used everywhere except hero, headings, and meta.

token--text-tiny

size12px

weight500

caseUPPERCASE

KICKER · EYEBROW · LABEL · META

token--text-mono-body

familyJetBrains Mono

size14–15px

// diagram labels, code, structural elements
const accent = '#00FF7B';

— weight discipline · one weight per element —

Element Weight Why

Hero H1 600 Semibold = confident-not-shouting. Bold (700) too aggressive.

Hero kicker 500 Medium = quiet authority. Caps + tracking carry the weight.

Section H2 600 Same as H1 for visual rhythm consistency.

Sub-section label (mono) 500 Medium mono in CAPS reads as label, not heading.

Body text 400 Regular = readable density.

Inline strong 600 Skip 500 (too close to regular); jump to 600 for clear emphasis.

Buttons 600 Presence without being shouty.

Diagram labels (mono) 400 Regular mono. Reading-density inside diagrams.

04 / spacing

Base 4. Varied section rhythm.

4px base scale matches the Tailwind defaults. Section padding-y varies per section to avoid the cookie-cutter 9-section uniform stack — tall sections bookend the page's "absorb this" moments; short sections handle dense content.

— scale —

--space-xs4px · 0.25rem

--space-sm8px · 0.5rem

--space-md16px · 1rem

--space-lg24px · 1.5rem

--space-xl32px · 2rem

--space-2xl48px · 3rem

--space-3xl64px · 4rem

--space-4xl96px · 6rem

— section rhythm · variation, not uniform —

12remHero

8remCascade

6remBefore/After

8remHow

12remPicture

6remNetworks

8remStack

7remPersonas

4remFooter

// tall · default · short · default · TALL · short · default · medium · minimal

05 / brand signatures

Four recurring moves. The reason it doesn't look AI-default.

Individually each is tiny. Together they form a recurring vocabulary — CLI prompts, architectural grids, the K letterform's notch. A visitor scrolling subconsciously absorbs "this product is for people who think in stacks and command lines."

01 · The > chevron prefix

Every section. Every time.

Every section H2 starts with > in accent green, matching the wordmark's kon> structure. Reads as a CLI prompt. Recurring brand signature.

02 · Terminal scroll progress

[██████░░░░] 62%

Top-right fixed indicator. [████░░░░░░] rendered in JetBrains Mono. Distinctive against the generic colored-bar pattern. Updates on every scroll frame, rAF-throttled.

03 · K-notch divider

— between every section —

1px line with a triangle notch cut from the center. References the K letterform's diagonal fold. Short, centered, never full-bleed. Eight per landing page.

04 · Chevron list markers

Multichain account model
Policy & approval engine
Reconciliation runtime

Inline bullet lists use > in accent color instead of round bullets. Matches the wordmark kon> + section H2 prefix patterns.

— bonus · hero dot grid —

// 8px dot grid · 8% opacity · radial mask

Hero ONLY (other sections stay flat per brutally minimal). 8px dot grid at 8% opacity with radial fade-to-edges. Reinforces the architectural stack metaphor without becoming decoration. Inline SVG pattern, no JS.

06 / buttons

Two buttons. No layout shift on hover.

Primary for the one CTA per surface. Secondary for everything else. Hover changes color, never position — the arrow nudges, the button stays put.

— Primary —

Background: --accent
Text: --accent-ink
Padding: 14px 22px
Radius: 6px
Hover: +10% white mix, arrow nudges 3px

— Secondary —

Background: transparent
Border: --line-bold
Padding: 14px 22px
Radius: 6px
Hover: --bg-elev fill, border --ink-faint

07 / components

The building blocks that compose every page.

Each component carries shared anatomy — elevated surface, 1px border, 8px radius, 24–32px padding — and one distinct visual treatment that earns its pixels by carrying meaning.

Capability card .card-capability

Approvals built for treasury teams.

REQUEST → APPROVE → EXECUTE

Role-based policy. Multi-sig thresholds. Operator-initiated, signer-approved.

Network chip / chain glyph .network-chip

Ethereum Polygon Polkadot Bittensor

Cascade step .cascade-step

→ Telegram becomes source of truth

The moment it gets too big to spreadsheet.

Capability stack layer .stack-layer

AI-Native Layer

agents under policy

★

Treasury Foundation

multichain state

L1

Persona card .card-persona

— CTO at a multichain Web3 org —

We're running treasury on five wallets across three chains.

Form field .form-field

— work email —

08 / iconography

Phosphor Regular · 24px · inline SVG.

14-icon subset bundled as one SVG sprite. Inherits currentColor so it adapts to surrounding text. No icon font. No React component library. Zero emoji.

link

clipboard

file-text

lock

star

target

coins

shield-check

gear

chat-circle

magnify

arrow-right

sun

moon

09 / motion

Three intentional motions. Everything else is still.

Motion is a precious resource — overused, it becomes noise. Three carefully chosen animations carry the page; prefers-reduced-motion disables every one.

// motion / 01

Cascade arrow pulse

Two chains.

Three chains.

Too big.

opacity 0.3 → 0.9 → 0.3 · 2.4s ease-in-out · infinite

// motion / 02

Button hover + arrow nudge

color-shift 120ms · arrow translateX 3px on inner element · zero layout shift

// motion / 03

Terminal scroll progress

[████░░░░░░] 47%

rAF-throttled · 10 segments · UPDATES on every scroll · <1KB JS

10 / usage rules

Do's and don'ts.

The system's discipline is the brand. These rules protect against the AI-default mode every minimal style guide eventually drifts into.

+ Do

Treat accent as rare. One primary CTA per surface. One emphasized box per diagram. That's it.
Use --accent for the logo. Same token as UI accent — the logo adapts per theme (#00FF7B dark, #00A453 light). Same hue family, legibility preserved (v5.2).
Vary section padding. 12rem / 8rem / 6rem rhythm — never a uniform stack.
Use chevron lists. > markers reinforce the brand vocabulary.
Let diagrams carry visual weight. They earn their pixels by carrying real meaning.
One weight per element. No ad-hoc weight mixing.
Inline SVG icons. Phosphor Regular only. Inherit currentColor.

× Don't

No emoji. Anywhere. Phosphor sprite has the replacement.
No hardcoded #00FF7B on the logo. 1.7:1 contrast in light mode kills brand recognition. SVGs use fill="currentColor"; CSS sets color: var(--accent).
No gradient backgrounds. Flat surfaces only. The diagrams are the visual interest.
No stock photography. Diagrams, type, and structure — nothing else.
No Inter Bold (700). Too heavy for the calm-confident voice. Cap at 600.
No translateY on button hover. Color shift only — zero layout shift.
No 4-up symmetric grids. Capability cards are asymmetric on purpose.
No icon-in-colored-circle. The most recognizable AI-default pattern.

The visual system behind Koni Finance.

> Wordmark, K-mark, app icon, multi-brand color system.

App icon ★ platform · fixed colors

> Tokens. Dual-mode. Accent is rare and meaningful.

+ apply to

− never apply to

> Inter for voice. JetBrains Mono for structure.

> Base 4. Varied section rhythm.

> Four recurring moves. The reason it doesn't look AI-default.

> Two buttons. No layout shift on hover.

> The building blocks that compose every page.

Approvals built for treasury teams.

> Phosphor Regular · 24px · inline SVG.

> Three intentional motions. Everything else is still.

> Do's and don'ts.

Wordmark, K-mark, app icon, multi-brand color system.

Tokens. Dual-mode. Accent is rare and meaningful.

Inter for voice. JetBrains Mono for structure.

Base 4. Varied section rhythm.

Four recurring moves. The reason it doesn't look AI-default.

Two buttons. No layout shift on hover.

The building blocks that compose every page.

Phosphor Regular · 24px · inline SVG.

Three intentional motions. Everything else is still.

Do's and don'ts.