Saas UI Theme

The default Saas UI theme tokens

The Saas UI theme is loosely based on the excellent Chakra UI theme. It has a neutral style that looks great out of the box. The theme comes with a bunch of additions that make it easy to adjust it to your brand.

Colors

Add a theme.colors object to provide colors for your project. By default these colors can be referenced by the color, borderColor, backgroundColor, fill, stroke, styles.

More information about creating your custom palette.

// default color tokens
const palette = {
transparent: 'transparent',
black: '#000',
white: '#fff',
gray: '#1f2937',
yellow: '#fbbf24',
red: '#d00b00',
green: '#10b981',
indigo: '#6d5ace',
blue: '#1e3a8a',
}
export default {
primary: palette.purple,
secondary: palette.teal,
...palette,
}

Black & White

Black
#0e1012
White
#FFFFFF

Primary & Secondary

primary 50
#f9f6fd
primary 100
#e5daf8
primary 200
#d3bef4
primary 300
#b795ec
primary 400
#a379e7
primary 500
#8952e0
primary 600
#7434db
primary 700
#6023c0
primary 800
#4f1d9e
primary 900
#3b1676
secondary 50
#f4fbfd
secondary 100
#d0eef7
secondary 200
#bae7f3
secondary 300
#a2deee
secondary 400
#53c2e1
secondary 500
#2ab4d9
secondary 600
#24a2c4
secondary 700
#1e86a2
secondary 800
#196e85
secondary 900
#135567

Gray

gray 50
#f9fafa
gray 100
#f1f1f2
gray 200
#e7e7e8
gray 300
#d3d4d5
gray 400
#abadaf
gray 500
#7d7f83
gray 600
#52555a
gray 700
#33373d
gray 800
#1d2025
gray 900
#171a1d

Red

red 50
#fdf6f5
red 100
#f8d9d8
red 200
#f1b8b4
red 300
#e98d87
red 400
#e4726c
red 500
#dc4a41
red 600
#d2140a
red 700
#ac0900
red 800
#930800
red 900
#6d0600

Orange

orange 50
#fdfaf6
orange 100
#f9ebdb
orange 200
#f1d4b1
orange 300
#e6b273
orange 400
#dc9239
orange 500
#c37b24
orange 600
#a5681e
orange 700
#835318
orange 800
#674113
orange 900
#553610

Yellow

yellow 50
#fffefb
yellow 100
#fff8e9
yellow 200
#feecbd
yellow 300
#fddc87
yellow 400
#fbc434
yellow 500
#d2a01e
yellow 600
#a88018
yellow 700
#836413
yellow 800
#624b0e
yellow 900
#513e0c

Green

green 50
#f7fdfb
green 100
#d2f2e7
green 200
#9fe3cd
green 300
#64d2ad
green 400
#1dbd88
green 500
#0ea371
green 600
#0c875e
green 700
#096949
green 800
#07563c
green 900
#064731

Teal

teal 50
#f1fcfc
teal 100
#c0f1f4
teal 200
#84e4e9
teal 300
#2dd1da
teal 400
#22b2ba
teal 500
#1d979e
teal 600
#187b80
teal 700
#125f64
teal 800
#0f5053
teal 900
#0d4244

Blue

blue 50
#f1f6fd
blue 100
#cde0f6
blue 200
#a8c8f0
blue 300
#7fafe8
blue 400
#5896e1
blue 500
#347fdb
blue 600
#236abf
blue 700
#1b5192
blue 800
#164278
blue 900
#123662

Cyan

cyan 50
#f4fbfd
cyan 100
#d0eef7
cyan 200
#bae7f3
cyan 300
#a2deee
cyan 400
#53c2e1
cyan 500
#2ab4d9
cyan 600
#24a2c4
cyan 700
#1e86a2
cyan 800
#196e85
cyan 900
#135567

Purple

purple 50
#f9f6fd
purple 100
#e5daf8
purple 200
#d3bef4
purple 300
#b795ec
purple 400
#a379e7
purple 500
#8952e0
purple 600
#7434db
purple 700
#6023c0
purple 800
#4f1d9e
purple 900
#3b1676

Pink

pink 50
#fdf5f9
pink 100
#f8d9e7
pink 200
#f3b9d3
pink 300
#eb8db8
pink 400
#e56ba2
pink 500
#dc3882
pink 600
#c4246c
pink 700
#a01d58
pink 800
#7d1745
pink 900
#5d1133

Typography

To manage Typography options, the theme object supports the following keys:

  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings
// example theme object
export default {
colors: {...},
fonts: {
body: "Inter, sans-serif",
heading: "Inter, sans-serif"
},
fontSizes: {
xs: '0.75rem',
sm: '0.8125rem',
md: '0.875rem',
lg: '1',
xl: '1.125rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '3.75rem',
'7xl': '4.5rem',
'8xl': '6rem',
'9xl': '8rem',
},
fontWeights: {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
lineHeights: {
normal: "normal",
none: 1,
shorter: 1.25,
short: 1.375,
base: 1.5,
tall: 1.625,
taller: "2",
"3": ".75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
},
letterSpacings: {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em",
},
};

Breakpoints

Saas UI comes with an predefined set of breakpoints.

Learn more about Responsive Styles and Customizing Breakpoints.

// theme.js
import { createBreakpoints } from '@chakra-ui/theme-tools'
export default createBreakpoints({
sm: '30em',
md: '48em',
lg: '62em',
xl: '80em',
'2xl': '96em',
})

Spacing

The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom styles.

export default {
space: {
px: '1px',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
},
}

By default, Chakra includes a comprehensive numeric spacing scale inspired by Tailwind CSS. The values are proportional, so 1 spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

Mental model: If you need a spacing of 40px, divide it by 4. That'll give you 10. Then use it in your component.

NameSpacePixels
px1px1px
0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
2.50.625rem10px
30.75rem12px
3.50.875rem14px
41rem16px
51.25rem20px
61.5rem24px
71.75rem28px
82rem32px
92.25rem36px
102.5rem40px
123rem48px
143.5rem56px
164rem64px
205rem80px
246rem96px
287rem112px
328rem128px
369rem144px
4010rem160px
4411rem176px
4812rem192px
5614rem224px
6015rem240px
6416rem256px
7218rem288px
8020rem320px
9624rem384px

Sizes

The sizes key allows you to customize the global sizing of components you build for your project. By default these sizes value can be referenced by the width, height, and maxWidth, minWidth, maxHeight, minHeight styles.

export default {
sizes: {
...theme.space,
max: 'max-content',
min: 'min-content',
full: '100%',
'3xs': '14rem',
'2xs': '16rem',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
'8xl': '90rem',
container: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1440px',
},
},
}

A component like this: <Box w={4} h={3} /> will generate an empty div with width set to 1rem or 16px and height set to 0.75rem or 12px.

Border radius

Chakra provides a set of smooth corner radius values.

export default {
radii: {
none: '0',
sm: '0.125rem',
base: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
},
}

z-index values

We recommend trying to solve stacking issues without z-index. You can read our recommendations and learn more about stacking contexts and z-index here.

Chakra provides a minimal set of z-Indices out of the box to help control the stacking order of components.

export default {
zIndices: {
hide: -1,
auto: 'auto',
base: 0,
docked: 10,
dropdown: 1000,
sticky: 1100,
banner: 1200,
overlay: 1300,
modal: 1400,
popover: 1500,
skipLink: 1600,
toast: 1700,
tooltip: 1800,
},
}

Config

The theme's config is to provide global settings that are used by different parts of the Chakra UI system.

PropertyDescriptionDefault
cssVarPrefix (v1.4)The prefix to use for the generated CSS custom propertieschakra
initialColorModeThe initial color mode your application should start with.
Can be either light or dark mode
light
useSystemColorModeIf true, the chakra system will update color mode
based on your system preferences
false

You can leverage the extendTheme function to override a specific theme config property.

const theme = extendTheme({
config: {
cssVarPrefix: 'ck',
},
})

Was this helpful?