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

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 - https://unsplash.com/photos/UP7JSnodG2M

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

Installation

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

All token formats

Token formats Links
JSON
https://github.com/ravenbrightdesign/ravenbrighttokens/tree/main/dist/json
CSS variables
https://github.com/ravenbrightdesign/ravenbrighttokens/tree/main/dist/css
Tailwind CSS Config
https://github.com/ravenbrightdesign/ravenbrighttokens/tree/main/dist/tailwindcssconfig
Figma tokens
https://github.com/ravenbrightdesign/ravenbrighttokens/tree/main/dist/figma

CDN

Build intuitive & consistent website faster with CSS variables.

NPM

Run the command below to install the tokens using NPM:

Color palettes

View tokens Read docs

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

Syntax

Example

Gray

Name Token Example Value (hex)
Gray 50 --rbrh-gray-50
#fafbfd
Gray 100 --rbrh-gray-100
#edf1f7
Gray 200 --rbrh-gray-200
#e5e8ec
Gray 300 --rbrh-gray-300
#ced5db
Gray 400 --rbrh-gray-400
#7ba5e4
Gray 500 --rbrh-gray-500
#acb7c2
Gray 600 --rbrh-gray-600
#505f6d
Gray 700 --rbrh-gray-700
#1d232e
Gray 800 --rbrh-gray-800
#121821
Gray 900 --rbrh-gray-900
#0a0e14

Green

Name Token Example Value (hex)
Green 50 --rbrh-green-50
#f0fdf5
Green 100 --rbrh-green-100
#e0faea
Green 200 --rbrh-green-200
#cff7df
Green 300 --rbrh-green-300
#bef4d4
Green 400 --rbrh-green-400
#46ca7b
Green 500 --rbrh-green-500
#1bce63
Green 600 --rbrh-green-600
#048839
Green 700 --rbrh-green-700
#007c32
Green 800 --rbrh-green-800
#023c19
Green 900 --rbrh-green-900
#012911

Lime

Name Token Example Value (hex)
Lime 50 --rbrh-lime-50
#f8fcf7
Lime 100 --rbrh-lime-100
#ebf7e9
Lime 200 --rbrh-lime-200
#dbebe1
Lime 300 --rbrh-lime-300
#c4edbb
Lime 400 --rbrh-lime-400
#9bd991
Lime 500 --rbrh-lime-500
#5fd119
Lime 600 --rbrh-lime-600
#248514
Lime 700 --rbrh-lime-700
#1d310e
Lime 800 --rbrh-lime-800
#0e1c04
Lime 900 --rbrh-lime-900
#0b0f06

Cyan

Name Token Example Value (hex)
cyan 50 --rbrh-cyan-50
#f4fafa
cyan 100 --rbrh-cyan-100
#e1fafa
cyan 200 --rbrh-cyan-200
#c7f6f6
cyan 300 --rbrh-cyan-300
#94efef
cyan 400 --rbrh-cyan-400
#50e4e4
cyan 500 --rbrh-cyan-500
#1cb6b6
cyan 600 --rbrh-cyan-600
#0f6161
cyan 700 --rbrh-cyan-700
#0c5050
cyan 800 --rbrh-cyan-800
#0a3f3f
cyan 900 --rbrh-cyan-900
#072e2e

Teal

Name Token Example Value (hex)
teal 50 --rbrh-teal-50
#e7f5f2
teal 100 --rbrh-teal-100
#d6f5ed
teal 200 --rbrh-teal-200
#acebdc
teal 300 --rbrh-teal-300
#7ae5cc
teal 400 --rbrh-teal-400
#42e0ba
teal 500 --rbrh-teal-500
#14cc9f
teal 600 --rbrh-teal-600
#048464
teal 700 --rbrh-teal-700
#077156
teal 800 --rbrh-teal-800
#053f31
teal 900 --rbrh-teal-900
#022019

Red

Name Token Example Value (hex)
red 50 --rbrh-red-50
#fee7e7
red 100 --rbrh-red-100
#fdd5d5
red 200 --rbrh-red-200
#faafaf
red 300 --rbrh-red-300
#ec757b
red 400 --rbrh-red-400
#e85a61
red 500 --rbrh-red-500
#e2313a
red 600 --rbrh-red-600
#ce2d35
red 700 --rbrh-red-700
#a02329
red 800 --rbrh-red-800
#7c1b20
red 900 --rbrh-red-900
#5f1518

Magenta

Name Token Example Value (hex)
magenta 50 --rbrh-magenta-50
#ffedf4
magenta 100 --rbrh-magenta-100
#ffc6dc
magenta 200 --rbrh-magenta-200
#ff99c0
magenta 300 --rbrh-magenta-300
#ff72a8
magenta 400 --rbrh-magenta-400
#ff297a
magenta 500 --rbrh-magenta-500
#ff0262
magenta 600 --rbrh-magenta-600
#d90052
magenta 700 --rbrh-magenta-700
#9f003c
magenta 800 --rbrh-magenta-800
#77002d
magenta 900 --rbrh-magenta-900
#3d0017

Orange

Name Token Example Value (hex)
orange 50 --rbrh-orange-50
#ffebd8
orange 100 --rbrh-orange-100
#ffe1c5
orange 200 --rbrh-orange-200
#ffc28a
orange 300 --rbrh-orange-300
#fea654
orange 400 --rbrh-orange-400
#fe9533
orange 500 --rbrh-orange-500
#fe7a00
orange 600 --rbrh-orange-600
#e76f00
orange 700 --rbrh-orange-700
#d63d00
orange 800 --rbrh-orange-800
#8c4300
orange 900 --rbrh-orange-900
#6b3300

Yellow

Name Token Example Value (hex)
yellow 50 --rbrh-yellow-50
#f6f4f0
yellow 100 --rbrh-yellow-100
#f5f2e7
yellow 200 --rbrh-yellow-200
#f3e8c0
yellow 300 --rbrh-yellow-300
#fea654
yellow 400 --rbrh-yellow-400
#eed371
yellow 500 --rbrh-yellow-500
#ddaf0a
yellow 600 --rbrh-yellow-600
#9e7e0c
yellow 700 --rbrh-yellow-700
#7e6405
yellow 800 --rbrh-yellow-800
#5a4806
yellow 900 --rbrh-yellow-900
#292103

Blue

Name Token Example Value (hex)
blue 50 --rbrh-blue-50
#f0f5fd
blue 100 --rbrh-blue-100
#dee9fc
blue 200 --rbrh-blue-200
#bcd6ff
blue 300 --rbrh-blue-300
#98bbf4
blue 400 --rbrh-blue-400
#74a3f0
blue 500 --rbrh-blue-500
#3f80eb
blue 600 --rbrh-blue-600
#1760d8
blue 700 --rbrh-blue-700
#283f5f
blue 800 --rbrh-blue-800
#121c2b
blue 900 --rbrh-blue-900
#040e1b

Sky

Name Token Example Value (hex)
sky 50 --rbrh-sky-50
#e6f7fe
sky 100 --rbrh-sky-100
#d8f5ff
sky 200 --rbrh-sky-200
#a5e7ff
sky 300 --rbrh-sky-300
#78dbff
sky 400 --rbrh-sky-400
#5ad0fb
sky 500 --rbrh-sky-500
#00b2f1
sky 600 --rbrh-sky-600
#0c78a0
sky 700 --rbrh-sky-700
#086385
sky 800 --rbrh-sky-800
#08485f
sky 900 --rbrh-sky-900
#063b4c

Indigo

Name Token Example Value (hex)
indigo 50 --rbrh-indigo-50
#eeedfe
indigo 100 --rbrh-indigo-100
#cac6fc
indigo 200 --rbrh-indigo-200
#b0abfa
indigo 300 --rbrh-indigo-300
#8c84f8
indigo 400 --rbrh-indigo-400
#756df7
indigo 500 --rbrh-indigo-500
#5348f5
indigo 600 --rbrh-indigo-600
#4c42df
indigo 700 --rbrh-indigo-700
#3b33ae
indigo 800 --rbrh-indigo-800
#2e2887
indigo 900 --rbrh-indigo-900
#231e67

Purple

Name Token Example Value (hex)
purple 50 --rbrh-purple-50
#f5f2ff
purple 100 --rbrh-purple-100
#eae4ff
purple 200 --rbrh-purple-200
#d7cdff
purple 300 --rbrh-purple-300
#b19dff
purple 400 --rbrh-purple-400
#9176ff
purple 500 --rbrh-purple-500
#623bff
purple 600 --rbrh-purple-600
#3300ff
purple 700 --rbrh-purple-700
#2b00d8
purple 800 --rbrh-purple-800
#1f009d
purple 900 --rbrh-purple-900
#140062

Violet

Name Token Example Value (hex)
violet 50 --rbrh-violet-50
#eee9fd
violet 100 --rbrh-violet-100
#cbbbf8
violet 200 --rbrh-violet-200
#b29af4
violet 300 --rbrh-violet-300
#8f6cf0
violet 400 --rbrh-violet-400
#7950ed
violet 500 --rbrh-violet-500
#623bff
violet 600 --rbrh-violet-600
#5824e8
violet 700 --rbrh-violet-700
#3e1aa5
violet 800 --rbrh-violet-800
#301480
violet 900 --rbrh-violet-900
#250f61

Dark mode

View tokens Read docs

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

View tokens Read docs

Variables example

Example of usage

Token name Example Value
--rbrh-radius-xl
1.75rem
--rbrh-radius-lg
1rem
--rbrh-radius-md
.75rem
--rbrh-radius-sm
.5rem
--rbrh-radius-xs
.25rem

Box shadow

View tokens Read docs

Variables example

Want to add your own box shadow prop?

👉 Read the complete tutorial here

Example of usage

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

Spacing

View tokens Read docs

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.

Syntax

Example

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

Typography

View tokens Read docs

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

Syntax

Example

Font family

Inter Tight

Excepteur sint non proident

1234567890?!()[]{}&*^%$#@~

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
7xl 		4.25rem 68px
--rbrh-line-h-6xl line-height
6xl 		6rem 64px
--rbrh-line-h-5xl line-height
5xl 		3rem 48px
--rbrh-line-h-4xl line-height
4xl 		2.75rem 44px
--rbrh-line-h-3xl line-height
3xl 		2.5rem 40px
--rbrh-line-h-2xl line-height
2xl 		2rem 32px
--rbrh-line-h-xl line-height
xl		 2rem 32px
--rbrh-line-h-lg line-height
lg		 2rem 32px
--rbrh-line-h-md line-height
md		 1.625rem 26px
--rbrh-line-h-sm line-height
sm		 1.5rem 24px
--rbrh-line-h-xs line-height
xs		 1.5rem 24px
--rbrh-line-h-xxs line-height
xxs 		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