Home/Docs

UI Patterns

A collection of reusable UI components and patterns for building consistent interfaces.

Basic

Buttons

Primary and secondary variants

Input

Input Fields

Input fields

Overlay

Modals

Dialog boxes and popups with animations

Foundation

Color Scheme

A comprehensive overview of the color palette used throughout the application.

Primary Colors

Primary Main

var(--color-primary-main)

Primary Main Hover

var(--color-primary-main-hover)

Primary Main Dark

var(--color-primary-main-dark)

Primary Main Dark Hover

var(--color-primary-main-dark-hover)

Primary Alt Colors

Primary Alt

var(--color-primary-alt)

Primary Alt Hover

var(--color-primary-alt-hover)

Primary Alt Dark

var(--color-primary-alt-dark)

Primary Alt Dark Hover

var(--color-primary-alt-dark-hover)

Accent Colors

Accent Main

var(--color-accent-main)

Accent Hover

var(--color-accent-hover)

Neutral Colors

Black

var(--color-black)

Black Hover

var(--color-black-hover)

White

var(--color-white)

White Hover

var(--color-white-hover)

Surface Colors

Surface Main

var(--color-surface-main)

Surface Alt

var(--color-surface-alt)

Surface Hover

var(--color-surface-hover)

Special Colors

Off White

var(--color-off-white)