Awesomic

Overview

Awesomic is a B2B talent marketplace that bridges the gap between enterprises seeking specialized creative and technical talent and vetted professionals ready to deliver. The brand aesthetic is **Minimalist Professionalism**—a clean, light-forward design language that prioritizes clarity and trust over visual complexity. The interface uses a predominantly white canvas (#ffffff) with deep charcoal accents (#09090b) to establish authority, complemented by subtle gradient accents in blue-purple tones (#608acb, #9696d3) that signal innovation and approachability. The emotional response is calm confidence: users feel they're in capable hands, supported by a system designed for speed and transparency.

The brand voice is direct, conversational, and solution-oriented. Awesomic speaks to busy founders and product leaders who value efficiency over flourish. Vocabulary patterns emphasize action ("Match," "Deliver," "Launch") and outcome ("Done," "Speed," "Quality"). The tone avoids corporate jargon while maintaining professionalism—think "Stop searching for pro designers" rather than "Leverage our comprehensive talent acquisition platform." Example sentence in brand voice: "Get your design done in 24 hours. No hiring overhead. No surprises."

Colors

The color system is built on a **light-first, trust-driven** foundation. Primary (#09090b, near-black) is reserved for CTAs, navigation, and high-emphasis text—it commands attention without aggression. The surface stack progresses from pure white (#ffffff) through subtle grays (#f4f4f5, #e4e4e7, #d4d4d8) to create visual hierarchy through luminosity rather than color saturation. Secondary (#608acb, a muted corporate blue) and Tertiary (#9696d3, a soft periwinkle) are used sparingly for accent elements, badges, and gradient overlays—they appear in hero text gradients and supporting UI to signal the brand's modern, design-forward positioning without overwhelming the interface. Error (#ff5a00, a warm orange) is used for alerts and status indicators, providing warmth and urgency without harshn

Typography

The type system centers on **Cosmica**, a custom geometric sans-serif that balances warmth with precision. Display (64px, 600 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) breaks up content sections; Body-md (16px, 400 weight, 24px line-height) is the workhorse for product copy and descriptions, set at a comfortable 1.5 line-height ratio for scannability. Label-md (15px, 500 weight) is applied to buttons and form labels with 0.01em tracking to add subtle emphasis. The weight hierarchy is restrained—only two weights (400 and 600) are used in body copy to avoid visual noise. On small labels over busy backgrounds or gradient overlays, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to ensure legibility. The system avoids serif fonts e

Layout

The layout follows a **12-column fluid grid** with a max-width of 1280px (container-max-width: 1280px), centered on viewport. Sections use lg spacing (40px) for vertical rhythm between major content blocks, md spacing (24px) for component grouping, and sm spacing (12px) for internal element separation. The gutter (24px on desktop, 16px on tablet) provides breathing room around content. Hero sections span full-width with asymmetric layouts—the headline occupies 60% of the grid on desktop, allowing the email input and CTA to anchor the right column. Card-based sections (e.g., "Why teams choose Awesomic") use a 3-column grid at desktop, collapsing to 1 column on mobile. White-space is generous: sections are separated by 64px (xl spacing) vertically, and internal padding within cards is consis

Elevation & Depth

Depth is conveyed through **subtle layering and soft shadows** rather than dramatic elevation changes. Level 1 (Base): the white background (#ffffff) with no shadow. Level 2 (Cards & Containers): surface-container-lowest (#f4f4f5) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift. Level 3 (Modals & Overlays): surface-container-low (#ececee) with box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) and a 1.5px border at rgba(152, 150, 210, 0.1) to add a subtle purple accent line. Hover states on buttons transition to a layered shadow: inset 0 9px 14px -5px rgba(255, 255, 255, 0.5) (lig

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used consistently but conservatively, signaling approachability without sacrificing professionalism. Buttons use 16px radius (lg), creating a friendly, clickable appearance that's distinctly modern. Input fields and smaller interactive elements use 12-14px radius (md), maintaining visual cohesion. Cards and larger containers use 20px radius (xl) for a softer, more inviting feel. The full radius (9999px) is reserved for badges and pill-shaped elements. This graduated approach—tighter radii for inputs, looser for containers—creates

Components

Action Elements Buttons are the primary interaction driver. **button-primary** uses #09090b background with white text, 14px padding (vertical) × 18px (horizontal), 16px border-radius, and a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, the background shifts to #27272a (primary-container) and the shadow becomes inset (inset 0 9px 14px -5px rgba(255, 255, 255, 0.5)) combined with the outer shadow, creating a pressed-in effect. The transition is 250ms ease-out. **button-secondary** is transparent with a 1px border at #d0d0d0, text color #09090b, and 12px padding. On hover, the background becomes #d4d4d8 (surface-container-high) with no border change, maintaining visual restraint.

Containers & Surfaces **card** components use #f4f4f5 (surface-container-lowest) background, 24

Do's and Don'ts

**Do**

• Do use the primary color (#09090b) exclusively for CTAs, navigation, and high-emphasis states—never dilute it with secondary uses.
• Do maintain 24px (md spacing) as the default padding inside cards and containers; it's the visual anchor of the system.
• Do apply the soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all elevated surfaces—it's the signature depth treatment.
• Do use Cosmica at 600 weight for headlines and 400 weight for body; avoid mixing weights within a single text block.
• Do preserve the white background (#ffffff) as the dominant surface; the subtle gray stack (#f4f4f5 → #e4e4e7) is for secondary containers only.

**Don't**

• Don't use the secondary (#608acb) or tertiary (#9696d3) colors as primary CTAs—they're accent colors for gradients, badges, and supporting UI only.
• Don't apply border-radius smaller than 6px (sm) to interactive elements; it reads as harsh and contradicts the approachable brand voice.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds—always use the on-* color tokens (e.g., on-primary, on-secondary).
• Don't exceed 40px (lg spacing) for internal component padding; it creates visual bloat and breaks the rhythm.
• Don't mix Cosmica with system fonts (Arial, Helvetica) in the same component—always load the full Cosmica family via @font-face.