UI Elements Styleguide
Design System Base Settings
- Base Font Size: 16px (1rem)
- Background Color: White (bg-white)
- Text Color: Black (text-black)
- Corner Style: No rounded elements
- Typography: Roboto for paragraphs, Roboto Condensed for titles
Typography
Heading 1
text-4xl font-bold font-roboto-condensed
Heading 2
text-3xl font-semibold font-roboto-condensed
Heading 3
text-2xl font-medium font-roboto-condensed
Heading 4
text-xl font-medium font-roboto-condensed
Body Text: This is a paragraph of regular body text. It should be easy to read and have good contrast.
text-base (16px) text-black font-roboto
Small Text: This is smaller text, typically used for captions or secondary information.
text-sm font-roboto
Extra Small Text: This is the smallest text size, used for legal text and footnotes.
text-xs font-roboto
Colors
Primary Red
bg-red-600
Black
bg-black
White
bg-white
Light Gray
bg-gray-200
Dark Gray
bg-gray-800
Buttons
Button Sizes
xs
sm
md (default)
lg
xl
Primary Buttons
variant=“primary” (default)
disabled
Secondary Buttons
variant=“secondary”
disabled
Form Elements
Input Fields
Default state
Focus state
Please enter a valid value
Error state
Disabled state
Other Form Elements
TextArea component
Checkbox component
Radio component with RadioGroup
Select component
Cards & Containers
Basic Card
This is a basic card with some content. Cards are used to group related information.
Basic card with shadow
Outlined Card
This is an outlined card with a border instead of a shadow.
Outlined card with border
Images & Media
Standard image
Square image (avatar)
Image placeholder
Alerts & Notifications
Success alert: Your changes have been saved successfully.
Success alert
Error alert: There was a problem processing your request.
Error alert
Warning alert: Please review your information before continuing.
Warning alert
Info alert: The system will be under maintenance on Sunday.
Info alert
Modal Components
Modal Sizes
Click buttons to open modals of different sizes