---
title: "Awesomic design system"
variant: extended
source: https://www.awesomic.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/awesomic-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Awesomic · Design System

> Quiet monochrome framing for work that speaks

**Theme:** light · **Industry:** saas · **Source:** https://www.awesomic.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Awesomic presents its subscription-based talent marketplace with a bright, editorial interface and restrained monochrome styling. Large typography, compact conversion controls, and colorful work samples balance a clean corporate shell with creative proof.

## North star

Keep the interface calm and typographic, using monochrome structure to make vivid portfolio work the focal point.

## Overview

The page is built on a white canvas with pale gray section bands used selectively to separate problem-solving content and project showcases. Near-black headings and charcoal supporting copy create a restrained hierarchy; bright color is largely supplied by client work and portfolio imagery rather than interface chrome. Cosmica is used throughout, from oversized, lightly set hero messaging to compact navigation and practical body copy. The hero pairs a broad left-aligned headline with a right-side explanation and email form, then uses statistics and client marks as a quiet credibility row. Rounded cards, pills, and buttons soften the otherwise clean geometry. Content alternates between spacious white sections and softly tinted bands, while image-heavy grids bring energy and evidence of craft. Keep controls legible and understated, and let real work provide the strongest color and visual texture.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Primary page canvas, open hero area, and light button or card surfaces. |
| Mist Gray | `#f4f4f5` | `--color-mist-gray` | surface | Soft section bands and fading overlays behind selected content and project galleries. |
| Slate Copy | `#3f3f46` | `--color-slate-copy` | neutral | Muted body copy, navigation labels, talent details, and project descriptions. |
| Badge Orange | `#ff5a00` | `--color-badge-orange` | accent | Small badge detail; treat as a minor signal rather than a broad interface color. |
| Cloud Panel | `#ececee` | `--color-cloud-panel` | surface | Filled service cards and secondary content panels. |
| Ink Black | `#18181b` | `--color-ink-black` | brand | Headings, dark text, navigation emphasis, and text on light controls. |
| Stone Edge | `#d4d4d8` | `--color-stone-edge` | surface | Subtle card outlines and muted project or content boundaries. |
| Hairline Gray | `#e4e4e7` | `--color-hairline-gray` | semantic | Fine borders and delicate separators around cards, badges, and controls. |
| Pitch Button | `#09090b` | `--color-pitch-button` | brand | High-priority dark CTA backgrounds, especially Book demo. |
| Deep Graphite | `#27272a` | `--color-deep-graphite` | neutral | Occasional dark text or card detail; not a dominant page surface. |
| Pop Magenta | `#fe45e2` | `--color-pop-magenta` | accent | Sparse accent detail; keep secondary to the portfolio imagery. |
| Ash Gray | `#a1a1aa` | `--color-ash-gray` | neutral | Low-emphasis text and subdued supporting labels. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f5` (Mist Gray) · `--color-surface-2` → `#ececee` (Cloud Panel) · `--color-surface-3` → `#d4d4d8` (Stone Edge) · `--color-text` → `#18181b` (Ink Black) · `--color-text-muted` → `#3f3f46` (Slate Copy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e4e4e7` (Hairline Gray) · `--color-accent` → `#fe45e2` (Pop Magenta)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#18181b` | `#ffffff` | 17.72:1 | AAA |
| `#18181b` | `#f4f4f5` | 16.12:1 | AAA |
| `#18181b` | `#ececee` | 15.02:1 | AAA |
| `#18181b` | `#d4d4d8` | 11.99:1 | AAA |
| `#3f3f46` | `#ffffff` | 10.44:1 | AAA |
| `#3f3f46` | `#f4f4f5` | 9.5:1 | AAA |
| `#3f3f46` | `#ececee` | 8.85:1 | AAA |
| `#3f3f46` | `#d4d4d8` | 7.07:1 | AAA |
| `#ffffff` | `#f4f4f5` | 1.1:1 | fail |
| `#ffffff` | `#ececee` | 1.18:1 | fail |

### Gradients

- `linear-gradient(rgba(244, 244, 245, 0), rgba(244, 244, 245, 0.67) 21%, rgb(244, 244, 245) 44%)`
- `linear-gradient(270deg, rgba(244, 244, 245, 0), rgba(255, 255, 255, 0.68) 50%, rgb(255, 255, 255))`
- `linear-gradient(90deg, rgba(244, 244, 245, 0), rgba(255, 255, 255, 0.68) 50%, rgb(255, 255, 255))`
- `linear-gradient(270deg, rgba(244, 244, 245, 0), rgba(244, 244, 245, 0.68) 50%, rgb(244, 244, 245))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Cosmica | `--font-body` | webfont | 400, 600, 300, 700, 500 | Site-wide typeface for display headings, navigation, body text, buttons, and labels. | DM Sans |

- **Cosmica:** Use a clean sans-serif feel; headings are semibold, body regular, and navigation or controls compact at medium weight. Avoid decorative casing.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.12 | 0 | — | Cosmica | Oversized hero or high-impact campaign headline. |
| h1 | 56px | 600 | 1.28 | 0 | — | Cosmica | Primary page headline and major section title. |
| h2 | 40px | 600 | 1.28 | 0 | — | Cosmica | Section headings such as pricing or problem statements. |
| h3 | 32px | 700 | 1.5 | 0 | — | Cosmica | Prominent card or feature titles. |
| h4 | 20px | 600 | 1.56 | 0 | — | Cosmica | Compact subheadings and card labels. |
| body | 16px | 400 | 1.5 | 0 | — | Cosmica | Supporting paragraphs, explanations, and standard interface copy. |
| caption | 13px | 400 | 1.5 | 0 | — | Cosmica | Fine-print notes, metadata, and compact supporting labels. |
| nav | 13px | 500 | 1.25 | 0 | — | Cosmica | Header links and compact navigation controls. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32 px.
- Section rhythm 80px · element gap 12px · card padding 24px · max content width 1280px.

Use a centered content frame with a measured maximum width of 1280px and comfortable density. The hero is a two-column composition with left-aligned display copy and a right-side explanatory form; credibility metrics sit beneath it. Long-form sections alternate full-width bands and modular card or image grids. Preserve generous section breathing room, with measured section gaps around 80px and tighter element groupings around 12px. Keep text aligned to the start except for centered process content.

## Shape & elevation

- Radius: button `14px` · input `14px` · card `36px` · media `12px` · badge `12px` · nav `14px` · link `36px` · xs `10px` · sm `12px` · md `14px` · lg `16px` · xl `24px` · 2xl `28px` · pill `9999px`
- Shadow `inset` (button, other): `rgba(255, 255, 255, 0.5) 0px 0.5px 0px 0px inset, rgba(117, 123, 133, 0.4) 0px 9px 14px -5px inset, rgb(44, 46, 52) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.14) 0px 4px 6px 0px`
- Shadow `inset-2` (other, link, button): `rgb(255, 255, 255) 0px 0.5px 0px 0px inset`
- Shadow `inset-3` (other, button): `rgb(228, 228, 231) 0px 1px 0px 0px inset`
- Shadow `hairline` (card): `rgb(228, 228, 231) 0px -1px 0px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.04) 0px 4px 12px 0px`
- Motion: standard transition `0.25s ease` on interactive elements.

Most content sits flat on white or pale gray surfaces, with fine gray borders defining card edges. Reserve visible shadow for dark primary CTAs and a few raised controls; their inset highlight and soft outer shadow give them a tactile, polished finish. Use gentle gradients mainly as fades over galleries, not as decorative fills.

## Imagery

Use portfolio and client-work imagery as the main source of saturated color, including interface mockups, branding, and creative deliverables. Frame samples in rounded cards and broad horizontal galleries; avoid adding decorative imagery that competes with the work. The first viewport includes a cropped horizontal work strip below the hero. Talent portraits and customer marks support credibility, while the broader page also includes video content.

## Components

### Header navigation

Compact Cosmica links across the top with dark text, a dark rounded Call me now control, and a separate Book demo action.

### Hero lead form

Large left-aligned headline paired with explanatory copy and an email input ending in a dark Book demo button.

### Credibility row

Project and customer metrics sit beneath the hero beside subdued customer logos.

### Primary CTA

Near-black button with white label, rounded 16px corners, and measured inset highlight plus soft shadow.

### Service cards

Rounded service panels use pale gray fills, compact supporting text, and image-led examples.

### Portfolio cards

Large rounded project tiles and galleries use subtle borders and let the supplied work determine their color.

### Badges and tags

Small outlined category pills use delicate hairlines and compact Cosmica labels.

### Measured component styles

- **Primary button** (“Book demo”): background #09090b · text #ffffff · border 1px solid #ffffff · radius 16px · padding 14px 18px · 500 15px Cosmica · shadow rgba(255, 255, 255, 0.5) 0px 0.5px 0px 0px inset, rgba(117, 123, 133, 0.4) 0px 9
- **Secondary button** (“More details”): background #fafafa · text #18181b · border 1px solid #ffffff · radius 14px · padding 12px 16px · 500 13px Cosmica
- **Link** (“Perseus Defense: micro-missiles for Coun”): transparent background · text #3f3f46 · radius 36px · padding 0px · 400 14px Cosmica
- **Input**: transparent background · text #333333 · border 1px solid · radius 14px · padding 12px 12px 12px 16px · 400 15px Cosmica
- **Card** (“Software development Frontend & Backend ”): background #ececee · text #3f3f46 · radius 28px · padding 24px · 400 14px Cosmica
- **Badge** (“Web”): transparent background · text #ffffff · border 1px solid #e4e4e7 · radius 12px · padding 4px 8px · 400 13px Cosmica
- **Navigation item** (“Our work Pricing Services Browse talents”): transparent background · text #3f3f46 · radius 0px · padding 0px · 400 14px Cosmica

## Do

- Keep the main canvas white and uncluttered.
- Use pale gray bands to distinguish selected sections.
- Set strong headlines in Cosmica-style sans typography.
- Pair wide headline content with a clear secondary column.
- Use dark, rounded CTAs for the primary conversion action.
- Let portfolio images carry most of the vivid color.
- Separate cards with subtle borders rather than heavy shadows.

## Don't

- Do not introduce a large saturated brand background.
- Do not make every section a boxed card.
- Do not use heavy shadows on ordinary content.
- Do not center all copy; preserve the editorial left alignment.
- Do not let decorative accents overpower client work.
- Do not crowd the hero form or credibility row.

## Agent prompt

Build a new page in Awesomic’s calm, work-first visual style. Use Gallery White (#ffffff) as the canvas, Mist Gray (#f4f4f5) for occasional section bands, Ink Black (#18181b) for headings, and Slate Copy (#3f3f46) for supporting text. Use Cosmica or a close sans-serif substitute such as DM Sans, with large semibold headings and compact practical body copy. Structure the page in a centered frame, using a left-aligned editorial headline, a clear secondary action or form column, and generous section spacing. Use rounded cards, fine Hairline Gray (#e4e4e7) borders, and near-black CTA buttons in Pitch Button (#09090b). Keep the UI mostly monochrome; let portfolio images supply the color. Use shadows sparingly and avoid decorative gradients except for image fades.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two columns: large left headline; supporting copy and email form on the right, followed by metrics and logos. | email lead capture, Book demo CTA, trust signals | oversized headline, dark pill button, logo row |
| 2 | category-nav | Wide horizontal strip of image-led service cards in a multi-column grid. | browse service categories, visual scanning | rounded image cards, mixed light and dark panels |
| 3 | other | Single-column spacer between the service strip and pricing content. | visual breathing room | open white canvas |
| 4 | pricing | Four-column plan-selection area with a left-aligned heading and compact plan actions. | select company stage, choose working model, book demo | plan cards, rounded controls, clear CTA |
| 5 | other | Single-column white spacer beneath the plan section. | breathing room | minimal transition |
| 6 | feature-grid | Pale gray band with a left-aligned heading and three feature columns. | scan pain points, compare benefits | soft gray background, three-column feature layout |
| 7 | team | Bright multi-column talent grid with profile links and compact details. | browse talent, inspect specialties | profile cards, category labels, rounded borders |
| 8 | other | Single-column white transition area. | visual pacing | open canvas |
| 9 | testimonials | Two-column proof area with metrics, client feedback, and supporting media. | build trust, review customer evidence | testimonial content, statistics, video |
| 10 | newsletter | Pale gray two-column CTA band with copy and a lead form. | submit contact details, start a conversation | email form, dark CTA, soft background |
| 11 | gallery | Pale gray, wide multi-column project gallery with links and card actions. | explore project work, view all projects | image-heavy grid, rounded project tiles |
| 12 | other | Short single-column continuation of the pale gray gallery band. | continue browsing | section tail, soft gray field |
| 13 | feature-grid | White three-column service directory with grouped linked offerings and supporting media. | browse by service, follow category links | grouped text links, service columns |
| 14 | cta | Full-bleed media-backed block with centered consultation message and demo link. | book a consultation | full-bleed visual, single primary action |
| 15 | how-it-works | Centered heading above a two-column, numbered process explanation. | follow numbered steps, view plans | numbered steps, centered section title |

## Source CSS custom properties (selected)

```css
--_colors---gray--gray-700: #3f3f46;
--_colors---gray--gray-950: #09090b;
--_fonts---h3-size: 40px;
--_fonts---h2-size: 56px;
--_colors---white--white-100: white;
--_colors---gray--gray-300: #d4d4d8;
--_colors---white--white-20: #fff3;
--_colors---gray--gray-50: #fafafa;
--_colors---gray--gray-900: #18181b;
--_colors---white--white-90: #ffffffe6;
--_colors---gray--gray-150: #ececee;
--_colors---gray--gray-100: #f4f4f5;
--_colors---white--white-10: #ffffff1a;
--_colors---white--white-50: #ffffff80;
--_colors---white--white-80: #fffc;
--_colors---white--white-70: #ffffffb3;
--_colors---white--white-60: #fff9;
--_colors---transparent: transparent;
--_colors---gray--gray-800: #27272a;
--_colors---gray--gray-400: #a1a1aa;
--_colors---gray--gray-600: #52525b;
--_colors---gray--gray-500: #71717a;
--_colors---gray--gray-200: #e4e4e7;
--_colors---orange: #ff5a00;
--_fonts---pseo-heading: 56px;
--_fonts---h2-line-height: 128%;
--_colors---white--white-40: #fff6;
--_colors---white--white-30: #ffffff4d;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/awesomic-io