Waffle Design System

Theme

The theme object is what defines our design system. It contains things like the color palette, units for space and type sizes, font families, responsive breakpoints, box shadows, and more. Blockstack UI is based on the Styled System theme specification.

Colors

All of the colors come from a theme.colors object. By default these colors can be referenced by the color, borderColor, and backgroundColor, fill, stroke, style props. For example, passing blue.100 to a bg prop would result in the color: #e3e5ff. Each color typically contains a range from 50-900. You can also pass blue with no range.

blue

1000
#3700ff
900
#5548ff
300
#aab3ff
200
#c5ccff
100
#e3e5ff
50
#f2f2ff

ink

1000
#0f1117
900
#27292e
600
#6e727d
400
#a7a7ad
250
#c8c8cc
100
#e7e7e8
50
#f4f4f5

UI feedback

info
#00d4ff
warning
#f7aa00
success
#00a73e
error
#de0014

darken

150
rgba(15, 17, 23, 0.15)
100
rgba(15, 17, 23, 0.1)
50
rgba(15, 17, 23, 0.05)

Typography

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

  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings

Breakpoints

To configure the default breakpoints used in responsive array values, add a breakpoints array to your theme. These values will be used to generate mobile-first (i.e. min-width) media queries, which can then be used to apply responsive styles.

For example, you can write <Box fontSize={["14px", "16px"]}/> to make the fontSize responsive.

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.

By default, Blockstack UI 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 as ml={10}.

NameSpacePixels
000px
px1px1px
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
82rem32px
102.5rem40px
123rem48px
164rem64px
205rem80px
246rem96px
328rem128px
4010rem160px
4812rem192px
5614rem224px
6416rem256px

Sizes

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

For 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

Configuration reference

Except for breakpoints, colors, and spacing, all of the keys in the theme object map to one of Blockstack UI's core theme. All of these keys can be replaced or extended.

See the full reference table of properties.

Waffle Design SystemBlockstack PBC