GP Maierisli Platform

Design System Preview

Typography

Monument Grotesk Mono

Font Family: font-primary

Monument Grotesk Mono - Black (900)

Monument Grotesk Mono - Bold (700)

Sample Text:

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789 !@#$%^&*()

The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Headings

Heading 5XL

Heading 4XL

Heading 3XL

Heading 2XL

Heading XL

Body Text

Base text with bold weight (700) and normal line height.

Small text for secondary information.

Extra small text for labels and captions.

Components

Buttons

Variants

Sizes

States

Badges

Variants

Success Error Warning Info Default

Sizes

Small Medium Large

Cards

Variants

Default Card

With subtle border and shadow

Elevated Card

Enhanced shadow, no border

Outlined Card

Prominent border, no shadow

Padding Variants

No Padding

Small Padding

Medium Padding

Large Padding

Input

States

Enter your full name

Password must be at least 8 characters

Focus States

Tab into the fields below to see focus ring colors:

This field has an error

Alert

Checkbox & Radio

Checkboxes

Radio Buttons - Basic

Radio State Matrix

Default Palette

Unchecked

Checked

Destructive Palette

Unchecked

Checked

Disabled States

Unchecked

Checked

Status Variants

Select & Textarea

Select

Textarea

Progress

25%
50%
75%
100%

Tabs

Accordion

Breadcrumb

Separator

Horizontal Separators

Above separator

Below separator

Large separator

Vertical Separators

Item 1Item 2Item 3

Primitive Colors

Base Colors

White

#ffffff

--color-white

Black

#000000

--color-black

Gray Scale

50

--gray-50

100

--gray-100

200

--gray-200

300

--gray-300

400

--gray-400

500

--gray-500

600

--gray-600

700

--gray-700

800

--gray-800

900

--gray-900

950

--gray-950

Brown Scale

50

--brown-50

100

--brown-100

200

--brown-200

300

--brown-300

400

--brown-400

500

--brown-500

600

--brown-600

700

--brown-700

800

--brown-800

900

--brown-900

950

--brown-950

Beige Scale

50

--beige-50

100

--beige-100

200

--beige-200

300

--beige-300

400

--beige-400

500

--beige-500

600

--beige-600

700

--beige-700

800

--beige-800

900

--beige-900

950

--beige-950

Success Scale

50

--success-50

100

--success-100

200

--success-200

300

--success-300

400

--success-400

500

--success-500

600

--success-600

700

--success-700

800

--success-800

900

--success-900

950

--success-950

Error Scale

50

--error-50

100

--error-100

200

--error-200

300

--error-300

400

--error-400

500

--error-500

600

--error-600

700

--error-700

800

--error-800

900

--error-900

950

--error-950

Warning Scale

50

--warning-50

100

--warning-100

200

--warning-200

300

--warning-300

400

--warning-400

500

--warning-500

600

--warning-600

700

--warning-700

800

--warning-800

900

--warning-900

950

--warning-950

Info Scale

50

--info-50

100

--info-100

200

--info-200

300

--info-300

400

--info-400

500

--info-500

600

--info-600

700

--info-700

800

--info-800

900

--info-900

950

--info-950

Color Tokens

Surface

Surface Primary

--surface-primary

Surface Secondary

--surface-secondary

Surface Elevated

--surface-elevated

Interactive

Primary

--interactive-primary

Primary Hover

--interactive-primary-hover

Accent

--interactive-accent

Accent Hover

--interactive-accent-hover

Status

Success

--status-success

Error

--status-error

Warning

--status-warning

Info

--status-info

Text

Text Primary

--text-primary

Text Secondary

--text-secondary

Text Tertiary

--text-tertiary

Text Placeholder

--text-placeholder

GP Maierisli 2025

Lauf & Bike Event

Active
Samstag Sonntag 8 Categories