Core
The Core section sets up CSS custom properties for core design tokens, used throughout the design system. They aren't often used directly in components, but are the foundation for semantic tokens and component styles.
Colour Palette
The base colours used in the design system. These are used to generate semantic colours for components and states. Dynamic is a special palette that is generated from today's hue.
Dynamic
--piko-palette-dynamic-1 --piko-palette-dynamic-2 --piko-palette-dynamic-3 --piko-palette-dynamic-4 --piko-palette-dynamic-5 --piko-palette-dynamic-6 --piko-palette-dynamic-7 --piko-palette-dynamic-8 --piko-palette-dynamic-9 Grey
--piko-palette-grey-1 --piko-palette-grey-2 --piko-palette-grey-3 --piko-palette-grey-4 --piko-palette-grey-5 --piko-palette-grey-6 --piko-palette-grey-7 --piko-palette-grey-8 --piko-palette-grey-9 Red
--piko-palette-red-1 --piko-palette-red-2 --piko-palette-red-3 --piko-palette-red-4 --piko-palette-red-5 --piko-palette-red-6 --piko-palette-red-7 --piko-palette-red-8 --piko-palette-red-9 Orange
--piko-palette-orange-1 --piko-palette-orange-2 --piko-palette-orange-3 --piko-palette-orange-4 --piko-palette-orange-5 --piko-palette-orange-6 --piko-palette-orange-7 --piko-palette-orange-8 --piko-palette-orange-9 Yellow
--piko-palette-yellow-1 --piko-palette-yellow-2 --piko-palette-yellow-3 --piko-palette-yellow-4 --piko-palette-yellow-5 --piko-palette-yellow-6 --piko-palette-yellow-7 --piko-palette-yellow-8 --piko-palette-yellow-9 Green
--piko-palette-green-1 --piko-palette-green-2 --piko-palette-green-3 --piko-palette-green-4 --piko-palette-green-5 --piko-palette-green-6 --piko-palette-green-7 --piko-palette-green-8 --piko-palette-green-9 Teal
--piko-palette-teal-1 --piko-palette-teal-2 --piko-palette-teal-3 --piko-palette-teal-4 --piko-palette-teal-5 --piko-palette-teal-6 --piko-palette-teal-7 --piko-palette-teal-8 --piko-palette-teal-9 Blue
--piko-palette-blue-1 --piko-palette-blue-2 --piko-palette-blue-3 --piko-palette-blue-4 --piko-palette-blue-5 --piko-palette-blue-6 --piko-palette-blue-7 --piko-palette-blue-8 --piko-palette-blue-9 Purple
--piko-palette-purple-1 --piko-palette-purple-2 --piko-palette-purple-3 --piko-palette-purple-4 --piko-palette-purple-5 --piko-palette-purple-6 --piko-palette-purple-7 --piko-palette-purple-8 --piko-palette-purple-9 Pink
--piko-palette-pink-1 --piko-palette-pink-2 --piko-palette-pink-3 --piko-palette-pink-4 --piko-palette-pink-5 --piko-palette-pink-6 --piko-palette-pink-7 --piko-palette-pink-8 --piko-palette-pink-9 Spacing Units
| Label | Token | Value | Preview |
|---|---|---|---|
| Unit | --piko-unit | — | |
| Quarter unit | --piko-unit-quarter | — | |
| Half unit | --piko-unit-half | — | |
| Double unit | --piko-unit-double | — | |
| Triple unit | --piko-unit-triple | — | |
| Quad unit | --piko-unit-quad | — |
Font
The text scaling system comes from Utopia making it dyanmic at different viewports sizes.
| Token | Example |
|---|---|
--piko-fontsize--2 | The quick brown fox jumps over the lazy dog. |
--piko-fontsize--1 | The quick brown fox jumps over the lazy dog. |
--piko-fontsize-0 | The quick brown fox jumps over the lazy dog. |
--piko-fontsize-1 | The quick brown fox jumps over the lazy dog. |
--piko-fontsize-2 | The quick brown fox jumps over the lazy dog. |
--piko-fontsize-3 | The quick brown fox jumps over the lazy dog. |
--piko-fontsize-4 | The quick brown fox jumps over the lazy dog. |
--piko-fontsize-5 | The quick brown fox jumps over the lazy dog. |
Semantic
Semantic tokens and classes are the implementable versions of the core design tokens. They take into account dark/light mode and are about the intended use of the token rather than its raw value. Core tokens generally never change their value, but semantic tokens may - and that change will cascade through the website.
Colours
These are colours with meaning, so should always be used instead of the core palette tokens.
Text
--piko-color-text --piko-color-text-subtle --piko-color-text-dynamic Backgrounds
--piko-color-background --piko-color-background-secondary --piko-color-background-inactive --piko-color-background-dynamic Links
--piko-color-link --piko-color-link-visited --piko-color-link-hover Borders
--piko-color-border --piko-color-border-subtle --piko-color-border-strong Other
--piko-color-accent Typography
These are classes to use for typography, which will apply the appropriate font-size, line-height, font-weight and letter-spacing.
| Classname | Size Token | Example |
|---|---|---|
.piko-t-h1 | --piko-t-h1 | The quick brown fox jumps over the lazy dog. |
.piko-t-h2 | --piko-t-h2 | The quick brown fox jumps over the lazy dog. |
.piko-t-h3 | --piko-t-h3 | The quick brown fox jumps over the lazy dog. |
.piko-t-h4 | --piko-t-h4 | The quick brown fox jumps over the lazy dog. |
.piko-t-h5 | --piko-t-h5 | The quick brown fox jumps over the lazy dog. |
.piko-t-h6 | --piko-t-h6 | The quick brown fox jumps over the lazy dog. |
.piko-t-body | --piko-t-body | The quick brown fox jumps over the lazy dog. |
Spacing roles
| Label | Token | Preview |
|---|---|---|
| Grid gap | --piko-gap-grid | |
| Stack gap | --piko-gap-stack | |
| Text gap | --piko-gap-text | |
| Panel padding | --piko-space-panel-padding | |
| Control padding (x) | --piko-space-control-padding-x | |
| Control padding (y) | --piko-space-control-padding-y |
States
data-state="info"
info text mode using .piko-state__text
info: boxed mode using .piko-state__box
data-state="success"
success text mode using .piko-state__text
success: boxed mode using .piko-state__box
data-state="warning"
warning text mode using .piko-state__text
warning: boxed mode using .piko-state__box
data-state="error"
error text mode using .piko-state__text
error: boxed mode using .piko-state__box
Form elements
Examples of common form controls with labels, fieldsets, and various states.
Text inputs
With helper text and errors
Disabled state
Select and textarea
Checkboxes
Radio buttons
Full form example
HTML Kitchen Sink
The rest of this page demonstrates the default styles for all the HTML elements. Adapted from ericrasch/html-kitchen-sink .
A small paragraph to have emphasis and show important bits.
This is a properly formatted blockquote, btw. Measuring programming progress by lines of code is like measuring aircraft building progress by weight.
- Definition list term
- Defintion List Description. A definition list is perfect for defining terms, and is a great way to display metadata.
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Preformatted:Testing one row and another
I am the a tag example
I am the abbr tag example
I am the cite tag example
I am the code tag example
I am the del tag example
I am the dfn tag example
I am the em tag example
I am the i tag example
I am the ins tag example
I am the kbd tag example
I am the q tag
example
I am the samp tag example
I am the small tag example
I am the span tag example
I am the strong tag example
I am the sub tag example
I am the sup tag example
I am the var tag example
- Unordered list 01
- Unordered list 02
- Unordered list 03
- Unordered list inside list level 2
- Unordered list inside list level 2
- Unordered list inside list level 3
- Unordered list inside list level 3
- Ordered list 01
- Ordered list 02
- Ordered list 03
- Ordered list inside list level 2
- Ordered list inside list level 2
- Ordered list inside list level 3
- Ordered list inside list level 3
- Description list title 01
- Description list description 01
- Description list title 02
- Description list description 02
- Description list description 03
| Table head th | Table head td |
|---|---|
| Table foot th | Table foot td |
| Table body th | Table body td |
| Table body td | Table body td |