DocumentationBrand kit

Brand system

Quant Fun brand kit

Download the official assets, copy production color tokens, and keep every Quant Fun surface visually aligned.
Version 1.1.0

One edit, every surface

The manifest behind this page also emits the product's runtime color variables. Update ui/lib/brand-kit.ts and the generated CSS, docs swatches, and shared interface tokens stay aligned.

Logo & artwork

Use these checked-in originals. Do not rebuild the mark from a screenshot or export a compressed copy from a social post.

Quant Fun Primary app mark
PNG · 512 × 512

Primary app mark

The canonical square mark for product and social use.

Download
Quant Fun Strategy social artwork
PNG · 1200 × 630

Strategy social artwork

quantfun.trade

Download
Quant Fun Apple touch icon
PNG · 180 × 180

Apple touch icon

A platform-ready export of the primary mark.

Download
Quant Fun Browser icon
PNG · 32 × 32

Browser icon

The standard high-density browser favicon.

Download

Core colors

Lime is the identifying signal, not a background wash. Let neutrals do most of the work so active states remain easy to find.

Brand signal--brand-signal

Primary actions, live state, and the defining brand signal.

Data cyan--brand-cyan

Market data, connected systems, and informational emphasis.

Command blue--brand-blue

Selection, focus, and secondary product actions.

Order orange--brand-orange

Order intent, attention, and active workflow moments.

Risk red--brand-red

Errors, destructive actions, and negative outcomes.

Resolved green--brand-green

Success, positive state, and completed checks.

Obsidian--brand-obsidian

Dark fields, top bars, and high-contrast lockups.

White--brand-white

Clean surfaces and inverse type.

Interface themes

Theme roles keep components semantic. Copy a value for design work, or use the token in product code so light and dark mode stay paired.

lightDay desk
darkNight desk

Typography

Interface & bodyInter400–700

Every decision should remain readable.

Open font
Data & labelsJetBrains Mono400–600

SIGNAL → DECISION → ORDER

Open font

Voice & feel

01

Explicit

Show the state, source, and boundary. Never imply a result the product cannot prove.

02

Technical, not cold

Use precise language and data-rich visuals without making the experience feel inaccessible.

03

Energetic with purpose

Reserve the brand signal and motion for actions, live state, and moments that deserve attention.

Quick usage rules

Do
  • Keep the square mark intact with comfortable clear space.
  • Use sentence case and make evidence more prominent than claims.
  • Pair bright accents with Obsidian or quiet neutral surfaces.
Avoid
  • Stretching, recoloring, redrawing, or cropping the mark.
  • Using lime for every heading, panel, and decorative flourish.
  • Presenting simulated, dispatched, or pending results as final.
CSS
.primary-action {
  background: var(--brand-action);
  color: var(--brand-action-ink);
}

Ready to copy