Styles

Table of Contents

Text & Copy

Heading 1 – Page Title

This is a longer paragraph intended to simulate real website copy. It includes bold text, italic text, and a standard inline link. The goal here is to test how your base typography handles line length, readability, and spacing across multiple lines of text within a typical content container.

This second paragraph exists purely to evaluate vertical rhythm. In real builds, you’ll almost always have consecutive paragraphs, so this helps you confirm spacing consistency between paragraphs, headings, and other elements.

Heading 2 – Section Title

This section introduces slightly denser content. You may want to evaluate max-width behavior here, especially if you’re using something like ACSS containers or custom constraints. It also includes inline code, highlighted text, and an HTML abbreviation to verify inline element styling.

Heading 3 – Subsection

Short paragraph under an H3 to test tighter spacing scenarios. Not every section has long-form content, so this helps identify awkward gaps or inconsistencies.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in.

Heading 5
Heading 6

Should heading 6 be smaller than base font? Dunno, but how about we add a horizontal line < hr / > below here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in.

The end. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in.

Unordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. 

  • A simple first bullet
  • This is a longer bullet point designed to wrap onto multiple lines so you can evaluate indentation, line height, and spacing between list items in a more realistic content scenario.
  • Another list item with additional length to test wrapping behavior. This one includes a nested list below:
    • Nested bullet that also spans multiple lines to verify proper indentation and spacing relative to the parent list.
    • Second nested item with enough text to wrap and expose any alignment or spacing issues in deeper list structures.
  • Final top-level bullet item with moderate length to round out the test set.

Ordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis.

  1. First numbered item with extended text to test how ordered lists handle multi-line content and number alignment.
  2. Second numbered item with nested structure:
    1. Nested number item that wraps to a second line to verify spacing and numbering alignment.
    2. Another nested item with enough content to behave more like real-world instructional or procedural text.
  3. Third numbered item to complete the sequence and confirm consistent spacing.

Blockquote

This is a longer blockquote used to test how quoted content appears in your design system. It should have distinct styling, proper spacing, and maintain readability even when the text spans multiple lines.

Details / Summary

Click to expand this section

This is hidden content inside a details element. It allows you to test native accordion behavior and how spacing is handled when content is toggled open or closed.

Superscript and Subscript

This sentence includes superscript like 102 and subscript like H2O to verify alignment and sizing relative to surrounding text.

Preformatted Text

function example() {
  console.log("Testing preformatted text");
}

A Basic Text Element - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus a elementum justo. Duis a leo a nisi tincidunt mattis. Pellentesque enim felis, hendrerit id ultrices non, ultrices a ex. Praesent consequat ut odio vel pretium. Aliquam non sagittis leo. Proin sed nisi non odio efficitur venenatis. Nulla sed finibus lectus.

A Basic Text Element That is Hyperlink - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in.

Container inside Container

This is a rich text element that is inside the container above.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

This is another rich text element adjacent to the element above. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

Rich Text inside of a Block, in the container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus a elementum justo.

Rich Text inside of a Block, in the container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus a elementum justo.

Rich Text inside of a Div, in the container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus a elementum justo.

Rich Text inside of a Div, in the container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus a elementum justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus a elementum justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis odio et eros fringilla, et molestie nunc lobortis. Aenean luctus risus justo, id dictum magna maximus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus a elementum justo.

Colors

Using Automatic CSS Color Palettes

How to use them in a typical project

Think in roles, not hex codes. Decide “this is a primary action” or “this needs a neutral border,” then use the matching class or variable (e.g. .btn--primary, var(--base-dark)). If you rebrand later, you change the color once in the dashboard and the whole site updates.

Reserve Primary for what matters. Buttons that submit, main links, and key CTAs should use Primary (or a Primary shade). Use Secondary or Neutral for less important actions so Primary stays strong.

Use Base for default UI. Body text and default section backgrounds usually come from Base (or Neutral). That keeps the canvas consistent and leaves Primary/Secondary for emphasis.

Use Neutral for structure. Borders, dividers, and subtle grey backgrounds are good fits for Neutral. Avoid using a brand color for “just a line” or “just a grey box.”

Keep Accent rare. Use Accent for a few high-impact spots (e.g. “New” badges, one hero accent). If it’s everywhere, it stops feeling special.

  • Primary Ultra Dark

  • Primary Dark

  • Primary

  • Primary Light

  • Primary Ultra Light

  • Secondary Ultra Dark

  • Secondary Dark

  • Secondary

  • Secondary Light

  • Secondary Ultra Light

  • tertiary Ultra Dark

  • tertiary Dark

  • tertiary

  • tertiary Light

  • tertiary Ultra Light

  • Neutral Ultra Dark

  • Neutral Dark

  • Neutral

  • Neutral Light

  • Neutral Ultra Light

  • Base Ultra Dark

  • Base Dark

  • Base

  • Base Light

  • Base Ultra Light

    • Buttons

    Using Default Bricks Settings + ACSS Variables

    Button Sizes

    Primary XSmallPrimary SmallPrimary MediumPrimary LargePrimary Extra LargePrimary Huge

    Tables

    Tables Inside Rich Text

    Unstyled Table

    This is a plain table with zero styling, attributes, etc.

    Name Role Department Status
    Alex Morgan Designer Marketing Active
    Jamie Lee Developer Technology Active
    Sam Rivera Coordinator Operations Pending
    Taylor Kim Manager Sales Active
    Jordan Smith Analyst Finance Inactive
    Casey Brown Specialist Support Active

    Primary Table Style

    In code view, wrap the table with

    < div class=”table table–primary” >..< /div > (Remove spaces adjacent to <‘s and >’s)

    Name Role Department Status
    Alex Morgan Designer Marketing Active
    Jamie Lee Developer Technology Active
    Sam Rivera Coordinator Operations Pending
    Taylor Kim Manager Sales Active
    Jordan Smith Analyst Finance Inactive
    Casey Brown Specialist Support Active

    Minimal Table Style

    In code view, wrap the table with

    < div class=”table table–minimal” >..< /div > (Remove spaces adjacent to <‘s and >’s)

    Name Role Department Status
    Alex Morgan Designer Marketing Active
    Jamie Lee Developer Technology Active
    Sam Rivera Coordinator Operations Pending
    Taylor Kim Manager Sales Active
    Jordan Smith Analyst Finance Inactive
    Casey Brown Specialist Support Active

    End

    Images

    With a caption