Style guide

The CoLAB Design Framework

The CoLAB Design framework serves as the foundation for building cohesive brands, engaging websites, and user-focused products. Every element — from color schemes and typography to button styles and UI components — is carefully aligned to create a unified and intuitive experience. With pre-built utility classes and a range of design elements, the framework ensures efficiency without compromising creativity. Each brand identity, website, or product developed within the CoLAB ecosystem embodies the perfect balance of artistic expression and practical functionality. By following this framework, CoLAB Design delivers visually compelling, seamless experiences that reflect its core values of innovation, collaboration, and accessibility across every project.

Color

The CoLAB Collective framework empowers you to customize colors to reflect your brand's unique identity. Whether you want bold, vibrant tones or soft, understated hues, the palette is adaptable to align with your creative vision. Thoughtful color choices not only enhance visual appeal but also reinforce brand recognition and evoke the right emotions in every interaction.

Background
Black
White
Tertiary
Alternative
Text
Aa
Black
Aa
Alternate

Typeface

Typography plays a key role in shaping your brand’s personality. With custom fonts, the CoLAB Collective framework allows you to tailor the look and feel of your product to align perfectly with your brand identity. Whether you opt for sleek modern styles or timeless classics, the right typeface creates consistency, enhances readability, and adds character to every interaction.

Primary
Bdogrotesk
Aa

HTML Headings

HTML headings establish a clear content hierarchy, guiding both users and search engines through your website or product. The CoLAB Collective framework defines default heading styles to ensure consistency and accessibility across all platforms. By structuring your content with proper HTML tags, you enhance readability, improve SEO performance, and create a seamless user experience.

H1

CoLAB Collective

H2

CoLAB Collective

H3

CoLAB Collective

H4

CoLAB Collective

H5
CoLAB Collective
H6
CoLAB Collective

Heading Classes

Heading classes offer flexibility when your design calls for typography styles beyond the default HTML tags. With the CoLAB Collective framework, you can apply custom heading classes to align perfectly with your brand’s aesthetic. This ensures that every header, whether large or small, maintains consistency with your visual identity while enhancing readability and user experience.

heading style h1
CoLAB Design
heading style h2
CoLAB Design
heading style h3
CoLAB Design
heading style h4
CoLAB Design
heading style h5
CoLAB Design
heading style h6
CoLAB Design

Other HTML Tags

HTML tags set the foundation for default text styles, ensuring consistency throughout your content. The CoLAB Collective framework uses these tags to define essential elements like paragraphs, lists, links, and more, providing a cohesive look and feel. These predefined styles maintain readability while aligning with your brand’s design language across all digital platforms.

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Block Quotes
"CoLAB Music"
Unordered Lists
  • CoLAB Music

  • CoLAB Music

  • CoLAB Music

Ordered Lists
  1. CoLAB Music

  2. CoLAB Music

  3. CoLAB Music

Text Sizes

Text size classes allow precise control over the appearance and formatting of inline text. The CoLAB Collective framework provides a range of size options to ensure your typography is both readable and visually appealing. Whether emphasizing key information or maintaining a balanced flow, these classes help you align text styling with your brand’s aesthetic and enhance the overall user experience.

large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Text Weights

Text weight classes offer flexibility when the default HTML tag doesn’t align with your desired font weight. The CoLAB Collective framework provides a variety of weight options — from light and subtle to bold and impactful — allowing you to fine-tune typography to match your brand’s voice. These classes ensure that your text not only looks consistent but also conveys the right tone and emphasis throughout your content.

Extra bold - 800
CoLAB Collective
bold - 700
CoLAB Collective
semibold - 600
CoLAB Collective
medium - 500
CoLAB Collective
normal - 400
CoLAB Collective
light - 300
CoLAB Collective

Text Styles

Text style classes provide the flexibility to adjust typography when the default HTML tag doesn’t align with your design needs. The CoLAB Collective framework offers a range of styles — from italics and underlines to more nuanced variations — ensuring your content maintains visual consistency and enhances your brand’s expression. These classes allow you to seamlessly align text presentation with your creative vision while ensuring clarity and readability.

italic
CoLAB Design
strikethrough
CoLAB Design
allcaps
CoLAB Design
muted
CoLAB Design
nowrap
CoLAB Design
quote
CoLAB Design
link
2 lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
3 lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Alignment

Text alignment classes allow precise control over how content is positioned when the default HTML tag’s alignment doesn’t fit your design requirements. The CoLAB Collective framework provides a variety of alignment options — from left, right, center, to justified — ensuring your typography stays consistent with your brand’s visual flow. These classes help you maintain balance and readability across all layouts, enhancing both aesthetics and usability.

align left
CoLAB Music
align center
CoLAB Music
align right
CoLAB Music

Rich text

Rich Text allows for the creation of long-form content with enhanced formatting options. The CoLAB Collective framework ensures that your extended content remains visually engaging and easy to read by supporting headings, links, lists, images, and more. Whether you're crafting blog posts, articles, or detailed product descriptions, Rich Text provides the flexibility to convey your message clearly while staying aligned with your brand's style and identity.

rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The Rich Text element streamlines content creation and formatting by bringing together headings, paragraphs, blockquotes, images, and videos in one place. This cohesive approach ensures an efficient workflow, maintaining consistency.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here

Buttons

Buttons are essential elements for driving action, serving as calls to action (CTAs) and connecting users to key pages, forms, assets, and more. The CoLAB Collective framework ensures that buttons are both functional and visually aligned with your brand, guiding users seamlessly through interactions and enhancing the overall user experience.

Primary
Button

Form

Forms are key tools for capturing valuable information, such as newsletter signups or inquiries from potential clients. The CoLAB Collective framework ensures forms are intuitive, visually cohesive, and aligned with your brand, making it easy for users to connect, engage, and share information seamlessly.

Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.