Skip to main content

Default Theme

Zephyr provides a set of default theme constraints, so you can start styling with zero configuration. You can easily customize/extend the theme (see Extending the Theme), but don't have to to get started with Zephyr.

This document outlines the default theme provided out of the box. It is heavily inspired by TailwindCSS's default theme, with some modifications appropriate for React Native. The code that defines this default theme can be found here.

Default Spacing Constraints

The spacing constraints apply to anything space/size related, such as the margin classes, the padding classes, the sizing classes, and the positioning classes. Here's the scale for the default sizing constraints.

NameSize
0 (ex: w:0)0
pt (ex: w:pt)1
0.5 (ex: w:0.5)2
1 (ex: w:1)4
1.5 (ex: w:1.5)6
2 (ex: w:2)8
2.5 (ex: w:2.5)10
3 (ex: w:3)12
3.5 (ex: w:3.5)14
4 (ex: w:4)16
5 (ex: w:5)20
6 (ex: w:6)24
7 (ex: w:7)28
8 (ex: w:8)32
9 (ex: w:9)36
10 (ex: w:10)40
11 (ex: w:11)44
12 (ex: w:12)48
14 (ex: w:14)56
16 (ex: w:16)64
20 (ex: w:20)80
24 (ex: w:24)96
28 (ex: w:28)112
32 (ex: w:32)128
36 (ex: w:36)144
40 (ex: w:40)160
48 (ex: w:48)192
56 (ex: w:56)224
64 (ex: w:64)256
72 (ex: w:72)288
80 (ex: w:80)320
96 (ex: w:96)384
1/4 (ex: w:1/4)25%
1/2 (ex: w:1/2)50%
3/4 (ex: w:3/4)75%
1/3 (ex: w:1/3)33.33333%
2/3 (ex: w:2/3)66.66666%
1/5 (ex: w:1/5)20%
2/5 (ex: w:2/5)40%
3/5 (ex: w:3/5)60%
4/5 (ex: w:4/5)80%
full (ex: w:full)100%

Default Colors

The default colors consist of white: #fff, black: #000, and the following colors.

Default theme colors

Check out the Extending the Color Palette for information on how to extend this color palette with other pre-defined colors borrowed from TailwindCSS's palette.

Default Opacities

The opacities constraint applies to opacity and background opacity (which is opacity applied only to the background, not all elements). Here's the default opacities constraint scale.

NameValue
00
50.05
100.1
200.2
250.25
300.3
400.4
500.5
600.6
700.7
750.75
800.8
900.9
950.95

Here's a visual representation of that scale.

A screenshot of the default opacities shown in a simulator

Default Border Sizes

The borderSizes theme constraint applies to the border width classes. The scale for this is:

NameSize
00
hairlineStyleSheet.hairlineWidth
11
22
44
88

Here's a visual representation of that scale.

A screenshot of the default border sizes scale shown in a simulator

Default Border Radii

The borderRadii constraint applies to the border radius classes. The scale is based off of the base font size for the default constraints, which is baseFontSize = 14. The scale is as follows:

NameSize
none0
sm0.125 * baseFontSize
base0.25 * baseFontSize
md0.375 * baseFontSize
lg0.5 * baseFontSize
xl0.75 * baseFontSize
2xlbaseFontSize
3xl1.5 * baseFontSize
full999

Here's a visual representation of that scale.

A screenshot of the default border radii scale shown in a simulator

Default Font Sizes

The fontSizes constraint applies to the font size classes. The scale is based off of the base font size for the default constraints, which is baseFontSize = 14. The scale is as follows:

NameSize
xs[0.75 * baseFontSize, baseFontSize]
sm[0.875 * baseFontSize, 1.25 * baseFontSize]
base[baseFontSize, 1.5 * baseFontSize]
lg[1.125 * baseFontSize, 1.75 * baseFontSize]
xl[1.25 * baseFontSize, 1.75 * baseFontSize]
2xl[1.5 * baseFontSize, 2 * baseFontSize]
3xl[1.875 * baseFontSize, 2.25 * baseFontSize]
4xl[2.25 * baseFontSize, 2.5 * baseFontSize]
5xl[3 * baseFontSize, 3 * baseFontSize]
6xl[3.75 * baseFontSize, 3.75 * baseFontSize]
7xl[4.5 * baseFontSize, 4.5 * baseFontSize]
8xl[6 * baseFontSize, 6 * baseFontSize]
9xl[8 * baseFontSize, 8 * baseFontSize]

Here's a visual representation of that scale.

A screenshot of the default font size scale shown in a simulator

Default Font Weights

The fontWeights constraint applies to the font weight classes. The scale for this is:

NameValue
thin100
extralight200
light300
normal400
medium500
semibold600
bold700
extrabold800
black900

Here's a visual representation of that scale.

A screenshot of the default font weights scale shown in a simulator

Default Letter Spacing

The letterSpacing constraint applies to the tracking: classes. The scale for this is:

NameValue
tighter-0.05 * baseFontSize
tight-0.025 * baseFontSize
normal0
wide0.025 * baseFontSize
wider0.05 * baseFontSize
widest0.1 * baseFontSize

Here's a visual representation of that scale.

A screenshot of the default letter spacing scale shown in a simulator

Default Line Heights

The lineHeights constraint applies to the leading: classes. The scale for this is as follows, where currentFontSize represents the font size of the text element that the class is being applied to.

NameValue
none1 * currentFontSize
tight1.25 * currentFontSize
snug1.375 * currentFontSize
normal1.5 * currentFontSize
relaxed1.625 * currentFontSize
loose2 * currentFontSize

Here's a visual representation of that scale.

A screenshot of the default lineHeights scale shown in a simulator

Default Shadows

The shadows constraint applies to the shadow classes. The scale for this is:

NameValue
sm{ android: 1, ios: [0, 1, 1, 0.18] }
base{ android: 2, ios: [0, 1, 1.41, 0.2] }
md{ android: 5, ios: [0, 2, 3.84, 0.25] }
lg{ android: 8, ios: [0, 4, 4.65, 0.3] }
xl{ android: 12, ios: [0, 6, 7.49, 0.37] }
2xl{ android: 16, ios: [0, 8, 10.32, 0.44] }

Here's a visual representation of that scale.

A screenshot of the default shadows scale shown in a simulator

Default Aspect Ratios

The aspectRatios constraint applies to the aspect ratio classes. The scale for this is as follows, where [16, 9] represents a 16-9 aspect ratio.

NameValue
1[1, 1]
16-9[16, 9]
9-16[9, 16]
3-4[3, 4]
4-3[4, 3]
1-2[1, 2]
2-1[2, 1]

Here's a visual representation of that scale.

A screenshot of the default shadows scale shown in a simulator