Design Tokens

Buttons let users take action—like submitting a form or navigating to a page. We use two different styles (standard and arrow) to guide attention and ensure consistency across components.

Icons are small visuals that represent actions, items, or ideas, making our site easier to use and navigate. We use different sizes based on context, and all icons come from the Font Awesome icon library to ensure consistency and flexibility.

Radio buttons let users select one option from a list. They’re important for guiding clear, single-choice decisions—like selecting a category or preference—ensuring users don’t choose conflicting options.

Rounded edges can be applied for a softer, modern look. Softer edges are easier on the eyes and enhance touch interactions. We use four levels of roundness, depending on the size of the component.

Tags are small labels used to categorize or highlight key information, such as topics, departments, or filters.

A toggle switch is a control that lets users switch between two states. In this case, it controls whether all content sections are expanded or collapsed. This saves time when users want to view or hide multiple sections at once.

Typography is the design and arrangement of text, playing a key role in nearly every component on the website—from headings and body text to buttons and labels. It ensures readability, establishes visual hierarchy, and reinforces brand identity. Our typography system includes different variables for desktop and mobile to maintain clarity and consistency across screen sizes, adapting font sizes, line heights, and spacing for optimal user experience.