Signal Orange
#f73b20Brand accent for headings, links, icons, and key emphasis — the sole chromatic voice on an otherwise monochrome page
Jeton
jeton.comWebsite preview
The design language
Jeton operates as a fintech operating system on a near-blank canvas: vast white space, one searing orange-red accent, and typography that does all the talking. The interface is deliberately flat — no heavy elevations, no decorative borders — relying on generous whitespace, rounded geometric cards, and a single warm hue (#f73b20) to create visual punctuation. Headlines are oversized and tight-set (line-height 0.9–1.0 at 100+px), giving the page a confident, editorial rhythm rather than a dense SaaS feel. Color appears sparingly: orange for brand voice, near-black brown (#360802) for body text, and the occasional pastel wash for feature cards. The result reads like a magazine spread for financial infrastructure — restrained, spacious, and unmistakably bold.
Color palette
brand
Brand Orange Tint
#f84d35Subtle orange surface variant for small UI moments like nav indicators
accent
Coral Red
#fb2d54Card accent and section heading for Exchange/currency category — secondary chromatic
Cobalt Blue
#477ee9Card accent and section heading for Send category — secondary chromatic
Emerald Green
#34c771Card accent and section heading for Add/funding category — secondary chromatic
neutral
Ink Roast
#360802Primary body and input text — a warm near-black that ties body copy to the orange accent family
Paper White
#ffffffPage canvas and card surfaces — dominant background across all sections
Carbon Black
#000000Secondary text and utility icons — used sparingly for currency labels and meta information
Ash Grey
#abababDisabled states, placeholder text, and low-emphasis dividers
Sand Wash
#e7dcdbTinted neutral surface for subtle section differentiation
Linen Blush
#fdedeaUltra-light orange-tinted surface — warm card or row background
Citrus Wash
#f5ffbbPale yellow-green surface tint for feature highlights
Mint Wash
#bcffbbGreen wash for highlight backgrounds, decorative bands, and soft emphasis behind content
Typography
Type scale
Minor Third (1.2) · 18px basetext-155
155px · 500 · 0.9The quick brown fox jumps
text-110
110px · 500 · 1The quick brown fox jumps
display
106px · 500 · 1The quick brown fox jumps
heading-lg
72px · 500 · 1 · 0.72px trackingThe quick brown fox jumps
heading
44px · 500 · 1.2 · 0.44px trackingThe quick brown fox jumps
heading-sm
33px · 500 · 1.2 · 0.33px trackingThe quick brown fox jumps
subheading
23px · 500 · 1.2 · 0.23px trackingThe quick brown fox jumps
body
16px · 400 · 1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Sequel Sans
- Weights
- 400, 450, 500
- Sizes
- 12, 14, 16, 23, 33, 44, 72, 106, 110, 155
- Line height
- 0.90 / 1.00 / 1.20 / 1.25 / 1.40 / 1.50
- Letter spacing
- 0.0100em at display/heading (72–155px), 0.0300em at small text (12–14px nav, labels, buttons)
- Fallback
- Inter, Manrope, or DM Sans
Sole typeface across all contexts — a custom geometric grotesque that carries the entire brand voice. Weight 500 is used universally even at 155px display sizes; the weight stays constant because the size and tight line-height carry the hierarchy, not boldness. Letter-spacing is microscopic positive tracking (0.01em at display, 0.03em at small caps/nav) which keeps the geometric forms crisp at every scale.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 16px
- Element gap
- 8px
Border radius
nav
84pxcards
16pxlinks
8pxpills
9999pxinputs
16pxbuttons
12pxSpacing scale
1px2px4px5px6px8px10px11px12px16px18px20px22px24px29px30px32px41px48px51px56px61px70px86px109px140px142px157px160px201px303pxGuidelines
Do
- Set display headlines at 72–155px with line-height 0.9–1.0 — the tight leading is non-negotiable and creates the editorial feel.
- Use #f73b20 as the sole chromatic voice across the page; reserve other accent colors (blue, green, coral) exclusively for category-coded feature cards.
- Apply 16px border-radius to cards, inputs, and most containers; use 9999px only for true pill elements like tags or circular controls.
- Pair warm-tinted backgrounds (rgba(247,59,32,0.05)) with #360802 text to create tonal harmony between surface and content.
- Use the inverted shadow pattern (rgba(0,0,0,0.05) 0px -4px 16px) for card lift — it defines the float-from-below aesthetic.
- Maintain letter-spacing of 0.03em on small text (12–14px) and 0.01em on display sizes to keep the geometric grotesque crisp.
- Keep the page canvas #ffffff and let sections separate through whitespace alone rather than alternating background colors.
Don’t
- Don't introduce a secondary typeface — Sequel Sans carries the entire voice at every size and weight.
- Don't use bold weights (600+) — the system stays at 400/450/500 and achieves hierarchy through size, not weight.
- Don't add drop shadows on text or buttons — elevation is expressed only through the two shadow tokens documented.
- Don't use #000000 for body text — #360802 (Ink Roast) is the body color and ties copy to the orange family.
- Don't multiply chromatic accents — if orange appears on a card heading, don't also color the body text or icon in a competing hue.
- Don't set line-height above 1.2 on display sizes — tight leading is a defining feature, not a default.
- Don't use sharp corners (0px radius) on interactive surfaces — even utility buttons maintain 8–16px rounding.
Components
Primary Pill Button
Main call-to-action controlFilled #f73b20 background, white text, 12px border-radius, 8px vertical / 16px horizontal padding. Sets at 14px Sequel Sans weight 450 with 0.03em tracking. Used for the principal action on each screen.
Ghost Text Link
Inline navigation and secondary actionsNo background, #f73b20 text, 8px border-radius, 8px padding. Sits inline within body copy or as a standalone link with an arrow indicator.
White Ghost Button
Action button on light surfacesTransparent background, #ffffff text with 1px white border, 84px border-radius for pill shape. 16px horizontal padding. Used in nav context.
Outline Brand Button
Secondary action with brand emphasisTransparent background, #f73b20 text, 1px #f73b20 border, no radius, zero padding. Pure underlined-text treatment for inline CTAs like 'Get Started' and 'Learn more'.
Utility Icon Button
Compact control for toggles or currency selectionTransparent background, #000000 text, 16px border-radius, 12px all-side padding. Houses small icon or short label like 'EUR' / 'GBP'.
Frosted Glass Card
Translucent surface card for floating panelsrgba(255,255,255,0.1) background, 16px border-radius, 16px all-side padding, backdrop-filter blur(20px–40px). Rises above the hero with subtle depth.
Feature Category Card
Category tiles for actions like Exchange, Send, AddColored pastel-tinted background (rgba(247,59,32,0.05) or accent color), 16px border-radius, variable padding. Houses a large colored icon and category heading.
Floating Input Field
Form input with generous left padding for iconsrgba(247,59,32,0.05) background, #360802 text, 16px border-radius, 17.6px top / 6.4px bottom / 48px left padding. Warm tint ties input to brand without using a heavy focus border.
Bordered Content Card
Content card with upward shadow liftWhite background, 16px border-radius, 16px padding, box-shadow rgba(0,0,0,0.05) 0px -4px 16px 0px — a distinctive inverted shadow that lifts the card from below rather than casting downward.
Orange-Tinted Card
Highlighted content or promotional cardrgba(247,59,32,0.05) background, 16px border-radius. Subtle warmth differentiates it from standard white cards without a heavy border.
Scroll Indicator
Vertical step indicator showing process progressNumbered list (01, 02, 03, 04) with label, rendered in Sequel Sans at small sizes. Anchors navigation or onboarding flow.
Top Navigation Bar
Primary site navigationWhite or transparent background with backdrop blur, nav links in Sequel Sans 14–16px weight 400–450. Right-aligned with 'Personal | Business' toggle and language selector. Pill-shaped outlined button at far right.
Surfaces & elevation
Level 0
Canvas
#ffffffPage background, dominant surface
Level 1
Card Surface
#ffffffWhite card backgrounds with subtle inverted shadow for lift
Level 2
Orange Tint
#fdedeaWarm-tinted surface for highlighted content and input fields
Level 3
Frosted Glass
#ffffff1aTranslucent overlay for floating panels above hero imagery
Level 4
Category Tint
#f73b200dSubtle brand-tinted background for feature category cards
Elevation is minimal and intentional — only two shadow patterns exist. The content card shadow is inverted (negative Y offset) creating a lift-from-below effect rather than a traditional drop shadow. The glass panel shadow uses brand-orange tints, keeping the warm color identity even in depth cues. Most surfaces achieve separation through whitespace and tonal backgrounds, not shadows.
Content Card
rgba(0, 0, 0, 0.05) 0px -4px 16px 0px
Floating Glass Panel
rgba(247, 59, 32, 0.1) 0px 8px 24px 0px, rgba(247, 59, 32, 0.05) 0px 2px 8px 0px
Layout & imagery
Layout
Full-bleed sections with centered max-width content (1200px container). The hero is a massive editorial headline left-aligned with extreme vertical breathing room (155px type with 0.9 line-height). Sections alternate between white canvases and subtle pastel-tinted backgrounds, separated by 80px+ vertical gaps. Navigation is a minimal top bar with logo left, primary nav center, and Personal/Business toggle plus CTA right. Content blocks use generous left-aligned text with supporting visuals positioned to the right or full-width. Card grids appear in feature sections but maintain spacious 2–3 column layouts rather than dense matrices. The overall rhythm is magazine-like: large headlines, brief supporting copy, breathing space, repeat.
Imagery
The page relies primarily on typography and geometric UI elements rather than photography. The hero features large editorial headlines in Sequel Sans with generous whitespace. Category icons are simple geometric shapes — circles and rounded forms in accent colors. The brain visualization (seen in reference imagery) is a 3D particle-construct forming an organic shape, representing collective intelligence. Product imagery when present uses tight crops with warm color grading (sepia/hue-rotate filter applied to certain assets: sepia(0.4) hue-rotate(329deg) contrast(1.1) saturate(2.2)). No lifestyle photography — the visual language is abstract, geometric, and editorial.
Design notes
Agent Guide
**Quick Color Reference** - Text: #360802 (body), #f73b20 (brand emphasis), #000000 (utility) - Background: #ffffff (canvas), #fdedea (warm tint), rgba(247,59,32,0.05) (brand tint) - Border: #e7dcdb (neutral), rgba(247,59,32,0.1) (brand glass) - Accent: #f73b20 (primary), #477ee9 (send), #34c771 (add), #fb2d54 (exchange) - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. **Hero Section**: White #ffffff background. Massive headline 'Unlock collective wisdom.' at 106px Sequel Sans weight 500, #360802 color, line-height 1.0, letter-spacing 0.01em. Subtext at 23px weight 500, #360802, 0.01em tracking. Ghost text link 'Get Started' in #f73b20 with 8px padding and arrow indicator. 2. **Feature Category Card**: Background rgba(247,59,32,0.05), 16px border-radius, 24px padding. Category icon in #f73b20, heading 'Exchange' at 33px Sequel Sans weight 500, #360802, line-height 1.2. 3. **Floating Input Field**: Background rgba(247,59,32,0.05), text #360802, 16px border-radius, padding 17.6px top / 6.4px bottom / 48px left. Placeholder at 23px Sequel Sans weight 500 with 0.01em tracking. 4. **Navigation Bar**: White background with backdrop-filter blur(20px). Logo left, nav links center in 16px Sequel Sans weight 400 #360802, Personal/Business toggle right with outlined pill button (84px radius, 1px #ffffff border, 16px horizontal padding). 5. **Content Card with Inverted Shadow**: White background, 16px border-radius, 16px padding, box-shadow rgba(0,0,0,0.05) 0px -4px 16px 0px. Heading at 44px weight 500 #360802, line-height 1.2.
Similar brands
Wise
Same editorial fintech approach with oversized headlines, generous whitespace, and a single warm accent color (green/teal) punctuating an otherwise monochrome page
Revolut
Similar flat card-based layout with category-coded feature tiles and a single dominant brand color against white surfaces
Stripe
Shares the restrained typography-driven hierarchy, generous section gaps, and minimal elevation philosophy — though Stripe uses purple, Jeton uses orange
Mercury
Same confident single-accent approach with warm-tinted input fields and large editorial headlines on white canvases
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
