Skip to content
DesignMunkDesignMunk Submit a site

Tracebit Careers

tracebit.com
The answer to Assume Breach: detect attacks in seconds.
Security Software Webflow Careers Basis Grotesque Mono TWK Lausanne Pan
Share Visit site
tracebit.com DESKTOP · 1440
Tracebit Careers

AI Breakdown

Design export

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

# Tracebit: Cream Careers Page with Monospace Body Copy

## Overview

Tracebit's UI communicates serious, technical confidence with a soft, human edge. The default surface is cream and typography is high-contrast black with restrained accent colours. Density is moderate: large, tight headlines lead compact mono body copy and compact CTAs. The tone is professional and security-focused, suitable for enterprise buyers and candidates who expect clarity over flair.

## Colors

- **primary (#231f20):** Core ink for headlines, body, navigation, and icons.
- **secondary (#fc9c04):** High-energy accent for highlights, data points, or badges; use sparingly.
- **tertiary (#ea6f53):** Warm accent for emphasis, dividers, or small decorative marks; avoid pairing with secondary in the same component.
- **neutral (#f3efec):** Brand surface colour for page backgrounds and large sections.
- **brand-armor-wash (#040404):** Near-black for announcement bars, dark overlays, or high-contrast sections.
- **brand-savory-salmon (#d39c99):** Muted salmon for soft accents or illustrations; keep usage minimal.
- **surface ({colors.neutral} → #f3efec):** Alias of neutral; use as the default canvas.
- **on-surface ({colors.primary} → #231f20):** Alias of primary; default text on cream or white.

## Typography

- Headlines: TWK Lausanne Pan (proprietary). Roles: headline-lg 72/1.19 (600, -0.03em), headline-md 48/1.19 (600, -0.035em), headline-sm 32/1.19 (500, -0.013em), headline-xs 21/1.14 (500, -0.019em). Substitutes: Inter, IBM Plex Sans, Plus Jakarta Sans.
- Body/UI: Basis Grotesque Mono (proprietary) at 14px/1.4 for paragraphs, meta, nav, and controls. Substitutes: IBM Plex Mono, JetBrains Mono, Space Mono.
- Pairing guidance: Use Lausanne for all headings and prominent labels; keep body in mono for a technical feel. Avoid mixing substitutes within a single page; pick one sans and one mono family consistently.

## Layout

Spacing scale favors roomy sections with tight internal rhythm: xs 6, sm 16, md 24, lg 40, xl 96. Use xl (96px) for vertical section padding on the cream surface. Use lg (40px) for block spacing within sections and md (24px) for element groups. Cards use 32px internal padding per token. Build responsive grids with gutters derived from sm (16px) or md (24px) for clarity.

## Elevation & Depth

Depth is primarily conveyed through tonal contrast (cream surface vs. white cards) and hairline outlines. Shadows are minimal: use the sm shadow (rgba(0,0,0,0.08) 0 0 0 0.5px) for subtle elevation on hover or focus. Larger shadows are none; lean on whitespace and borders instead.

## Shapes

Corners are modest and utilitarian. Primary buttons use md (10px) for a friendly but serious touch. Secondary buttons use sm (4px) to feel more neutral. Cards and large media use lg (12px) to visually separate from the cream background without feeling pill-like.

## Components

- Button — Primary: #231F20 background, white text, 40px height, 4px×14px padding, 10px radius. Use for CTAs like "View open positions".
- Button — Secondary: No fill, #231F20 text, 40px height, 4px×14px padding, 4px radius. Use for filters and less-prominent actions.
- Button — Link: Text-only action in #8A3C90, 0px radius. Reserve for inline links like "View role".
- Card: White background, #231F20 text, 12px radius, 32px padding. Use for testimonials, awards, and job listings.

### Announcement Bar
- Background #040404 with mono body at 14/1.4. Use sm (16px) horizontal padding and xs (6px) vertical. Links trail with an arrow.

### Careers Hero
- Headline uses headline-md (48px, 600, -0.035em). Supporting copy in body-md (14/1.4). Primary CTA uses the primary button spec. Section padding xl (96px) top/bottom.

### Office Media Strip
- Full-width image/video montage directly after the hero. Container radius lg (12px). Outer margin lg (40px) to the next block.

### Team Voices
- Quote text set in headline-xs (21px, 500) with paragraphs in body-md. Each quote can sit in a Card for contrast on the cream background.

### Recognition Badges Row
- Inline list of awards/investor marks. Use md (24px) gap, body-md captions, and keep icons monochrome on the cream surface.

### Perks List
- Simple list using body-md with md (24px) vertical spacing between items. Optional check icons align to a 24px grid.

### Job Listings & Filters
- Filter row uses secondary buttons (40px height, 4px radius). Each job is a Card: title in headline-sm (32px, 500), details in body-md, and a link button in #8A3C90.

### Footer Trust & Links
- Multi-column links in body-md with certification badges. Section spacing lg (40px) and subtle sm shadow only on interactive badges if needed.

## Do's and Don'ts

- Do use the cream surface (#F3EFEC) as the default page background; reserve pure white for cards and media containers.
- Do keep CTAs compact (40px height) with 10px radius; this proportion is a signature.
- Do limit accents to one per component—use either #FC9C04 or #EA6F53, not both together.
- Don't introduce heavy drop-shadows; use the sm 0.5px outline or tonal separation instead.
- Don't enlarge body text beyond the mono 14px without rebalancing spacing; if increasing size, also increase gaps.
- Don't mix multiple fallback sans/mono families on the same page; choose one pair consistently.

## Agent Prompt Guide

Quick reference — Text: #231F20, Background: #F3EFEC, Border: #231F20, Accent: #FC9C04.

1) Careers hero on cream
- Canvas #F3EFEC. H1: TWK Lausanne Pan 48px/1.19, weight 600, letter-spacing -0.035em (use Inter as substitute). Body: Basis Grotesque Mono 14px/1.4 (use IBM Plex Mono as substitute). Primary CTA: background #231F20, text #FFFFFF, height 40px, padding 4px 14px, radius 10px. Section padding: 96px top/bottom.

2) Team quote card
- Card: background #FFFFFF, text #231F20, radius 12px, padding 32px, sm shadow (rgba(0,0,0,0.08) 0 0 0 0.5px). Quote lead: 21px/1.14 at 500. Body: 14px/1.4 mono. Accent rule in #EA6F53 at 2px height.

3) Job listings grid with filters
- Filters: secondary buttons (#231F20 text, 40px height, 4px radius, padding 4px 14px). Each job card: white bg, 12px radius, padding 32px, title 32px/1.19 at 500, details 14px/1.4 mono, "View role" as link button in #8A3C90.

4) Announcement bar
- Full-width bar on #040404 with mono 14px/1.4 text in #FFFFFF, horizontal padding 24px, vertical padding 6px. Right-pointing arrow glyph after links.

5) Recognition badge strip
- Cream section (#F3EFEC), heading 21px/1.14 at 500, badges on white 12px-radius chips with 16px gaps; use sm shadow on hover only.

## Similar Brands

- Snyk — Shares a serious, developer-first tone and dark accents; Snyk leans more purple and uses heavier illustrations.
- Vanta — Compliance-oriented with soft neutrals and clean cards; Vanta's body type is proportional rather than monospace.
- Tines — Security automation with sparse layouts and restrained colour; Tines uses larger body sizes and more generous whitespace.
- CrowdStrike — Enterprise security with high contrast and assertive CTA styling; more aggressive colour and imagery than Tracebit.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #231f20;
  --color-secondary: #fc9c04;
  --color-tertiary: #ea6f53;
  --color-neutral: #f3efec;
  --color-brand-armor-wash: #040404;
  --color-brand-savory-salmon: #d39c99;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 72px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-leading: 1.19;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.19;
  --text-headline-md-tracking: -0.035em;
  --text-headline-sm-size: 32px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.013em;
  --text-headline-xs-size: 21px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.14;
  --text-headline-xs-tracking: -0.019em;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --font-twk-lausanne-pan: "TWK Lausanne Pan";
  --font-basis-grotesque-mono: "Basis Grotesque Mono";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 12px;

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

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: #ffffff;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 4px 14px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 4px 14px;
  --button-secondary-height: 40px;
  --button-link-text-color: #8a3c90;
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-lg);
  --card-padding: 32px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #231f20;
  --color-secondary: #fc9c04;
  --color-tertiary: #ea6f53;
  --color-neutral: #f3efec;
  --color-brand-armor-wash: #040404;
  --color-brand-savory-salmon: #d39c99;
  --color-surface: #f3efec;
  --color-on-surface: #231f20;
  --font-headline-lg: "TWK Lausanne Pan";
  --font-headline-md: "TWK Lausanne Pan";
  --font-headline-sm: "TWK Lausanne Pan";
  --font-headline-xs: "TWK Lausanne Pan";
  --font-body-md: "Basis Grotesque Mono";
  --text-headline-lg: 72px;
  --text-headline-md: 48px;
  --text-headline-sm: 32px;
  --text-headline-xs: 21px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.035em;
  --tracking-headline-sm: -0.013em;
  --tracking-headline-xs: -0.019em;
  --font-weight-headline-lg: 600;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --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.122,
                    0.125
                ],
                "hex": "#231f20"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.612,
                    0.016
                ],
                "hex": "#fc9c04"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.918,
                    0.435,
                    0.325
                ],
                "hex": "#ea6f53"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.953,
                    0.937,
                    0.925
                ],
                "hex": "#f3efec"
            }
        },
        "brand-armor-wash": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "brand-savory-salmon": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.827,
                    0.612,
                    0.6
                ],
                "hex": "#d39c99"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.953,
                    0.937,
                    0.925
                ],
                "hex": "#f3efec"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.137,
                    0.122,
                    0.125
                ],
                "hex": "#231f20"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "TWK Lausanne Pan",
                "fontSize": {
                    "value": 72,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "TWK Lausanne Pan",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.035,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "TWK Lausanne Pan",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.013,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "TWK Lausanne Pan",
                "fontSize": {
                    "value": 21,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.019,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Basis Grotesque Mono",
                "fontSize": {
                    "value": 14,
                    "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 Tracebit Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

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