Design language
Overview
Interactive E-FACTS design language — tokens, components, and product IA
Design language
Living standards for E-FACTS UI. Every page here depicts the system — live buttons, swatches, type specimens — not screenshots of them.
Canonical source: docs/Design.md in this repo.
Brand at a glance
| Vision | Digital receipt management infrastructure — POS → consumer apps |
| Values | Accuracy · Innovation · Quality |
| Mark | Reversible Flow S-ribbon (opposing arrows) |
Explore
| Page | What you’ll find |
|---|---|
| Brand & logo | Wordmark + S-icon, light/dark |
| Color | Swatches, gradient, contrast notes |
| Typography | Live type scale + tabular nums |
| Spacing & radius | 4–32 space, pill/card/input |
| Buttons | Primary + Ghost with hover/press |
| Inputs | 48px fields, focus rings |
| Badges & progress | Eco badges + emerald bars |
| Motion | Do / don’t |
| Product IA | Consumer 4-tab nav (reference) |
Docs chrome vs product
This site (dev.efacts.ca) uses a spacious, retractable sidebar. The consumer app’s 4-tab bar is documented as product IA only — it is not the docs navigation.