Foundations
Grid, shape, colour, elevation, type, numerics.
- Documents
- 8
- Grid & layoutEvery component in Lopifi is designed in four layers, in order. You do not skip ahead. Layer 4 (the actual type) is the last decision, not the first — which is why the system stays coherent when a new component is added by someone who wasn't in the original room.
- Shape & radius24px radius. 24px inset. That pairing is the signature of the system, and everything else derives from it.
- ColorGrayscale first. Color is added only where it carries meaning, and in a financial interface almost nothing does.
- Elevation, borders & shadowsThe single most opinionated decision in Lopifi: At rest, a surface is defined by a hairline. A shadow means the thing is actually floating.
- TypographyTwo families. Three sizes and three weights per component. That constraint is not minimalism for its own sake — it is what forces hierarchy to come from contrast rather than from variety.
- NumericsThe document that makes this a finance system rather than a dashboard kit. Everything here is a rule the rest of the library enforces on the consumer's behalf.
- Icons & microcopyLucide, 1.5px stroke, at 16 / 20 / 24. It's shadcn's default, it's MIT, it's comprehensive, and its optical grid matches Inter's rhythm.
- Imagery, isometric & visual hierarchyLopifi has almost no imagery inside its data surfaces. Where it does — empty states, onboarding, concepts, brand marks — isometric explains a mechanism.
What each document covers
Numerics
- 1. Storage: minor units, always
- 2. Formatting
- 3. Negatives
- 4. Zero, null, and redacted — three different things
- 5. Abbreviation
- 6. Rounding
- 7. Percentages, rates, basis points
- 8. Rule lines
- 9. Overflow
- 10. Multi-currency
- 11. Dates, periods, and "as of"
- 12. Debit / credit
- 13. Sensitive values
- 14. Accessibility of numbers
From here
The same material, reached the other way round — by the word, by the component, or by the thing running.