Stephan D
d9318053e8
Relocate the existing Astro website and preserve its assets and hosting configuration. Add the consumer/backend scaffold and themed Flutter package with consumer tests. Related to #1.
26 lines
2.0 KiB
Markdown
26 lines
2.0 KiB
Markdown
# 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.
|