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}

Link

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 cumqueSub maxime laboreSup 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>
  1. Aliquam lobortis lacus eu libero ornare facilisis.
  2. Nam et magna at libero scelerisque egestas.
    • Proin ultricies turpis et volutpat vehicula.
  3. Suspendisse id nisl ut leo finibus vehicula quis eu ex.
  4. 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

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>
#YearMonthDayHourMinute
12023January24th1242
21997October3rd0912
22096March31st1855
<table class="small-header no-zebra">
#YearMonthDayHourMinute
12023January24th1242
21997October3rd0912
22096March31st1855
<table class="stack> / table { @incldue stack-table(); }
#YearMonthDayHourMinute
12023January24th1242
21997October3rd0912
22096March31st1855