---
version: alpha
name: Awesomic
description: "A white page, one black pill, and a word that fades to grey."
colors:
  surface: "#FFFFFF"
  on-surface: "#09090B"
  primary: "#FF5A00"
  off-white: "#FAFAFA"
  band-grey: "#F4F4F5"
  card-grey: "#ECECEE"
  hairline: "#E4E4E7"
  card-edge: "#D4D4D8"
  ghost-word: "#A1A1AA"
  muted-ink: "#71717A"
  portrait-edge: "#52525B"
  body-ink: "#3F3F46"
  active-tab-ink: "#27272A"
  heading-ink: "#18181B"
  signal-magenta: "#FE45E2"
  button-rim: "rgba(255, 255, 255, 0.2)"
typography:
  caption:
    fontFamily: Cosmica
    fontSize: 12px
    fontWeight: 400
    lineHeight: 19.68px
    letterSpacing: 0em
  label:
    fontFamily: Cosmica
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16.25px
    letterSpacing: 0em
  tag:
    fontFamily: Cosmica
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: 0em
  body-book:
    fontFamily: Cosmica
    fontSize: 14px
    fontWeight: 400
    lineHeight: 23.52px
    letterSpacing: 0em
  body:
    fontFamily: Cosmica
    fontSize: 15px
    fontWeight: 400
    lineHeight: 21.75px
    letterSpacing: 0em
  body-large:
    fontFamily: Cosmica
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  subheading:
    fontFamily: Cosmica
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0em
  stat:
    fontFamily: Cosmica
    fontSize: 32px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: 0em
  heading-3:
    fontFamily: Cosmica
    fontSize: 40px
    fontWeight: 400
    lineHeight: 51.2px
    letterSpacing: 0em
  heading-2:
    fontFamily: Cosmica
    fontSize: 56px
    fontWeight: 400
    lineHeight: 71.68px
    letterSpacing: 0em
  display:
    fontFamily: Cosmica
    fontSize: 64px
    fontWeight: 400
    lineHeight: 71.68px
    letterSpacing: 0em
rounded:
  tag-chip-icon-image: 12px
  small-button-nav-link-input-social-squar: 14px
  large-button: 16px
  form: 24px
  inner-panel-filled-slide-case-image: 28px
  card-slide-pill-wrapper: 36px
  face-image: 40px
  section-band: 48px
  avatar: 64px
  story-bullet: 9999px
  nav-bar-social-embed: 0px
spacing:
  2xs: 2px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 12px
  2xl: 16px
  3xl: 20px
  4xl: 24px
  5xl: 28px
  6xl: 32px
  section-sm: 64px
  section-md: 80px
  section-lg: 160px
---
# Awesomic — Style Reference

> A white page, one black pill, and a word that fades to grey.

**Theme:** light

One system runs across every captured page — the marketing home, the case-study index, the gallery and the video wall share a canvas, a nav bar and a type ramp without a seam. The palette is a neutral ladder run almost to its ends: near-black ink on white, the mid-greys spent on hairlines rather than fills, so the page reads as paper with pencil rules. The signature move is subtractive — inside a display heading one word is swapped to `.text-gray-400` #A1A1AA and left there, so "All your **video** tasks done" names its own subject by withholding contrast instead of adding colour. Typography is Cosmica at weight 600 from 40px up, tracking left at `normal` at every measured size: the brand trusts scale and line-height, not tightening. Layout is a stack of rounded bands — sections carry a `48px 48px 0px 0px` radius so they slide up over one another — and the repeating object inside them tends to be a 36px-radius card with 12px-radius tags along its bottom edge.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | `--color-white-100` | Page ground and card fill both: `.review_item` and `.case-item.w-inline-block` take it with `shadow none`, separating by luminance. |
| Off-White | `#FAFAFA` | `--color-gray-50` | The quieter control fill — `.text-tag.gap-8` and small icon buttons. Use where white-on-white would vanish. |
| Band Grey | `#F4F4F5` | `--color-gray-100` | The alternating section band and footer social square. 76 fills, 8 borders, 5 gradient-stops — no text observations. |
| Card Grey | `#ECECEE` | `--color-gray-150` | Fill on `.hero-card.swiper-slide.swiper-slide-prev`, border on `.service-item.swiper-slide` — 8 fills against 36 borders. |
| Hairline | `#E4E4E7` | `--color-gray-200` | 616 of 621 observations are borders: the tag outline, and the inset top-light on tab rails. |
| Card Edge | `#D4D4D8` | `--color-gray-300` | The heavier 1px edge on `.achievements-slide.swiper-slide` and the active review slide — 20 of its 30 observations. The other 10 are fills; `.talent-slide_photo-container.w-inline-block` takes it as a plate at radius `36px` with no padding, 7 links on p1. An edge on cards, a ground behind the portraits. |
| Ghost Word | `#A1A1AA` | `--color-gray-400` | The greyed word in a display heading, `span.text-gray-400`. 26 of 29 observations are text; keep it editorial. |
| Muted Ink | `#71717A` | `--color-gray-500` | Secondary labels ("Worked with") and the resting `.one-to-one-tab` label. |
| Portrait Edge | `#52525B` | `--color-gray-600` | A border on `.approve_face-image` in the process steps. Structural, not typographic. |
| Body Ink | `#3F3F46` | `--color-gray-700` | The default text colour — 3,677 text observations against 8 fills, the fill being `.category-tag.is-featured`. |
| Active Tab Ink | `#27272A` | `--color-gray-800` | The `.one-to-one-tab.is-active` label, one step above Body Ink so selection reads without a weight change. |
| Heading Ink | `#18181B` | `--color-gray-900` | Subheads and card titles at 20px/600 (`"What is Awesomic?"`, 416 elements), and equally the 13px label ink — `"Blog" .category-tag.text-gray-900` takes it 400 times and `"Pricing" .navbar-link` 12 times. Not size-gated. |
| Action Black | `#09090B` | `--color-gray-950` | Display-heading ink and the fill of `.button.is-large.w-inline-block` — 66 text observations against 20 fills. |
| YC Orange | `#FF5A00` | `--color-orange` | All 11 observations sit on `.case-tag.yc-tag.text-white` ("YC S25"). Credit colour, not an action colour. |
| Signal Magenta | `#FE45E2` | `--color-magenta` | One painted circle, `.upd_cta-circle`. Keep it that rare or drop it. |
| Button Rim | `rgba(255, 255, 255, 0.2)` | `--color-white-20` | The 1px rim on dark buttons and the resting story bullet — a lit edge, not a border colour. |

## Tokens — Typography

### Cosmica — the entire voice: display, subhead, body, label and button, from 12px to 64px, at weight 600 for every measured heading · `--font-cosmica`
- **Substitute:** Aeonik, PP Neue Montreal, Graphik
- **Weights:** 300, 400, 500, 600, 700
- **Sizes:** 12px, 13px, 14px, 15px, 16px, 20px, 32px, 40px, 56px, 64px
- **Line height:** 1.12 at 64px (71.68px) up to 1.68 at 14px (23.52px) — the ramp inverts, tightening as it grows
- **Letter spacing:** `normal` on every measured row, from the 64px `.pseo_h1.rotating-text` down to the 12px `.case-tag.yc-tag.text-white`
- **Role:** Display, subhead, body, label and button — one family carries all of it, with 600 the heading weight at 40px, 56px and 64px alike.

### Helvetica, system-ui, sans-serif — the fallback stack behind Cosmica · `--font-fallback`
- **Substitute:** Arial, Inter, ui-sans-serif
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** not measured. The census lists Helvetica and system-ui among the families observed but gives them no carrier, no count and no size; every measured text row names Cosmica — including the two this block cited, `"Blog" .category-tag.text-gray-900` and `"Pricing" .navbar-link`. Substitution guidance only, not a painted style.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 19.68px | normal | `--text-caption` |
| Label | 13px | 16.25px | normal | `--text-label` |
| Tag | 13px | 19.5px | normal | `--text-tag` |
| Body Book | 14px | 23.52px | normal | `--text-body-book` |
| Body | 15px | 21.75px | normal | `--text-body` |
| Body Large | 16px | 24px | normal | `--text-body-lg` |
| Subheading | 20px | 30px | normal | `--text-subheading` |
| Stat | 32px | 48px | normal | `--text-stat` |
| Heading 3 | 40px | 51.2px | normal | `--text-h3` |
| Heading 2 | 56px | 71.68px | normal | `--text-h2` |
| Display | 64px | 71.68px | normal | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 2px (the smallest measured step — the 2px gap on `.review_author-info` and the 2px top padding on `.nav_new-badge.background-white`); the working rhythm is 4px  **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--spacing-2xs` |
| xs | 4px | `--spacing-xs` |
| sm | 6px | `--spacing-sm` |
| md | 8px | `--spacing-md` |
| lg | 10px | `--spacing-lg` |
| xl | 12px | `--spacing-xl` |
| 2xl | 16px | `--spacing-2xl` |
| 3xl | 20px | `--spacing-3xl` |
| 4xl | 24px | `--spacing-4xl` |
| 5xl | 28px | `--spacing-5xl` |
| 6xl | 32px | `--spacing-6xl` |
| Section sm | 64px | `--spacing-section-sm` |
| Section md | 80px | `--spacing-section-md` |
| Section lg | 160px | `--spacing-section-lg` |

### Border Radius

| Element | Value |
|---------|-------|
| Tag, chip, icon image | 12px |
| Small button, nav link, input, social square | 14px |
| Large button | 16px |
| Form | 24px |
| Inner panel, filled slide, case image | 28px |
| Card, slide, pill wrapper | 36px |
| Face image | 40px |
| Section band (top corners) | 48px 48px 0px 0px |
| Avatar | 64px |
| Story bullet | 9999px |
| Nav bar, social embed | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Recessed panel top-light | `rgb(228, 228, 231) 0px 1px 0px 0px inset` | `--shadow-rail` |
| Primary button | `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-button` |
| Glass button top-light | `rgb(255, 255, 255) 0px 0.5px 0px 0px inset` | `--shadow-glass` |
| Lifted panel | `rgba(0, 0, 0, 0.15) 0px 4px 16px 0px` | `--shadow-lifted` |
| Play control under-light | `rgb(255, 255, 255) 0px -0.5px 0px 0px` | `--shadow-play` |
| Rail bottom-light | `rgb(228, 228, 231) 0px -1px 0px 0px` | `--shadow-rail-bottom` |
| Form hint | `rgba(0, 0, 0, 0.04) 0px 4px 12px 0px` | `--shadow-form` |

### Layout
- **Page max-width:** not measured — the widest box is the 820px FAQ row; cards and slides sit at 440px, the footer link card at 515px
- **Section gap:** 160px on `.more-reviews_block`, 110px on the gallery's snap sections, 80px on `.features_cta`, 68px on `.hero_cta-block`, 64px on `.why-awesomic_block._w-tags_upd`
- **Card padding:** 28px on `.review_item` and `.footer-contacts`, 24px on `.hero-card.swiper-slide.swiper-slide-prev` and `.achievements-slide.swiper-slide`, 8px on `.case-item.w-inline-block`
- **Element gap:** 12px common, then 16px, 6px, 8px; 24px on the case-card header row `.case-top` — 33 of the value's 34 elements, all on the case-study page — and on the one `.complex-controls-wrapper`; 32px inside the client slides

## Components

### Navigation Bar
**Role:** The persistent top rail — wordmark left, links and two actions right, on every page.
`.navbar_component.w-nav` paints fill `#FFFFFF`, padding `12px 28px`, radius `0px`, `border none` and `shadow none`. Links are `.navbar-link`: no fill, ink `#18181B`, 13px/500 on 16.25px, padding `12px 14px`, radius `14px`, 8px gap, box 73–122×40px, "Pricing". Dropdown triggers use `.navbar-link.is-dropdown.w-dropdown-toggle` at the same 13px/500, padding `12px 14px`, radius `14px`, box 101–107×40px, wrapping "Our work" and its chevron. The `new` flag is `.nav_new-badge.background-white`: fill `#FFFFFF`, padding `2px 6px`, radius `6px`, no border — an annotation, not a chip.

### Primary Button — Large
**Role:** The page's main commitment — "Book demo", "Get started" — one per section.
`.button.is-large.w-inline-block` paints fill `#09090B`, label `#FFFFFF` at 15px/500, padding `14px 18px`, radius `16px`, border `1px rgba(255, 255, 255, 0.2)`, and the four-layer stack `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`. Read the layers in order: a hairline of light across the top edge, a cool inner glow lifting the lower half, a 1.5px hard ring keeping the black legible against white, then a short soft drop.

### Primary Button — Compact
**Role:** The same commitment at nav scale and inside cards — "Call me now" in the top rail, "More details" beside a plan.
`.button.w-variant-45d5a21f-b8e7-a9c1-3ea8-3a5283f7ebad.w-inline-block` paints fill `#09090B`, label `#FFFFFF` at 13px/500, padding `12px 16px`, radius `14px`, border `1px rgba(255, 255, 255, 0.2)`, a 10px icon-to-label gap, and the identical four-layer shadow. Three values change from the large size — 15px→13px, `14px 18px`→`12px 16px`, radius 16px→14px — one object at two optical sizes. Its label row is the 13px/500/16.25px `#FFFFFF` text "Call me now".

### White Button
**Role:** The secondary action that must not compete — "Log in" in the rail, the inverted action over imagery.
`.button.is-white.w-variant-2c9bf72f-8ee3-90cf-f1f6-7d7020c93aef.w-inline-block` paints fill `#FFFFFF`, ink `#18181B` at 13px/500, padding `12px 16px`, radius `14px`, border `1px #FFFFFF`, `shadow none`, box 97–131×42px, wrapping "Log in". On the white bar both fill and border are the canvas, so it reads as a link. The near-twin `.button.is-white.w-variant-f1578919-4dfb-824c-8f05-baf8e72891a8.w-inline-block` swaps the fill to `#FAFAFA` at the same 13px/500, `12px 16px`, radius `14px`, border `1px #FFFFFF` — a half-step darker so the shape survives on white.

### Category Tag
**Role:** The metadata chip labelling a card's disciplines — "UI/UX", "Web", "Healthcare" — in a wrapping row along its bottom edge.
The base is `.category-tag.text-gray-900`: no fill, ink `#18181B`, 13px/400 on 19.5px, padding `4px 8px`, radius `12px`, border `1px #E4E4E7`, `shadow none`, box 47×30px, "Blog". Siblings shift ink and ground only: `.category-tag` drops the ink to `#3F3F46` (box 31–165×30px, "UI/UX"); `.category-tag.text-white` carries `#FFFFFF` over imagery on the same `1px #E4E4E7` hairline (box 48–188×30px, "Web"); `.category-tag.is-featured` takes a `#3F3F46` fill with ink `#FAFAFA` and border `1px #3F3F46` (box 62–162×30px, "Design"). `.talent-slide_tag` matches the geometry at 13px/400 on 21px, box 31–90×31px, "Healthcare". All hold 12px radius and `4px 8px` padding. The `.category-tag` family is 30px tall — `box 47×30px` on "Blog" — while `.talent-slide_tag` is 31px on its 21px line-height, `box 31–90×31px`. Width is the only other variable.

### YC Accent Tag
**Role:** The accelerator credit on a case card, the single place colour enters the system.
`.case-tag.yc-tag.text-white` paints fill `#FF5A00`, ink `#FFFFFF` at 12px/400 on 19.68px, padding `4px 8px`, radius `12px`, border `1px rgba(255, 255, 255, 0.5)`, `shadow none`, box 62–68×30px, text "YC S25". It borrows the category tag's padding and radius exactly, so the orange arrives as a new value, not a new shape; the half-opacity white rim separates it from the card behind. Every `#FF5A00` observation the census records sits on this class, on the case-study index — which is why the orange must never be promoted to a button.

### Service Hero Card
**Role:** The horizontal strip under the hero — each slide a discipline, some flat grey, some full-bleed imagery with the label reversed out.
`.hero-card.swiper-slide.swiper-slide-prev` paints fill `#ECECEE`, padding `24px 24px`, radius `28px`, `border none`, `shadow none` — one step below the `#F4F4F5` band on the grey ladder, so the strip reads as a rail of solid objects. Media siblings keep the `#ECECEE` fill and lay the image over it — the census puts all 8 slides on one fill row, `.hero-card.align-bottom.swiper-slide.swiper-slide-active` included — and reverse the label to the 20px/600/31.2px `#FFFFFF` row "Web & product", with `.category-tag.text-white` chips beneath. Progress is `.swiper-pagination-bullet.story-bullet`: fill `rgba(255, 255, 255, 0.2)`, radius `9999px`, no padding, box 74–140×4px — a bar, not a dot, across the card's top edge.

### Case Card
**Role:** A published project on the work index — cover image, headline, service chips.
`.case-item.w-inline-block` paints fill `#FFFFFF`, padding `8px 8px`, radius `36px`, `border none`, `shadow none`, box 440×451–485px, wrapping "CloudZero scaled its design without hiring". Inside, `.case-image_wrapper` paints radius `28px`, padding `0px 0px`, no fill, box 424×316–320px. That pairing is the radius rule in miniature: 36 minus 8px of padding equals 28, so the inner corner stays concentric. A second variant of the class paints a 20px/600 label at the same `8px 8px` padding and radius `36px` with no border. Neither carries a shadow; the card separates from the `#F4F4F5` band by luminance.

### Review Card
**Role:** A customer quote with the author's photo, name and company, in a carousel.
`.review_item` paints fill `#FFFFFF`, padding `28px 0px`, radius `36px`, `border none`, `shadow none`, box 440×192–384px, wrapping "Rakesh Goyal Co-Founder & CEO at Velt". The vertical-only padding lets the quote's own container supply the horizontal inset, so the card can hold a full-bleed element. On the active slide, `.review_item.complex-block.swiper-slide.swiper-slide-active` adds `border 1px #D4D4D8` over the identical fill, padding and radius — selection is a one-step edge, not a shadow. The author photo is `.review_author-photo-wrapper`: 64×64px, radius `64px`, no padding, no border.

### Client Card
**Role:** A portfolio client, its one-line description and the round it raised.
`.achievements-slide.swiper-slide` paints no fill, padding `24px 24px`, radius `36px`, border `1px #D4D4D8`, `shadow none`, box 440×216px, wrapping "Outtalent Career accelerator for software engineers", with a 32px internal gap. Taking no fill, it lets the band grey through, and the `#D4D4D8` edge — a step darker than the `#E4E4E7` on tags — is all that holds it together. The filled variant `.achievements-slide.background-gray-100.border-none.max-width-full` inverts that: fill `#F4F4F5`, padding `24px 24px`, radius `36px`, `border none`. The client mark is `.achievements-logo-image` at 30×30px, 12px radius; the raise sits on the 32px/700/48px `#09090B` numeral row.

### Segmented Toggle
**Role:** A two-state question answered inline — "Launching / Scaling", "Get an expert talent / Create with AI" — reconfiguring the plan panel beneath it.
`.one-to-one-tabs-wrapper` paints fill `#F4F4F5`, padding `4px 4px`, radius `14px`, border `1px #ECECEE` and `shadow rgb(228, 228, 231) 0px 1px 0px 0px inset` — a 1px inset top-light that reads as a recessed rail. The selected pill is `.one-to-one-tab.is-active`: fill `#FFFFFF`, padding `4px 26px`, radius `10px`, `border none`, `shadow none`, its label ink `#27272A`; the resting `.one-to-one-tab` label carries `#71717A`. Selection shows as ground and ink step; the label weight does not change.

### Footer Link Card & Social Button
**Role:** The footer's two repeating objects — a blog post as a card, a social network as a square.
`.footer_blog-post-item.w-inline-block` paints fill `#FFFFFF`, padding `20px 20px`, radius `36px`, `border none`, `shadow none`, box 515×112–172px, wrapping "Blog 9 Best AI Consulting Agencies for Creative". The most-repeated card in the capture, and the system's position on hierarchy: a footer item gets the same 36px radius and white fill as a case card, differing only in padding. `.footer-social-button.w-inline-block` paints fill `#F4F4F5`, padding `0px 0px`, radius `14px`, `border none`, box 48×48px — a soft square, not a circle, so the row reads as controls, not avatars. Above them, `.footer-contacts`: fill `#FFFFFF`, padding `28px 28px`, radius `28px`, no border.

## Do's and Don'ts

### Do
- Set every heading at weight 600 — the heading census paints 600 at 64px, 56px and 40px alike. Keep 700 for the 20px `.text-20.weight-bold.lh-148.text-gray-900` names and the 32px `.heading-style-h4.mod-numbers` statistics.
- Grey one word inside the headline with `span.text-gray-400` at `#A1A1AA`, same size, weight and line-height.
- Leave `letter-spacing: normal` at display size; the 64px type earns its presence from the 1.12 line-height instead.
- Keep radii concentric: a 36px shell with 8px padding takes a 28px inner, the way `.case-item.w-inline-block` wraps `.case-image_wrapper`.
- Build chips at 12px radius, 30px tall, `4px 8px` padding and a `1px #E4E4E7` hairline — the default, on `"Blog" .category-tag.text-gray-900`, 400 elements. Four measured departures: `.text-tag.gap-8` takes `4px 10px` on `1px #F4F4F5` over `#FAFAFA`; `.category-tag.is-featured` borders `1px #3F3F46`; `.case-tag.yc-tag.text-white` borders `1px rgba(255, 255, 255, 0.5)`; `.talent-slide_tag` runs 31px, not 30.
- Give the primary action the full four-layer shadow `.button.is-large.w-inline-block` paints. Flattened to a plain black rectangle it loses the depth the rest of the system mostly goes without.
- Band the page with `48px 48px 0px 0px` sections so each surface slides up over the last.

### Don't
- Don't rule the nav. `.navbar_component.w-nav` paints `border none` and `shadow none` — white on white with nothing under it.
- Don't turn `#FF5A00` into a CTA. Every observation the census records is on `.case-tag.yc-tag.text-white`, a credit chip.
- Don't drop-shadow a card. `.review_item`, `.case-item.w-inline-block`, `.achievements-slide.swiper-slide`, `.hero-card.swiper-slide.swiper-slide-prev` and `.service-item.swiper-slide` all paint `shadow none`.
- Don't square a corner. Among the census's component and box rows only `.navbar_component.w-nav` and the third-party `.soc-post-emb` iframe paint radius `0px`.
- Don't push a headline past 600 or colour it. The heading census paints "All your design marketing product video design t" and "You are one call away from a top creative team" at 600 in `#09090B`, varied by the `#A1A1AA` swap, by `#18181B` on the gallery h1, and by white where the headline sits on a dark panel.
- Don't invent a mid-grey. Honour the split: `#E4E4E7` on tags, `#D4D4D8` when a card sits on grey.
- Don't signal selection with a shadow or a scale. Use an edge (`#D4D4D8`), a white ground, or a one-step ink lift to `#27272A`.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | The page ground on every captured page. |
| 1 | Band | `#F4F4F5` | Alternating sections, form wrappers, footer social squares. |
| 1 | Off-white control | `#FAFAFA` | Small icon buttons and `.text-tag.gap-8` pills. |
| 2 | Card on band | `#FFFFFF` | `.review_item`, `.case-item.w-inline-block`, `.footer_blog-post-item.w-inline-block`. |
| 2 | Filled slide | `#ECECEE` | `.hero-card.swiper-slide.swiper-slide-prev`. |
| 3 | Action | `#09090B` | The primary button and the reversed dark panels carrying white type. |

## Elevation

Depth is a luminance ladder plus 1px edges. The most-painted shadow is `rgb(228, 228, 231) 0px 1px 0px 0px inset`, and 14 of its 21 observations are the FAQ accordion card `.faq_item` — fill `#F4F4F5`, radius `36px`, border `1px #ECECEE`, box 820×97px, holding "What is Awesomic?". The rest are the tab rails, `.one-to-one-tabs-wrapper` and `.how-tab_link`. A one-pixel top-light that reads as a recess on both. Next by count is the primary button's four-layer stack, the only real elevation the system buys. Between those poles it is borders: `#E4E4E7` on chips (`"Web" .category-tag.text-white`; 616 of its 621 observations are borders, all on divs), `rgba(227, 227, 228, 0.36)` on the forms (`.features_form` and `.cta_form`, 6 form elements, all pages), `#D4D4D8` when a card sits on `#F4F4F5`, `#ECECEE` on large outlined slides. True drop shadows exist — `rgba(0, 0, 0, 0.15) 0px 4px 16px 0px`, and `rgba(0, 0, 0, 0.04) 0px 4px 12px 0px` on the hero form — but small in count and soft in value. Over imagery the logic inverts: `.button.is-tretiary.talen-slide.w-inline-block` fills with `rgba(255, 255, 255, 0.1)`, rims with `rgba(255, 255, 255, 0.2)`, top-lights with `rgb(255, 255, 255) 0px 0.5px 0px 0px inset` — glass, not paper.

## Imagery

One generative motif carries the brand: a moss-covered landscape, photoreal and desaturated to olive, used as texture rather than picture. It fills the giant footer wordmark as a knockout, backs the closing call-to-action band as a cliff, and appears as a smiling boulder in the pricing bento. Against it sits a colder register — talent portraits shot head-on on pale grey, cropped at the shoulders, each with a client logo beneath. Client work enters as real screenshots inside `.case-image_wrapper` at 28px radius: dashboards, launch films, ad grids, not mockup device frames. Icons are line-weight and monochrome; the mark is a two-dot smile doubling as the colon in the lowercase "awesomic:" wordmark.

## Layout

Full-bleed bands stacked vertically, each a section whose top corners are rounded to `48px 48px 0px 0px` so it overlaps the band above — a deck of cards seen edge-on, on every captured page. Content sits in a centred column — widest measured box the 820px FAQ row, cards and slides at 440px — while carousels break that column and bleed off the right viewport edge, promising more off-screen. The nav is a plain white bar at `12px 28px` with no rule beneath. The one horizontal inset of 48px or more is 80px on `.features_cta`, the measured gutter. Vertical rhythm runs 160px around `.more-reviews_block` down to 64px on `.why-awesomic_block._w-tags_upd`, the gallery's snap sections at 110px.

## Typography Voice

Cosmica runs in two modes with almost no overlap. Display lives at 40px, 56px and 64px, weight 600, ink `#09090B` by default, with two measured departures — the gallery's 64px h1 "Digital craftsmanship that performs" in `#18181B`, and the 64px "Free consultation to scope your creative project" reversed to `#FFFFFF` — leading falling from 1.28 to 1.12 at 64px — the largest type is the most tightly leaded, which lets a three-line hero headline read as one block. UI type lives at 13px and 15px, weights 400 to 600, ink `#3F3F46` or `#18181B`, leading opening the other way: 1.45 at 15px, 1.5 at 13px, 1.68 on the 14px `.text-14.weight-book.lh-168` row — the one place weight 300 appears. Between them sits 20px/600, the busiest text row in the census. Weight 700 goes to names at 20px and statistics at 32px, not to headlines. Tracking is `normal` throughout, which is unusual at 64px and is why the display type feels open rather than engineered.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `#3F3F46`
- surface: `#F4F4F5`
- border: `#E4E4E7`
- accent: `#FF5A00`
- primary action: `#09090B`

## Example Component Prompts
1. **Primary Button**: background `#09090B`, label `#FFFFFF` at 15px/500 Cosmica on 20.25px, padding `14px 18px`, border-radius `16px`, border `1px solid rgba(255, 255, 255, 0.2)`, box-shadow `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`. Compact variant: 13px/500, padding `12px 16px`, radius `14px`, 10px icon gap, same shadow.
2. **Category Tag Row**: a wrapping flex row, 6px gap, of chips with no fill, border `1px solid #E4E4E7`, border-radius `12px`, padding `4px 8px`, text 13px/400 Cosmica on 19.5px in `#18181B`, fixed 30px height. Add a white-ink variant for imagery and a filled variant at background `#3F3F46`, ink `#FAFAFA`, border `1px solid #3F3F46`.
3. **Case Card**: background `#FFFFFF`, padding `8px`, border-radius `36px`, no border, no shadow, 440px wide, on a `#F4F4F5` band. Inside, a cover image wrapper at border-radius `28px` with no padding, then a headline and a 6px-gap chip row.
4. **Display Headline**: three lines of Cosmica 64px/600, line-height 71.68px, letter-spacing normal, colour `#09090B`, with exactly one word wrapped in a span coloured `#A1A1AA` at the same size and weight. At 56px use 71.68px; at 40px use 51.2px.
5. **Rounded Section Band**: full-bleed, background `#F4F4F5`, border-radius `48px 48px 0px 0px`, pulled up to overlap the white section above. Alternate `#FFFFFF` and `#F4F4F5` down the page. The band carries no measured padding of its own. The 80px vertical and 80px horizontal belong to `.features_cta`, a block inside it — and on the case-study page to the white `.features_cta.background-white`. Put the 80/80 on the inner block.

## Similar Brands
- **Framer** — light canvas, deep card radii and a single black pill action, with imagery carrying the personality instead of colour.
- **Attio** — a disciplined neutral ramp where mid-greys go to hairlines and selection is a one-step edge.
- **Pitch** — alternating soft-grey bands, generously rounded cards, a grotesque set large and loose.
- **Vercel** — near-black on white as the whole palette, one filled action, no decorative colour near it.
- **Mercury** — restrained neutral surfaces, concentric radii, photography used sparingly on a clinical grid.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-white-100: #FFFFFF;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F4F4F5;
  --color-gray-150: #ECECEE;
  --color-gray-200: #E4E4E7;
  --color-gray-300: #D4D4D8;
  --color-gray-400: #A1A1AA;
  --color-gray-500: #71717A;
  --color-gray-600: #52525B;
  --color-gray-700: #3F3F46;
  --color-gray-800: #27272A;
  --color-gray-900: #18181B;
  --color-gray-950: #09090B;
  --color-orange: #FF5A00;
  --color-magenta: #FE45E2;
  --color-tab-ink: #222222;
  --color-input-ink: #333333;
  --color-embed-ground: #F2F2F2;
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-68: rgba(255, 255, 255, 0.68);
  --color-gray-200-40: rgba(228, 228, 231, 0.4);
  --color-gray-225-36: rgba(227, 227, 228, 0.36);
  --color-gray-100-68: rgba(244, 244, 245, 0.68);
  --color-gray-100-67: rgba(244, 244, 245, 0.67);

  /* Typography — Families */
  --font-cosmica: 'Cosmica', 'Aeonik', 'PP Neue Montreal', system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-label: 13px;
  --text-tag: 13px;
  --text-body-book: 14px;
  --text-body: 15px;
  --text-body-lg: 16px;
  --text-subheading: 20px;
  --text-stat: 32px;
  --text-h3: 40px;
  --text-h2: 56px;
  --text-display: 64px;
  --leading-caption: 19.68px;
  --leading-label: 16.25px;
  --leading-tag: 19.5px;
  --leading-body-book: 23.52px;
  --leading-body: 21.75px;
  --leading-body-lg: 24px;
  --leading-subheading: 30px;
  --leading-stat: 48px;
  --leading-h3: 51.2px;
  --leading-h2: 71.68px;
  --leading-display: 71.68px;
  --tracking-normal: normal;

  /* Spacing */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-2xl: 16px;
  --spacing-3xl: 20px;
  --spacing-4xl: 24px;
  --spacing-5xl: 28px;
  --spacing-6xl: 32px;
  --spacing-section-sm: 64px;
  --spacing-section-md: 80px;
  --spacing-section-lg: 160px;

  /* Border Radius */
  --radius-tag: 12px;
  --radius-control: 14px;
  --radius-button-lg: 16px;
  --radius-form: 24px;
  --radius-inner: 28px;
  --radius-card: 36px;
  --radius-face: 40px;
  --radius-section: 48px 48px 0px 0px;
  --radius-avatar: 64px;
  --radius-pill: 9999px;
  --radius-none: 0px;

  /* Shadows */
  --shadow-rail: rgb(228, 228, 231) 0px 1px 0px 0px inset;
  --shadow-rail-bottom: rgb(228, 228, 231) 0px -1px 0px 0px;
  --shadow-button: 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-glass: rgb(255, 255, 255) 0px 0.5px 0px 0px inset;
  --shadow-lifted: rgba(0, 0, 0, 0.15) 0px 4px 16px 0px;
  --shadow-play: rgb(255, 255, 255) 0px -0.5px 0px 0px;
  --shadow-form: rgba(0, 0, 0, 0.04) 0px 4px 12px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-white-100: #FFFFFF;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F4F4F5;
  --color-gray-150: #ECECEE;
  --color-gray-200: #E4E4E7;
  --color-gray-300: #D4D4D8;
  --color-gray-400: #A1A1AA;
  --color-gray-500: #71717A;
  --color-gray-600: #52525B;
  --color-gray-700: #3F3F46;
  --color-gray-800: #27272A;
  --color-gray-900: #18181B;
  --color-gray-950: #09090B;
  --color-orange: #FF5A00;
  --color-magenta: #FE45E2;
  --color-tab-ink: #222222;
  --color-input-ink: #333333;
  --color-embed-ground: #F2F2F2;
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-68: rgba(255, 255, 255, 0.68);
  --color-gray-200-40: rgba(228, 228, 231, 0.4);
  --color-gray-225-36: rgba(227, 227, 228, 0.36);
  --color-gray-100-68: rgba(244, 244, 245, 0.68);
  --color-gray-100-67: rgba(244, 244, 245, 0.67);

  --font-cosmica: 'Cosmica', 'Aeonik', 'PP Neue Montreal', system-ui, sans-serif;

  --text-caption: 12px;
  --text-caption--line-height: 19.68px;
  --text-label: 13px;
  --text-label--line-height: 16.25px;
  --text-tag: 13px;
  --text-tag--line-height: 19.5px;
  --text-body-book: 14px;
  --text-body-book--line-height: 23.52px;
  --text-body: 15px;
  --text-body--line-height: 21.75px;
  --text-body-lg: 16px;
  --text-body-lg--line-height: 24px;
  --text-subheading: 20px;
  --text-subheading--line-height: 30px;
  --text-stat: 32px;
  --text-stat--line-height: 48px;
  --text-h3: 40px;
  --text-h3--line-height: 51.2px;
  --text-h2: 56px;
  --text-h2--line-height: 71.68px;
  --text-display: 64px;
  --text-display--line-height: 71.68px;
  --tracking-normal: normal;

  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-2xl: 16px;
  --spacing-3xl: 20px;
  --spacing-4xl: 24px;
  --spacing-5xl: 28px;
  --spacing-6xl: 32px;
  --spacing-section-sm: 64px;
  --spacing-section-md: 80px;
  --spacing-section-lg: 160px;

  --radius-tag: 12px;
  --radius-control: 14px;
  --radius-button-lg: 16px;
  --radius-form: 24px;
  --radius-inner: 28px;
  --radius-card: 36px;
  --radius-face: 40px;
  --radius-avatar: 64px;
  --radius-pill: 9999px;
  --radius-none: 0px;

  --shadow-rail: rgb(228, 228, 231) 0px 1px 0px 0px inset;
  --shadow-rail-bottom: rgb(228, 228, 231) 0px -1px 0px 0px;
  --shadow-button: 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-glass: rgb(255, 255, 255) 0px 0.5px 0px 0px inset;
  --shadow-lifted: rgba(0, 0, 0, 0.15) 0px 4px 16px 0px;
  --shadow-play: rgb(255, 255, 255) 0px -0.5px 0px 0px;
  --shadow-form: rgba(0, 0, 0, 0.04) 0px 4px 12px 0px;
}
```