Aboard

Aboard projects a playful, human-centered HR experience through its soft, pastel color palette and friendly, rounded interfaces. The system combines crisp, dark typography with a clean, light canvas, punctuated by cheerful accent colors and varied card backgrounds. Components are lightweight with generous padding and prominent border radii, creating an approachable and inviting visual environment. The overall design feels like a thoughtful, organized space that prioritizes user comfort and visual delight. Use Graphite Black (#000000) for all main headings and primary body text to maintain visual clarity and contrast. Apply a 99px border radius to all interactive buttons and tags to consistently convey an approachable, friendly aesthetic. Utilize Canvas White (#fafafa) as the dominant background for all main page content and primary cards. Incorporate the accent colors (Cotton Candy Pink, Misty Lavender, Aquamarine Tint, Powder Blue, Buttercup Yellow) primarily for distinct card backgrounds and decorative sections. Maintain a comfortable density with an element gap of 10px and card padding of 32px to ensure readability and spaciousness. Headers and page titles should use system-ui at appropriate sizes from the type scale with negative letter-spacing for a refined look. Use Deep Blue (#008ae8) exclusively for interactive link text and button borders to clearly signal interactivity. Avoid using the accent pastel colors for text or borders; they are reserved for background washes and decorative surfaces. Do not introduce sharp corners or small radii (less than 24px) for cards or larger containers; consistency in rounded shapes is key. Refrain from using strong, dark shadows. The system relies on light-colored borders and background variations for element separation. Do not apply the Gradient Aura to small UI elements or text; it is intended for large, impactful background sections only. Avoid deviating from the defined system-ui and sans-serif fonts; no custom fonts should be introduced. Do not use generic gray tones for interactive elements; leverage Deep Blue (#008ae8) for all actionable states. Do not clutter layouts; prioritize comfortable spacing with 10px element gaps and 32px card padding.