Introduction
Tokens, React components and guidelines for building calm, precise, bilingual fintech interfaces at Thanawi.
Thanawi helps companies manage ownership, raise capital and move money. Every screen we ship has to feel trustworthy, calm and precise, in English and in Arabic. This design system is the shared foundation for those screens.
What’s inside
| Package | What it gives you |
|---|---|
@thanawi/tokens | Design tokens as --th-* CSS variables: primitives, semantics and modes, plus a Tailwind v4 bridge. |
@thanawi/ui | React 19 components styled with semantic tokens, built on Radix primitives where it helps accessibility. |
docs | This site. Every page exists in English and Arabic, and every component has a live preview and its source code. |
Principles
Trustworthy
Money is involved, so nothing should be ambiguous. Disabled, loading and error states are always visible and always explained. Destructive actions ask for confirmation.
Calm
Generous whitespace, a restrained palette, and color used for meaning rather than decoration. Teal marks the primary action; status colors are reserved for status.
Precise
Amounts use tabular figures so columns line up. Focus rings are always visible. Contrast meets WCAG 2.2 AA at minimum.
Bilingual from the root
Direction comes from <html dir lang>. Layout uses logical properties only, so the same component works left-to-right and right-to-left without a separate stylesheet. See RTL & bidi.