Clarion Technologies

Overview

Clarion Technologies is an enterprise software development company that transforms complex technical challenges into measurable business outcomes. The design system embodies a "Results-Driven Warmth" aesthetic—combining the precision and trust of corporate professionalism with the energy and approachability of a modern technology partner. The brand serves global enterprises seeking dedicated, high-performance engineering teams across AI, cloud-native, and data domains. The visual language uses a vibrant coral-orange accent (#f45f3e) against clean white surfaces to convey both technical confidence and human-centered innovation. Every interaction feels purposeful and efficient, never cluttered.

The brand voice is direct, evidence-based, and conversational—avoiding hype while celebrating real outcomes. Tone: confident but not arrogant, technical but not jargon-heavy, warm but professional. Example sentence: "We deliver 35% faster—not because we cut corners, but because we've built the right team for your problem."

Colors

The color system is anchored by a warm, energetic primary coral (#f45f3e) used exclusively for calls-to-action, interactive states, and brand-critical moments. This accent appears on the "Book a Slot" and "Contact Us" buttons, slider indicators, and hover states—drawing the eye to conversion moments without overwhelming the interface. Secondary and tertiary oranges (#fe7a0c, #ff6600) provide depth for gradients and supporting UI elements, creating a cohesive warm palette. The surface stack uses pure white (#ffffff) as the base with carefully calibrated grays for hierarchy: surface-container-low (#f0f0f0) for subtle backgrounds, surface-container-high (#e8e8e8) for hover states on cards, and on-surface (#262626) for primary text. Outline colors (#cccccc, #d0d0d0) define subtle borders and d

Typography

The type system uses three complementary families to establish hierarchy and personality: Raleway (display, headlines) for bold, confident messaging; Poppins (titles, labels) for approachable secondary content; and Roboto (body, inputs) for clarity and legibility at small sizes. Display text (60px, 700 weight, -0.04em letter-spacing) commands attention on hero sections, while headline-lg (44px, 600 weight) anchors major sections like "Your Partner in Proven, High-Performance Engineering." Body text (16px, 400 weight, 24px line-height) maintains readability across paragraphs and descriptions. Labels and form text use Roboto at 14px with 0.01em letter-spacing to ensure precision in interactive elements. On small labels over busy backgrounds (e.g., badge text), apply text-shadow: 0 1px 2px rg

Layout

The page uses a 12-column fluid grid with a maximum container width of 1280px, allowing content to scale gracefully from mobile (320px) to desktop (1920px+). Sections are separated using the lg spacing token (40px) for major breaks and md spacing (24px) for subsection rhythm. The hero banner occupies 180px top padding and 130px bottom padding (desktop), creating breathing room around the headline and CTA. Card-based sections (e.g., service offerings) use a 2-column layout on desktop, 1 column on tablet, with 40px gap between cards. Form inputs and fields use the gutter token (24px) for horizontal spacing and sm spacing (12px) for vertical field separation. The container max-width of 1280px ensures text remains scannable and images maintain visual impact without excessive stretching. White-

Elevation & Depth

Visual hierarchy is achieved through a three-tier shadow system that creates subtle depth without visual clutter. Level 1 (Base): flat surfaces with no shadow, used for the main white background and input fields. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to service cards, testimonial blocks, and form containers to lift them slightly above the background. Level 3 (Elevated/Hover): box-shadow: 0 11px 47.5px rgba(0, 0, 0, 0.07), used on card hover states and modal overlays to create a sense of focus and interactivity. The shadow values are intentionally soft (l

Shapes

The shape philosophy is "Technical Precision with Approachability"—using minimal, sharp corners (4px border-radius) as the default to convey professionalism and engineering rigor, while occasionally employing rounded corners (9px, 12px) on cards and service blocks to soften the interface and invite engagement. Buttons use 0px border-radius (sharp corners) to emphasize their role as decisive, action-oriented elements. Input fields use 4px border-radius for a clean, contained appearance. Service cards and testimonial blocks use 9px border-radius to create a subtle visual distinction and encourag

Components

Action Elements Buttons are the primary conversion mechanism and use a bold, gradient-enhanced design. The primary button (button-primary) features a solid coral background (#f45f3e), white text, 8px vertical and 40px horizontal padding, and 0px border-radius for a sharp, decisive appearance. On hover, the background transitions to the lighter primary-container (#fb9860) with a smooth 0.3s ease transition, signaling interactivity without jarring the user. The active state applies an inset shadow (box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15)) to create a pressed effect. Secondary buttons use a transparent background with a 1px coral border and coral text, allowing them to sit comfortably alongside primary CTAs without competing for attention. Form submit buttons use a linear gradient

Do's and Don'ts

**Do**

• Do use the primary coral (#f45f3e) exclusively for CTAs, interactive states, and moments that demand user action—never dilute its impact by overusing it.
• Do maintain 24px gutter spacing between major sections and 12px between form fields to create visual rhythm and prevent cognitive overload.
• Do apply smooth transitions (0.2s–0.3s ease) to all interactive elements (buttons, cards, inputs) to signal interactivity without feeling sluggish.
• Do use Raleway for headlines and Roboto for body text to establish clear hierarchy; never mix serif and sans-serif families in the same section.
• Do apply the three-tier shadow system consistently: no shadow for base surfaces, 0 4px 12px for standard cards, 0 11px 47.5px for elevated/hover states.

**Don't**

• Don't use the primary coral for backgrounds, body text, or non-interactive elements—it's reserved for CTAs and must remain the visual focal point.
• Don't apply border-radius greater than 4px to buttons; sharp corners reinforce their decisive, action-oriented nature.
• Don't exceed 1280px container width; wider layouts dilute the visual impact of content and reduce scanability.
• Don't use more than two font families in a single section; stick to the Raleway/Poppins/Roboto trio to maintain typographic cohesion.
• Don't apply hard shadows (high alpha, small blur) or multiple shadow layers; the system uses soft, single-layer shadows to maintain a clean, modern aesthetic.