Ritla for Figma
The default theme as a Figma file and a token pack from the same variables, rendered by Ritla UI, so the design and the build cannot drift apart.
- Pricing
- Pricing coming soon
Color
The brand and gray 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#f6f9ff
- 50#edf2ff
- 100#e2ebff
- 200#d4e1ff
- 300#adc6fe
- 400#85a7fe
- 500#5b86fd
- 600#3c5efb
- 700#2a3ecf
- 800#1d299d
- 900#111a6d
- 925#0d1655
- 950#070f42
- 975#050b30
Gray
- 25#fcfcfc
- 50#f7f7f7
- 100#eeeeee
- 200#dadada
- 300#c1c1c1
- 400#a3a3a3
- 500#898989
- 600#6c6c6c
- 700#505050
- 800#373737
- 900#252525
- 950#151515
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
- 103
- Icons that mirror in RTL
- 20
- Currency icons
- 81
- Documented components
- 335
- Semantic color tokens
- 165
- Primitive tokens
- 20
- Text styles
- 33
- Gradients
The Phosphor icon set is included too, for everything that is not specific to Arabic.
Light and dark
The same component in both modes. Both use a neutral gray, not a tinted one.
What you get
- The Figma file, with every color, type style, radius and spacing value as a variable, and every component in LTR and RTL variants.
- The token pack: CSS variables and a Tailwind v4 theme generated from those same Figma variables, so a designer's change is one token away from the build.
- Rendered by Ritla UI: every component reads these tokens and is built against Ritla's checks, with logical properties only, directional icons that mirror, and digits and phone numbers that do not.
Early access to buy
Every page here is free to browse. Buying is coming soon: leave an address and we write once, when it opens.