Typography

Type Scale

Heading 1 - The quick brown fox

Heading 2 - The quick brown fox

Heading 3 - The quick brown fox

Body text - The quick brown fox jumps over the lazy dog. This is how regular paragraph text appears in the Viso design system.

Caption text - Smaller supporting text for labels and metadata.

Components

Buttons

Button Variants

Button Sizes

Icon Button

Cards

Glassmorphism Card

Glass Card

This card uses the glassmorphism effect with backdrop blur for a modern, sleek appearance.

Solid Card

This card uses a solid background color for better content readability.

Form Elements

Text Input

Select Dropdown

Checkbox

Checked option Unchecked option

Slider

60%

Toggle Switch

Enabled feature Disabled feature

Neutral Toggle (Text Inside)

Progress & Badges

Progress Bar

Spinner

Badges

Default Accent Gold

Tooltip

Modal

Example Modal

Color Palette

Background Primary

#0d1117

Background Secondary

#161b22

Accent

#3ddc84

Gold

#ffd700

⚠️ Warning