Dai UI

Theme Styleguide

Colors

main

primary
#1AAB9B
primaryEmphasis
#008E7B
primaryAlt
#087C6D
primaryMuted
#EEFFFD
secondary
#D5D9E0
secondaryEmphasis
#7E7E87
secondaryAlt
#231536
secondaryMuted
#D4D9E1
background
#F7F8F9
surface
#FFF
muted
#D5D9E0
mutedAlt
#7E7E87
error
#AE3C4B
success
#087C6D
successAlt
#EEFFFD
notice
#EB7720
noticeAlt
#FFFBEF
warning
#CB532D
warningAlt
#FFF6F3

typography

text
#434358
onPrimary
#FFF
onSecondary
#7E7E88
onBackground
#434358
onBackgroundAlt
#231536
onSurface
#708390
onSuccess
#087C6D
onNotice
#EB7720
onWarning
#CB532D

other

accentBlue
#447AFB
accentPurple
#9055AF

Spacing

0
0px
1
4px
2
8px
3
16px
4
32px
5
64px
6
128px
7
256px
8
512px
container
1140px

Typography

body
-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu
heading
-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu
monospace
monospace
0
10px
1
12px
2
14px
3
16px
4
18px
5
20px
6
24px
7
32px
8
48px
9
64px
10
96px

Shadows & Radii

floater
0 0 8px rgba(0, 0, 0, 0.125)
lightPrimary
0 0 1px 5px rgba(26,171,155,0.2)
xs
2px
small
4px
medium
6px
roundish
12px
round
24px

Component Variants

Buttons

primary
<Button variant="primary" />
outline
<Button variant="outline" />
small
<Button variant="small" />
smallOutline
<Button variant="smallOutline" />
textual
<Button variant="textual" />

Text And Links

Hello World
heading
<Text variant="heading" />
Hello World
largeHeading
<Text variant="largeHeading" />
Hello World
mediumHeading
<Text variant="mediumHeading" />
Hello World
smallHeading
<Text variant="smallHeading" />
Hello World
microHeading
<Text variant="microHeading" />
Hello World
text
<Text variant="text" />
Hello World
smallText
<Text variant="smallText" />
Hello World
microText
<Text variant="microText" />
Hello World
caps
<Text variant="caps" />
Anchors are a page's best friend
nav
<Link variant="nav" />

Badges and Alerts

Winning Proposal
primary
<Badge variant="primary" />
Winning Proposal
success
<Badge variant="success" />
Winning Proposal
notice
<Badge variant="notice" />
Winning Proposal
warning
<Badge variant="warning" />
This is an alert message
primary
<Alert variant="primary" />
This is an alert message
success
<Alert variant="success" />
This is an alert message
notice
<Alert variant="notice" />
This is an alert message
warning
<Alert variant="warning" />

Forms

label
<Label variant={label}>I'm a label</Label>
input
<Input variant={input}></Input>
inputError
<Input variant={inputError}></Input>
textarea
<Textarea variant={textarea}>Hello</Textarea>
textareaError
<Textarea variant={textareaError}>Hello</Textarea>
select
<Select defaultValue="Hello" variant={select}> <option>Hello</option> </Select>
slider
<Slider variant={slider}></Slider>
sliderActive
<Slider variant={sliderActive}></Slider>
radio
<Checkbox defaultChecked={true} variant={radio}></Checkbox>
checkbox
<Checkbox defaultChecked={true} variant={checkbox}></Checkbox>