Stephanie O'Gay Garcia (2023) Design System
Global Colours
Brand
-
Primary
HEX: #E9AFB5
RGB: 233, 175, 181
-
Secondary
HEX: #d26a74
RGB: 210, 106, 116
-
Accent 1
HEX: #b2d7e8
RGB: 178, 215, 232
-
Accent 2
HEX: #4b4eae
RGB: 75, 78, 174
-
Accent 3
HEX: #f0c674
RGB: 240, 198, 116
-
Accent 4
HEX: #5ef1c6
RGB: 94, 241, 198
-
Text
HEX: #191A1B
RGB: 25, 26, 27
-
Neutral
HEX: #fbfcfc
RGB: 251, 252, 252
-
Neutral 2
HEX: #d1d4d6
RGB: 209, 212, 214
Typography
Heading 1
Font: Space Grotesk | Size: 2.125rem | Color: #191A1B | Weight: 500 | Line Height: | Letter Spacing: Default | Text Transform: none
Heading 2
Font: Space Grotesk | Size: 1.875rem | Color: #191A1B | Weight: 500 | Line Height: | Letter Spacing: Default | Text Transform: none
Heading 3
Font: Space Grotesk | Size: 1.5rem | Color: #191A1B | Weight: 500 | Line Height: | Letter Spacing: Default | Text Transform: none
Heading 4
Font: Space Grotesk | Size: 1.25rem | Color: #191A1B | Weight: 500 | Line Height: | Letter Spacing: Default | Text Transform: none
Heading 5
Font: Space Grotesk | Size: 1.125rem | Color: | Weight: 500 | Line Height: | Letter Spacing: Default | Text Transform: none
Heading 6
Font: Space Grotesk | Size: 1rem | Color: #191A1B | Weight: 500 | Line Height: | Letter Spacing: Default | Text Transform: none
This is a subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor, quam vel dignissim tincidunt, odio libero porta ligula, vitae fermentum lacus libero vel risus. Aenean pulvinar nisl et vestibulum commodo. Quisque euismod tempus dignissim. Quisque dictum luctus velit, eu viverra urna tristique non. Vivamus at dolor tellus. Cras congue sapien non turpis dapibus, et vestibulum ante ultrices. Mauris eu nisi non sapien fermentum fermentum in eu odio. Fusce congue elit et tortor sagittis, sit amet auctor risus sagittis.
Font: Lexend Deca | Size: 16px | Color: #191A1B | Weight: 300 | Line Height: | Letter Spacing: Default
This line contains subscript text.
This line contains superscript text.
This line contains code.
This line contains small text.
This line contains highlighted text
.preformatted-code { background-color: #FFF; }- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
- First ordered list item
- Second ordered list item
- Third ordered list item
- Fourth ordered list item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor, quam vel dignissim tincidunt, odio libero porta ligula, vitae fermentum lacus libero vel risus. Aenean pulvinar nisl et vestibulum commodo. Quisque euismod tempus dignissim.
| Header column one | Header column two | Header column three |
|---|---|---|
| Row one column one | Row one column two | Row one column three |
| Row two column one | Row two column two | Row two column three |
| Row three column one | Row three column two | Row three column three |
| Row four column one | Row four column two | Row four column three |
| Footer column one | Footer column two | Footer column three |
Buttons
Default Button (Primary)
Default Button → CSS Classes: button
Primary (Outline) Button
Primary (Outline) Button → CSS Classes: button button--primary-outline
Primary (Arrow) Button
Primary (Arrow) Button → CSS Classes: button button--arrow button--primary
Secondary Button
Secondary Button → CSS Classes: button button--secondary
Secondary (Outline) Button
Secondary (Outline) Button → CSS Classes: button button--secondary-outline
Secondary (Arrow) Button
Secondary (Arrow) Button → CSS Classes: button button--arrow button--secondary
Tertiary Button
Tertiary Button → CSS Classes: button button--tertiary
Tertiary (Outline) Button
Tertiary (Outline) Button → CSS Classes: button button--tertiary-outline
Tertiary (Arrow) Button
Tertiary (Arrow) Button → CSS Classes: button button--arrow button--tertiary
Text Button
Text Button → CSS Classes: button button--text
Text (Outline) Button
Text (Outline) Button → CSS Classes: button button--text-outline
Text (Arrow) Button
Text (Arrow) Button → CSS Classes: button button--arrow button--text
Neutral Button
Neutral Button → CSS Classes: button button--neutral
Neutral (Outline) Button
Neutral (Outline) Button → CSS Classes: button button--neutral-outline
Neutral (Arrow) Button
Neutral (Arrow) Button → CSS Classes: button button--arrow button--neutral