Style Guide

Design system and reference for InstaUnits

Colors

Primary Colors

Primary#2A6FFF

Secondary#00C9B1

Neutral Colors

Background--background

Foreground--foreground

Muted--muted

Typography

Font: Inter

Heading 1 (36px)

Font weight: 700 (Bold)

Heading 2 (30px)

Font weight: 700 (Bold)

Heading 3 (24px)

Font weight: 700 (Bold)

Heading 4 (20px)

Font weight: 700 (Bold)

Large Text (18px)

Font weight: 400 (Regular)

Body Text (16px)

Font weight: 400 (Regular)

Small Text (14px)

Font weight: 400 (Regular)

Extra Small Text (12px)

Font weight: 400 (Regular)

Spacing

Spacing Scale

4px (0.25rem)

8px (0.5rem)

16px (1rem)

24px (1.5rem)

32px (2rem)

48px (3rem)

64px (4rem)

Components

Buttons

Inputs

Tabs

Cards

Card Example

This is an example of a card component with padding of 16px (1rem).

Accessibility

Accessibility Guidelines

Color Contrast

All text should maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Focus States

All interactive elements should have visible focus states with a 2px ring in the primary color.

Screen Reader Text

Use the "sr-only" class for text that should only be visible to screen readers.

Keyboard Navigation

All interactive elements should be accessible via keyboard navigation.