NEW! We have released FREE Handoff Figma Documentation Kit! Download Figma Kit
Skip to content

Hero section

Build consistent experience for your static sites

Ravenbright CSS leverages CSS variables as the primary design token format to let you modify the styles in seconds

Ravenbright design tokens are also available in

JSON Figma tokens Tailwind CSS config
Unsplash Image by @walling -

Reduce duplicate styles in CSS

Achieve high-performance site with optimized CSS

Support light & dark mode theme

Activate dark-mode in UI without a fuss

Apply custom brand in minutes

Build & modify the UI that adapt your own style

Faster & seamless handoff experience

Get everyone in sync with JSON Figma tokens file


Use the CDN or install Ravenbright design tokens via NPM or copy & paste from 4 different formats below.


Build intuitive & consistent website faster with CSS variables.


Run the command below to install the tokens using NPM:

Color palettes

The naming concept for Ravenbright CSS token is fairly straightforward. It uses semantic word as the foundation. It's started with --rbrh as the prefix to avoid clash with other variables.

Prefix is too long?

👉 Install CSS variables VS Code extension to speed-up the process when writing variables




Name Token Example Value (hex)
Gray 50 --rbrh-gray-50
Gray 100 --rbrh-gray-100
Gray 200 --rbrh-gray-200
Gray 300 --rbrh-gray-300
Gray 400 --rbrh-gray-400
Gray 500 --rbrh-gray-500
Gray 600 --rbrh-gray-600
Gray 700 --rbrh-gray-700
Gray 800 --rbrh-gray-800
Gray 900 --rbrh-gray-900


Name Token Example Value (hex)
Green 50 --rbrh-green-50
Green 100 --rbrh-green-100
Green 200 --rbrh-green-200
Green 300 --rbrh-green-300
Green 400 --rbrh-green-400
Green 500 --rbrh-green-500
Green 600 --rbrh-green-600
Green 700 --rbrh-green-700
Green 800 --rbrh-green-800
Green 900 --rbrh-green-900


Name Token Example Value (hex)
Lime 50 --rbrh-lime-50
Lime 100 --rbrh-lime-100
Lime 200 --rbrh-lime-200
Lime 300 --rbrh-lime-300
Lime 400 --rbrh-lime-400
Lime 500 --rbrh-lime-500
Lime 600 --rbrh-lime-600
Lime 700 --rbrh-lime-700
Lime 800 --rbrh-lime-800
Lime 900 --rbrh-lime-900


Name Token Example Value (hex)
cyan 50 --rbrh-cyan-50
cyan 100 --rbrh-cyan-100
cyan 200 --rbrh-cyan-200
cyan 300 --rbrh-cyan-300
cyan 400 --rbrh-cyan-400
cyan 500 --rbrh-cyan-500
cyan 600 --rbrh-cyan-600
cyan 700 --rbrh-cyan-700
cyan 800 --rbrh-cyan-800
cyan 900 --rbrh-cyan-900


Name Token Example Value (hex)
teal 50 --rbrh-teal-50
teal 100 --rbrh-teal-100
teal 200 --rbrh-teal-200
teal 300 --rbrh-teal-300
teal 400 --rbrh-teal-400
teal 500 --rbrh-teal-500
teal 600 --rbrh-teal-600
teal 700 --rbrh-teal-700
teal 800 --rbrh-teal-800
teal 900 --rbrh-teal-900


Name Token Example Value (hex)
red 50 --rbrh-red-50
red 100 --rbrh-red-100
red 200 --rbrh-red-200
red 300 --rbrh-red-300
red 400 --rbrh-red-400
red 500 --rbrh-red-500
red 600 --rbrh-red-600
red 700 --rbrh-red-700
red 800 --rbrh-red-800
red 900 --rbrh-red-900


Name Token Example Value (hex)
magenta 50 --rbrh-magenta-50
magenta 100 --rbrh-magenta-100
magenta 200 --rbrh-magenta-200
magenta 300 --rbrh-magenta-300
magenta 400 --rbrh-magenta-400
magenta 500 --rbrh-magenta-500
magenta 600 --rbrh-magenta-600
magenta 700 --rbrh-magenta-700
magenta 800 --rbrh-magenta-800
magenta 900 --rbrh-magenta-900


Name Token Example Value (hex)
orange 50 --rbrh-orange-50
orange 100 --rbrh-orange-100
orange 200 --rbrh-orange-200
orange 300 --rbrh-orange-300
orange 400 --rbrh-orange-400
orange 500 --rbrh-orange-500
orange 600 --rbrh-orange-600
orange 700 --rbrh-orange-700
orange 800 --rbrh-orange-800
orange 900 --rbrh-orange-900


Name Token Example Value (hex)
yellow 50 --rbrh-yellow-50
yellow 100 --rbrh-yellow-100
yellow 200 --rbrh-yellow-200
yellow 300 --rbrh-yellow-300
yellow 400 --rbrh-yellow-400
yellow 500 --rbrh-yellow-500
yellow 600 --rbrh-yellow-600
yellow 700 --rbrh-yellow-700
yellow 800 --rbrh-yellow-800
yellow 900 --rbrh-yellow-900


Name Token Example Value (hex)
blue 50 --rbrh-blue-50
blue 100 --rbrh-blue-100
blue 200 --rbrh-blue-200
blue 300 --rbrh-blue-300
blue 400 --rbrh-blue-400
blue 500 --rbrh-blue-500
blue 600 --rbrh-blue-600
blue 700 --rbrh-blue-700
blue 800 --rbrh-blue-800
blue 900 --rbrh-blue-900


Name Token Example Value (hex)
sky 50 --rbrh-sky-50
sky 100 --rbrh-sky-100
sky 200 --rbrh-sky-200
sky 300 --rbrh-sky-300
sky 400 --rbrh-sky-400
sky 500 --rbrh-sky-500
sky 600 --rbrh-sky-600
sky 700 --rbrh-sky-700
sky 800 --rbrh-sky-800
sky 900 --rbrh-sky-900


Name Token Example Value (hex)
indigo 50 --rbrh-indigo-50
indigo 100 --rbrh-indigo-100
indigo 200 --rbrh-indigo-200
indigo 300 --rbrh-indigo-300
indigo 400 --rbrh-indigo-400
indigo 500 --rbrh-indigo-500
indigo 600 --rbrh-indigo-600
indigo 700 --rbrh-indigo-700
indigo 800 --rbrh-indigo-800
indigo 900 --rbrh-indigo-900


Name Token Example Value (hex)
purple 50 --rbrh-purple-50
purple 100 --rbrh-purple-100
purple 200 --rbrh-purple-200
purple 300 --rbrh-purple-300
purple 400 --rbrh-purple-400
purple 500 --rbrh-purple-500
purple 600 --rbrh-purple-600
purple 700 --rbrh-purple-700
purple 800 --rbrh-purple-800
purple 900 --rbrh-purple-900


Name Token Example Value (hex)
violet 50 --rbrh-violet-50
violet 100 --rbrh-violet-100
violet 200 --rbrh-violet-200
violet 300 --rbrh-violet-300
violet 400 --rbrh-violet-400
violet 500 --rbrh-violet-500
violet 600 --rbrh-violet-600
violet 700 --rbrh-violet-700
violet 800 --rbrh-violet-800
violet 900 --rbrh-violet-900

Below is the example of implementing dark mode with using CSS variables. Experience this website 🌙 dark mode by clicking the toggle button on the navbar.

Variables example

Example of usage

Border radius

Variables example

Example of usage

Token name Example Value

Box shadow

Variables example

Want to add your own box shadow prop?

👉 Read the complete tutorial here

Example of usage

Token name Example Value
-2px 18px 48px -14px rgba(0,0,0,.275);
0px 14px 24px -8px rgba(0,0,0,0.25);
0px 12px 40px -6px rgba(0,0,0,.15),-2px 48px 14px -40px rgba(0,0,0,.15);
0 2px 14px -8px rgba(0,0,0,.15),0rem 2px 12px -2px rgba(0,0,0,.1);
0 2px 10px -6px rgba(0,0,0,.1), 0rem 4px 12px -2px rgba(0,0,0,.1);
inset 0rem .0625rem .125rem 0rem rgba(0, 0, 0, 0.05);
inset 0rem .0625rem .25rem 0rem rgba(0, 0, 0, 0.08);
inset 0rem .125rem .3125rem 0rem rgba(0, 0, 0, 0.1);

The spacing tokens use 4px as the base unit to manage the dimensions and visual rhythm of components. It will also give diverse options & granularity when building the user interface.



Token name Value (rem) Value (px)
--rbrh-spacing-104 32rem 512px
--rbrh-spacing-96 28rem 448px
--rbrh-spacing-88 26rem 384px
--rbrh-spacing-80 20rem 320px
--rbrh-spacing-72 18rem 288px
--rbrh-spacing-64 16rem 256px
--rbrh-spacing-60 15rem 240px
--rbrh-spacing-56 16rem 224px
--rbrh-spacing-52 13rem 208px
--rbrh-spacing-48 12rem 192px
--rbrh-spacing-44 11rem 176px
--rbrh-spacing-40 10rem 160px
--rbrh-spacing-36 9rem 144px
--rbrh-spacing-32 8rem 128px
--rbrh-spacing-28 7rem 112px
--rbrh-spacing-24 6rem 96px
--rbrh-spacing-22 5.5rem 88px
--rbrh-spacing-20 5rem 80px
--rbrh-spacing-18 4.5rem 72px
--rbrh-spacing-16 6rem 64px
--rbrh-spacing-14 3.5rem 56px
--rbrh-spacing-12 3rem 48px
--rbrh-spacing-10 2.5rem 40px
--rbrh-spacing-9 2rem 32px
--rbrh-spacing-8 1.75rem 28px
--rbrh-spacing-7 1.5rem 24px
--rbrh-spacing-6 1.25rem 20px
--rbrh-spacing-5 1rem 16px
--rbrh-spacing-4 .75rem 12px
--rbrh-spacing-3 .5rem 8px
--rbrh-spacing-2 .25rem 4px
--rbrh-spacing-1 .125rem 2.4px


Ravenbright CSS typography system utilize 1.125 (major second) scale. It also employs rem unit as the font size base value.



Font family

Inter Tight

Excepteur sint non proident


Font size

Token name Example Value (rem) Value (px)
--rbrh-font-size-7xl font-size-7xl 4.125rem 66px
--rbrh-font-size-6xl font-size-6xl 3.625rem 58px
--rbrh-font-size-5xl font-size-5xl 2.625rem 42px
--rbrh-font-size-4xl font-size-4xl 2.25rem 36px
--rbrh-font-size-3xl font-size-3xl 1.625rem 26px
--rbrh-font-size-2xl font-size-2xl 1.5rem 24px
--rbrh-font-size-xl font-size-xl 1.375rem 22px
--rbrh-font-size-lg font-size-lg 1.25rem 20px
--rbrh-font-size-md font-size-md 1.125rem 18px
--rbrh-font-size-sm font-size-sm 1rem 16px
--rbrh-font-size-xs font-size-xs .875rem 14px
--rbrh-font-size-xxs font-size-xxs .75rem 12px

Line height

Token name Example Value (rem) Value (px)
--rbrh-line-h-7xl line-height
4.25rem 68px
--rbrh-line-h-6xl line-height
6rem 64px
--rbrh-line-h-5xl line-height
3rem 48px
--rbrh-line-h-4xl line-height
2.75rem 44px
--rbrh-line-h-3xl line-height
2.5rem 40px
--rbrh-line-h-2xl line-height
2rem 32px
--rbrh-line-h-xl line-height
2rem 32px
--rbrh-line-h-lg line-height
2rem 32px
--rbrh-line-h-md line-height
1.625rem 26px
--rbrh-line-h-sm line-height
1.5rem 24px
--rbrh-line-h-xs line-height
1.5rem 24px
--rbrh-line-h-xxs line-height
1rem 16px

Font weight

Token name Example Value
--rbrh-font-weight-bold bold 700
--rbrh-font-weight-semibold semibold 600
--rbrh-font-weight-medium medium 500
--rbrh-font-weight-default default 400

Letter spacing

Token name Example Value (rem) Usage
--rbrh-letter-spacing-xl letter spacing xl .4px small text
--rbrh-letter-spacing-lg letter spacing lg .2px body text
--rbrh-letter-spacing-md letter spacing md -0.4px body text
--rbrh-letter-spacing-sm letter spacing sm -0.8px heading
--rbrh-letter-spacing-xs letter spacing xs -1.2px heading
🎨 Customizable & low level CSS library

Build stunning & modern websites without complex build setup

Create static sites for free

Free to use even for commercial usage with Apache License 2.0

CTA checklists

Built-in dark mode

CTA checklists

Compliant with WCAG 2.1

CTA checklists

Platform agnostic design tokens

CTA checklists

Composable with PostCSS

CTA checklists

Style agnostic & unopinionated

Made with Ravenbright CSS