Every colors available on the site.

Defined in tokens/src/color.tokens.json.

Colorways are color relationships between background colors, text, buttons and other elements. Using a block with a different colorway can help break up a longer page or change the tone. The styles within a colorway adapt automatically to the background color by redefining the color values based on the colorway class.

Development notes: Defined in css/_elements/colorways.css

Use headings to improve scannability and provide context for users to better understand the page. Headings also help structure page content for screen readers and search engines. Headings should be logically structured on a page using proper hierarchy, headings are ranked 'h1' through 'h6.' A page starts with the H1 heading, which describes a page's main topic— the title of the page. Subsections can be organized with 'h2' level headings. Those subsections can themselves be divided with 'h3' level headings, and so on.

Development notes: Defined in tokens/src/typography.tokens.json.

Spacing values define the space between elements on the page. This can include space between buttons, between columns of text, or around an image. Setting a scale of sizes helps the page to feel cohesive and considered.

Development notes: Defined in tokens/src/spacer.tokens.json, and tokens/tailwind-site-spacing.json. .ts-my-block, .ts-my-block-sm, and .ts-py-block classes are available for consistent block-level spacing. All margin, padding and height classes use generated from these base values using Tailwind syntax. They are also available as CSS variables in this format "var(--spacer-[value])".

Grids used throughout the design system.

Developer notes: Defined in tokens/tailwind-grids.json. Use "xl:container p-site" for site container and padding classes. Grids can be applied as classes directly or with the apply syntax "@apply ts-grid-col-2"

Button styles are dynamic. They can be modified by adjusting the size, icon, and icon placement properties. Icons shown are examples. Any icon can be used. Button colors will adjust automatically based on the background color.

Development notes: Defined in tokens/src/buttons.tokens.json. Button colorways are defined in css/_elements/colorways.css. To add an svg icon, place the svg code in assets/images/svgs, and pass the svg file name as the 'svg_name' property when you include the button component in your template. You can also use Tailwind @apply syntax to apply button classes directly (In CSS: @apply btn-solid;). Note that with @apply syntax, you can't add an icon.

Inputs are used to collect information from users. They can be used to collect text, numbers, dates, or files. Inputs can be used in forms, search bars, or to filter content.

Development notes: Defined in tokens/src/inputs.tokens.json.