Style Guide for FHinder

This Style Guide describes the design principles and components used in the FHinder Project.

Typography

Heading 1

Paragraph Large

Heading 2

Paragraph Medium/Base

Heading 3

Paragraph Small

Heading 4

Paragraph Small

Lists

List Item 1
List Item 2
List Item 3

Ordered Item 1
Ordered Item 2
Ordered Item 3

Colors

Primary

100

var(--color-primary-100)

200

var(--color-primary-200)

300

var(--color-primary-300)

400

var(--color-primary-400)

500

var(--color-primary-500)

600

var(--color-primary-600)

700

var(--color-primary-700)

800

var(--color-primary-800)

900

var(--color-primary-900)

Neutral

100

var(--color-neutral-100)

200

var(--color-neutral-200)

300

var(--color-neutral-300)

400

var(--color-neutral-400)

500

var(--color-neutral-500)

600

var(--color-neutral-600)

700

var(--color-neutral-700)

800

var(--color-neutral-800)

900

var(--color-neutral-900)

Red

100

var(--color-red-100)

200

var(--color-red-200)

300

var(--color-red-300)

400

var(--color-red-400)

500

var(--color-red-500)

600

var(--color-red-600)

700

var(--color-red-700)

800

var(--color-red-800)

900

var(--color-red-900)

Green

100

var(--color-green-100)

200

var(--color-green-200)

300

var(--color-green-300)

400

var(--color-green-400)

500

var(--color-green-500)

600

var(--color-green-600)

700

var(--color-green-700)

800

var(--color-green-800)

900

var(--color-green-900)

Yellow

100

var(--color-yellow-100)

200

var(--color-yellow-200)

300

var(--color-yellow-300)

400

var(--color-yellow-400)

500

var(--color-yellow-500)

600

var(--color-yellow-600)

700

var(--color-yellow-700)

800

var(--color-yellow-800)

900

var(--color-yellow-900)

Semantic Colors

Text

var(--color-text)

Label

var(--color-label)

Border

var(--color-border)

Accent

var(--color-accent)

Accent Hover

var(--color-accent-hover)

On Accent

var(--color-on-accent)

Error Foreground

var(--color-error-foreground)

Error Background

var(--color-error-background)

Success Background

var(--color-success-background)

Success Foreground

var(--color-success-foreground)

Info Background

var(--color-info-background)

Info Foreground

var(--color-info-foreground)

Spacing

var(--spacing-xs)

var(--spacing-sm)

var(--spacing-md)

var(--spacing-lg)

var(--spacing-xl)

2XL

var(--spacing-2xl)

Border Radius

var(--border-radius-sm)

var(--border-radius-md)

var(--border-radius-lg)

FULL

var(--border-radius-full)

Box Shadows

var(--shadow-sm)

var(--shadow-md)

var(--shadow-lg)

SM - Multiple

var(--shadow-sm) , var(--shadow-sm)

MD - Multiple

var(--shadow-md) , var(--shadow-md)

LG - Multiple

var(--shadow-lg) , var(--shadow-lg)

Transitions

Easing

var(--transition-ease)

Duration

var(--transition-duration)

Components

Buttons

Links

This is a link This is a another link

Input Fields

Select an Option

Nachricht

Cards

CSS Card

This is a simple card component using CSS for styling.

CSS Card

This is a simple card component using CSS for styling.

CSS Card

This is a simple card component using CSS for styling.

CSS Card

This is a simple card component using CSS for styling.

Figure Component

Marquee Gallery