Prepare product layout and reusable Flutter theme
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.
This commit is contained in:
1 parent
ef65a40213
commit
d9318053e8
46 files changed
+703
-1
No files matched your search
@@ -0,0 +1,25 @@
|
||||
# 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.
|
||||
Reference in new issue
Block a user