FIXIO

Overview

FIXIO is a marketplace platform that demystifies mobile device repair by connecting users with trusted local repair shops. The brand serves consumers seeking transparent, comparable repair options with expert guidance—transforming a fragmented, opaque service industry into a streamlined digital experience. The aesthetic is "Accessible Clarity": a clean, light-filled interface with purposeful color accents (vibrant green for primary actions, professional blue for secondary navigation, warm orange for tertiary highlights) that guide users through diagnostic flows and shop discovery without overwhelming them. The design philosophy prioritizes trust through simplicity: ample whitespace (minimum 24px gutters), high-contrast typography (800-weight headlines on white), and consistent micro-interactions that feel responsive and human.

The brand voice is direct, reassuring, and jargon-free. FIXIO speaks to users as peers, not technicians—explaining repair processes in plain language, acknowledging frustration without condescension, and celebrating solutions. Tone examples: "Ready to fix?" (conversational, action-oriented), "Discover local repair shops for smartphones, tablets, PCs and other smart devices" (inclusive, concrete). The vocabulary avoids corporate buzzwords; instead, it uses concrete nouns ("shops," "repairs," "devices") and active verbs ("compare," "explore," "discover"). The brand personality is optimistic but grounded—it promises clarity and speed, not miracles.

Colors

FIXIO's color system balances a neutral, trust-building foundation with three strategic accent colors that each serve a distinct functional role. The surface stack is anchored in pure white (#ffffff) for maximum clarity and accessibility; secondary surfaces use a carefully calibrated gray scale (surface-container-low: #f5f5f5, surface-container: #f0f0f0, surface-container-high: #ebebeb) to create subtle visual hierarchy without introducing visual noise. Text is rendered in near-black (#1a1a1a) at 800-weight for headlines and 400-weight for body copy, ensuring WCAG AAA contrast ratios (19:1 on white backgrounds).

The three accent colors are: Primary Green (#22c55e) for all call-to-action buttons, success states, and affirmative interactions—this is the "go" color, used sparingly but promin

Typography

FIXIO's type system uses Inter exclusively, a geometric sans-serif that balances warmth with technical precision—appropriate for a service marketplace that must feel both approachable and competent. The hierarchy spans eight levels: Display (56px, 800-weight) for hero headlines; Headline-lg (32px, 700-weight) for section titles; Headline-md (28px, 700-weight) for subsections; Title-lg (20px, 600-weight) for card headers and form labels; Body-lg (18px, 400-weight) for hero copy and long-form content; Body-md (16px, 400-weight) for standard body text and UI labels; Label-md (14px, 600-weight) for button text, badges, and form hints; Label-sm (12px, 500-weight) for secondary metadata and disabled states. Line-height is set to 1.5× font size for body text (28px for 18px body-lg) to ensure read

Layout

FIXIO uses a 12-column fluid grid with a maximum container width of 1280px, centered on the viewport. The page rhythm is built on a semantic spacing scale: xs (4px) for micro-interactions and icon spacing, sm (12px) for component internal padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section uses full-width background imagery (teal-toned device repair photo) with a semi-transparent dark overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility; the hero copy and form inputs are contained in a left-aligned column occupying 45% of the viewport width, leaving 55% for the background image. Below the hero, sections stack vertically with lg (40px) spacing between them. Cards within sections us

Elevation & Depth

FIXIO uses a restrained shadow system to create subtle depth without introducing visual clutter. The elevation scale has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements like chips and list items; md (0 4px 12px rgba(0, 0, 0, 0.1)) for cards, input fields, and standard UI surfaces; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals, dropdowns, and elevated overlays. Cards in the "Popular Services" section use md elevation by default and transition to lg on hover (transition: box-shadow 200ms ease-out). The hero image uses a subtle 0 4px 12px rgba(0, 0, 0,

Shapes

FIXIO's shape language is "Soft-Technical Pragmatism": rounded corners are used strategically to soften the interface without sacrificing clarity or visual hierarchy. Buttons use full-radius (9999px) to create a pill-shaped form that feels approachable and clickable; this is the most prominent shape on the page, appearing on the primary CTA "Find Repair Shop" (44px height, 12px 24px padding, 9999px radius) and secondary CTAs. Cards and containers use md radius (12px) to create a subtle roundedness that feels modern without being playful; this is applied to the form input containers, service ch

Components

Action Elements Buttons are the primary interactive element and use a consistent 44px height with 12px 24px padding. Primary buttons ("Find Repair Shop") use full-radius (9999px), background: {colors.primary} (#22c55e), text: {colors.on-primary} (#ffffff), and label-md typography (14px, 600-weight). On hover, the background darkens to #16a34a and a 0 4px 12px rgba(34, 197, 94, 0.2) shadow appears; the transition is 200ms ease-out. Secondary buttons ("Log In", "Explore Shops") use the same dimensions but with background: {colors.secondary} (#0060c8) and on-hover background: #0052a3. Ghost buttons ("Log in to see your recent activity") use transparent background, text: {colors.on-surface}, a 1px solid {colors.outline-variant} border, and md radius (12px); on hover, background becomes {co

Do's and Don'ts

**Do**

• Do use primary green (#22c55e) exclusively for affirmative, forward-moving actions (submit, confirm, find, explore); never use it for secondary or destructive actions.
• Do maintain minimum 24px gutters (md spacing) between major sections and 12px (sm spacing) between form fields to create visual breathing room and reduce cognitive load.
• Do apply 800-weight Inter to all headlines (h1, h2, h3) and 600-weight to labels and button text; never mix weights within a single component.
• Do use full-radius (9999px) exclusively for primary CTAs and chips; use md-radius (12px) for cards and containers; use DEFAULT-radius (8px) for inputs to maintain visual hierarchy.
• Do test all interactive elements with keyboard navigation (Tab, Enter, Escape) and ensure focus rings are visible (0 0 0 3px rgba(0, 96, 200, 0.1) for secondary blue focus).
• Do use the gray scale (surface-container-low through surface-container-highest) to create subtle visual hierarchy without introducing new colors; never use arbitrary grays outside the defined scale.

**Don't**

• Don't use primary green for anything other than affirmative actions; avoid using it for informational badges, warnings, or secondary navigation.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) to any element except modals and overlays; excessive shadows create visual clutter and reduce perceived clarity.
• Don't mix font families; Inter is the only typeface used in the system. Never fall back to system fonts or serif typefaces.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px); arbitrary radius values break visual consistency.
• Don't render text smaller than 12px (label-sm) on any surface; smaller text violates accessibility standards and reduces readability on mobile devices.
• Don't use opacity or transparency for primary text; always use solid colors from the on-surface or on-surface-variant palette to maintain WCAG AAA contrast ratios (19:1 minimum).