Flus Design — demo page

Palettes

Accent

--color-accent-base

--color-accent-bg-subtle

--color-accent-bg

--color-accent-bg-hover

--color-accent-bg-active

--color-accent-line

--color-accent-border

--color-accent-border-hover

--color-accent-solid

--color-accent-solid-hover

--color-accent-text

--color-accent-text-contrast

Grey

--color-grey-base

--color-grey-bg-subtle

--color-grey-bg

--color-grey-bg-hover

--color-grey-bg-active

--color-grey-line

--color-grey-border

--color-grey-border-hover

--color-grey-solid

--color-grey-solid-hover

--color-grey-text

--color-grey-text-contrast

Danger

--color-danger-base

--color-danger-bg-subtle

--color-danger-bg

--color-danger-bg-hover

--color-danger-bg-active

--color-danger-line

--color-danger-border

--color-danger-border-hover

--color-danger-solid

--color-danger-solid-hover

--color-danger-text

--color-danger-text-contrast

Warning

--color-warning-base

--color-warning-bg-subtle

--color-warning-bg

--color-warning-bg-hover

--color-warning-bg-active

--color-warning-line

--color-warning-border

--color-warning-border-hover

--color-warning-solid

--color-warning-solid-hover

--color-warning-text

--color-warning-text-contrast

Custom tokens

--color-white

--color-pampas

--color-rangoon

--color-gable

--color-topaz

--color-caribbean

Alerts

Info

This is an info.

Success

This is a success.

Error

This is an error.

Anchors

A standard anchor An .anchor--nostyle

Badges

.badge .badge--border .badge--accent .badge--accent .badge--border .badge--warning .badge--warning .badge--border .badge--tag

Buttons

Disabled ([disabled])

Small (.button--small)

Big (.button--big)

Block (.button--block)

aria-current="page" / aria-expanded="true"

With icons

Cards

.card

Cat ipsum dolor sit amet, one of these days i'm going to get that red dot, just you wait and see lie in the sink all day.

Run at 3am do not try to mix old food with new one to fool me!

.card--grey

Cat ipsum dolor sit amet, love fish eat a rug and furry furry hairs everywhere oh no human coming lie on counter don't get off counter.

Run at 3am do not try to mix old food with new one to fool me!

.card--accent

Cat ipsum dolor sit amet, brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs.

Run at 3am do not try to mix old food with new one to fool me!

.card--danger

Cat ipsum dolor sit amet, one of these days i'm going to get that red dot, just you wait and see lie in the sink all day.

Run at 3am do not try to mix old food with new one to fool me!

.card--gable

Cat ipsum dolor sit amet, love fish eat a rug and furry furry hairs everywhere oh no human coming lie on counter don't get off counter.

Run at 3am do not try to mix old food with new one to fool me!

.card--topaz

Cat ipsum dolor sit amet, brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs.

Run at 3am do not try to mix old food with new one to fool me!

.card--caribbean

Cat ipsum dolor sit amet, one of these days i'm going to get that red dot, just you wait and see lie in the sink all day.

Run at 3am do not try to mix old food with new one to fool me!

.card--base .card--large

Cat ipsum dolor sit amet, one of these days i'm going to get that red dot, just you wait and see lie in the sink all day.

Run at 3am do not try to mix old food with new one to fool me!

Code

code, kbd

pre code {
    some: css;
}

Forms

Normal field (some details)

More information

Disabled field

Error field

Error : there is an error.

Textarea

Disabled textarea

Select field

Disabled select field

Error select field

Fieldset and legend

A checkbox

A disabled checkbox

A radio

A disabled radio

.input--size1

.input--size2

.input--size3

.input--size4

.input--size5

.input--size6

Horizontal rules

Icons

Lists

.list--nostyle

Foo
Bar
Baz

.list--nostyle .list--inline

Foo
Bar
Baz

.list--nostyle .list--padded .list--border .list--strip

Foo
Bar
Baz

Mobile

This paragraph disappears on mobile.

Panels

.panel

Cat ipsum dolor sit amet, sleep on dog bed, force dog to sleep on floor for run off table persian cat jump eat fish. Brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs. Throwup on your pillow my cat stared at me he was sipping his tea, too. Take a big fluffing crap ðŸ’©.

Run at 3am do not try to mix old food with new one to fool me!

.panel--grey

Cat ipsum dolor sit amet, sleep on dog bed, force dog to sleep on floor for run off table persian cat jump eat fish. Brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs. Throwup on your pillow my cat stared at me he was sipping his tea, too. Take a big fluffing crap ðŸ’©.

Run at 3am do not try to mix old food with new one to fool me!

.panel--accent

Cat ipsum dolor sit amet, sleep on dog bed, force dog to sleep on floor for run off table persian cat jump eat fish. Brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs. Throwup on your pillow my cat stared at me he was sipping his tea, too. Take a big fluffing crap ðŸ’©.

Run at 3am do not try to mix old food with new one to fool me!

.panel--danger .panel--rounded

Cat ipsum dolor sit amet, sleep on dog bed, force dog to sleep on floor for run off table persian cat jump eat fish. Brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs. Throwup on your pillow my cat stared at me he was sipping his tea, too. Take a big fluffing crap ðŸ’©.

Run at 3am do not try to mix old food with new one to fool me!

.panel--gabble .panel--rounded

Cat ipsum dolor sit amet, sleep on dog bed, force dog to sleep on floor for run off table persian cat jump eat fish. Brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs. Throwup on your pillow my cat stared at me he was sipping his tea, too. Take a big fluffing crap ðŸ’©.

Run at 3am do not try to mix old food with new one to fool me!

.panel--topaz .panel--rounded

Cat ipsum dolor sit amet, sleep on dog bed, force dog to sleep on floor for run off table persian cat jump eat fish. Brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs. Throwup on your pillow my cat stared at me he was sipping his tea, too. Take a big fluffing crap ðŸ’©.

Run at 3am do not try to mix old food with new one to fool me!

.panel--caribbean

Cat ipsum dolor sit amet, sleep on dog bed, force dog to sleep on floor for run off table persian cat jump eat fish. Brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs. Throwup on your pillow my cat stared at me he was sipping his tea, too. Take a big fluffing crap ðŸ’©.

Run at 3am do not try to mix old food with new one to fool me!

.panel--base .panel--larger

Cat ipsum dolor sit amet, sleep on dog bed, force dog to sleep on floor for run off table persian cat jump eat fish. Brown cats with pink ears cats secretly make all the worlds muffins stare at imaginary bug play riveting piece on synthesizer keyboard yet allways wanting food but small kitty warm kitty little balls of fur run up and down stairs. Throwup on your pillow my cat stared at me he was sipping his tea, too. Take a big fluffing crap ðŸ’©.

Run at 3am do not try to mix old food with new one to fool me!

Popups

Spinners

Loading in progress…

Tables

Foo	Bar	Baz
Spam	Ham	Egg

Text

.text--secondary

.text--bold

.text--bolder

.text--smaller

.text--small

.text--normal

.text--big

.text--bigger

Quotes

Cat ipsum dolor sit amet, one of these days i'm going to get that red dot, just you wait and see lie in the sink all day.