PlanetScale Core: Design System

PlanetScale’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 |