Colorffy CSS
Overview
An expressive SCSS framework with a tonal color system and vivid gradients.
@colorffy/css is an expressive SCSS framework for building vibrant interfaces — dynamic theming, vivid gradients, and a powerful tonal color system.
Use the compiled CSS
The quickest way to start is importing the prebuilt stylesheet:
main.ts
import '@colorffy/css'
For production, use the minified build:
main.ts
import '@colorffy/css/css/min'
Import the SCSS source
Pull in the full framework from SCSS to enable customization:
main.scss
@use '@colorffy/css/scss/main';
Import specific modules
Only need a few pieces? Import individual components and utilities:
@use '@colorffy/css/scss/components/button';
@use '@colorffy/css/scss/components/card';
@use '@colorffy/css/scss/utilities/colors';
@use '@colorffy/css/scss/utilities/spacing';
Explore
Foundations
- Color system — tonal colors, semantic colors, gradients
- Customization — override variables, mixins, and runtime CSS
Utilities — Spacing · Colors & Gradients · Typography · Display & Flexbox · Borders & Shadows · Effects
Layout — Grid · Flex Grid · App Layout
SCSS API — Mixins · Tonal Tokens