Styleguide


Fonts

font-display — OTR Flapjack

Find Vega near you

font-script — Late Cinema Script

you

font-primary — ABC Diatype

The quick brown fox jumps over the lazy dog.


Display — OTR Flapjack

display-lg

The quick brown fox jumps over the lazy dog.

display-md

The quick brown fox jumps over the lazy dog.

display-sm

The quick brown fox jumps over the lazy dog.

display-xs

The quick brown fox jumps over the lazy dog.

display-2xs

The quick brown fox jumps over the lazy dog.


Heading — ABC Diatype Bold

heading-4xl

The quick brown fox jumps over the lazy dog.

heading-3xl

The quick brown fox jumps over the lazy dog.

heading-2xl

The quick brown fox jumps over the lazy dog.

heading-xl

The quick brown fox jumps over the lazy dog.

heading-lg

The quick brown fox jumps over the lazy dog.

heading-md

The quick brown fox jumps over the lazy dog.

heading-sm

The quick brown fox jumps over the lazy dog.

heading-xs

The quick brown fox jumps over the lazy dog.


Body — ABC Diatype (body-*)

body-lg

The quick brown fox jumps over the lazy dog.

body-md

The quick brown fox jumps over the lazy dog.

body-sm

The quick brown fox jumps over the lazy dog.

body-xs

The quick brown fox jumps over the lazy dog.


Labels — ABC Diatype Bold

label-lg

The quick brown fox jumps over the lazy dog.

label-md

The quick brown fox jumps over the lazy dog.

label-sm

The quick brown fox jumps over the lazy dog.

label-xs

The quick brown fox jumps over the lazy dog.


Neutral scale

--color-neutral-50

--color-neutral-100

--color-neutral-200

--color-neutral-300

--color-neutral-400

--color-neutral-500

--color-neutral-600

--color-neutral-700

--color-neutral-800

--color-neutral-900

--color-neutral-950

Theme colors

--color-bg

--color-text

--color-text-muted

--color-border

--color-overlay


Icons

account

arrow-left

arrow-right

carret-left

carret-right

cart

check

facebook

instagram

linkedin

minus

plus

search

twitter


Spacings

spacing-fluid-xs

spacing-fluid-sm

spacing-fluid-md

spacing-fluid-lg

spacing-fluid-xl

spacing-fluid-2xl

spacing-fluid-3xl

spacing-fluid-4xl


Wysiwyg

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Texte en gras, texte normal, texte en italique, et gras italique souligné. Voici un lien dans un paragraphe.

  • Élément de liste non ordonnée
  • Élément en gras
  • Élément en italique
  • Dernier élément
  1. Premier élément
  2. Deuxième élément
  3. Troisième élément

Ceci est une citation. Elle peut s'étendre sur plusieurs lignes et met en valeur un extrait important du contenu éditorial.


Placeholder de test
Légende de l'image — source: Lorem Picsum

Le texte reprend normalement après la figure. Les styles wysiwyg s'appliquent à nouveau ici.


Medias

Video Inline (MP4)

Video Inline (Vimeo)

Video Inline (YouTube)

Video Cover (MP4)

Video Cover (Vimeo)

Video Cover (YouTube)

Media Component (Video or image w/ extra options)

Media Component (Video or image w/ cover)


Buttons

Variant Matrix

Style = dark

Text

lgmdsm
Default
Hover
Focus
Disabled

With icon

lgmdsm
Default
Hover
Focus
Disabled

Transparent

lgmdsm
Default
Hover
Focus
Disabled

Negative

lgmdsm
Default
Hover
Focus
Disabled

Icon only

lgmdsm
Default
Hover
Focus
Disabled

Style = light

Text

lgmdsm
Default
Hover
Focus
Disabled

With icon

lgmdsm
Default
Hover
Focus
Disabled

Transparent

lgmdsm
Default
Hover
Focus
Disabled

Negative

lgmdsm
Default
Hover
Focus
Disabled

Icon only

lgmdsm
Default
Hover
Focus
Disabled

Tabs — resize across 1000px to switch modes

tabs

Plain tabs: one panel at a time at every viewport.

table-tabs

  • daily nutrition, not workout fuel
  • people want food, not supplements

Wheel Vega

Powered by Plants, Build for life


Orbit Vega