Style Guide

font sizes

Aa
size_xxxs
Aa
size_xxs
Aa
size_xs
Aa
size_sm
Aa
size_md
Aa
size_lg
Aa
size_xl
Aa
size_xxl
Aa
size_xxxl

font styles

Quick zephyrs blow,
vexing daft Jim
style_01
Quick zephyrs blow,
vexing daft Jim
style_02
Quick zephyrs blow,
vexing daft Jim
style_03
Quick zephyrs blow,
vexing daft Jim
style_04
Quick zephyrs blow,
vexing daft Jim
style_05

spacing

$space_050
$space_01
$space_02
$space_03
$space_04
$space_05
$space_06
$space_07
$space_08
$space_09
$space_10

colors

main colors

$color_primary
$color_primary_light
$color_primary_dark
$color_primary_bg
$color_secondary
$color_secondary_light
$color_secondary_dark
$color_secondary_bg
$color_tertiary
$color_tertiary_light
$color_tertiary_dark
$color_tertiary_bg

neutral colors

$black
$white
$color_scrim

feedback colors

$color_error
$color_warning
$color_success

text colors

$color_text_default
$color_text_light
$color_text_disabled
$color_text_default_inv
$color_text_light_inv
$color_text_disabled_inv

forms

Please fill in all fields.

Please check the form fields.

Text input fields
Please provide a value.
Make sure your password contains more than 8 chars.
Dropdown
Checkbox required error
Checkbox group
Radio buttons

rte text

Silicon and oxygen constitute approximately {h1}

Very long, very thin, very elegant {h2}

Bitte verwenden Sie unseren Namen, unsere Logos oder Screenshots („Markenmaterialien“) nicht auf eine irreführende oder verwirrende Art oder auf eine Weise, die unsere Förderung, Unterstützung oder Zugehörigkeit suggeriert. Zum Beispiel sollten Ihr Name und Logo auffälliger sein als der Name oder das Logo von Dropbox. Und verändern oder bearbeiten Sie das Dropbox-Logo bitte nicht – uns gefällt es genau so, wie es ist.

Text Link

Abraham Lincoln, February 12, 1809 {h3}

This guide goes beyond basic grammar and style points. It’s not traditional in format or content. We break a number of grammar rules for clarity, practicality, or preference.

Die Hard 1988 by John McTiernan with Bruce Willis {h4}

We invite you to use and adapt this style guide as you see fit. It’s completely public and available under a Creative Commons Attribution-NonCommercial 4.0 International license.

Surgeons Cut My Head Off – And Sewed It Back On {h5}

Line-height, traditionally known as leading, is one of several factors that directly contribute to readability and pacing of copy. Line-heights are based on the size of the font itself.

Alex Walter Diggelmann {h6}

We recommend using two sizes for body copy. The first is UI specific. To maximize screen real estate we chose a smaller 14px / 0.875rem body copy size for the standard UI console.

  • Coffee
  • Tea
  • Milk
  1. First item
  2. Second item
  3. Third item

In mathematics, a function was originally the idealization of how a varying quantity depends on another quantity. For example, the position of a planet is a function of time.

buttons

.button-primary
.button-primary-outline
.button-secondary
.button-secondary-outline
.button-tertiary
.button-tertiary-outline
.button-dark
.button-dark-outline
.button-light
.button-light-outline

motion

speed

$speed_fast
$speed_fast_in
$speed_fast_out
$speed_normal
$speed_normal_in
$speed_normal_out
$speed_slow
$speed_slow_in
$speed_slow_out

easing

$ease_standard
$ease_decelerate
(object moves in)
$ease_accelerate
(object moves out)

staggered

function add_stagger_class
function remove_stagger_class

favicons

favicon.png
webclip.png