Style Guide

A comprehensive and consistent system of visual and interactive components designed to ensure brand cohesion and a seamless user experience across all digital and interactive interfaces.

Typography

Heading 1 With Gradient

Heading 2 With Gradient

Heading 3 With Gradient

Heading 4 With Gradient

This is a demonstration of large text size (text-lg), presenting an extended example to effectively highlight the typography style.

This is a demonstration of base text size (text-base), showcasing a longer sentence to illustrate the typography style effectively.

This is a demonstration of small text size (text-sm), providing an extended example to showcase the typography style in detail.

This is a demonstration of tiny text size (text-xs), offering a comprehensive sample to highlight the typography style thoroughly.

Buttons

Small Buttons

Cards

Card with Image

Sample Article Title

This is a brief description of the article content, limited to approximately 150 characters to demonstrate the card with an image placeholder...

Card

Sample Article Title

This is a longer description of the article content, designed to demonstrate the card without an image. It provides more detailed information about the topic, suitable for a card without a visual element, and is limited to approximately 425 characters to match the provided example's logic. The content here is purely for demonstration purposes and can be adapted as needed...

Lists

  • Unordered List Item 1
  • Unordered List Item 2
  1. Ordered List Item 1
  2. Ordered List Item 2
Term One
Definition of the term.

Tables

NameRoleStatus
Alice DesignerActive
Bob DeveloperInactive
Charlie Product ManagerActive
Dana QA EngineerActive
Eve MarketingInactive

Form Fields

Modal Example

Modal Title

This is a mock modal for design reference. In your app, this would be triggered via a button.