Style guide / components

Buttons

Buttons signal action. Their hierarchy must be obvious at a glance.

Primary actions are rare. Secondary actions are supportive.

Main button
Component

Button Text

Editable

Button Text

Main button Hover

Button Text

Small Link
Component

Editable

Small link hovered

Terms Link

Terms Link hovered

Forms & Inputs

Forms should feel effortless. Reduce friction. Remove unnecessary fields.

Modals

Modals interrupt flow. Use them sparingly and intentionally.

Tags / Chips

Tags provide context, not decoration.

Computer screen showing a course module titled 'Biocide Screening and Selection' with hexagon image thumbnails related to oilfield operations and a yellow hand cursor on 'Start Course' button, labeled 'Asphaltene' with UX/UI Design, LXD, and Interaction Design tags.Laptop on desk displaying charts with titles 'Career Leveling' and 'Career Roadmap' labeled Paid, below text reads Amazon Career Development Custom GPT.