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
  1. First ordered list item
  2. Second ordered list item
  3. Third ordered list item
  4. 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

Forms

First name

Last name

Email*

Phone numberThis is some help text for the phone number field.

  • Single Checkbox

Test Multicheck

  • New A
  • New B
  • New C

Date Picker

File

Number

Radio Select

  • Option A
  • Option B
  • Option C

Dropdown Select

Please SelectOption AOption BOption C

Single-line Text

This is a rich text area on the form.

You can even add some styling here!

Multi-line Text

Stephanie O'Gay Garcia is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please tick below to say how you would like us to contact you:

  • I agree to receive other communications from Stephanie O'Gay Garcia.

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit below, you consent to allow Stephanie O'Gay Garcia to store and process the personal information submitted above to provide you the content requested.

Contact

Get help from a HubSpot CMS Expert

  • Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules
  • Technical support and guidance on the HubSpot CMS

Tell me about your project