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
minus
plus
search
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
- Premier élément
- Deuxième élément
- 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.
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
With icon
Transparent
Negative
Icon only
Style = light
Text
With icon
Transparent
Negative
Icon only
Tabs — resize across 1000px to switch modes
tabs
Plain tabs: one panel at a time at every viewport.
Arrow keys move focus, Enter or Space selects.
Home and End jump to the first and last tab.
table-tabs
-
Benefits
-
Composition
- daily nutrition, not workout fuel
- people want food, not supplements
- 25g protein per serving
- 50% daily vitamins & minerals
Wheel Vega
Powered by Plants, Build for life
Orbit Vega








