UI Elements Styleguide

Design System Base Settings

  • Base Font Size: 16px (1rem)
  • Background Color: White (bg-white)
  • Text Color: Black (text-black)
  • Corner Style: No rounded elements
  • Typography: Roboto for paragraphs, Roboto Condensed for titles

Typography

Heading 1

text-4xl font-bold font-roboto-condensed

Heading 2

text-3xl font-semibold font-roboto-condensed

Heading 3

text-2xl font-medium font-roboto-condensed

Heading 4

text-xl font-medium font-roboto-condensed

Body Text: This is a paragraph of regular body text. It should be easy to read and have good contrast.

text-base (16px) text-black font-roboto

Small Text: This is smaller text, typically used for captions or secondary information.

text-sm font-roboto

Extra Small Text: This is the smallest text size, used for legal text and footnotes.

text-xs font-roboto

Colors

Primary Red

bg-red-600

Black

bg-black

White

bg-white

Light Gray

bg-gray-200

Dark Gray

bg-gray-800

Buttons

Button Sizes

xs

sm

md (default)

lg

xl

Primary Buttons

variant=“primary” (default)

disabled

Secondary Buttons

variant=“secondary”

disabled

Form Elements

Input Fields

Default state

Focus state

Please enter a valid value

Error state

Disabled state

Other Form Elements

TextArea component

Checkbox component

Radio component with RadioGroup

Select component

Cards & Containers

Basic Card

This is a basic card with some content. Cards are used to group related information.

Basic card with shadow

Outlined Card

This is an outlined card with a border instead of a shadow.

Outlined card with border

Images & Media

Next.js Logo

Standard image

Avatar

Square image (avatar)

Image placeholder

Alerts & Notifications

Success alert: Your changes have been saved successfully.

Success alert

Error alert: There was a problem processing your request.

Error alert

Warning alert: Please review your information before continuing.

Warning alert

Info alert: The system will be under maintenance on Sunday.

Info alert

Modal Components

Modal Sizes

Click buttons to open modals of different sizes

We bring innovation to life, making things happen in short time. We address real problems and create products that are usable and have utility.

info@leanforward.agency

+41 12 345 67 89

© 2025 Leanforward. All rights reserved.