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:
Stephan D committed 2026-09-11 15:36:58 +02:00
1 parent ef65a40213
commit d9318053e8
46 files changed
+703 -1

No files matched your search

+25
View File
@@ -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.
+24
View File
@@ -0,0 +1,24 @@
{
"name": "SXCHNGE",
"version": 1,
"colors": {
"ink": "#14221d",
"mint": "#c4f9ce",
"lime": "#d7ff5f",
"paper": "#f9faf6",
"muted": "#637168",
"line": "#d9e0d8",
"forest": "#396a4b",
"focus": "#168850",
"darkField": "#25372e",
"darkReceive": "#203d2d",
"sageSurface": "#eaf0e6",
"blueSurface": "#edf0f9"
},
"typography": { "family": "Onest", "bodySize": 16, "bodyLineHeight": 1.65 },
"website": {
"radius": { "card": 24, "input": 14, "pill": 999 },
"spacing": [4, 8, 12, 16, 24, 32, 48, 64, 96],
"motionMs": 200
}
}