Prebuilt flavors

We have some prebuilt flavors:

Default
Dark

Build your own flavor

Core module

The Core module contains styling rules for common textual elements, headings, quotations and code, as well as rules for universal styling and color palettes. This module is always enabled, as many other modules and components depend on it.

Textual content

Base root font size (px):

Base font size for all text elements, in pixels

Base line height:

Base line height for all text elements (unitless)

Heading font weight:

Font weight for headings (400 is normal, 700 is bold)

Heading ratio:

Ratio for headings

Heading line height:

Line height for headings

Heading font weight:

Font weight for headings (400 is normal, 700 is bold)

Subheading font size (em):

Font size for subheadings, relative to context

Subheading top margin (rem):

Top margin for subheadings, relative to root

Small text font size (em):

Font size for small text, relative to context

Horizontal rule line height:

Line height for headings

Code font size (em):

Font size for code elements, relative to context

Superscript top position (em):

Top position for superscript, relative to context

Subscript bottom position (em):

Bottom position for subscript, relative to context

Code font size (rem):

Font size for the quotation of blockquotes, relative to root

Code font size (rem):

Font size for the citation of blockquotes, relative to root

Color palette

Foreground color:

Foreground color for most textual elements

Background color:

Background color for document body

Border color:

Border color for most elements

Secondary foreground color:

Secondary foreground color for certain textual elements

Secondary background color:

Secondary background color for certain elements

Secondary border color:

Secondary border color for certain elements

Blockquote sidebar color:

Sidebar color for blockquote elements

Preformatted text sidebar color:

Sidebar color for preformatted text elements

Link color:

Text color for hyperlink elements

Visited link color:

Text color for visited hyperlink elements

Universal styles

Universal padding (rem):

Universal padding for most elements, relative to root

Universal margin (rem):

Universal margin for most elements, relative to root

Universal border radius (rem):

Universal border radius for most elements, relative to root

Universal box shadow:

Universal box shadow for most elements

Mobile breakpoint (px):

Breakpoint between mobile screen and desktops, in pixels

Large screen breakpoint (px):

Breakpoint between desktops and large screens, in pixels

Layout module

The Layout module contains rules and functionality for the grid and card systems. This module is not always enabled, but it's highly recommended that you enable it, as many other components depend on its functionality to work properly.

Module enabled? (recommended)

Grid

Grid column count:

Number of horizontal column partitions for the grid system (default 12)

Grid medium screen breakpoint (px):

Breakpoint between small and medium screens, in pixels

Cards

Card normal width (px):

Width of normal cards, in pixels

Card media section height (px):

Height of card media sections, in pixels

Card foreground color:

Foreground color for cards

Card background color:

Background color for cards

Card border color:

Border color for cards

Input control module

The Input control module contains styling rules for forms, input elements and buttons. This module is not always enabled, but it's highly recommended that you enable it, as some other components depend on its functionality to work properly.

Module enabled? (recommended)

Forms & input

Form foreground color:

Foreground color for forms

Form background color:

Background color for forms

Form border color:

Border color for forms

Input foreground color:

Foreground color for input elements

Input background color:

Background color for input elements

Input border color:

Border color for input elements

Input border color (focused):

Border color for focused input elements

Input border color (invalid):

Border color for invalid input elements

Buttons

Button foreground color:

Foreground color for buttons

Button background color:

Background color for buttons

Button border color:

Border color for buttons

Button background color (hover):

Background color for buttons

Button border color (hover):

Border color for buttons

Button group border color:

Border color for buttons

Icons module

The Icons module contains styling rules for icons. This module is not always enabled and it's recommended to enable it only if you're planning to use the icon set provided.

Utility module

The Utility module contains styling rules for utility classes. This module is not always enabled, but it's recommended to enable it as it contains some features that can be useful in most designs.