Style Guide
Every colour, text style and component used across Demstra. Change them once in Assets and the whole site updates.
Typography
Text styles live in Assets → Text Styles. Edit a style and every heading or paragraph using it updates.
heading-h1
Heading 1
heading-h2
Heading 2
heading-h3
Heading 3
heading-h4
Heading 4
text-3xl
The quick brown fox jumps
text-2xl
The quick brown fox jumps
text-xl
The quick brown fox jumps over the lazy dog
text-xl-2
The quick brown fox jumps over the lazy dog
text-lg
The quick brown fox jumps over the lazy dog
text-lg-2
The quick brown fox jumps over the lazy dog
text-base
The quick brown fox jumps over the lazy dog
text-sm
The quick brown fox jumps over the lazy dog
text-sm-2
The quick brown fox jumps over the lazy dog
text-xs
The quick brown fox jumps over the lazy dog
case-h4
Rich text heading (CMS)
case-body
Rich text paragraph used in CMS articles and case studies.
Colors
Colours live in Assets → Colors. Every section, card and text colour points to these, so one change updates the site.
Black
rgb(0, 0, 0)
White
rgb(255, 255, 255)
Muted
rgb(102, 102, 102)
Secondary
rgb(76, 76, 76)
Dark
rgb(12, 4, 7)
Green
rgb(28, 38, 35)
Lime
rgb(188, 240, 47)
White 50
rgba(255, 255, 255, 0.5)
Black 50
rgba(0, 0, 0, 0.5)
Black 80
rgba(0, 0, 0, 0.8)
White 80
rgba(255, 255, 255, 0.8)
Cream
rgb(236, 234, 225)
Light Cream
rgb(243, 245, 238)
Beige
rgb(218, 215, 202)
Dark Green
rgb(28, 38, 35)
Card Green
rgb(35, 47, 43)
Input Green
rgb(73, 81, 79)
White 20
rgba(255, 255, 255, 0.2)
Black 20
rgba(0, 0, 0, 0.2)
Buttons
Button components with built-in hover. Set the label, link and style (Primary, Secondary, Beige) on each instance.
Links & labels
Nav and footer links roll their letters on hover. Eyebrows label sections. Social buttons sit on photos.
Cards
CMS cards. Each pulls its content from a collection and has its own hover animation.
FAQ
Click a question to open or close it. Set the variant to Open or Closed on each instance to choose how it starts.
What does Demstra actually do?
Demstra partners with growing organizations to improve the way they hire, operate, and work together.