Employment Hero

Employment Hero employs a vibrant, confident design language using a clean white canvas offset by a dominant, vivid violet. Typography is bold and assertive for headlines, while functional elements remain crisp and legible. Components exhibit softer, rounded edges for approachability, and subtle background tints introduce visual segmentation without heavy dividers, creating a sense of clarity and focused information presentation. Prioritize Violet Empress (#7622d7) for all primary calls-to-action and critical interactive elements. Use Saiga for all display and large headlines, applying tight letter-spacing for visual impact. Utilize DM Sans (weights 400-600) for all body text, subheadings, and interface components, preferring normal letter-spacing for legibility. Apply a 32px border-radius to all primary buttons for a soft, approachable feel. Separate content sections with subtle Whisper Lilac (#f9f5ff) background fills or by increasing vertical spacing using a 32px sectionGap. For all text, ensure sufficient contrast by pairing with Obsidian (#000000) for headlines and Near Black (#121214) for body copy on light backgrounds. Employ the AI Gradient for decorative elements such as badges or subtle background washes, to reinforce the brand's AI theme. Avoid generic system fonts for prominent headlines; Saiga is a key brand identifier. Do not use harsh, square corners; adhere to the established radii of 8px for general elements, 12px for cards, and 32px for buttons. Refrain from introducing new accent colors outside of Violet Empress (#7622d7) or Cybernetic Green (#94e022). Avoid heavy drop shadows or glows; the design system favors clean, flat surfaces and subtle background tints for hierarchy. Do not use small text sizes (below 14px DM Sans) for critical information; prioritize readability over density. Do not use black backgrounds except for specific, deeply intentional hero sections or banners where Deep Violet or Info Banner colors are preferred. Do not deviate from the defined spacing scale; maintain comfortable density with elementGap at 4px and cardPadding at 24px.