Thank you for your interest in this project.
As of December 11th, 2023, this project is no longer being maintained or updated. The repository will still be available and can be forked, but no further updates or issue responses will be made.
This project is licensed under the terms of the Apache License 2.0. You are free to fork and use this project according to the terms of that license.
Thank you for your understanding and support!
This repo is a group of design tokens in accordance with Ravenbright CSS to help you enable seamless handoff experience & build intuitive website faster. Ravenbright Design currently offers 4 different design token formats such as JSON, CSS variables, Figma Tokens, & Tailwind CSS config.
-
🎨 Apply your own custom brand in minutes
-
🤝 Faster & seamless handoff experience between the teams
-
✅ Connected with Ravenbright CSS & its UI collections that available in Next.js, Astro, Gatsby, & HTML5.
-
📉 Reduce duplicate styles in CSS
-
🌐 Platform agnostic. It provides flexible design tokens that works regardless of specific tech platforms.
-
👌 Build intuitive & consistent website faster
-
🚀 Achieve high-performance site with optimized CSS
-
🌙 Support light & dark mode theme
- Download the source code from GitHub Releases
<link rel="stylesheet" href="https://unpkg.com/ravenbrighttokens/ravenbright-vars.min.css"><link rel="stylesheet" href="https://unpkg.com/ravenbrighttokens/ravenbright-json.json"><link rel="stylesheet" href="https://unpkg.com/ravenbrighttokens/ravenbright-figma-tokens.json"># initialize project
npm init
# download & install Ravenbright Design Tokens locally
npm install ravenbrighttokens
# change directory
cd node_modules/ravenbrighttokensStill have doubt? Don't be, explore & play around with Ravenbright Design Tokens live demo on Codepen.
Some of Ravenbright design tokens including colors & typography are initially created from Figma Tokens plugin & then manually edited to enhance & arrange the structure. The plugin helps us making the design works well together with the development process.
After that, you can use Style Dictionary to generate the tokens into different formats such as CSS variables, SASS variables, Android XML, iOS swift, etc.
Read the tutorial here 👉 Ravenbright CSS official docs.
Currently in Ravenbright Figma Tokens v1.0.0, there exists some limitations:
- Colors are the only styles that work out of the box when imported into Figma built-in styles
- CSS box shadow values in JSON are not working when applied to Figma objects or components
- Letter-spacing & line-height values must use a 'px' unit because Figma still doesn't support 'rem' unit. Check this post on Figma forum for more details.
Learn more about customizing & building the CSS variables in 👉 Ravenbright CSS official docs.
At the moment, Tailwind CSS config is manually edited & created from Figma Tailwind CSS plugin. Check the config here 👉 Ravenbright CSS official docs.
Ravenbright Design Tokens are released under Apache License 2.0.