Dark theme: options to replace navy

Real Tellonym screens with only the dark surface colors swapped. Nothing is implemented. Click any screen to see it full size and use the arrow keys to flip between options.

Try the palettes in a clickable app

Round 2

Graphite is the favorite. This round keeps its depth and tries three tints: Violet, Pine and Stone. Violet is the strongest alternative because it matches the purple already in the app.

  • Violet, Pine and Stone use Graphite’s exact lightness. Only the tint changes, so contrast is the same as Graphite.
  • Every option keeps the same step between background, cards and borders, so layouts keep their structure.
  • Text, brand pink and accent colors stay the same. The blue topic chip (“drop a name for anonymous kiss”) is an accent and stays blue.
  • The page uses a neutral grey around the screens, so no option looks better because of its surroundings.

Today (navy)

Blue-tinted surfaces. Strokes and raised surfaces carry the most blue.

  • Primary#1B2330
  • Secondary#2B3749
  • Input#222C38
  • Stroke#313D52
  • Disabled#474D56
  • Secondary text#8B96A8

Graphite Favorite

Uses the black ramp that already exists in the color system. White text and pink buttons gain contrast. A faint cool tint keeps it from looking flat.

  • Primary#14171A
  • Secondary#222529
  • Input#1C1F22
  • Stroke#2C3033
  • Disabled#383B3F
  • Secondary text#999FA6

Violet

Graphite depth with a violet tint. It matches the purple Plus card, the Upgrade button and your own chat bubbles.

  • Primary#18151E
  • Secondary#26232C
  • Input#201C26
  • Stroke#2E2B35
  • Disabled#3C3943
  • Secondary text#A49EB0

Pine

Graphite depth with a cool green tint. Pink buttons stand out most against it. The purple Plus card sits less naturally on green.

  • Primary#0F1916
  • Secondary#1D2724
  • Input#17211E
  • Stroke#252F2C
  • Disabled#333E3B
  • Secondary text#94A6A1

Stone

Graphite depth with a warm neutral tint. It feels softer than Graphite, like Plum without the pink.

  • Primary#1A1612
  • Secondary#28241F
  • Input#211E19
  • Stroke#302C27
  • Disabled#3F3A36
  • Secondary text#A7A098
Today (navy)
Graphite
Violet
Pine
Stone

Feed

Inbox

Profile

Notifications

Chat

Settings

Bottom sheet

Earlier options

From round 1. Open them to flip against the new tints.

Charcoal

Keeps today’s lightness and only removes the blue. Smallest visual jump, but it reads greyish.

  • Primary#222225
  • Secondary#363638
  • Input#2B2B2D
  • Stroke#3C3C3F
  • Disabled#4C4C4F
  • Secondary text#9E9EA2

OLED Black

Pure black screen with the iOS system greys, so it matches iOS sheets and the keyboard. Highest contrast. Very bright text on pure black can feel harsh in long reading.

  • Primary#000000
  • Secondary#2C2C2E
  • Input#1C1C1E
  • Stroke#38383A
  • Disabled#464648
  • Secondary text#8E8E93

Plum

Warm near-black with a trace of the brand pink. The most distinctive option. The blue topic chip stands out more against the warm base.

  • Primary#181216
  • Secondary#292227
  • Input#1F191D
  • Stroke#322B2F
  • Disabled#41393E
  • Secondary text#AA9FA6

Contrast

Measured against each option’s primary background, except where noted. WCAG asks for 4.5:1 for normal text.

OptionWhite textSecondary textSecondary text on cardsBrand pinkStroke vs background
Today (navy)15.8:15.3:14.0:14.1:11.4:1
Graphite18.0:16.7:15.8:14.6:11.4:1
Violet18.0:17.0:16.0:14.6:11.3:1
Pine17.9:17.0:16.0:14.6:11.3:1
Stone18.0:17.0:16.0:14.6:11.3:1
Charcoal15.9:15.9:14.5:14.1:11.4:1
OLED Black21.0:16.4:14.3:15.4:11.8:1
Plum18.5:17.2:16.1:14.8:11.3:1

Why Graphite

  • It removes the blue cast without making the app look grey and flat.
  • Background, cards and borders reuse existing tokens (black[1], black[5], black[4]), so design and code get fewer one-off colors.
  • Light mode text and the dark mode background become the same ink color, which ties the two themes together.
  • Brand pink on the background goes from 4.1:1 to 4.6:1.
  • Violet, Pine and Stone share its lightness, so switching the tint later only changes hex values.

What a change would touch

  • The navy ramp in packages/core/src/common/colorSystem.js: 14 values used about 500 times.
  • Dark backgrounds in packages/app/src/modules/common/styles/colors.ts such as darkThemeSecondary and darkThemeBackground.
  • Two hard-coded #222C38 values in the share modals.
  • Graphite mapping: primary #14171A, secondary #222529, input #1C1F22, stroke #2C3033, secondary text #999FA6.
Left and right arrows switch options. Up and down switch screens.