Design System

This page documents the core components and styles used across the website, ensuring consistency and providing a reference for future development.

Colors

--primary-purple
--primary-blue
--bg-primary
--bg-secondary
--text-inverted
--text-primary

Typography

Heading 1 - Poppins Bold

Heading 2 - Poppins SemiBold

Heading 3 - Poppins SemiBold

This is the primary body text, used for paragraphs and descriptions.

Form / Text Input

Checkbox & Radio

Number Input

Slider

Toggle

File Uploader

No file chosen

Accordion

This is the content for the first accordion item. It is hidden by default and shown when the header is clicked.

This is the content for the second accordion item. It is shown by default because of the .active class on the parent container.

This is the content for the third accordion item.

Alerts / Notification

Info: This is an informational message.
Success: Your action was completed successfully.
Warning: Please double-check your input.
Error: An error occurred while saving.

Buttons

Cards / Tiles

Card Title

This is the descriptive text inside of a card or tile component.

Code Snippet

<div class="example">
    <p>This is a code snippet.</p>
</div>

Loading

Inline loading...

Popover & Tooltip

Hover for Tooltip
This is a simple tooltip.
This is a toggletip that stays open until you click away.

Progress Bar / Indicator

Tabs / Content Switcher

This is the content for the first tab.

Tags / AI Label

Default Tag Blue Tag AI Label

Pagination

Lists

  • Unordered List Item 1
  • Unordered List Item 2
  1. Ordered List Item 1
  2. Ordered List Item 2

Tables / Data Table

Metric Value Change Notes
ATC Conversion +1.1% +0.2% A/B Test Group A
User Satisfaction 85% +5% Post-launch survey
User Drop-off -30% -5% Onboarding funnel

TreeView

  • Parent 1
    • Child 1.1
    • Child 1.2
  • Parent 2 (Open)
    • Child 2.1
    • Child 2.2
      • Grandchild 2.2.1