Helios

Baseline design system.

Color

F1.00

gray 0

#fff
F1.13

gray 100

#e8f2fd
F2.48

gray 300

#76a7e7
AA L3.92

gray 500

#3482da
AA6.17

gray 700

#2463a5
AAA14.59

gray 900

#102a45
F1.31

red 100

#FFD8DA
F2.07

red 300

#FF979D
AA L3.40

red 500

#f94b56
AA5.12

red 700

#CF2E38
AAA9.09

red 900

#8F171F
F1.11

yellow 100

#FFF2D2
F1.23

yellow 300

#FFE6A6
F1.46

yellow 500

#FFD058
F2.27

yellow 700

#DFA103
AA5.68

yellow 900

#8D5D00
F1.10

green 100

#E4FBDF
F1.40

green 300

#B3E8A7
F1.99

green 500

#82C971
AA L3.14

green 700

#4DA439
AAA7.41

green 900

#1A6309
F1.27

blue 100

#D3E6FF
F1.82

blue 300

#95C3FF
F2.76

blue 500

#539DFE
AA4.91

blue 700

#216FD3
AAA11.59

blue 900

#073775

Name

Type

Required

defaultValue

background

string
yes
-

hex

string
yes
-

isVerbose

bool
-
false

name

string
yes
""

variant

number
yes
0

Button

Name

Type

Required

defaultValue

Checkbox

Name

Type

Required

defaultValue

Toggle

Name

Type

Required

defaultValue

onChange

func
yes
() => null

className

string
-
-

isChecked

bool
-
false

isDisabled

bool
-
false

label

string
yes
""

Radio

Name

Type

Required

defaultValue

className

string
-
-

isDisabled

bool
-
false

label

string
-
""

onBlur

func
-
() => null

onChange

func
yes
() => null

state

oneOfType
-
false

value

oneOfType
-
""

Range

140

Name

Type

Required

defaultValue

className

string
-
-

isVerbose

bool
-
false

max

number
yes
100

min

number
yes
0

onChange

func
yes
() => null

step

number
-
null

value

number
-
0

Progress

Name

Type

Required

defaultValue

className

string
-
-

max

number
-
100

value

number
yes
0

Input

Name

Type

Required

defaultValue

className

string
-
-

onBlur

func
-
() => null

onChange

func
yes
() => null

label

string
-
-

placeholder

string
-
""

type

string
-
text

value

string
-
""

Label

Default
Primary
Green
Yellow
Red
Blue

Name

Type

Required

defaultValue

color

oneOf: primary, green, red, yellow, blue
-
null

label

string
yes
""

Loading

Name

Type

Required

defaultValue

className

string
-
-

color

string
-
var(--color-gray-300)

size

number
-
20

Type

Deep blue.

All their equipment and instruments are alive.

I watched the storm, so beautiful yet terrific.

A shining crescent far beneath the flying vessel.

It was going to be a lonely trip back.

Silver mist suffused the deck of the ship.

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

Small

On gaining the summit we found ourselves at the brim of a spacious hollow or basin, which in past ages must have been the crater of the volcanic peak. The grassy slopes of the basinwere laid out in flower gardens and terraces of coloured marbles, shaded with sombre trees, and ornamented with sculpture. In the bottom lay an oval sheet of water a mile long or more,and from the midst of it, towards the near end, a beautiful islet, crowned by a magnificent temple, rose like a mirage to the view, and seemed to float on its glassy bosom.

React.CreateElement()new Link as A