STYLE GUIDE

Layout

var(--width-1-4)

var(--width-1-4)

var(--width-1-4)

var(--width-1-4)

var(--width-2-4)

var(--width-2-4)

var(--width-3-4)

var(--width-1-4)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-2-6)

var(--width-3-6)

var(--width-2-6)

var(--width-4-6)

var(--width-1-6)

var(--width-5-6)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-2-12)

var(--width-3-12)

var(--width-4-12)

var(--width-2-12)

var(--width-6-12)

var(--width-6-12)

var(--width-5-12)

var(--width-7-12)

var(--width-8-12)

var(--width-4-12)

var(--width-9-12)

var(--width-3-12)

var(--width-10-12)

var(--width-2-12)

var(--width-11-12)

var(--width-1-12)

Spacing

$spacing-size-1

$spacing-size-2

$spacing-size-3

$spacing-size-4

$spacing-size-5

$spacing-size-6

$spacing-size-8

$spacing-size-10

$spacing-size-12

$spacing-size-16

$spacing-size-20

$spacing-size-24

$spacing-size-32

$spacing-size-40

$spacing-size-48

$spacing-size-56

$spacing-size-64

Radii

var(--radius-none)

var(--radius-xxs)

var(--radius-xs)

var(--radius-sm)

var(--radius-md)

var(--radius-lg)

var(--radius-xl)

var(--radius-2xl)

var(--radius-3xl)

var(--radius-4xl)

var(--radius-full)

Text Sizes

var(--text-2xs):

The quick brown fox jumps over the lazy dog

var(--text-xs):

The quick brown fox jumps over the lazy dog

var(--text-sm):

The quick brown fox jumps over the lazy dog

var(--text-base):

The quick brown fox jumps over the lazy dog

var(--text-lg):

The quick brown fox jumps over the lazy dog

var(--text-xl):

The quick brown fox jumps over the lazy dog

var(--text-2xl):

The quick brown fox jumps over the lazy dog

var(--text-3xl):

The quick brown fox jumps over the lazy dog

var(--text-2xs):

The quick brown fox jumps over the lazy dog

var(--text-xs):

The quick brown fox jumps over the lazy dog

var(--text-sm):

The quick brown fox jumps over the lazy dog

var(--text-base):

The quick brown fox jumps over the lazy dog

var(--text-lg):

The quick brown fox jumps over the lazy dog

var(--text-xl):

The quick brown fox jumps over the lazy dog

var(--text-2xl):

The quick brown fox jumps over the lazy dog

var(--text-3xl):

The quick brown fox jumps over the lazy dog

var(--text-2xs):

The quick brown fox jumps over the lazy dog

var(--text-xs):

The quick brown fox jumps over the lazy dog

var(--text-sm):

The quick brown fox jumps over the lazy dog

var(--text-base):

The quick brown fox jumps over the lazy dog

var(--text-lg):

The quick brown fox jumps over the lazy dog

var(--text-xl):

The quick brown fox jumps over the lazy dog

var(--text-2xl):

The quick brown fox jumps over the lazy dog

var(--text-3xl):

The quick brown fox jumps over the lazy dog

Abstract Colors

Base

--color-white

--color-black

Gray

--color-gray-25

--color-gray-50

--color-gray-100

--color-gray-200

--color-gray-300

--color-gray-400

--color-gray-500

--color-gray-600

--color-gray-700

--color-gray-800

--color-gray-900

--color-gray-950

Brand

--color-brand-25

--color-brand-50

--color-brand-100

--color-brand-200

--color-brand-300

--color-brand-400

--color-brand-500

--color-brand-600

--color-brand-700

--color-brand-800

--color-brand-900

--color-brand-950

Warning

--color-warning-25

--color-warning-50

--color-warning-100

--color-warning-200

--color-warning-300

--color-warning-400

--color-warning-500

--color-warning-600

--color-warning-700

--color-warning-800

--color-warning-900

--color-warning-950

Semantic Colors

Background

--color-bg-primary

--color-bg-secondary

--color-bg-brand-solid

--color-bg-disabled_subtle

Foreground

--color-fg-primary

--color-fg-secondary

--color-fg-tertiary

--color-fg-quinary

--color-fg-disabled

--color-fg-placeholder

--color-fg-white

Border

--color-border-primary

--color-border-secondary

--color-border-tertiary

--color-border-disabled_subtle

Button

--color-button-primary-bg

--color-button-primary-bg-hover

--color-button-primary-bg-active

--color-button-primary-shadow-focus

--color-button-primary-fg

--color-button-primary-border

--color-button-secondary-bg

--color-button-secondary-bg-hover

--color-button-secondary-bg-active

--color-button-secondary-shadow-focus

--color-button-secondary-fg

--color-button-secondary-border

--color-button-tertiary-bg

--color-button-tertiary-bg-hover

--color-button-tertiary-bg-active

--color-button-tertiary-shadow-focus

--color-button-tertiary-fg

--color-button-tertiary-border

--color-button-disabled-bg

--color-button-disabled-fg

--color-button-disabled-border

Input

--color-input-border

--color-input-border-hover

--color-input-shadow-focus

--color-input-disabled-bg

--color-input-disabled-fg

Utility Gray

--color-util-gray-50

--color-util-gray-100

--color-util-gray-200

--color-util-gray-300

--color-util-gray-400

--color-util-gray-500

--color-util-gray-600

--color-util-gray-700

Utility Brand

--color-util-brand-50

--color-util-brand-100

--color-util-brand-200

--color-util-brand-300

--color-util-brand-400

--color-util-brand-500

--color-util-brand-600

--color-util-brand-700

Utility Warning

--color-util-warning-50

--color-util-warning-100

--color-util-warning-200

--color-util-warning-300

--color-util-warning-400

--color-util-warning-500

--color-util-warning-600

--color-util-warning-700

Shadows

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Text Elements

Bold

Italic

Underline

~~Deleted~~

Inserted

~~Strikethrough~~

Small

Text _Sub

Text ^Sup

Abbr.

Highlighted

Kbd

${code}

In hic fugit nostrum Bold exercitationem aut nam quaerat occaecati. Cumque quo explicabo. Mollitia fugiat Italic unde mollitia dolor consequatur incidunt. Quod debitis aliquam Underline ipsum quis sed qui aut.

Quis dicta et incidunt ~~Deleted~~ mollitia quo vel omnis. Voluptas quibusdam vitae voluptates Inserted aspernatur mollitia amet. Id rem magnam at ~~Strikethrough~~ harum a quidem velit maiores. Accusamus autem dolorem Small voluptatem fuga cumque_Sub maxime labore^Sup ut. Aliquid iure sed id incidunt necessitatibus.

Eum beatae Kbd doloremque est harum veniam veniam ${code} ducimus. Et dignissimos praesentium placeat link voluptatum eum non. Qui iste dolorum voluptate omnis omnis veniam.

<hr />

<ul>

Aliquam lobortis lacus eu libero ornare facilisis.
Nam et magna at libero scelerisque egestas.
- Proin ultricies turpis et volutpat vehicula.
Suspendisse id nisl ut leo finibus vehicula quis eu ex.
Proin ultricies turpis et volutpat vehicula.

<ol>

Aliquam lobortis lacus eu libero ornare facilisis.
Nam et magna at libero scelerisque egestas.
- Proin ultricies turpis et volutpat vehicula.
Suspendisse id nisl ut leo finibus vehicula quis eu ex.
Proin ultricies turpis et volutpat vehicula.

.list-style-none

Aliquam lobortis lacus eu libero ornare facilisis.
Nam et magna at libero scelerisque egestas.
- Proin ultricies turpis et volutpat vehicula.
Suspendisse id nisl ut leo finibus vehicula quis eu ex.
Proin ultricies turpis et volutpat vehicula.

<pre>

:root {
    --font-size: 1rem;
    --line-height: 1.5;
    --font-weight: 400;
    --font-weight-thin: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --icon-size: 2em;
}

<Snippet framework="javascript">

const addOne = (x) => {
    // Add one here
    const result = x + 1;
    return result;
}

Buttons

Default:

Hover:

Focus:

Disabled:

Aria Disabled:

Inputs

Alerts

I am a note: Earum unde dolores sed similique ut dignissimos voluptatum iure quia. Nam reiciendis doloribus. Blanditiis temporibus ducimus. Vel aspernatur sed quia quis id maxime rerum numquam adipisci. Laudantium vel dolorum non.

I am a warning: Consequatur porro amet sunt omnis optio ipsam ad ut. Nobis porro quo sunt. Natus ut quia et ea autem. Eaque consequatur est harum libero ipsa sit consequatur pariatur sit.

I am an idea: Labore tempore nihil aspernatur et repudiandae et vel. Autem illum deserunt accusantium suscipit laboriosam magni totam corrupti aut. Repellat omnis nihil accusamus eius laboriosam. Consequatur sit velit quas officiis delectus.

Tables

<table>

#	Year	Month	Day	Hour	Minute
1	2023	January	24^th	12	42
2	1997	October	3^rd	09	12
2	2096	March	31^st	18	55

<table class="small-header no-zebra">

#	Year	Month	Day	Hour	Minute
1	2023	January	24^th	12	42
2	1997	October	3^rd	09	12
2	2096	March	31^st	18	55

<table class="stack> / table { @incldue stack-table(); }

#	Year	Month	Day	Hour	Minute
1	2023	January	24^th	12	42
2	1997	October	3^rd	09	12
2	2096	March	31^st	18	55