Skip to content
DesignMunkDesignMunk Submit a site

Atarim

atarim.io
The AI web agency, plugged into yours.
AI Software WordPress Homepage Fira Sans Condensed
Share Visit site
atarim.io DESKTOP · 1440
Atarim

AI Breakdown

Design export

# Design brief: the Atarim design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/10/09180347/atarim-io-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/09180347/atarim-io-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/atarim/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Atarim: Condensed Headlines and a Repeating URL Capture

## Overview

A bold, agency-first brand voice aimed at operators who value process and proof. The interface is confident, product-led and somewhat theatrical: oversized condensed headlines, deep violet surfaces, and mint actions. Sections alternate between airy, centered hero layouts and denser product walk-throughs. The tone is serious but friendly; 3D mascots add warmth without softening the technical message.

## Page Structure

- Global navigation: compact top bar with logo left, primary product links, and a right-aligned auth cluster. One pill CTA sits at the far right.
- Hero: oversized two-line display headline, short subcopy, a centered URL input with a pill CTA; a small credibility line below; a character illustration row anchors the fold.
- Trust metrics strip: a single row of four compact stats/icons under the hero, spaced widely.
- Benefits trio: heading plus three short points in a light grid; low-density text blocks.
- Client experience split: left copy column, right stacked UI mockups (chat/tasks/pages/approvals/credits), on dark cards.
- How it works: multi-section explainer with three subsections (learns the business, shows the reasoning, guardrails) each paired with a product frame; followed by a routines checklist in a tall list.
- PM (Claro) section: heading and product dashboard mockups with chat and site counts; compact composition.
- Trust/Compliance: four compact proof items in a row with link to a dedicated trust page.
- Visual review section: large product canvas with numbered expert avatars and a slim overlay toolbar; copy left, UI right.
- Upsell Machine: heading, workspace/inbox mockups and a brief detail pane; dense card stack.
- Founder story: narrative block with text and simple comparison visuals; generous spacing.
- Proactivity vs. waiting: side-by-side chats and activity feed; contrastive split.
- Final CTA band: centered URL input plus a secondary link to pricing.
- Footer: multi-column sitemap with social links and legal items.

## Colors

- Primary (#000000): Core text on light surfaces and body copy.
- Secondary (#9484fc): Lavender accent for subheads, emphasis and gradient tints.
- Tertiary (#3ed696): Primary action color for buttons and key CTAs.
- Neutral (#ffffff): White for surfaces, inputs and reversed text on dark cards.
- brand-quiet-abyss (#15052d): Deep violet background for hero and dark sections.
- brand-violet-gems (#c5bfeb): Soft lavender for subtle highlights and secondary text on dark.
- brand-dark-topaz (#827c8c): Muted supporting text and dividers on dark.
- surface (#ffffff): Default section background for content-heavy blocks.
- on-surface (#000000): Default text color when on surface white.

## Typography

- Fira Sans Condensed (Google). Used for display and section headings. headline-lg 98/1.2 at 600 with -0.02em for the hero; headline-md 63/1.21 at 600 for key section starts; headline-sm 41/1.34 and headline-xs 26/1.19 for subheads. Freely available; load from Google Fonts. If unavailable, substitute with Impact, Oswald, or Bebas Neue for a similarly narrow, strong voice.
- Roboto (Google). Body and UI copy. body-md 17/1.65 at 400 provides readable paragraphs across long sections and cards. Freely available via Google Fonts; system fallbacks like Arial or Helvetica are acceptable when performance is critical.

## Layout

- Spacing scale is compact-to-generous: 6, 14, 22, 30, 60px. Use 60px for section padding, 30px for intra-section blocks, and 22px for item gutters. Micro-elements use 6–14px.
- Composition alternates between centered single-column intros and two-column feature splits. Cards maintain consistent internal padding and generous outer margins to keep dense proof readable.
- Content flows vertically with clear section breaks; repeated CTA bars sit centered with wide margins to stand apart from descriptive text.

## Elevation & Depth

- Shadows are colored and subtle. Use md and xl for floating inputs and hero elements; lg adds an indigo glow for emphasis; inner creates inset glows for on-dark inputs.
- On dark sections, hierarchy relies on tonal contrast (white and lavender text on #15052D) and whitespace as much as shadows. Borders are minimal; use muted Dark Topaz (#827C8C) only when separation is required.

## Shapes

- Two radii define the language. rounded.sm at 18px for cards, screenshots, and panels establishes friendly solidity. rounded.full (9999px) for buttons, input pills, and counters signals action and interactivity.
- Keep radius usage consistent; do not mix other corner values.

## Components

- Buttons
  - Primary: background #3ED696, text #16042E, full radius 9999px, height 49px, padding 10px 19px. Use for main calls to action only.
  - Secondary: text #FFFFFF on transparent or dark surfaces, full radius, height 49px, padding 10px 19px. Reserve for complementary actions.
  - Link: text #000000 with no radius. Use inline within copy.
- Card: background #16042E, text #FFFFFF, radius 18px, padding 8px. Pair with md or xl shadow when lifted.

### Top Navigation Bar
Compact single row with left logo, centered/left links, and right-aligned auth plus one primary-pill CTA. On dark hero, links render #FFFFFF; the CTA uses Primary button specs.

### URL Capture Bar
Center-aligned input on #FFFFFF with on-surface text #000000, full radius 9999px. Right-attached primary button (#3ED696, #16042E) at 49px height. Use xl shadow for prominence over dark backgrounds.

### Trust Metrics Row
A low-height strip of 3–4 items. Each item is a small stack: label in Roboto 17px, value in Fira Sans Condensed headline-xs 26px. Spacing uses 22px gutters.

### Product Mockup Card
Large #16042E card with 18px radius. Headline-sm 41px title above; inside, stacked UI panes with 8px inner padding and md shadow. Use Violet Gems (#C5BFEB) for minor labels on dark.

### Visual Review Toolbar
Slim floating bar over a live page card. Bar uses #16042E with 18px radius and lg shadow; controls are Roboto 17px. Numbered pins use Mint Action for active states.

### Workflow Stepper
Vertical list showing SOP steps. Each step is Roboto 17px on white or dark card; active step uses Secondary lavender for the label and Mint Action for confirmations.

### Inbox Opportunity Panel
Two-column task detail: left thread, right meta. Container is a card with 18px radius on #16042E; primary action uses the standard 49px mint button.

## Do's and Don'ts

- Do reserve #3ED696 for the primary action; avoid using it for badges or links.
- Do set major headlines in Fira Sans Condensed at the specified sizes and weight 600; avoid mixing other display faces.
- Do keep cards at 18px radius and inputs/buttons at full radius; don't introduce intermediate corners.
- Do maintain generous 60px section spacing; don't collapse dense copy without adequate 30px breathing room.
- Don't place dark text (#000000) on dark violet backgrounds; use #FFFFFF or #C5BFEB on #15052D.
- Don't use un-tinted black shadows; prefer the measured purple-tinted shadows for consistency.

## Agent Prompt Guide

Quick color reference
- Text: #000000 (on light), #FFFFFF (on #15052D)
- Background: #FFFFFF (surface) or #15052D (dark sections)
- Border: #827C8C (subtle separators on dark)
- Accent: #9484FC (secondary) and #3ED696 (primary action)

1) Build the hero
- Background: #15052D. Center a container with 60px top/bottom padding.
- H1: Fira Sans Condensed, 98px, weight 600, line-height 1.2, letter-spacing -0.02em, color #FFFFFF. A second line may use #9484FC.
- Body: Roboto 17px/1.65, color #FFFFFF at 80%.
- URL Capture Bar: white input (#FFFFFF, text #000000) plus right-attached primary button (#3ED696 text #16042E), both full radius 9999px, height 49px, padding 10px 19px, shadow xl.

2) Two-column feature split
- Section background: #FFFFFF. 60px padding.
- Left: headline-md (Fira Sans Condensed 63px/1.21, 600), body Roboto 17px.
- Right: Product Mockup Card (#16042E, radius 18px, padding 8px, shadow md). Use Secondary #9484FC for small labels.

3) Trust metrics strip
- Background: #FFFFFF. Create a row of 4 items with 22px gutters.
- Each item: label Roboto 17px #000000 at 70% opacity; value headline-xs (Roboto 26px, 600) in #000000.

4) Visual review section
- Background: #15052D. Heading headline-sm 41px in #FFFFFF; subcopy Roboto 17px.
- Place a large #16042E card (radius 18px, shadow xl). Overlay a toolbar (same color, lg shadow) and add mint (#3ED696) accents for active controls.

5) Final CTA band
- Background: #FFFFFF. Centered stack with 30px gaps: headline-sm 41px (Fira Sans Condensed), body 17px Roboto, and the URL Capture Bar styled as in the hero.

## Similar Brands

- Intercom: Conversational product storytelling with soft gradients and friendly illustrations; Atarim skews darker with stronger condensed headlines.
- Framer: Big type over dark sections and product-first demos; Atarim adds denser process detail and recurring URL capture CTAs.
- Vercel: Monochrome-dark polish and developer trust signals; Atarim is more colorful and agency-oriented with mint actions and mascots.
- HubSpot: Long, education-forward pages with frequent CTAs; Atarim mirrors the cadence but uses deeper violet surfaces and condensed display type.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #9484fc;
  --color-tertiary: #3ed696;
  --color-neutral: #ffffff;
  --color-brand-quiet-abyss: #15052d;
  --color-brand-violet-gems: #c5bfeb;
  --color-brand-dark-topaz: #827c8c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 98px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 63px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.21;
  --text-headline-md-tracking: -0.009em;
  --text-headline-sm-size: 41px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.34;
  --text-headline-sm-tracking: -0.013em;
  --text-headline-xs-size: 26px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 17px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.65;
  --font-fira-sans-condensed: "Fira Sans Condensed";
  --font-roboto: "Roboto";

  /* Rounded */
  --radius-sm: 18px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 22px;
  --spacing-lg: 30px;
  --spacing-xl: 60px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #16042e;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 10px 19px;
  --button-primary-height: 49px;
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 10px 19px;
  --button-secondary-height: 49px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #16042e;
  --card-text-color: var(--color-neutral);
  --card-rounded: var(--radius-sm);
  --card-padding: 8px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #9484fc;
  --color-tertiary: #3ed696;
  --color-neutral: #ffffff;
  --color-brand-quiet-abyss: #15052d;
  --color-brand-violet-gems: #c5bfeb;
  --color-brand-dark-topaz: #827c8c;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Fira Sans Condensed";
  --font-headline-md: "Fira Sans Condensed";
  --font-headline-sm: "Fira Sans Condensed";
  --font-headline-xs: "Roboto";
  --font-body-md: "Roboto";
  --text-headline-lg: 98px;
  --text-headline-md: 63px;
  --text-headline-sm: 41px;
  --text-headline-xs: 26px;
  --text-body-md: 17px;
  --tracking-headline-lg: -0.02em;
  --tracking-headline-md: -0.009em;
  --tracking-headline-sm: -0.013em;
  --font-weight-headline-lg: 600;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 18px;
  --radius-full: 9999px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 22px;
  --spacing-lg: 30px;
  --spacing-xl: 60px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.58,
                    0.518,
                    0.988
                ],
                "hex": "#9484fc"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.243,
                    0.839,
                    0.588
                ],
                "hex": "#3ed696"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "brand-quiet-abyss": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.082,
                    0.02,
                    0.176
                ],
                "hex": "#15052d"
            }
        },
        "brand-violet-gems": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.773,
                    0.749,
                    0.922
                ],
                "hex": "#c5bfeb"
            }
        },
        "brand-dark-topaz": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.51,
                    0.486,
                    0.549
                ],
                "hex": "#827c8c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 22,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 30,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 60,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 18,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Fira Sans Condensed",
                "fontSize": {
                    "value": 98,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Fira Sans Condensed",
                "fontSize": {
                    "value": 63,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.009,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Fira Sans Condensed",
                "fontSize": {
                    "value": 41,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.013,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roboto",
                "fontSize": {
                    "value": 26,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roboto",
                "fontSize": {
                    "value": 17,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Atarim**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
wpsubscription.co
WP Subscription Ecommerce
WP Subscription
fellow.ai
Fellow AI
Fellow
thedrive.ai
The Drive AI AI
The Drive AI
webflow.com
Webflow Design Tools
Webflow