SXCHNGE brand compatibility
The website and Flutter application should feel related, not identical.
tokens.json is the brand reference. npm run tokens generates the website's CSS variables and an optional Flutter palette (flutter/brand_palette.dart). Neither file prescribes a Flutter ThemeData or component system.
Shared identity
- Ink
#14221D: primary text and strong surfaces. - Mint
#C4F9CE: brand accent, selected surfaces, and key actions on dark backgrounds. - Lime
#D7FF5F: expressive website campaign accent. Use sparingly, or omit it, in the app. - Paper
#F9FAF6: neutral base. Forest#396A4B: secondary brand tone. - Onest: Latin and Cyrillic variable font bundled in
public/fonts/, with its OFL license. Flutter can bundle the same font or use a compatible readable sans serif.
Deliberately website-specific
Oversized display typography, the slightly tilted desktop quote card, animated asterisk, marquee, decorative paths, and large campaign panels belong to the public site. They are not requirements for Flutter. Website radii, spacing, and motion tokens are explicitly nested under website.
The Flutter app can use Material 3, denser layouts, its own spacing, more restrained accents, and flatter cards. Use ink on mint/lime, not light text. Define separate semantic success, error, warning, and information colors; the marketing lime is not a transaction status.
Flutter handoff
Copy the optional brand_palette.dart constants into the app and map only the desired brand roles to its own ColorScheme or theme extension. Avoid blindly feeding the entire palette into ColorScheme.fromSeed, which may change the brand colors. Choose app contrast and dark-mode roles independently.
To reuse Onest, copy Onest-Variable.ttf plus OFL.txt into the Flutter assets and declare the font family as Onest in pubspec.yaml. Web CSS and Flutter widgets are separate implementations. The Dart file is a reference and has not been compiled inside a Flutter project.