Primary
Text & Fill Color
Black White Primary 50 Primary 100 Primary 200 Primary 300 Primary 400 Primary 500 Primary 600 Primary 700 Primary 800 Primary 900 Secondary 50 Secondary 100 Secondary 200 Secondary 300 Secondary 400 Secondary 500 Secondary 600 Secondary 700 Secondary 800 Secondary 900 Tertiary 50 Tertiary 100 Tertiary 200 Tertiary 300 Tertiary 400 Tertiary 500 Tertiary 600 Tertiary 700 Tertiary 800 Tertiary 900 Success 50 Success 100 Success 200 Success 300 Success 400 Success 500 Success 600 Success 700 Success 800 Success 900 Warning 50 Warning 100 Warning 200 Warning 300 Warning 400 Warning 500 Warning 600 Warning 700 Warning 800 Warning 900 Error 50 Error 100 Error 200 Error 300 Error 400 Error 500 Error 600 Error 700 Error 800 Error 900 Surface 50 Surface 100 Surface 200 Surface 300 Surface 400 Surface 500 Surface 600 Surface 700 Surface 800 Surface 900
#0FBA81 and #000000 has great contrast!
Secondary
Text & Fill Color
Black White Primary 50 Primary 100 Primary 200 Primary 300 Primary 400 Primary 500 Primary 600 Primary 700 Primary 800 Primary 900 Secondary 50 Secondary 100 Secondary 200 Secondary 300 Secondary 400 Secondary 500 Secondary 600 Secondary 700 Secondary 800 Secondary 900 Tertiary 50 Tertiary 100 Tertiary 200 Tertiary 300 Tertiary 400 Tertiary 500 Tertiary 600 Tertiary 700 Tertiary 800 Tertiary 900 Success 50 Success 100 Success 200 Success 300 Success 400 Success 500 Success 600 Success 700 Success 800 Success 900 Warning 50 Warning 100 Warning 200 Warning 300 Warning 400 Warning 500 Warning 600 Warning 700 Warning 800 Warning 900 Error 50 Error 100 Error 200 Error 300 Error 400 Error 500 Error 600 Error 700 Error 800 Error 900 Surface 50 Surface 100 Surface 200 Surface 300 Surface 400 Surface 500 Surface 600 Surface 700 Surface 800 Surface 900
#4F46E5 and #ffffff is satisfactory for larger text
Tertiary
Text & Fill Color
Black White Primary 50 Primary 100 Primary 200 Primary 300 Primary 400 Primary 500 Primary 600 Primary 700 Primary 800 Primary 900 Secondary 50 Secondary 100 Secondary 200 Secondary 300 Secondary 400 Secondary 500 Secondary 600 Secondary 700 Secondary 800 Secondary 900 Tertiary 50 Tertiary 100 Tertiary 200 Tertiary 300 Tertiary 400 Tertiary 500 Tertiary 600 Tertiary 700 Tertiary 800 Tertiary 900 Success 50 Success 100 Success 200 Success 300 Success 400 Success 500 Success 600 Success 700 Success 800 Success 900 Warning 50 Warning 100 Warning 200 Warning 300 Warning 400 Warning 500 Warning 600 Warning 700 Warning 800 Warning 900 Error 50 Error 100 Error 200 Error 300 Error 400 Error 500 Error 600 Error 700 Error 800 Error 900 Surface 50 Surface 100 Surface 200 Surface 300 Surface 400 Surface 500 Surface 600 Surface 700 Surface 800 Surface 900
#0EA5E9 and #000000 has great contrast!
Success
Text & Fill Color
Black White Primary 50 Primary 100 Primary 200 Primary 300 Primary 400 Primary 500 Primary 600 Primary 700 Primary 800 Primary 900 Secondary 50 Secondary 100 Secondary 200 Secondary 300 Secondary 400 Secondary 500 Secondary 600 Secondary 700 Secondary 800 Secondary 900 Tertiary 50 Tertiary 100 Tertiary 200 Tertiary 300 Tertiary 400 Tertiary 500 Tertiary 600 Tertiary 700 Tertiary 800 Tertiary 900 Success 50 Success 100 Success 200 Success 300 Success 400 Success 500 Success 600 Success 700 Success 800 Success 900 Warning 50 Warning 100 Warning 200 Warning 300 Warning 400 Warning 500 Warning 600 Warning 700 Warning 800 Warning 900 Error 50 Error 100 Error 200 Error 300 Error 400 Error 500 Error 600 Error 700 Error 800 Error 900 Surface 50 Surface 100 Surface 200 Surface 300 Surface 400 Surface 500 Surface 600 Surface 700 Surface 800 Surface 900
#84cc16 and #000000 has great contrast!
Warning
Text & Fill Color
Black White Primary 50 Primary 100 Primary 200 Primary 300 Primary 400 Primary 500 Primary 600 Primary 700 Primary 800 Primary 900 Secondary 50 Secondary 100 Secondary 200 Secondary 300 Secondary 400 Secondary 500 Secondary 600 Secondary 700 Secondary 800 Secondary 900 Tertiary 50 Tertiary 100 Tertiary 200 Tertiary 300 Tertiary 400 Tertiary 500 Tertiary 600 Tertiary 700 Tertiary 800 Tertiary 900 Success 50 Success 100 Success 200 Success 300 Success 400 Success 500 Success 600 Success 700 Success 800 Success 900 Warning 50 Warning 100 Warning 200 Warning 300 Warning 400 Warning 500 Warning 600 Warning 700 Warning 800 Warning 900 Error 50 Error 100 Error 200 Error 300 Error 400 Error 500 Error 600 Error 700 Error 800 Error 900 Surface 50 Surface 100 Surface 200 Surface 300 Surface 400 Surface 500 Surface 600 Surface 700 Surface 800 Surface 900
#EAB308 and #000000 has great contrast!
Error
Text & Fill Color
Black White Primary 50 Primary 100 Primary 200 Primary 300 Primary 400 Primary 500 Primary 600 Primary 700 Primary 800 Primary 900 Secondary 50 Secondary 100 Secondary 200 Secondary 300 Secondary 400 Secondary 500 Secondary 600 Secondary 700 Secondary 800 Secondary 900 Tertiary 50 Tertiary 100 Tertiary 200 Tertiary 300 Tertiary 400 Tertiary 500 Tertiary 600 Tertiary 700 Tertiary 800 Tertiary 900 Success 50 Success 100 Success 200 Success 300 Success 400 Success 500 Success 600 Success 700 Success 800 Success 900 Warning 50 Warning 100 Warning 200 Warning 300 Warning 400 Warning 500 Warning 600 Warning 700 Warning 800 Warning 900 Error 50 Error 100 Error 200 Error 300 Error 400 Error 500 Error 600 Error 700 Error 800 Error 900 Surface 50 Surface 100 Surface 200 Surface 300 Surface 400 Surface 500 Surface 600 Surface 700 Surface 800 Surface 900
#D41976 and #ffffff is satisfactory for larger text
Surface
Text & Fill Color
Black White Primary 50 Primary 100 Primary 200 Primary 300 Primary 400 Primary 500 Primary 600 Primary 700 Primary 800 Primary 900 Secondary 50 Secondary 100 Secondary 200 Secondary 300 Secondary 400 Secondary 500 Secondary 600 Secondary 700 Secondary 800 Secondary 900 Tertiary 50 Tertiary 100 Tertiary 200 Tertiary 300 Tertiary 400 Tertiary 500 Tertiary 600 Tertiary 700 Tertiary 800 Tertiary 900 Success 50 Success 100 Success 200 Success 300 Success 400 Success 500 Success 600 Success 700 Success 800 Success 900 Warning 50 Warning 100 Warning 200 Warning 300 Warning 400 Warning 500 Warning 600 Warning 700 Warning 800 Warning 900 Error 50 Error 100 Error 200 Error 300 Error 400 Error 500 Error 600 Error 700 Error 800 Error 900 Surface 50 Surface 100 Surface 200 Surface 300 Surface 400 Surface 500 Surface 600 Surface 700 Surface 800 Surface 900
#495a8f and #ffffff is satisfactory for larger text
Fonts
Base
sans serif mono system Headings
sans serif mono system Text Color
Light Mode
Black White Primary 50 Primary 100 Primary 200 Primary 300 Primary 400 Primary 500 Primary 600 Primary 700 Primary 800 Primary 900 Secondary 50 Secondary 100 Secondary 200 Secondary 300 Secondary 400 Secondary 500 Secondary 600 Secondary 700 Secondary 800 Secondary 900 Tertiary 50 Tertiary 100 Tertiary 200 Tertiary 300 Tertiary 400 Tertiary 500 Tertiary 600 Tertiary 700 Tertiary 800 Tertiary 900 Success 50 Success 100 Success 200 Success 300 Success 400 Success 500 Success 600 Success 700 Success 800 Success 900 Warning 50 Warning 100 Warning 200 Warning 300 Warning 400 Warning 500 Warning 600 Warning 700 Warning 800 Warning 900 Error 50 Error 100 Error 200 Error 300 Error 400 Error 500 Error 600 Error 700 Error 800 Error 900 Surface 50 Surface 100 Surface 200 Surface 300 Surface 400 Surface 500 Surface 600 Surface 700 Surface 800 Surface 900 Dark Mode
Black White Primary 50 Primary 100 Primary 200 Primary 300 Primary 400 Primary 500 Primary 600 Primary 700 Primary 800 Primary 900 Secondary 50 Secondary 100 Secondary 200 Secondary 300 Secondary 400 Secondary 500 Secondary 600 Secondary 700 Secondary 800 Secondary 900 Tertiary 50 Tertiary 100 Tertiary 200 Tertiary 300 Tertiary 400 Tertiary 500 Tertiary 600 Tertiary 700 Tertiary 800 Tertiary 900 Success 50 Success 100 Success 200 Success 300 Success 400 Success 500 Success 600 Success 700 Success 800 Success 900 Warning 50 Warning 100 Warning 200 Warning 300 Warning 400 Warning 500 Warning 600 Warning 700 Warning 800 Warning 900 Error 50 Error 100 Error 200 Error 300 Error 400 Error 500 Error 600 Error 700 Error 800 Error 900 Surface 50 Surface 100 Surface 200 Surface 300 Surface 400 Surface 500 Surface 600 Surface 700 Surface 800 Surface 900 Border Radius
Base
0px 2px 4px 6px 8px 12px 16px 24px 9999px Container
0px 2px 4px 6px 8px 12px 16px 24px Border Size
Base
0px 1px 2px 4px 6px 8px
Preview
primary
secondary
tertiary
success
warning
error
surface
primary
secondary
tertiary
glass
success
warning
error
How to Implement
Generate your theme above, copy the source code, then paste this into a new file in the root of your project with a distinct name, such as: my-custom-theme.[ts|js]. If you opt for the Javascript format, make sure to strip out any Typescript type information.
Open tailwind.config.[ts|js|cjs] found in the root of your project, and import your custom theme.
import { myCustomTheme } from './my-custom-theme'
Within this file, register your custom theme via the Skeleton Tailwind plugin settings.
plugins : [
skeleton ({
themes : {
custom : [
myCustomTheme
]
}
})
]
Open /src/app.html and define your theme using the data-theme
attribute. The value should match the name field set within your theme's source code.
<body data-theme ="my-custom-theme" >
Note that custom themes can be registered along with Skeleton's preset themes , allowing you to switch between these as desired.
Advanced Color Curation
Looking for deeper customization? We recommend using Palette Generator . This includes support for hue, saturation, and lightness adjustments. Pair this with the
Hex-To-RGB extension
to convert each Hex color value to RGB in bulk with VS Code.