PlanetScale Design System
npm install @planetscale/corePlanetScale’s web app and marketing website have different styles for different needs, but have shared core styles in common. These are the core styles.
File | Generation | Description
| --- | --- | --- |
| ./tokens.json | ✍️ Manual | Design tokens for Figma Styles not native to Figma (e.g., spacing, border radii), for use with Figma Tokens plugin |
| ./tokens/input.json | 🤖 Automated | Tokens from tokens.json transformed for use with Style Dictionary |
| ./css/**.css | 🤖 Automated | CSS variables from transformed tokens, created by Amazon Style Dictionary as defined by style-dictionary.config.json
| ./tailwind.css | 🤖 Automated | Post-processed CSS from .css/**, ready to be consumed by Tailwind
| ./core-preset.js | ✍️ Manual | Tailwind Preset for shared Tailwind config… 🔜 to be automatically generated by above process + concatenated with more manually-defined configs |
| ./fonts/** | ✍️ Manual | .woff2 files to serve via @font-face across properties |