Brand sheet · 01 Cobalt Landing page

Concept 01 · Cobalt

The brand the app
already has, grown up.

Faloos already owns a colour, a gradient and a type pairing. This sheet keeps all of it, fixes what doesn't hold up on a marketing site, and gives Faloos a mark of its own: the => from every payment sentence.

02 · Palette

Cobalt, fog and ink.

Values come from apps/native/lib/constants.ts (the Paper file's tokens). OKLCH is computed from the hex. Gradients are written in oklab; SVG gets OKLab-sampled stops because it can only blend in sRGB.

Cobalt --cobalt #2D6BFF · oklch(58.0% 0.229 263.6) Actions, links, the arrow, the mark.
Cobalt deep --cobalt-deep #173EA6 · oklch(41.0% 0.173 264.2) Depth at the foot of gradients, pressed states.
Periwinkle --periwinkle #AEBDFF · oklch(81.1% 0.095 274.2) The arrow and quiet accents on dark.
Ink --ink #12151C · oklch(19.6% 0.015 266.8) Text on light; the dark ground.
Fog --fog #F7F8FA · oklch(97.9% 0.003 264.5) Page ground under white cards.

Gradients

Action --action

The primary pill. 58 px high on web, 62 px in the app, with a deep blue shadow.

linear-gradient(180deg in oklab, #6897FF 0%, #2C6BFF 58%, #194BC9 100%)
Chip --chip

The mark, selected chips, number badges, switches.

linear-gradient(180deg in oklab, #719CFE 0%, #2C6BFF 46%, #1F55E6 100%)
Hero, light --hero

The page fill: a highlight top right over an OKLab ramp. The landing page stretches the stops to the hero height.

radial-gradient(circle farthest-corner at 85% 3% in oklab, oklab(100% 0 0 / 22%) 0%, oklab(100% 0 0 / 0%) 28%), linear-gradient(180deg in oklab, #2C6BFF 0%, #4A82FF 33%, #E7EEFF 67%, #F7F8FA 100%)
Hero, dark --hero-dark

Dark theme and the dark sections.

radial-gradient(circle farthest-corner at 85% 3% in oklab, oklab(100% 0 0 / 22%) 0%, oklab(100% 0 0 / 0%) 28%), linear-gradient(180deg in oklab, #1F55E6 0%, #1C366B 50%, #12151C 100%)

Light UI

  • Text secondary (today)--text-2 · #697386oklch(55.4% 0.032 263.3) Fails AA on fog by a hair.4.49:1 on #F7F8FA
  • Text secondary (proposed)--text-2 · #5F6A7Doklch(52.2% 0.033 261.4) Same hue, 5.1:1 on fog.5.14:1 on #F7F8FA
  • Text disabled--text-3 · #A3AAB7oklch(73.7% 0.020 263.0) Disabled only, never for reading.2.34:1 on #FFFFFF
  • Accent ink--accent-ink · #2055E6oklch(51.4% 0.226 264.2) Nicknames, links in text.5.99:1 on #FFFFFF
  • Accent wash--accent-wash · #E7EEFFoklch(94.9% 0.024 267.9) Nickname chips, selection.
  • Card--card · #FFFFFFoklch(100.0% 0.000 0) Raised surfaces.
  • Border--border · #E7EBF2oklch(93.9% 0.010 261.8) Hairlines, rules.
  • Border strong--border-strong · #A7B0C0oklch(75.5% 0.025 262.1) Controls, outlines.
  • Inset--inset · #F3F5F9oklch(97.0% 0.006 264.5) Wells, fields, tracks.
  • Success--success · #177652oklch(50.4% 0.103 162.1) Sent, approved.4.91:1 on #E3F4EC
  • Warning--warning · #B7791Foklch(62.6% 0.125 70.4) Attention.3.23:1 on #FBF0DF
  • Danger--danger · #C44747oklch(57.0% 0.160 23.7) Errors.4.08:1 on #FBE7E7

Dark UI

  • Ground--ground · #12151Coklch(19.6% 0.015 266.8) Dark page.
  • Card--card · #20252Foklch(26.4% 0.020 264.1) Raised surfaces.
  • Raised--raised · #2A313Doklch(31.2% 0.024 261.2) Sheets, menus.
  • Border--border · #3C4658oklch(39.3% 0.033 262.1) Hairlines.
  • Text secondary--text-2 · #B4BDCFoklch(79.7% 0.027 264.4) Body on dark.9.67:1 on #12151C
  • Text disabled--text-3 · #7F899Boklch(62.8% 0.030 262.3) Disabled.5.18:1 on #12151C
  • Accent ink--accent-ink · #9BBAFFoklch(79.2% 0.104 265.5) Nicknames on dark.7.94:1 on #20252F
  • Accent wash--accent-wash · #24375Doklch(34.1% 0.071 263.0) Chips on dark.
  • Success--success · #79D9AFoklch(81.4% 0.110 163.8) Sent, approved.7.26:1 on #1D3A31

White on cobalt is 4.51:1, which passes AA. White on the lighter hero stop (#4A82FF) is 3.54:1, so small white text stays in the deep top of the hero.

03 · Type

Three faces, three jobs.

Display

Aa

Bricolage Grotesque

ExtraBold 800 for headlines and the wordmark, Bold 700 for titles. Tight tracking, short lines, sentence case.

UI and money

£50.00

Inter

Regular 400, SemiBold 600 and Bold 700 for everything you read and every amount. Tabular figures wherever amounts line up.

Syntax

=>

Paper Mono

The payment sentence, labels, codes like K7QM P2XD and PZA9FRI. It's in the films already; this brings it into the product.

  • Display XLBricolage 800 · 50–100 px · 0.94 · −4.5% Bank to bank.
  • Display LBricolage 800 · 38–68 px · 0.98 · −4% We never hold your money.
  • Display MBricolage 700 · 22–27 px · 1.12 · −2% Nickname your accounts
  • LedeInter 400 · 18–21 px · 1.45 · −1.4% Link the accounts you already have and give each one a nickname.
  • BodyInter 400 · 17 px · 1.5 · −1.1% Your face or fingerprint approves the exact amount and who it’s for.
  • MoneyInter 700 · tabular figures £1,250.00 £50.00 £8.50
  • SentencePaper Mono 500 · 15–54 px · 0 @shah#trustfund £50 => @amira#rainyday
  • LabelPaper Mono 500 · 12.5 px · caps · +12% Where your money goes

04 · Voice

Plain, warm,
a little bit cheeky.

UK English, sentence case, contractions. Say what happens to the money in words a friend would use. Every claim has to be true today.

We sayWe don't say

We never hold your money.

Your funds are kept safe with us.

Nothing moves until you approve it.

Instant, guaranteed transfers.

Just pick your bank.

Connect through our open banking partner.

Call it #trustfund even if it isn’t one.

Unlock smart account labelling.

Faloos 0.2 is in testing.

Join thousands of happy users.

  • The sentence is sacred. Always @handle#nickname £amount => @friend#nickname, set in Paper Mono, nicknames in accent ink.
  • Money: £50 in a sentence, £50.00 where you approve it.
  • Never: regulatory status, deposit protection, certifications, "free", user counts, speed promises, bank names.

05 · Motion

Motion explains;
it doesn't decorate.

  1. Show the change of state. Typing, parsed, approve, sent. If a movement doesn't explain something, it doesn't happen.
  2. One curve. cubic-bezier(0.16, 1, 0.3, 1), the films' ease: quick off the mark, long settle.
  3. Four durations. 180 ms feedback, 400 ms state, 700 ms sheets, 900 ms reveals. Nothing longer except the hero story.
  4. Transform and opacity only. The mesh shader is the one ambient loop: 30 fps, DPR capped at 2, stopped off-screen.
  5. Every animation has a designed still. With reduced motion the hero rests on the approval sheet, the diagram's £50 has already arrived and the shader is one frame.
The Faloos ease curve, cubic-bezier 0.16, 1, 0.3, 1, against a straight linear line. timeFaloos easelinear
ease
linear

06 · App icon

The chip, full size.

The mark scaled to 1024 on the hero gradient with its top-right highlight, replacing apps/native/assets/images/icon.png and the Android adaptive layers. Ship the square; iOS applies its own mask.

Light · default
Dark
Tinted
180
120
87
60
40
29

Illustration: home screen neighbours are placeholders.

07 · Keep and fix

What stays,
what changes.

Keep

  • Cobalt #2D6BFF and the two-layer OKLab hero. It's what testers already know as Faloos.
  • Bricolage Grotesque and Inter. Characterful display, neutral reading, good figures for money.
  • The action pill: OKLab gradient, inset highlight, deep blue shadow.
  • White raised cards on fog with 20 px radius and soft blue-tinted shadows.
  • Light first, dark as a full theme, not an inverted afterthought.

Fix

  • Replace the app icon. It's the create-expo-app placeholder, and its chevron reads as Expo's mark.
  • Darken secondary text from #697386 (4.49:1 on fog) to #5F6A7D (5.14:1).
  • Keep small white text off the light hero stops. Below #3A76FF, white text is display size only.
  • Write gradients in OKLab everywhere. Native bakes PNGs from sRGB stops; web uses in oklab; SVG gets OKLab-sampled stops.
  • Add Paper Mono to the app tokens as the syntax face for the sentence, labels and codes.
  • Merge the two cobalts. #2D6BFF (fill) and #2C6BFF (gradient stop) are one token.
  • Outline the wordmark. Lowercase faloos matches how handles and nicknames are written.