Design Style Guide
Describe your brand in 3-5 adjectives that capture its essence.
Examples: Modern, Approachable, Bold, Trustworthy, Creative
Buttons
Color Palettes
Primary 300
Primary 400
Primary
Primary 600
Primary 700
Secondary 300
Secondary 400
Secondary
Secondary 600
Secondary 700
Gray-050
Gray-100
Gray-200
Borders
Gray-300
Text Color Light
Gray-400
Gray-950
Gray-900
Header Color
Gray-800
Gray-700
Gray-600
Text Color
Gray-500
Heading 6
Divi began as two friends working on a single barn in Bolinas. Ten years on, we design homes up and down the coast — but the shape of the work hasn't changed.
Heading 6
Divi began as two friends working on a single barn in Bolinas. Ten years on, we design homes up and down the coast — but the shape of the work hasn't changed.
Typography & Sizing
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body
Divi began as two friends working on a single barn in Bolinas. Ten years on, we design homes up and down the coast — but the shape of the work hasn't changed.
Body Small
We keep the studio small. We visit the site in every season. We sketch by hand, and then we build a model. A Divi project takes two to four years — that length isn't an inefficiency, it's the point.
Body Large
A house needs time to answer the site, and we want to be there through every season of it. The studio is led by Asha Okafor and Jonas Pellegrini.
Block Quote
A house needs time to answer the site, and we want to be there through every season of it. The studio is led by Asha Okafor and Jonas Pellegrini.
Overline
Overline
Overline
Overline
Caption
Caption
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.
Spacing
2XL
XL
L
M
S
XS
Brand Assets
Visual Styles
Border Style #1
Border Style #2
Border Style #2
Box Shadow #1
Box Shadow #2
Box Shadow #2
Box Shadow Hover!
Card Small
Card Medium
Card Large
UI Elements
Accordion
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
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.
Your Title Goes Here
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 and even apply custom CSS to this text in the module Advanced settings.
Toggle
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.
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 and even apply custom CSS to this text in the module Advanced settings.
Aspect Ratios
16x9
1x1
4x3
4x5
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.
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.