Rounx

Overview

Rounx is a modern freelance job marketplace that connects remote workers with vetted opportunities through intelligent search and personalized discovery. The platform serves independent professionals seeking flexible, project-based work across diverse industries. The design aesthetic is "Accessible Clarity"—a clean, light-first interface that prioritizes information hierarchy and task completion over visual ornamentation. The UI evokes trust and professionalism through consistent spacing (24px gutters, 8px unit grid), a restrained color palette anchored by a vibrant cobalt accent (#336def), and generous whitespace that reduces cognitive load. Users feel guided, not overwhelmed, by the interface.

The brand voice is direct, encouraging, and pragmatic. Rounx speaks to freelancers as peers, not customers—the tone is conversational but authoritative, avoiding hype and jargon. Vocabulary emphasizes agency ("find," "discover," "match") and opportunity ("next project," "your next role"). Example sentence in brand voice: "Browse thousands of remote roles, filter by your skills, and land your next project in minutes."

Colors

The color system is built on a light, neutral foundation with a single, high-contrast primary accent. **Primary (#336def)** is the signature cobalt blue used exclusively for interactive elements: call-to-action buttons ("Sign up," "Accept All"), active filter states, links, and focus indicators. This color appears in approximately 95% of interactive states and is the visual anchor that guides user attention. **Secondary (#234ca7)** is a deeper navy used for button hover states and secondary emphasis, creating a smooth tonal progression from the primary. **Tertiary (#d32f2f)** is a system red reserved for error states, alerts, and destructive actions—it appears sparingly to maintain its semantic weight. **Surface colors** form a neutral stack: pure white (#ffffff) for primary surfaces, ligh

Typography

The type system uses Roboto exclusively, a humanist sans-serif that balances approachability with professional credibility. The hierarchy spans six levels: Display (60px, 700 weight) for hero headlines, Headline-lg (40px, 600) for major section titles, Headline-md (28px, 600) for subsections, Title-lg (20px, 600) for card headers, Body-lg (18px, 400) for prominent body text, Body-md (16px, 400) for standard body copy, Label-md (14px, 600) for button text and form labels, and Label-sm (12px, 500) for captions and metadata. Letter-spacing ranges from -0.04em (display) to +0.05em (label-sm), tightening large text for visual weight and loosening small text for legibility. Line-height is consistently generous (1.5 for body, 1.4 for headlines) to support rapid scanning. On small labels over busy

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The primary gutter is 24px (md spacing token), applied consistently between columns and as outer margins on desktop. On mobile (< 768px), gutters reduce to 12px (sm spacing token). Container padding follows the same scale: 40px (lg) on desktop, 24px (md) on tablet, 12px (sm) on mobile. Section separation uses 64px (xl spacing) vertically, creating clear rhythm between major content blocks. The search bar and filter row sit at 100% width within the container, with the search input using 56px height and 16px vertical padding to create a prominent, tappable target. Job cards use 0px padding (no internal spacing) but are separated by 16px gaps in a vertical list. Whitespace is treated as a design mater

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color or blur. The system uses three elevation levels: **Level 1 (sm)** applies to cards and input fields with `box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24)`, creating a barely-perceptible lift. **Level 2 (md)** is used on hover states and secondary containers with `0px 3px 6px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.12)`, signaling interactivity. **Level 3 (lg)** applies to modals and active buttons with `0px 10px 20px rgba(0, 0, 0, 0.15), 0px 3px 6px rgba(0, 0, 0, 0.10)`, creating clea

Shapes

The shape philosophy is **"Soft Technical"**—rounded corners are used strategically to soften the interface without sacrificing clarity or hierarchy. Buttons use full-rounded (border-radius: 9999px) to signal primary affordance and create a pill-shaped, inviting form. Input fields and search bars also use full-rounded (56px height, 20px padding) to emphasize their role as entry points. Cards and containers use small-rounded (4px) to maintain a structured, organized feel—this subtle radius prevents the interface from feeling too rigid while keeping content clearly delineated. Filter chips use m

Components

Action Elements

**Buttons** are the primary interactive element and come in three variants. **Button-primary** uses the cobalt primary color (#336def) with white text, full-rounded corners (9999px), 10px vertical / 18px horizontal padding, and 40px height. On hover, the background shifts to secondary (#234ca7) and shadow elevates to md level. On active/press, the background darkens to #1a3a7a with lg-level shadow. All state transitions use 250ms cubic-bezier(0.4, 0, 0.2, 1) timing. **Button-secondary** uses a light gray background (#e9ecef) with dark text (#1d1d1f), a 1px outline-variant border, and the same padding/height as primary. On hover, the background deepens to #e0e0e0 and text color shifts to primary (#336def). **Button-text** has no background, uses primary text color, and

Do's and Don'ts

**Do**

• Do use the primary cobalt (#336def) exclusively for CTAs, active states, and focus indicators—never use it for decorative or background elements.
• Do maintain 24px gutters and 8px unit spacing throughout; this creates a predictable, scannable layout that reduces cognitive load.
• Do apply full-rounded (9999px) to all primary buttons and input fields to signal high interactivity and approachability.
• Do use Roboto 600 weight (Label-md) for all button and link text to create clear affordance distinction from body copy.
• Do transition all interactive state changes (hover, active, focus) over 250ms using cubic-bezier(0.4, 0, 0.2, 1) for a responsive, professional feel.
• Do reserve the tertiary red (#d32f2f) for error states and destructive actions only—never use it for neutral or positive messaging.

**Don't**

• Don't use multiple accent colors or gradients; the interface relies on a single primary color for visual clarity and brand recognition.
• Don't apply shadows larger than lg-level (0px 10px 20px) or use blur effects on surfaces—this maintains the light, airy aesthetic and prevents visual heaviness.
• Don't use border-radius smaller than 4px on cards or containers; this can feel overly rigid and conflicts with the soft-technical philosophy.
• Don't mix font weights within a single line of body text; use consistent 400 weight for body and 600 for labels/buttons to maintain hierarchy.
• Don't apply padding inside cards; let content define its own spacing to maintain layout flexibility and prevent awkward nesting.
• Don't use opacity or transparency for text; always use explicit color tokens (on-surface, on-surface-variant) to ensure WCAG AA contrast compliance at all sizes.