Design Style Guide

Color Palettes

Primary

primary-shade-1

primary-shade-2

primary-shade-3

primary-shade-4

primary-tint-1

primary-tint-2

primary-tint-3

primary-tint-4

Secondary

secondary-shade-1

secondary-shade-2

secondary-shade-3

secondary-shade-4

secondary-tint-1

secondary-tint-2

secondary-tint-3

secondary-tint-4

Tertiary

tertiary-shade-1

tertiary-shade-2

tertiary-shade-3

tertiary-shade-4

tertiary-tint-1

tertiary-tint-2

tertiary-tint-3

tertiary-tint-4

Tertiary

tertiary-shade-1

tertiary-shade-2

tertiary-shade-3

tertiary-shade-4

tertiary-tint-1

tertiary-tint-2

tertiary-tint-3

tertiary-tint-4


/* Add space before headings */
:where(.et_pb_text) :is(p,ul,ol,blockquote) ~ :is(h1,h2,h3,h4,h5,h6) {
  padding-top:.75em;
}

/* Fix bottom spacing on elements */
:where(.et_pb_text) p:last-of-type {
  padding-bottom:1em;
}
:where(.et_pb_text) :is(p,ul,ol,blockquote):last-child {
  padding-bottom:0;
}

/* Style Lists */
:where(.et_pb_text) ::marker {
  color:var(--gcid-primary-color);
  font-family:var(--et_global_heading_font);
}
:where(.et_pb_text) :is(ol,ul) li:not(:last-child) {
  padding-bottom:.5em;
}

/* Style Blockquotes */
:where(.et_pb_text) blockquote {
  border:none;
  position:relative;
  padding:.5em 2em .5em 2.5em;
  margin:.5em 0 1.5em;
}
:where(.et_pb_text) blockquote::after {
  content:'〞';
  color:var(--gcid-primary-color);
  position:absolute;
  font-size:6em;
  left:-.15em;
 top:0.15em;
}
:where(.et_pb_text) blockquote::before {
  content:'';
  background:var(--gcid-primary-color);
  opacity:0.1;
  width:100%;
  height:100%;
  position:absolute;
  z-index:-1;
  left:0; 
  top:0;
  border-radius:5px;
}

/* Style Links */
:where(.et_pb_text) a {
  transition: all .2s linear;
  text-underline-offset:.24em;
  text-decoration-thickness:.1em;
}
:where(.et_pb_text) a:hover {
  text-underline-offset:.12em;
}

H1: Design with Purpose

Good design is more than aesthetics – it's about creating experiences that connect with your audience. Every element should serve a clear purpose, guiding visitors toward meaningful interactions while reflecting your brand's unique personality.

H2: Creating Visual Hierarchy

When we establish clear visual hierarchy through thoughtful typography choices, we guide users naturally through our content. Strategic use of heading sizes, font weights, and spacing helps readers quickly scan and understand the structure of information, making your message more accessible and engaging.

H3: Typography Sets the Tone

Every choice we make shapes how visitors experience your message. That’s why we approach each project with intention and care.

Typography is the craft of endowing human language with a durable visual form.
- Robert Bringhurst

Ready to transform your web presence? Explore our design services and discover how strategic design can elevate your brand.

H4: Why typography matters:

Good design is more than aesthetics – it’s about creating experiences that connect with your audience.

Sets the emotional tone of your website
Improves reaproves readability and user experience proves readability and user experiencedability and user experience
Creates consistency across all pages

H5: Attention to Detail

It’s the small refinements that separate good design from great design. Even minor adjustments can significantly impact user engagement.

Sets the emotional tone of your website
Improves readability and user experience proves readability and user experienceproves readability and user experienceproves readability and user experien proves readability and user experiencece
Creates consistency across all pages

H6: Fine-Tuning the Experience

Good design is more than aesthetics – it’s about creating experiences that connect with your audience. When we establish clear visual hierarchy through thoughtful typography choices, we guide users naturally through our content.

Buttons

Primary Button

Call to Action

Your content goes here. Edit or remove this text inline or in the module Content settings.

CTA Button

Brand Assets

Visual Styles

Border Style #1

Border Style #2

Box Shadow #1

Box Shadow #2

UI Elements

Accordion Item Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Accordion Item Title Goes Here

Icon Blurb Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings.

Your Title Goes Here

von Artist Name

Your Title Goes Here

Z
List item text
Z
List item text
Z
List item text