Safira Hiring

Overview

Safira Hiring is a whitelabel AI interview platform designed for HR Tech, ATS, and HRIS companies seeking rapid deployment and technical sophistication. The design system embodies 'Warm Minimalism'—a fusion of approachable, human-centered aesthetics with clean technical precision. The brand personality is confident yet accessible: it speaks to enterprise buyers with the clarity of a technical founder, never condescending, always solution-focused. The UI evokes trust through generous whitespace (90% of the page is surface or surface-container), a vibrant orange accent that signals action and energy, and carefully chosen green and blue supporting colors for status and secondary interactions. The emotional response is one of clarity and momentum: users feel they can launch fast without sacrificing quality.

The voice is direct, outcome-oriented, and occasionally playful. Safira avoids jargon-heavy copy; instead, it speaks in concrete benefits: 'Launch in 1 week, not 6-8 months.' Vocabulary leans technical (whitelabel, bias validation, load tested) but remains accessible. Example sentence in brand voice: 'Your clients get AI interviews that feel human—and you ship it before your next sprint ends.'

Colors

The color system is built on a neutral-first foundation with a bold orange primary accent. Primary (#ff6b19) is the signature brand color, used exclusively for call-to-action buttons, key links, and interactive highlights. It conveys urgency and energy without aggression—a warm, approachable orange rather than a harsh red. The primary container (#ffe6c9) provides a soft background for secondary actions and highlights, while the inverse primary (#ffb977) serves hover and focus states with a slightly deeper, more saturated tone.

Secondary (#4caf50, a vibrant green) is reserved for success states, validation badges, and positive confirmations—reinforcing the 'bias validated' and 'load tested' trust signals. Tertiary (#3b82f6, a professional blue) supports informational elements, secondary CT

Typography

The type system pairs Mona Sans (a contemporary geometric sans-serif) for headlines and display text with Inter (a highly legible humanist sans-serif) for body and label content. This pairing creates visual hierarchy through both family and weight: Mona Sans at 700 weight (headline-lg: 40px, lineHeight 48px, letterSpacing -0.02em) commands attention and conveys brand personality, while Inter at 400 weight (body-md: 16px, lineHeight 24px) ensures comfortable reading at any size. The display level (60px, 700 weight, -0.04em tracking) is reserved for hero sections and major announcements. Headline-md (28px, 700 weight) is used for section titles and card headers. Body-lg (18px, 400 weight) is applied to introductory copy and feature descriptions. Label-md (14px, 500 weight, 0.01em tracking) a

Layout

The layout system uses a 12-column fluid grid with a max-width of 1200px, centered on the viewport. The gutter spacing is 32px (4 units), providing generous breathing room between columns. Page sections are separated by lg spacing (40px) vertically, creating a clear rhythm: hero section (64px top/bottom padding), feature cards (24px padding internally), and footer (40px separation). The container max-width of 1200px ensures readability on ultra-wide displays while maintaining focus on content. Whitespace is treated as a first-class design element: the hero section uses approximately 50% of the viewport for the headline and copy, leaving the right half for the illustrated product mockup. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) between nested e

Elevation & Depth

Depth is conveyed through subtle shadow layering and strategic use of borders rather than dramatic drop shadows. The base elevation (sm: 0 1px 2px rgba(0,0,0,0.06)) is applied to interactive elements like buttons and input fields to lift them slightly from the surface. Standard cards and modals use md elevation (0 4px 12px rgba(0,0,0,0.1)), creating a clear separation from the background without visual heaviness. Elevated states (lg: 0 16px 40px rgba(0,0,0,0.12)) are reserved for hover states on cards, dropdowns, and modal overlays. All shadow transitions are 200ms ease to provide smooth feedb

Shapes

The shape philosophy is 'Soft Technical'—rounded corners are used consistently but conservatively, signaling approachability without sacrificing professional credibility. Buttons use the DEFAULT radius (6px), providing a subtle softness that feels modern without being playful. Cards and containers use lg radius (12px) or xl radius (16px) depending on prominence: standard cards use lg, while hero sections and featured containers use xl. Input fields use DEFAULT radius (6px) to align with buttons and maintain visual consistency. Badges and tags use full radius (9999px) for circular or pill-shape

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#ff6b19) background with {colors.on-primary} (white) text, 40px height, 10px vertical / 20px horizontal padding, and {rounded.DEFAULT} (6px) radius. The label-md typography (14px, 500 weight) ensures readability at this size. On hover, the background transitions to #ff8c42 (a slightly lighter, more saturated orange) over 200ms ease, providing clear feedback without changing the button's footprint. Focus states add a 2px solid outline at {colors.primary} with 2px offset. The button-secondary component uses a transparent background with {colors.on-surface} text, a 1px border at {colors.outline}, and the same padding and radius. On hover, the background becomes {colors.surfac

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff6b19) exclusively for primary CTAs and key interactive elements—it's the brand's signature accent and should never be diluted or overused.
• Do maintain at least 40px of vertical spacing (lg token) between major sections to preserve the clean, minimal aesthetic and avoid visual clutter.
• Do apply {rounded.DEFAULT} (6px) to buttons and inputs, {rounded.lg} (12px) to standard cards, and {rounded.xl} (16px) to featured containers—this consistency creates instant brand recognition.
• Do use Mona Sans (700 weight) for all headlines and Inter (400 weight) for body text—never mix weights or families within a single component.
• Do include a 1px border at {colors.outline-variant} (#cccccc) on all cards and containers to reinforce containment and improve definition on light backgrounds.

**Don't**

• Don't use {colors.primary} for body text, backgrounds, or non-interactive elements—reserve it for CTAs, links, and focus states only.
• Don't apply border-radius greater than {rounded.xl} (16px) to standard UI components; only use {rounded.full} (9999px) for badges and pill-shaped elements.
• Don't mix Mona Sans and Inter within the same headline or body section—maintain clear family separation between display/headline and body/label tiers.
• Don't apply shadows greater than {elevation.lg} (0 16px 40px rgba(0,0,0,0.12)) to any component; excessive depth contradicts the minimal aesthetic.
• Don't reduce padding below {spacing.sm} (12px) on cards or containers, and never use less than 32px (gutter) spacing between major sections—whitespace is a core brand asset.