Preshape

A minimal design system and library of composable React components.

Colors

A minimal set of colors to provide clear contrast across the Day and Night themes. All colors are from the optimised open source Open Color scheme.

Black

#1E1B18

var(--color-black)

colorBlack

White

#FFFEFC

var(--color-white)

colorWhite

Highlight

#ffec99

var(--color-highlight)

colorHighlight

Dark (Shade 1)

#212529

var(--color-dark--shade-1)

colorDarkShade1

Dark (Shade 2)

#343a40

var(--color-dark--shade-2)

colorDarkShade2

Dark (Shade 3)

#495057

var(--color-dark--shade-3)

colorDarkShade3

Light (Shade 1)

#f8f9fa

var(--color-light--shade-1)

colorLightShade1

Light (Shade 2)

#f1f3f5

var(--color-light--shade-2)

colorLightShade2

Light (Shade 3)

#e9ecef

var(--color-light--shade-3)

colorLightShade3

Accent 1 (Shade 1)

rgba(66, 99, 235, 0.1)

var(--color-accent--shade-1)

colorAccent1Shade1

Accent 1 (Shade 2)

rgba(66, 99, 235, 0.2)

var(--color-accent--shade-2)

colorAccent1Shade2

Accent 1 (Shade 3)

#5c7cfa

var(--color-accent--shade-3)

colorAccent1Shade3

Accent 1 (Shade 4)

#4c6ef5

var(--color-accent--shade-4)

colorAccent1Shade4

Accent 1 (Shade 5)

#4263eb

var(--color-accent--shade-5)

colorAccent1Shade5

Accent 2 (Shade 1)

rgba(112, 72, 232, 0.1)

var(--color-accent--shade-1)

colorAccent2Shade1

Accent 2 (Shade 2)

rgba(112, 72, 232, 0.2)

var(--color-accent--shade-2)

colorAccent2Shade2

Accent 2 (Shade 3)

#845ef7

var(--color-accent--shade-3)

colorAccent2Shade3

Accent 2 (Shade 4)

#7950f2

var(--color-accent--shade-4)

colorAccent2Shade4

Accent 2 (Shade 5)

#7048e8

var(--color-accent--shade-5)

colorAccent2Shade5

Positive (Shade 1)

rgba(12, 166, 120, 0.1)

var(--color-positive--shade-1)

colorPositiveShade1

Positive (Shade 2)

rgba(12, 166, 120, 0.2)

var(--color-positive--shade-2)

colorPositiveShade2

Positive (Shade 3)

#20c997

var(--color-positive--shade-3)

colorPositiveShade3

Positive (Shade 4)

#12b886

var(--color-positive--shade-4)

colorPositiveShade4

Positive (Shade 5)

#0ca678

var(--color-positive--shade-5)

colorPositiveShade5

Negative (Shade 1)

rgba(214, 51, 108, 0.1)

var(--color-negative--shade-1)

colorNegativeShade1

Negative (Shade 2)

rgba(214, 51, 108, 0.2)

var(--color-negative--shade-2)

colorNegativeShade2

Negative (Shade 3)

#f06595

var(--color-negative--shade-3)

colorNegativeShade3

Negative (Shade 4)

#e64980

var(--color-negative--shade-4)

colorNegativeShade4

Negative (Shade 5)

#d6336c

var(--color-negative--shade-5)

colorNegativeShade5

Sizing

The sizing and spacing of a UI defines section relationships and can instantly affect how an UI is received. Too little space and a UI can feel cluttered and chaotic, too much space and it can feel empty or unrelated.

General		CSS
x1		`var(--size--x1)`
x2		`var(--size--x2)`
x3		`var(--size--x3)`
x4		`var(--size--x4)`
x6		`var(--size--x6)`
x8		`var(--size--x8)`
x10		`var(--size--x10)`
x12		`var(--size--x12)`
x16		`var(--size--x16)`

Border		CSS
x1		`var(--border-size--x1)`
x2		`var(--border-size--x2)`
x3		`var(--border-size--x3)`

Border Radius		CSS
x1		`var(--border-radius-size--x1)`
x2		`var(--border-radius-size--x2)`
x3		`var(--border-radius-size--x3)`

Icons

Icons from the Feather Icon set, designed with an emphasis on simplicity, consistency, and flexibility. All can be used like <Icons.Activity />.

Activity

Airplay

AlertCircle

AlertOctagon

AlertTriangle

AlignCenter

AlignJustify

AlignLeft

AlignRight

Anchor

Aperture