Colors
-
Background
-
--db-primary
-
--db-secondary
-
--db-tertiary
-
--db-quaternary
-
--lb-primary
-
--lb-secondary
-
--lb-tertiary
-
--lb-quaternary
-
-
Foreground
-
--df-primary
-
--df-secondary
-
--lf-primary
-
--lf-secondary
-
-
Accent
-
--da-primary
-
--da-primary-muted
-
--da-secondary
-
--da-tertiary
-
--da-quaternary
-
--la-primary
-
--la-primary-muted
-
--la-seconlary
-
--la-tertiary
-
--la-quaternary
-
-
Status color
-
--success-50
-
--success-500
-
--success-950
-
--warning-50
-
--warning-500
-
--warning-950
-
--error-50
-
--error-500
-
--error-950
-
--info-50
-
--info-500
-
--info-950
-
-
App color
-
--app-white
-
--app-black
-
--app-pink
-
--app-blue
-
--app-gold
-
--app-indigo
-
--app-red
-
--app-yellow
-
--app-purple
-
--app-lemon
-
--app-orange
-
Fonts
Display
Title L
Title M
Title S
Headline L
Headline M
Headline S
Body large
Body medium
Body small
Caption
Code font
<p class="display">Display</p>
<p class="title-l">Title L</p>
<p class="title-m">Title M</p>
<p class="title-s">Title S</p>
<p class="headline-l">Headline L</p>
<p class="headline-m">Headline M</p>
<p class="headline-s">Headline S</p>
<p class="body-l">Body large</p>
<p class="body-m">Body medium</p>
<p class="body-s">Body small</p>
<p class="caption">Caption</p>
<p class="code-font">Code font</p>
Spacing
-
--spacing-4
-
--spacing-8
-
--spacing-12
-
--spacing-16
-
--spacing-20
-
--spacing-24
-
--spacing-28
-
--spacing-32
-
--spacing-36
-
--spacing-40
Icons
<span class="icon icon-arrow-bottom"></span>
<span class="icon icon-arrow-top"></span>
<span class="icon icon-arrow-right"></span>
<span class="icon icon-arrow-left"></span>
<span class="icon icon-close"></span>
<span class="icon icon-close-l"></span>
<span class="icon icon-delete"></span>
<span class="icon icon-add"></span>
<span class="icon icon-remove"></span>
<span class="icon icon-search"></span>
<span class="icon icon-copy"></span>
<span class="icon icon-more"></span>
<span class="icon icon-loading"></span>
<span class="icon icon-help"></span>
<span class="icon icon-info"></span>
<span class="icon icon-show"></span>
<span class="icon icon-hide"></span>
<span class="icon icon-lock"></span>
<span class="icon icon-unlock"></span>
<span class="icon icon-download"></span>
Select
<div class="form-group">
<label class="select-label-hidden" for="select-1">Which is
your favorite animal?</label>
<select class="select" id="select-1">
<option value="1">Quokka</option>
<option value="2">Rabbit</option>
<option value="3">Goat</option>
<option value="4">Capybara</option>
</select>
</div>
<div class="form-group">
<label class="select-label-hidden" for="select-2">Which is
your favorite animal?</label>
<select class="select" id="select-2" disabled>
<option value="1">Quokka</option>
<option value="2">Rabbit</option>
<option value="3">Goat</option>
<option value="4">Capybara</option>
</select>
</div>
<div class="form-group">
<label class="select-label-hidden" for="select-1">Which is
your favorite animal?</label>
<select class="select" id="select-1">
<option value="1">Quokka</option>
<option value="2">Rabbit</option>
<option value="3">Goat</option>
<option value="4">Capybara</option>
</select>
</div>
<div class="form-group">
<label class="select-label-hidden" for="select-2">Which is
your favorite animal?</label>
<select class="select" id="select-2" disabled>
<option value="1">Quokka</option>
<option value="2">Rabbit</option>
<option value="3">Goat</option>
<option value="4">Capybara</option>
</select>
</div>
Input
<div class="theme-group" data-theme="dark">
<div class="form-group">
<label class="input-label-hidden" for="input-1">This
is the label</label>
<input class="input" type="text" placeholder="Input dark
theme" id="input-1"/>
</div>
<div class="form-group">
<label class="input-label-hidden" for="input-2">This
is the label</label>
<input class="input success" type="text"
placeholder="Input dark theme success" id="input-2"/>
</div>
<div class="form-group">
<label class="input-label-hidden" for="input-3">This
is the label</label>
<input class="input error" type="text" placeholder="Input
dark theme error" id="input-3"/>
</div>
</div>
<div class="theme-group" data-theme="light">
<div class="form-group">
<label class="input-label-hidden" for="input-4">This
is the label</label>
<input class="input" type="text" placeholder="Input light
theme" id="input-4"/>
</div>
<div class="form-group">
<label class="input-label-hidden" for="input-5">This
is the label</label>
<input class="input success" type="text"
placeholder="Input light theme success" id="input-5"/>
</div>
<div class="form-group">
<label class="input-label-hidden" for="input-6">This
is the label</label>
<input class="input error" type="text" placeholder="Input
light theme error" id="input-6"/>
</div>
</div>
Buttons
Primary button
<div data-theme="dark">
<button type="button" data-appearance="primary">Primary
Dark</button>
<button type="button" data-appearance="primary">Primary Dark
destructive</button>
</div>
<div data-theme="light">
<button type="button" data-appearance="primary">Primary
Light</button>
<button type="button" data-appearance="primary"
data-variant="destructive">Primary Light destructive</button>
</div>
Secondary button
<div data-theme="dark">
<button type="button" data-appearance="secondary">Secondary
Dark</button>
</div>
<div data-theme="light">
<button type="button" data-appearance="secondary">Secondary
Light</button>
</div>
Checkox
<div data-theme="dark">
<div class="checkbox-container">
<input class="checkbox-input" type="checkbox"
id="checkbox1" value="checkbox_one" />
<label for="checkbox1" class="checkbox-hidden">Dark
checkbox</label>
</div>
<div class="checkbox-container">
<input class="checkbox-input" type="checkbox"
id="checkbox2" value="checkbox_second" />
<label for="checkbox2" class="body-small">Dark
checkbox with label</label>
</div> </div>
<div data-theme="light">
<div class="checkbox-container">
<input class="checkbox-input" type="checkbox"
id="checkbox3" value="third" />
<label for="checkbox3" class="checkbox-hidden">Light
checkbox</label>
</div>
<div class="checkbox-container">
<input class="checkbox-input" type="checkbox"
id="checkbox4" value="checkbox_fourth" />
<label for="checkbox4" class="body-small">Light
checkbox with label</label>
</div> </div>
Radio button
<div data-theme="dark">
<div class="radio-container">
<input type="radio" class="radio-input" id="quokka"
name="animal" value="quokka">
<label class="radio-label"
for="quokka">quokka</label>
</div>
<div class="radio-container">
<input type="radio" class="radio-input" id="capybara"
name="animal" value="capybara">
<label class="radio-label"
for="capybara">capybara</label>
</div>
<div class="radio-container">
<input type="radio" class="radio-input" id="goat"
name="animal" value="goat">
<label class="radio-label"
for="goat">goat</label>
</div>
</div>
<div data-theme="light">
<div class="radio-container">
<input type="radio" class="radio-input" id="rabbit"
name="small-animals" value="rabbit">
<label class="radio-label"
for="rabbit">rabbit</label>
</div>
<div class="radio-container">
<input type="radio" class="radio-input" id="mouse"
name="small-animals" value="mouse">
<label class="radio-label"
for="mouse">mouse</label>
</div>
<div class="radio-container">
<input type="radio" class="radio-input" id="chinchilla"
name="small-animals" value="chinchilla">
<label class="radio-label"
for="chinchilla">chinchilla</label>
</div>
</div>