Skip to content
DesignMunkDesignMunk Submit a site

Tabs Careers

tabs.com
Close faster. Bill smarter. Report with confidence.
Fintech Software Next.js Tailwind Careers Geist Mono
Share Visit site
tabs.com DESKTOP · 1440
Tabs Careers

AI Breakdown

Design export

# Design brief: the Tabs 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/12085407/tabs-com-careers-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/12085407/tabs-com-careers-featured.webp
- On DesignMunk: https://designmunk.com/tabs-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

# Tabs: Hiring Page Anchored by Aqua Release Bar

## Overview

Tabs presents a precise, product-led brand with restrained color and confident spacing. The audience is B2B finance and operations talent; tone stays professional and human. Interfaces should feel fast, minimal, and trustworthy—dense enough for enterprise detail, but with generous white space and clear hierarchy. When tokens don't cover a case, default to white surfaces, black text, and a single aqua accent used sparingly.

## Colors

- **primary (#0B0B0B):** Core ink for headlines, body text, and iconography.
- **secondary (#6AF0F8):** Electric aqua accent for announcement bars, highlights, and subtle interactive states.
- **neutral (#FFFFFF):** Paper white backgrounds and page surfaces.
- **border (#E5E7EB):** Light divider lines and subtle component boundaries.
- **brand-kuretake-black-manga (#04141C):** Deeper blue-black for moments needing extra depth against white (e.g., media overlays or dark fills).
- **surface (#FFFFFF):** Alias of Neutral; default surface color.
- **on-surface (#0B0B0B):** Alias of Primary; default text on light surfaces.

## Typography

- Geist Mono (headline-lg 56px/1.2, 500, 0.021em) is available via Google Fonts. Use for emphatic, short headlines or technical labels where a precise, engineered tone is desired. Substitutes: JetBrains Mono, IBM Plex Mono, Roboto Mono.
- Geist (headline-md 43px/1.41, 500, -0.02em; headline-sm 33px/1.21, 500, -0.012em; headline-xs 26px/1.19, 500; body-md 20px/1.5, 400, -0.02em) is available via Google Fonts. Use for all running text and most headings. Substitutes: Inter, Manrope, system-ui/SF Pro Text.
- Role guidance: headline-lg for primary hero or marquee statements; headline-md for section leads; headline-sm/xs for subheads and component titles; body-md for paragraphs, links, and navigation.

## Layout

Spacing favors clarity: xs 8px for tight in-component gaps, sm 20px for gutters and compact stacks, md 36px for standard section spacing, lg 48px for block-to-block rhythm, xl 96px for major section breaks and heroes. Use a responsive grid (e.g., 12 columns) with generous margins; on wide viewports, keep content width comfortable and let white margins do the separation. Photo mosaics and multi-card grids work well in 3-up or 2x3 patterns with sm or md gaps.

## Elevation & Depth

Depth is minimal. Shadows are largely off; only a subtle, upward cast (sm: rgba(0,0,0,0.05) 0 -10px 40px) appears on sticky/announcement elements. Hierarchy relies on whitespace, clear type scales, and light borders (#E5E7EB). Use tonal contrast (primary on neutral) before adding elevation.

## Shapes

Corners are functional and consistent: sm 8px on cards, images, and small surfaces; full 9999px for pills, CTAs, and avatars. Reserve the full radius for interactive emphasis; keep structural elements at 8px to maintain cohesion.

## Components

Buttons
- Primary: white text, pill radius (9999px), 14px 20px padding, 43px height. Use against light surfaces for maximum contrast.
- Secondary: primary text color, pill radius (9999px), same sizing as primary; reads as a quiet alternative.
- Link: primary text color, no radius; inline use.

Card
- Neutral background, primary text, 8px radius, 16px padding. Use borders (#E5E7EB) if additional separation is needed.

### Announcement Bar
- Full-width strip at the very top. Background may use a light-to-dark treatment anchored by Secondary (#6AF0F8); small body text with a right-pointing arrow link.

### Careers Hero
- Centered stack: small label, main headline, single primary button. Vertical spacing: xl (96px) above/below; text color primary on surface.

### Team Photo Mosaic
- Three images in a row. Each image gets 8px radius; gaps at sm (20px) to md (36px). Keep consistent heights for a calm rhythm.

### Beliefs Grid
- Six short principles in a 2x3 grid. Titles in headline-xs; copy in body-md. Use card padding (16px) and 8px corners where boxed.

### Employee Testimonials
- Quote text in body-md, name/role as a small subline. Use border separators or ample md (36px) spacing between entries; imagery optional.

### Benefits List
- Two-column list of perks with concise descriptions. Headings in headline-xs, copy in body-md; 8px corners if placed in cards.

### Open Positions
- Table or list with filters. Empty state allowed: a clear "(0)" with loading message. Use border lines (#E5E7EB) and 20–36px row padding.

### Press Links
- Inline links with date and source. Style as link buttons (button-link), keeping typography in body-md with tight, readable spacing.

## Do's and Don'ts

- Do keep backgrounds white (#FFFFFF) and text #0B0B0B for maximum clarity; use aqua (#6AF0F8) sparingly for high-signal elements.
- Do reserve the full pill radius for primary actions and chips; keep cards and images at 8px.
- Do maintain section rhythm with 48–96px vertical spacers; avoid cramming new modules without xl breathing room.
- Don't introduce heavy shadows; prefer borders (#E5E7EB) and whitespace for separation.
- Don't stack multiple aqua accents in the same viewport; one focal accent per section is sufficient.
- Don't mix additional font families; stick to Geist and Geist Mono (or listed substitutes when unavailable).

## Agent Prompt Guide

Quick color reference
- Text: #0B0B0B
- Background: #FFFFFF
- Border: #E5E7EB
- Accent: #6AF0F8

1) Build a centered careers hero
- Container: max-width 960px, centered on #FFFFFF with 96px top/bottom padding.
- H1: Geist Mono, 56px, weight 500, line-height 1.2, letter-spacing 0.021em, color #0B0B0B.
- CTA: button 43px height, 14px 20px padding, pill radius 9999px; fill #0B0B0B with text #FFFFFF.

2) Create a 3-up team photo row
- Grid: 3 columns, gap 20px (sm). Each image: 8px radius, no shadow, border 1px #E5E7EB optional.
- Caption (optional): Geist 20px/1.5, color #0B0B0B.

3) Lay out a 2x3 beliefs grid
- Grid: 3 columns on desktop, 2 on tablet, gap 36px (md).
- Card: background #FFFFFF, 8px radius, 16px padding, no shadow.
- Title: Geist 26px/1.19, 500; Copy: Geist 20px/1.5, 400, color #0B0B0B.

4) Benefits list, two columns
- Section padding: 48px (lg) top/bottom.
- Column grid: 2 columns, gap 36px (md).
- Item title: Geist 26px/1.19, 500; body: Geist 20px/1.5, 400.

5) Press links rail
- Stack items vertically with 20px gaps.
- Link style: color #0B0B0B, underline on hover; treat as button-link (no radius). Date in Geist 20px/1.5, 400.

## Similar Brands

- Stripe: Similar disciplined white space and restrained color; Stripe leans purple/gradient heavier and uses more motion.
- Ramp: Comparable black/white rigor and pill CTAs; Ramp's lime accent is more assertive and cards use more tonal blocks.
- Chargebee: SaaS-standard grids and clear pricing; more color variety and heavier illustration than Tabs' reduced palette.
- Mercury: High-contrast monochrome with electric accent; typography skews slightly quirkier, with more editorial art direction.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #0b0b0b;
  --color-secondary: #6af0f8;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-kuretake-black-manga: #04141c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: 0.021em;
  --text-headline-md-size: 43px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.41;
  --text-headline-md-tracking: -0.02em;
  --text-headline-sm-size: 33px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-sm-tracking: -0.012em;
  --text-headline-xs-size: 26px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.02em;
  --font-geist-mono: "Geist Mono";
  --font-geist: "Geist";

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

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

  /* Components */
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 14px 20px;
  --button-primary-height: 43px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 14px 20px;
  --button-secondary-height: 43px;
  --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: #0b0b0b;
  --color-secondary: #6af0f8;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-kuretake-black-manga: #04141c;
  --color-surface: #ffffff;
  --color-on-surface: #0b0b0b;
  --font-headline-lg: "Geist Mono";
  --font-headline-md: "Geist";
  --font-headline-sm: "Geist";
  --font-headline-xs: "Geist";
  --font-body-md: "Geist";
  --text-headline-lg: 56px;
  --text-headline-md: 43px;
  --text-headline-sm: 33px;
  --text-headline-xs: 26px;
  --text-body-md: 20px;
  --tracking-headline-lg: 0.021em;
  --tracking-headline-md: -0.02em;
  --tracking-headline-sm: -0.012em;
  --tracking-body-md: -0.02em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 8px;
  --spacing-sm: 20px;
  --spacing-md: 36px;
  --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.043,
                    0.043,
                    0.043
                ],
                "hex": "#0b0b0b"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.416,
                    0.941,
                    0.973
                ],
                "hex": "#6af0f8"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-kuretake-black-manga": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.078,
                    0.11
                ],
                "hex": "#04141c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.043,
                    0.043,
                    0.043
                ],
                "hex": "#0b0b0b"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 36,
                "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": "Geist Mono",
                "fontSize": {
                    "value": 56,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": 0.021,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 43,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 33,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.012,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 26,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.02,
                    "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 Tabs Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Fintech →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery