Design and theming
fonts, tokens, re-theming.
4.0 ships a new design called Neon Plum: dark and light themes, two bundled open-source fonts, one file of design tokens and a set of signature components. This page shows where each part lives and how to give the app your own look.
01What changed in 4.0
- Five tabs: Home · Earn · Play · Wallet · Profile. Ranks, teams, events and the season moved under Play and Profile. Where the cash wallet is off for the platform, the Wallet tab becomes Rewards (store and inventory).
- Dark theme by default, light theme available; users choose light, dark or system in the app's settings.
- Signature components in
app/lib/ui/widgets/ds.dart:BalanceHero(points and cash side by side with a count-up),PayoutProgressCard,GoalRow,OfferTile,GameCard(illustrations drawn in code),StatusChipandMoneyText(every money amount on screen goes through it). - Motion in
app/lib/ui/widgets/motion.dart: page transitions, staggered entrances, press feedback, an animated aurora and skeleton loaders. All of it switches off when the system asks for reduced motion.
The design is original work: no copied assets and no third-party brand logos except the Google and Apple sign-in buttons.
02Fonts
| Font | Used for | File | Licence |
|---|---|---|---|
| Bricolage Grotesque | Headlines and big numbers (weights 700 to 800, variable wght and opsz axes) | app/assets/fonts/BricolageGrotesque.ttf | SIL Open Font License 1.1, © 2022 The Bricolage Grotesque Project Authors. Text: app/assets/fonts/BricolageGrotesque-OFL.txt |
| Inter | UI and body text; money and counters use tabular figures so numbers do not jitter | app/assets/fonts/Inter.ttf | SIL Open Font License 1.1, © 2020 The Inter Project Authors. Text: app/assets/fonts/Inter-OFL.txt |
Both are bundled in the app (declared under flutter: fonts: in app/pubspec.yaml), so the app does not download fonts at run time. The OFL lets you use, modify and redistribute them in your app; it does not allow selling the font files on their own, and the licence text must travel with them. Keep the licence files in the package.
03Design tokens
All colours, radii, spacing and motion values are in app/lib/core/design.dart (class Ds). app/lib/core/theme.dart builds the dark and light ThemeData from them, and screens read colours through Ds.of(context), so both themes stay in sync.
| Token | Dark | Light |
|---|---|---|
Background bg | #12081F | #F6F3FB |
Surface surface | #1C1030 | #FFFFFF |
Raised surface surface2 | #271842 | #EFE9F8 |
Hairline stroke | white at 8 % (0x14FFFFFF) | ink at 8 % (0x141A0B2E) |
Text text | #F6F1FF | #1A0B2E |
Secondary text muted | #B3A6CC | #6B5F80 |
| Token | Value | Meaning |
|---|---|---|
magenta → violet | #FF3DA5 → #8B5CFF | Brand gradient. The console's accent colour replaces the first stop. |
gemLight, gem | #A78BFA, #7C3AED | Points (violet gem) |
mintLight, mint | #2EE6A6, #10B981 | Cash (mint). Points and cash always have different colours. |
gold | #FFC94D | Highlights, streaks |
danger | #FF5A6E | Errors, rejected |
Radii rSm rMd rLg rXl | 12, 18, 26, 32 | Corners |
Spacing s1 to s8 | 4-point grid (4 to 32) | Padding and gaps |
Motion fast normal slow | 180, 320, 600 ms, ease-out cubic | Animations |
glow() | accent at 35 %, blur 28 | For the one highlighted card per screen, never everywhere |
04Re-theme the app
- Accent colour, no buildConsole → Brand → Accent colour. It becomes the first stop of the brand gradient and the theme's primary colour in both themes. The console default
#EC4899(the 3.x accent) is shown as the 4.0 magenta#FF3DA5(parseHex()inapp/lib/core/theme.dart); any other value is used as is. A theme the user bought in the rewards store and equipped overrides it for that user. - Surfaces and textChange the
Ds.darkandDs.lightvalues inapp/lib/core/design.dart. Keep enough contrast betweentext/mutedand the backgrounds. - Brand, points and cash coloursChange
magenta,violet,gem*andmint*in the same file. Keep points and cash visibly different: users must never confuse the two balances. - FontsTo use other fonts, put the files in
app/assets/fonts/, declare them inapp/pubspec.yamlunderflutter: fonts:, and change the family names'BricolageGrotesque'and'Inter'indesign.dartandtheme.dart. If you remove a bundled font, remove its OFL text too; if you add one, ship its licence. - Default themeNew installs start in dark mode (
ThemeMode.darkinapp/lib/state/app_state.dart). Change it there if you prefer light or system. - Check both themesRun the web demo (
flutter run -d chrome --dart-define=DEMO_MODE=true), switch light and dark in Settings, then runflutter analyzeandflutter test.
App name, icon, bundle id and the points name: Rebranding.