Design · New
Kanz
The first Ritla theme. A Figma file and React code from the same tokens, so the design and the build cannot drift apart.
- Install
- Launch pricing soon
Colour
The brand and grey ramps, read from the token build. Semantic tokens sit on top of them, so dark mode switches the variables and never the classes.
Brand
- 25#f5f9ff
- 50#ebf2ff
- 100#e0ecff
- 200#d0e2ff
- 300#a6c8ff
- 400#78a9ff
- 500#4589ff
- 600#0f62fe
- 700#0043ce
- 800#002d9c
- 900#001d6c
- 950#001141
Grey
- 25#fafcff
- 50#f5f7fa
- 100#ebeef4
- 200#dde1e6
- 300#c1c7cd
- 400#a2a9b0
- 500#878d96
- 600#697077
- 700#4d5358
- 800#343a3f
- 900#21272a
- 950#121619
Type
Geist for Latin, IBM Plex Sans Arabic for Arabic, with taller Arabic line heights and no letter-spacing on Arabic, ever.
Geist
Send money to anyone, in seconds.
IBM Plex Sans Arabic
حوّل المبالغ إلى أي شخص في ثوانٍ.
In the kit
- 62
- Documented components
- 325
- Semantic colour tokens
- 160
- Primitive tokens
- 33
- Gradients
- 20
- Text styles
- 103
- Icons that mirror in RTL
- 20
- Currency icons
- 1,512
- Phosphor icons
Light and dark
The same component in both modes. The dark theme is a neutral grey, not a tinted one.
What you get
- The Figma file, with every colour, type style, radius and spacing value as a variable, and every component in LTR and RTL variants.
- The React code, installed into your project as source, built on the same variables, so a designer's change is one token away from the build.
- Built against Ritla's checks: logical properties only, directional icons that mirror, digits and phone numbers that do not.
Ask for early accessLaunch pricing soon
Get early access
Components, themes, blocks and the registry open together. Leave an address and we will write once, when they do.