Elements

Base System provides several elements to cover common project needs

Overview

The Base System provides several common web design elements to get you started.

Buttons

The Base System provides primary and secondary buttons with large variants. We want our padding and text sizes to be consistent for our button variants. We can avoid using combo classes and share our button styles using variables.

Base Classes	Property
Button Primary	Primary Button
Button Secondary	Secondary Button
Button Primary Large	Large Primary Button
Button Secondary Large	Large Secondary Button

Button Icons	Property
Button Icon Left	Left icon for buttons
Button Icon Right	Right icon for buttons

Adding Icons

Buttons have flex and gap spacing applied by default so icons can easily be added or removed. If you want to remove some padding from the icon side for visual harmony, you can add a combo class of Icon Left or Icon Right.

---

Form Elements

Form utility elements start with the prefix "Form" so we can easily search for all our form related classes.

Class Name	Property
Form Field Label	Default <label> style
Form Input Field	Default <input> style
Form Text Area	Variant of <input> for <textarea>
Form Select	Variant of <input> for <select>
Form Checkbox	Default <input type="checkbox">
Form Radio	Default <input type="radio">
Form Success Message
Form Error Message

---

Icons

Icon classes can be applied to both images and code embeds. Where possible we recommend using SVGs as they have a smaller file size, and can control their colors inside the designer. This is especially useful for hover effects.

Class Name	Size
Icon X Large	32x32(px)
Icon Large	28x28(px)
Icon Regular	24x24(px)
Icon Small	20x20(px)
Icon X Small	16x16(px)
Icon	No fixed size, used to center icon.

---

Optional Classes

Avatars

Avatars can be used to display user images, useful for testimonials, blog authors, team members etc.

Class Name	Size (px)	Border Radius
Avatar X Large	64px	100%
Avatar Large	52px	100%
Avatar Regular	42px	100%
Avatar Small	32px	100%
Avatar X Small	24px	100%

Badges

Badges are used to highlight key information, indicate status, or categorize content.

Name	Text & Line Size	Padding Top & Bottom	Padding Right & Left
Badge Large	16px / 24px	4px	10px
Badge Regular	14px / 16px	4px	8px
Badge Small	12px / 16px	4px	8px

Images

The 'Image Cover' utility class is used to fill image wrapper while maintaining correct proportions.

Name	Width	Height	Fit
Image Cover	100%	100%	Cover