Design System Builder

Typography

Heading 1 (H1)

This is how H1 looks with your chosen font and spacing.

Heading 2 (H2)

This is how H2 looks with your chosen font and spacing.

Heading 3 (H3)

This is how H3 looks with your chosen font and spacing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Color Palette

Primary

#5b21b6

--primary-color

Primary Light

#c084fc

--primary-light

Primary Dark

#3d0d74

--primary-dark

Secondary

#0891b2

--secondary-color

Background

#f8f8f8

--bg-color

Component Library

Buttons

                        <button class="demo-button primary">Primary Button</button>
<button class="demo-button secondary">Secondary Button</button>
<button class="demo-button ghost">Ghost Button</button>
                    

Inputs

<input class="demo-input" type="text" placeholder="Text input field">

Cards

Image Placeholder

Article Title

This is a sample card component showcasing your design system's styling and layout capabilities in action.

Read More →

                        <div class="card">
  <div class="card-image">Image Placeholder</div>
  <div class="card-content">
    <div class="card-title">Article Title</div>
    <div class="card-description">Description...</div>
    <a href="#" class="card-link">Read More →</a>
  </div>
</div>
                    

Projects

Brand Identity

Color System

Shape & Feel