The Bee mobile app design system.
This documents the current Bee mobile app (iOS/Android, React Native) — the baseline we’re redesigning from. It is not the web design system and not a set of new web tokens. Source of truth: customer-app/src/theme/{colors,typography,spacing}.ts. Values are reproduced here as documentation.
Colour
The app theme’s colour object (main, accent, typography, background). These are raw hex values with no Tailwind equivalent in this project, so each chip is painted from its own hex. Light-only — there are no dark-theme tokens.
Primary — charcoal / ink
main.primary
The app’s ink. default is #2E3032 (= the 500 step). Used for primary text, buttons/ink on yellow, and dark surfaces.
25#E9EAEBLightest tint
50#D6D7D9Subtle fills
100#CFCFD0Borders, dividers
200#9B9FA7Muted UI
300#6D727DSecondary text
400#565859Body text
500#2E3032Primary text, ink on yellow
⚠ default; identical to main.black[700]
600#252628Pressed / deep ink
700#121314Darkest ink
Secondary — Bee yellow
main.secondary
Brand fills, primary button background (with charcoal text), highlights. default is the 500 value #FFE048. Note the ramp drifts to ORANGE at the top — 600 and 700 are not darker yellows.
50#FFFDFALightest wash
100#FFF3DCSubtle fills
200#FFEAC2Light fills
300#FFE2ABSoft accents
400#FFC894Warm accent
500#FFE048Brand fill, primary button bg
⚠ default — the real Bee yellow
600#FF9A7BListed as “600” but is a coral/orange
⚠ Drifts off-hue — not a darker yellow
700#F7B944Listed as “700” but is amber/orange
⚠ Drifts off-hue — not a darker yellow
Neutral / black
main.black
The neutral ramp. Runs white → near-black. default is #151718 (= the 900 step).
50#FFFFFFWhite surfaces
100#F7F8F9Off-white backgrounds
200#D9DDE3Dividers
300#C8CCD2Borders
400#B1B5BADisabled / placeholder
500#8C8F93Secondary text, input hints
600#5C5E61Body text
700#2E3032Input text, headings
⚠ Identical to main.primary[500]
800#262829Deep ink
900#151718Darkest
⚠ default; black[900] == black.default
Typography text colours
typography
The colours applied to text styles. text3 is the default (#4E5D78) — most type styles inherit it.
text1#2F353BStrongest text
text2#323B4BHeadings, input labels
text3#4E5D78Default body text
⚠ default
text4#8A94A6Muted / secondary
text5#B0B7C3Faint / placeholder
Backgrounds
background
Surface fills. default/5 is white; the rest are progressively cooler greys for cards and screens.
default / 5#FFFFFFDefault surface, cards
⚠ default
1#C1C7D0Strong divider / scrim
2#EFF1F3Screen background
3#F5F7FASubtle panel
4#FAFBFCNear-white panel
Accent — success
accent.success
Confirmations and completed states. default #12B76A.
50#E3F6EF100#E2F4EC200#A4DAC1300#78D0B0500#22B17D600#1B8E64⚠ Written “##1B8E64” (double #) in source — a typo; correct value shown
700#12B76A⚠ default
900#027A48Accent — warning
accent.warning
Cautions and pending states. default #F79009.
100#FFFAEB200#FEDF89500#FFB444700#F79009⚠ default
900#B54708Accent — danger
accent.danger
Errors and destructive actions. default #E11900.
25#FFF6F6100#FDE7E6200#FFA28A500#FE2B2B700#E11900⚠ default
900#C90000Accent — info
accent.info
Informational highlights. default #2E90FA.
100#EFF8FF200#B2DDFF700#2E90FA⚠ default
900#175CD3Accent — purple
accent.purple
Secondary accent. default #8F1AE8.
100#F9E8FF200#DC96FF700#8F1AE8⚠ default
900#480C76Typography
Font family: Airbnb Cereal App. Weights shipped: Light, Book (400), Medium (500), Bold (700), ExtraBold, Black; the app uses Book / Medium / Bold predominantly. It’s a licensed font — the genuine faces are loaded here, so specimens render in the real typeface. Each style ships three weights (Bold / Medium / Book).
displayXLarge64px · lh 72
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogdisplayLarge42px · lh 50
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogdisplayMedium32px · lh 40
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogdisplaySmall28px · lh 36
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogheadingLarge24px · lh 32
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogheadingMedium20px · lh 28–32
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogheadingSmall18px · lh 26
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogbodyLarge16px · lh 25.6
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogbodySmall14px · lh 22.4
Default body style (typography.default)
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogsubhead14px · lh 22
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogsubhead212px · lh 20
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogcaption12px · lh 19.2
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dogbutton16/15/12px
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy doginput16/14/14px
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy doginputLabel14/12/12px
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy doginputHint12px
BoldThe quick brown fox jumps over the lazy dogMediumThe quick brown fox jumps over the lazy dogBookThe quick brown fox jumps over the lazy dog
Spacing
A 4px-based scale, keyed 0–28. Note spacing[0] is 1px, not 0 — slightly irregular. Bars wider than the page are capped; the px value is exact.
01pxIrregular — 1px, not 014px28px312px416px520px624px728px832px936px1040px1148px1256px1364px1480px1596px16112px17128px18144px19160px20176px21192px22208px23224px24240px25256px26288px27320px28384px
Radius & elevation
No centralized tokens exist in the mobile theme.
Not tokenized in the app — radius is set per-component via numeric borderRadius props, and shadows are passed to the Card component as shadowColor + distance props. Opportunity to standardize in the redesign.
Components
The app’s core UI primitives, recreated to spec from the React Native source in customer-app/src/components. Interactive ones are live — tap to toggle.
Recreated to spec from the React Native source — exact sizes, radii, and theme hex values. The live components live in customer-app/src/components.
Button
Three sizes (small 36 · medium 48 · larger 52, all radius 100) and three variants. Solid fills Bee yellow with charcoal text; outline is white with a grey hairline; text is chromeless. Disabled greys out; loading swaps the label for a spinner.
Text input
Sizes small 36 · medium 44 · larger 56 (radius 8). Five states: default (grey fill), focus (charcoal border on white), filled (grey border), error (red fill + border + hint), and disabled. Optional label with a required asterisk and a hint line.
We’ll never share it.
Enter a valid email address.
Selection controls
Checkbox (20×20, radius 3), radio (20×20 circle), and switch (40×22 track, 18px knob). All fill charcoal (primary) when on. Tap to toggle.
Card
White surface, radius 12, soft drop shadow (rgba(176,183,195,0.15), distance 50). Border is optional (1px, black-200). Radius and shadow are hardcoded in the component — see the Radius & elevation note.
Shadow card
showShadow (default), no border.
Bordered card
showBorder, shadow off.