Skip to content
DesignMunkDesignMunk Submit a site

Reach

reach-ats.com
Hiring. Under Control. The ATS that gives your time back.
AI HR & Recruiting WordPress Homepage Roobert
Share Visit site
reach-ats.com DESKTOP · 1440
Reach

AI Breakdown

Design export

# Design brief: the Reach 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/09/02092929/reach-ats-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/02092929/reach-ats-com-featured.webp
- On DesignMunk: https://designmunk.com/reach/

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

# Reach ATS: Lime Gradient Hero and Pill CTA Discipline

## Overview

Reach speaks to HR teams evaluating an ATS for regulated, multi-stakeholder hiring. The tone is confident and supportive, with a single electric accent guiding attention. Layouts are spacious rather than dense, prioritising scannability for busy decision-makers. When in doubt, choose clarity: black text on white surfaces, one primary lime CTA, and generous breathing room.

## Colors

- **primary (#000000):** Core text and headlines; use for maximum contrast on white surfaces.
- **secondary (#33743c):** Supportive green for success states, subtle accents, or charts tied to brand.
- **tertiary (#aaec3a):** Primary action color for CTAs and key highlights; keep usage focused.
- **neutral (#ffffff):** Base canvas for pages and cards.
- **border (#1f1f1f):** High-contrast strokes, dividers, input outlines, and dark text when needed.
- **surface (#ffffff):** Card and panel backgrounds on the light theme.
- **on-surface (#000000):** Default text on surfaces for accessible contrast.

## Typography

The system uses a single family, Roobert, across all levels for a friendly, modern tone.
- Headline LG (Roobert 50px/1, 600): Primary hero and marquee statements.
- Headline MD (Roobert 39px/1.21, 600): Section headers and key marketing claims.
- Headline SM (Roobert 30px/1.2, 600): Sub-section titles and feature intros.
- Headline XS (Roobert 23px/1.22, 600): Card titles, small banners, and UI headings.
- Body MD (Roobert 18px/1.5, 600): Core paragraphs, navigation, and button labels.
Availability: Roobert is custom/self-hosted, so an external agent should not assume access. Suitable free alternatives: Manrope (Google) for geometric warmth with open apertures; Outfit (Google) for clean, rounded geometry and strong display performance; Nunito Sans (Google) for a softer, rounded feel close to Roobert's friendliness.

## Layout

Spacing follows a roomy scale: 6, 14, 24, 40, 80px. Use 80px for section padding top/bottom on desktop, 40px for inner section gutters, and 24px for card padding and grid gaps. Headlines stack with tight leading but are offset by generous margins to avoid crowding. Grids typically use two columns for hero/content splits and three or four columns for features; collapse to a single column on mobile with 24px gaps.

## Elevation & Depth

Depth is minimal and purposeful. Cards sit on a white surface with the sm shadow (rgba(31,31,31,0.08) 0 8px 24px -3px). Prominent previews (e.g., the hero mock-up) can use the md shadow (rgba(0,0,0,0.3) 0 32px 68px 0) to read as floating elements. Large and inner shadows are not used; hierarchy is reinforced with contrast, spacing, and occasional borders using #1f1f1f.

## Shapes

The language is rounded and approachable. Cards use a consistent 16px radius for visual unity. Primary and secondary buttons are pill-like at 28px radius on a 41px height, signaling clickability and priority. Keep inputs and badges aligned to the 16px/28px pairing to avoid a mixed shape vocabulary.

## Components

Buttons and card tokens:
- Button Primary: Background #aaec3a, text #1f1f1f, 41px height, 10.5px × 17.5px padding, 28px radius. Use for the main CTA only.
- Button Secondary: Text #000000, 41px height, 28px radius; default background is transparent unless specified by context.
- Button Link: Text #000000, 0px radius; place inline with body copy.
- Card: Background #ffffff, text #000000, 16px radius, 40px × 29.6px padding; apply sm shadow when lifted.

### Header Bar with Primary CTA
- Left-aligned logo, centered navigation, right-aligned actions. "Book a Demo" uses the primary button spec; "Contact Us" is secondary. Vertical rhythm: 24px spacing; sticky usage optional.

### Lime Gradient Hero Split
- Two-column layout: left copy stack (Headline LG 50px, Body MD 18px), right app preview on md shadow. Background: soft lime-to-white gradient; primary CTA below copy using button-primary.

### Client Logo Strip
- Single row of logos on surface background with 24px gaps and 40px top/bottom padding. Logos desaturated; no borders.

### Four-Step Process Grid
- Cards for Candidate Attraction, Shortlisting, Interviews, Offers & Onboarding. Each uses Card token; titles in Headline XS (23px); bullet items in Body MD; 24px grid gap.

### Ratings Row
- Inline badges linking to G2 and Capterra with large numerals (Headline SM 30px). Use sm shadow to separate from the canvas.

### Testimonial Video Cards
- Quote, avatar, role, and a "View Video" link on a Card. 16px radius, sm shadow; 24px internal spacing; compact headline (23px) for names.

### FAQ Accordion
- Stack of items under "What is Reach ATS?". Each header uses Headline XS; body uses Body MD. Dividers use border color #1f1f1f; 24px internal padding.

### Footer Mega Menu
- Four to five columns with Headline XS section labels and Body MD links. 40px vertical padding per block; 24px column gaps.

## Do's and Don'ts

- Do reserve #aaec3a for the primary CTA and key highlights; limit to one primary button per viewport.
- Do keep text #000000 on #ffffff surfaces for maximum clarity; use #1f1f1f for borders and dividers.
- Do maintain the 28px button radius and 41px height; mixing heights weakens the CTA signature.
- Don't introduce additional shadow sizes; use only sm for cards and md for hero/major previews.
- Don't round cards beyond 16px or introduce square buttons; consistency of 16px/28px is part of the brand.
- Don't tint card backgrounds; surfaces remain #ffffff with contrast coming from type and spacing.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #1f1f1f
- Accent (Primary CTA): #aaec3a
- Support Green: #33743c

1) Build the hero
- Canvas #ffffff with a subtle lime-to-white gradient backdrop.
- Left column: h1 set in Roobert 50px, weight 600, line-height 1; supporting copy Roobert 18px/1.5, weight 600, color #000000.
- Primary CTA: 41px tall pill, 28px radius, padding 10.5px 17.5px, background #aaec3a, text #1f1f1f.
- Right column: screenshot card on md shadow (rgba(0,0,0,0.3) 0 32px 68px 0), 16px corner radius.

2) Four-step features grid
- Section padding 80px top/bottom.
- Create four cards (16px radius) on #ffffff with sm shadow (rgba(31,31,31,0.08) 0 8px 24px -3px).
- Titles: Roobert 23px/1.22, 600; bullets: Roobert 18px/1.5, 600, color #000000.
- Grid gap 24px on desktop; collapse to a single column on mobile.

3) Testimonial video cards
- Three cards in a row, #ffffff background, 16px radius, sm shadow, 24px internal spacing.
- Quote text: Roobert 18px/1.5, 600; Name label: Roobert 23px/1.22, 600.
- "View Video" as button-link in #000000; avoid additional colors.

4) Header with CTA
- Sticky header on #ffffff with 24px vertical padding.
- Navigation links: Roobert 18px/1.5, 600, color #000000.
- Right-aligned primary button using #aaec3a background and 28px radius; secondary action as text-only #000000.

5) FAQ accordion
- Stack 6 items with 1px borders in #1f1f1f.
- Question: Roobert 23px/1.22, 600; Answer: Roobert 18px/1.5, 600.
- Section spacing: 80px outer, 24px inner per item.

## Similar Brands

- Workable — Similar black-on-white foundation with a single green accent; Workable leans lighter on weight and uses more illustration.
- Greenhouse — Shares a disciplined green accent and clean cards; Greenhouse favors more muted greens and denser typography.
- Teamtailor — Also uses rounded shapes and prominent CTAs; its palette is more playful with pinks where Reach stays utilitarian.
- Ashby — Minimal, metrics-forward ATS with restrained color; Ashby relies more on data visuals, where Reach leans into product previews.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #33743c;
  --color-tertiary: #aaec3a;
  --color-neutral: #ffffff;
  --color-border: #1f1f1f;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 50px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-leading: 1;
  --text-headline-md-size: 39px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 30px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 18px;
  --text-body-md-weight: 600;
  --text-body-md-leading: 1.5;
  --font-roobert: "Roobert";

  /* Rounded */
  --radius-sm: 16px;
  --radius-md: 28px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-border);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 10.5px 17.5px;
  --button-primary-height: 41px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 10.5px 17.5px;
  --button-secondary-height: 41px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 40px 29.6px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #33743c;
  --color-tertiary: #aaec3a;
  --color-neutral: #ffffff;
  --color-border: #1f1f1f;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Roobert";
  --font-headline-md: "Roobert";
  --font-headline-sm: "Roobert";
  --font-headline-xs: "Roobert";
  --font-body-md: "Roobert";
  --text-headline-lg: 50px;
  --text-headline-md: 39px;
  --text-headline-sm: 30px;
  --text-headline-xs: 23px;
  --text-body-md: 18px;
  --font-weight-headline-lg: 600;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 600;
  --radius-sm: 16px;
  --radius-md: 28px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;
}
```

### 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.2,
                    0.455,
                    0.235
                ],
                "hex": "#33743c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.667,
                    0.925,
                    0.227
                ],
                "hex": "#aaec3a"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.122,
                    0.122,
                    0.122
                ],
                "hex": "#1f1f1f"
            }
        },
        "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": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 28,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roobert",
                "fontSize": {
                    "value": 50,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roobert",
                "fontSize": {
                    "value": 39,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roobert",
                "fontSize": {
                    "value": 30,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roobert",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Roobert",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        }
    }
}
```

## 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 Reach**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears
agentwork.com
Agentwork AI
Agentwork