Skip to content
DesignMunkDesignMunk Submit a site

Instrument Careers

instrument.com
Creativity meets technology—digital-first design for brands, products, and campaigns.
Agency HR & Recruiting Nuxt Careers Instrument Sans Instrument Serif
Share Visit site
instrument.com DESKTOP · 1440
Instrument Careers

AI Breakdown

Design export

# Design brief: the Instrument Careers 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/12084817/instrument-com-careers-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/12084817/instrument-com-careers-featured.webp
- On DesignMunk: https://designmunk.com/instrument-careers-page/

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

# Instrument: Big Serif Headlines on a Mint Careers Page

## Overview

A modern agency system aimed at prospective talent. The interface should feel confident, calm, and spacious: mint surface, ink text, and generous breathing room. Copy is brief and declarative; components are rounded and tactile without using shadows. Use the oversized headline scale for hero moments, then step down quickly to readable content blocks.

## Colors

- **primary (#233730):** Deep forest ink for headlines, body text, and interactive text.
- **secondary (#7c7c7d):** Supporting grey for metadata and subdued labels.
- **neutral (#f0faeb):** Mint canvas used as the default page background.
- **border (#e5e7eb):** Subtle divider for cards, inputs, and section boundaries.
- **brand-piano-black (#17171b):** Brand black for logo marks and high-emphasis accents.
- **brand-silverstone (#b3b3b4):** Cool grey accent for icons or secondary UI.
- **surface (#f0faeb):** Primary surface color; match the mint background used sitewide.
- **on-surface (#233730):** Default text color for legibility against the mint surface.

## Typography

Two proprietary families define hierarchy. Headline moments use Instrument-Serif (custom) for character and presence; supporting headings and body rely on Instrument-Sans (custom) for clarity.
- Headline LG — Instrument-Serif 168px/1, -0.03em: Hero statements and recruiting slogans.
- Headline MD — Instrument-Sans 130px/1.2, -0.012em: Secondary hero lines and section intros.
- Headline SM — Instrument-Sans 100px/1.2, -0.013em: Major section leads.
- Headline XS — Instrument-Sans 78px/1.21, -0.007em: Subsection titles.
- Body MD — Instrument-Sans 60px/1.5, -0.03em: Oversized supporting copy and pull quotes.
Availability: Both Instrument-Serif and Instrument-Sans are custom/self-hosted and not directly loadable by agents. Suggested substitutes with similar tone:
- For Instrument-Serif: Fraunces (Google), Playfair Display (Google), Cormorant Garamond (Google).
- For Instrument-Sans: Inter (Google), Manrope (Google), Public Sans (Google).

## Layout

Spacing is on an 8px base with steps at 8, 16, 24, 48, and 96. Use xl (96px) to separate major sections; lg (48px) for intra-section grouping; md (24px) for element stacks; sm/xs for component padding and chip gaps. Content is typically center-aligned with generous max widths and single or two-column sections below the hero.

## Elevation & Depth

Shadows are not used. Hierarchy is conveyed through scale, weight, and tone shifts: ink text on mint surface, subtle 1px borders (#e5e7eb), and whitespace. Use borders for cards, inputs, and list items when separation is required.

## Shapes

Two radii define the language: sm (8px) for cards and media; full (9999px) for pills, chips, and circular elements. Use full radius for all buttons specified and navigation chips to reinforce the soft, approachable feel.

## Components

Buttons follow a pill vocabulary with fixed 40px height and 8px/20px padding.
- Button Primary: background #020a04, text #c6cea0, rounded full. Use for the main CTA per section.
- Button Secondary: text #233730, rounded full, no fill by default; use for low-emphasis actions.
- Button Link: text #233730 with no rounding (0px) for inline links.
- Card: background #f0faeb, text #233730, 8px radius, 16px padding; add a 1px #e5e7eb border when placed on the same mint surface.

Distinctive components

### Hero Statement
- Two-line headline: Instrument-Serif then Instrument-Sans (LG → MD). Centered on the mint surface with xl spacing and a single pill CTA below.

### Jobs Filter Bar
- Group of full-radius filter chips (height 40px) for Discipline and Type. Text in primary ink (#233730) on the mint surface with md spacing between chips and a light #e5e7eb divider line when needed.

### Open Roles List
- Stacked rows with role title in Instrument-Sans, metadata (employment type, discipline, location) in secondary grey (#7c7c7d). Each row uses md vertical padding and a 1px #e5e7eb bottom border.

### Affinity Group Cards
- Simple card grid: 8px radius, 16px padding, ink headings and descriptive copy. Use lg gaps and optional 1px #e5e7eb borders for separation on the mint surface.

### Benefits Grid
- Section header (Headline XS) followed by three themed lists: Health & Wellbeing, Time Off, Money. Use md spacing between list items and lg between columns.

### Hiring Process Steps
- Four-step vertical list ("Apply" → "Offer") using Headline XS for step labels and body copy for descriptions. Separate steps with #e5e7eb rules and md spacing.

### Culture Quote / Photo Block
- Wide image with 8px rounded corners set on the mint background. Caption or lead-in sentence above in Instrument-Sans.

### Newsletter + Footer CTAs
- A compact block inviting subscription, then a four-link CTA set. Use secondary grey for labels and keep buttons in the pill style for "Start a Project" and "Join the Team."

## Do's and Don'ts

- Do set pages on the mint surface (#f0faeb) with ink text (#233730) and xl spacing between primary sections.
- Do use full-radius pills for buttons and filters; keep the 40px height and 8px/20px padding.
- Do rely on borders (#e5e7eb) and tonal contrast instead of shadows.
- Don't mix additional accent colors beyond the provided ink, mint, and brand blacks/greys.
- Don't introduce hard-edged buttons or square chips; reserve 0px radius only for inline links.
- Don't shrink hero type below the defined headline tiers; step down only at clear section breaks.

## Agent Prompt Guide

Quick color reference
- Text: #233730
- Background: #f0faeb
- Border: #e5e7eb
- Accent/Primary CTA: #020a04 with text #c6cea0

1) Build a careers hero
- Background #f0faeb. Center container with 96px top/bottom padding.
- H1 line 1: "Be yourself." Instrument-Serif (or Fraunces fallback), 168px, weight 400, letter-spacing -0.03em, line-height 1, color #233730.
- H1 line 2: Instrument-Sans (or Inter fallback), 130px, weight 400, letter-spacing -0.012em, line-height 1.2, color #233730.
- Primary button below: 40px height, padding 8px 20px, radius 9999px, background #020a04, text #c6cea0.

2) Create a filter chip bar for open roles
- Surface #f0faeb. Use md (24px) vertical padding and sm (16px) gap between chips.
- Each chip: 40px height, radius 9999px, text #233730; add a 1px #e5e7eb outline on focus/hover.

3) Style the roles list
- Stack items with md (24px) vertical padding and a 1px #e5e7eb divider.
- Title: Instrument-Sans/Inter 78px (headline-xs), color #233730.
- Metadata: Instrument-Sans/Inter body style (60px) in #7c7c7d.

4) Build an affinity cards grid
- Card: background #f0faeb, text #233730, radius 8px, padding 16px, 1px #e5e7eb border.
- Grid gap lg (48px); section outer spacing xl (96px).

## Similar Brands

- BASIC/DEPT® — Similar big-type minimalism and soft surfaces; BASIC leans darker with bolder photography.
- Work & Co — Comparable restraint and grid discipline; Work & Co is more typographic and monochrome.
- Stink Studios — Shares editorial rhythm and culture-first recruiting; uses higher-contrast imagery and darker backgrounds.
- IDEO — Human-centered messaging with calm palettes; IDEO's layouts are denser and more editorial.
- COLLINS — Big headlines and crafted type; more expressive color and brand theatrics than Instrument.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #233730;
  --color-secondary: #7c7c7d;
  --color-neutral: #f0faeb;
  --color-border: #e5e7eb;
  --color-brand-piano-black: #17171b;
  --color-brand-silverstone: #b3b3b4;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 168px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 130px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.012em;
  --text-headline-sm-size: 100px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: -0.013em;
  --text-headline-xs-size: 78px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.21;
  --text-headline-xs-tracking: -0.007em;
  --text-body-md-size: 60px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.03em;
  --font-instrument-serif: "Instrument-Serif";
  --font-instrument-sans: "Instrument-Sans";

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

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: #020a04;
  --button-primary-text-color: #c6cea0;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 20px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 20px;
  --button-secondary-height: 40px;
  --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: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #233730;
  --color-secondary: #7c7c7d;
  --color-neutral: #f0faeb;
  --color-border: #e5e7eb;
  --color-brand-piano-black: #17171b;
  --color-brand-silverstone: #b3b3b4;
  --color-surface: #f0faeb;
  --color-on-surface: #233730;
  --font-headline-lg: "Instrument-Serif";
  --font-headline-md: "Instrument-Sans";
  --font-headline-sm: "Instrument-Sans";
  --font-headline-xs: "Instrument-Sans";
  --font-body-md: "Instrument-Sans";
  --text-headline-lg: 168px;
  --text-headline-md: 130px;
  --text-headline-sm: 100px;
  --text-headline-xs: 78px;
  --text-body-md: 60px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.012em;
  --tracking-headline-sm: -0.013em;
  --tracking-headline-xs: -0.007em;
  --tracking-body-md: -0.03em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.137,
                    0.216,
                    0.188
                ],
                "hex": "#233730"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.49
                ],
                "hex": "#7c7c7d"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.941,
                    0.98,
                    0.922
                ],
                "hex": "#f0faeb"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-piano-black": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.09,
                    0.09,
                    0.106
                ],
                "hex": "#17171b"
            }
        },
        "brand-silverstone": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.702,
                    0.702,
                    0.706
                ],
                "hex": "#b3b3b4"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.941,
                    0.98,
                    0.922
                ],
                "hex": "#f0faeb"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.137,
                    0.216,
                    0.188
                ],
                "hex": "#233730"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument-Serif",
                "fontSize": {
                    "value": 168,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument-Sans",
                "fontSize": {
                    "value": 130,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.012,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument-Sans",
                "fontSize": {
                    "value": 100,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.013,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument-Sans",
                "fontSize": {
                    "value": 78,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.007,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Instrument-Sans",
                "fontSize": {
                    "value": 60,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        }
    }
}
```

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

More like this

Browse Agency →
taito.ai
Taito AI AI
Taito AI
jackandjill.ai
Jack & Jill AI
Jack & Jill
hunar.ai
Hunar AI
Hunar
fureyfs.com
Furey Agency
Furey