Jobright Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

9tokens

9type steps

8radius steps

4pxspacing base

Jobright, in one page

Jobright is the marketing site of an AI job-hunting platform, and its design radiates startup energy. The system is anchored by a single electric accent — a spring-mint green ({colors.primary} — #00f0a0) — set against crisp black ({colors.ink}) and white ({colors.canvas}). The signature move is a pale-mint section band ({colors.canvas-mint} — #ecffe0) that carries most of the page: heroes, feature blocks, FAQ, and the closing CTA all sit on this soft green wash, punctuated by full-black bands for the scrolling job ticker and a featured testimonial.

The type system pairs a bold, slightly condensed Titillium Web ({typography.display}) for big confident headlines with a clean Inter ({typography.body-md}) for UI and body copy. Headlines run large and heavy; body stays light and readable. The overall feel is friendly and high-energy rather than corporate — rounded product-mockup cards, emoji accents, and generous whitespace keep it approachable.

The CTA system is built on high-contrast pill buttons. Primary actions use a black pill ({colors.ink} fill, white label) at a large 28px radius; the brand's signature accent button is a mint-green pill ({colors.primary} fill, black label, thin black border) at a rounder 36px. Product features are demonstrated in white mockup cards with pronounced 40px asymmetric corners, floating over the mint bands. Elevation is light — a hairline or a whisper-soft shadow, never heavy blur.

Key Characteristics:

A single electric accent: spring-mint {colors.primary} owns the logo, links, the signature green pill, and every highlight — used against black and white with conviction.
Pale-mint section bands ({colors.canvas-mint}) carry the page rhythm, alternating with white and full-black bands.
Dual pill-button system: black pills ({rounded.lg}) for primary CTAs, a mint-green pill ({rounded.pill}) for the signature accent action.
Bold Titillium Web display type ({typography.display}) over a light, clean Inter body ({typography.body-lg}) — confident headlines, quiet copy.
Rounded product-mockup cards with a distinctive 40px asymmetric corner ({rounded.card}), floating over the mint bands to demo AI features.
Page rhythm: mint hero → mint stats → white job-hub → black scrolling ticker → alternating mint feature bands → white testimonials → black featured quote → mint FAQ → mint CTA → white footer.

Do's and don'ts

Do

Reserve {colors.primary} for the logo, links, the signature green pill, and highlights — the one electric accent that carries the brand.
Carry section rhythm on the pale-mint band ({colors.canvas-mint}), alternating with white and full-black bands.
Use black pills ({rounded.lg}) for primary CTAs and the mint-green pill ({rounded.pill}) for the one signature accent action.
Pair heavy Titillium Web headlines ({typography.display}) with light Inter body ({typography.body-lg}) for confident-yet-quiet hierarchy.
Float product-mockup cards ({rounded.card}) on soft shadows over the mint bands to demo AI features.
Keep buttons pill-shaped and high-contrast — black-on-mint or white-on-black.

Don't

Don't introduce the product-UI tag/score palette (Ant-style pastels) as brand chrome — the marketing system is mint, black, and white only.
Don't fill a primary CTA with {colors.primary} green as the default — the everyday primary is the black pill; green is the one accent pill.
Don't set body copy in Titillium Web or headlines in Inter — the display/UI font roles are fixed.
Don't put heavy shadows on cards — elevation is a hairline or a whisper-soft float.
Don't cool or blue-shift the mint bands — the section wash is warm spring-mint {colors.canvas-mint}.
Don't square off the pills or the mockup cards — the rounded pill + 40px card silhouette is core to the friendly feel.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Jobright design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #00f0a0
- on-primary: #000000
- ink: #000000
- on-dark: #ffffff
- canvas: #ffffff
- canvas-mint: #ecffe0
- muted: #86909c
- hairline: #e5e7eb
- surface-soft: #f2f4f5

Type:
- families: Titillium Web, Inter
- scale: 13, 14, 16, 18, 32, 38, 48, 60, 80
- weights: 300, 500, 600, 700

Shape:
- radius: 0, 12, 16, 18, 24, 28, 36, 40
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 4, 8, 12, 16, 24, 32, 48, 96

Rules:
- Reserve `{colors.primary}` for the logo, links, the signature green pill, and highlights — the one electric accent that carries the brand.
- Carry section rhythm on the pale-mint band (`{colors.canvas-mint}`), alternating with white and full-black bands.
- Use black pills (`{rounded.lg}`) for primary CTAs and the mint-green pill (`{rounded.pill}`) for the one signature accent action.
- Pair heavy Titillium Web headlines (`{typography.display}`) with light Inter body (`{typography.body-lg}`) for confident-yet-quiet hierarchy.
- Float product-mockup cards (`{rounded.card}`) on soft shadows over the mint bands to demo AI features.
- Keep buttons pill-shaped and high-contrast — black-on-mint or white-on-black.

Avoid:
- Don't introduce the product-UI tag/score palette (Ant-style pastels) as brand chrome — the marketing system is mint, black, and white only.
- Don't fill a primary CTA with `{colors.primary}` green as the default — the everyday primary is the black pill; green is the one accent pill.
- Don't set body copy in Titillium Web or headlines in Inter — the display/UI font roles are fixed.
- Don't put heavy shadows on cards — elevation is a hairline or a whisper-soft float.
- Don't cool or blue-shift the mint bands — the section wash is warm spring-mint `{colors.canvas-mint}`.
- Don't square off the pills or the mockup cards — the rounded pill + 40px card silhouette is core to the friendly feel.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages analyzed: the homepage, the job-referral page, the employers page, the about page, and the tnt page. The palette is consistent across all five — a tightly controlled mint / black / white system.

Brand & Accent

Spring Mint ({colors.primary} — #00f0a0): the brand's one electric accent. Colors the logo mark, links, the signature green pill button, score highlights, and inline emphasis.
On-Primary ({colors.on-primary} — #000000): black label used on top of the mint-green button, where dark-on-mint reads with maximum punch.

Surface

Canvas ({colors.canvas} — #ffffff): default page and card background.
Mint Canvas ({colors.canvas-mint} — #ecffe0): the pale spring-mint band that carries the hero, feature blocks, FAQ, and CTA sections — the system's dominant surface.
Soft Surface ({colors.surface-soft} — #f2f4f5): light gray utility fill for inset panels and inputs.
Hairline ({colors.hairline} — #e5e7eb): 1px card and divider borders.

Text

Ink ({colors.ink} — #000000): headings, body text, and the fill of every black pill button and dark band.
Muted ({colors.muted} — #86909c): secondary text, captions, and footer links.
On Dark ({colors.on-dark} — #ffffff): text set on the black ticker and testimonial bands.

Type scaleRead the full spec

Font Family

Two families do the work. Titillium Web — a bold, slightly condensed humanist sans — carries every display headline and section title, giving the page its confident, high-energy voice. Inter handles all body copy, UI labels, buttons, and captions, keeping dense content clean and legible. The contrast between heavy condensed headlines and light, airy body copy is the system's core typographic tension.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display}`	80px	700	1.05	-1px	Largest hero / section headline (Titillium Web)
`{typography.heading-1}`	60px	700	1.1	-0.5px	Primary section headings (Titillium Web)
`{typography.heading-2}`	48px	700	1.15	0	Feature-band headings (Titillium Web)
`{typography.heading-3}`	38px	700	1.2	0	Stat numbers, sub-headings (Titillium Web)
`{typography.heading-4}`	32px	600	1.25	0	Card titles, quotes (Titillium Web)
`{typography.body-lg}`	18px	300	1.6	0	Lead paragraphs (Inter light)
`{typography.body-md}`	16px	500	1.6	0	Default body copy (Inter)
`{typography.body-sm}`	14px	500	1.5	0	Dense body, ticker, footer (Inter)
`{typography.button}`	16px	600	1	0	Button labels (Inter)
`{typography.nav-link}`	14px	600	1.4	0	Top-nav links (Inter)
`{typography.caption}`	13px	500	1.4	0	Fine print, metadata (Inter)

Principles

Headlines are big, heavy, and condensed for maximum confidence; body copy stays light (Inter 300) and roomy. The pairing lets marketing headlines shout while product detail stays quiet and scannable.

Note on Font Substitutes

Both Titillium Web and Inter are open-source Google fonts — use them directly. If a fallback is needed, Titillium Web degrades to a condensed sans (e.g. "Arial Narrow", system-ui) and Inter to Helvetica/Arial with no metric adjustment.

Components and layoutRead the full spec

Buttons

button-primary — the large black pill CTA ("Try For Free", "Find My Matches", "Start Autofilling")

Background {colors.ink}, white label {colors.on-dark}, type {typography.button}, rounded {rounded.lg}, wide padding {spacing.sm} {spacing.section}.

button-primary-sm — the compact black nav pill ("Join Now")

Background {colors.ink}, white label {colors.on-dark}, type {typography.nav-link}, rounded {rounded.pill-nav}, padding {spacing.xxs} {spacing.md}.

button-green — the signature mint-green pill ("Try For Free" on the closing CTA)

Background {colors.primary}, black label {colors.on-primary}, 1px black border {colors.ink}, type {typography.button}, rounded {rounded.pill}, padding {spacing.sm} {spacing.xxl}.

button-dark-square — a squarer black utility button

Background {colors.ink}, white label {colors.on-dark}, type {typography.button}, rounded {rounded.sm}, padding {spacing.sm} {spacing.md}.

Cards & Containers

feature-card — the white product-mockup card demoing an AI feature

Background {colors.canvas}, type {typography.body-md}, rounded {rounded.card} (40px, with one asymmetric sharp corner), padding {spacing.lg}, floating on a soft shadow over the mint band.

video-card — the rounded hero video frame

Background {colors.canvas}, 1px {colors.ink} border, rounded {rounded.md}.

testimonial-card — a user-love quote card

Background {colors.canvas}, 1px {colors.hairline} border, rounded {rounded.lg}, padding {spacing.lg}, with an avatar, name, and quote.

score-ring — the circular AI-match score indicator

White surface {colors.canvas}, mint value {colors.primary} in {typography.heading-4}, rounded {rounded.full}, size 64px.

Inputs & Forms

text-input — search and form fields

Background {colors.canvas}, 1px {colors.hairline} border, text {colors.ink}, type {typography.body-md}, rounded {rounded.sm}, padding {spacing.sm} {spacing.md}.

job-search-bar — the footer job-search control row

White pill {colors.canvas}, 1px {colors.hairline} border, rounded {rounded.full}, padding {spacing.xs} {spacing.md}, holding Work Model / Location / Experience select controls and a submit.

Navigation

nav-bar — top navigation (desktop)

Background {colors.canvas}, links {colors.ink} in {typography.nav-link}, padding {spacing.md}. Logo left, link cluster center, "Sign In" plus a persistent black {component.button-primary-sm} "Join Now" pill right. Collapses to a hamburger under 768px.

footer — the site footer

Background {colors.canvas}, muted {colors.muted} links in {typography.body-sm}, padding {spacing.section}. Multi-column link groups, logo, social icons, and the {component.job-search-bar} above it.

Signature Components

hero — the pale-mint hero band

Background {colors.canvas-mint}, black display headline {typography.display}, padding {spacing.section}, with a rounded {component.video-card} and a black {component.button-primary}.

stat-item — a trust statistic (2,000,000 users, 80%, No.1 Choice)

On the mint band {colors.canvas-mint}, big black number {typography.heading-3} over a caption, with a small line icon.

job-ticker — the scrolling black job-listing marquee

Full-width black band {colors.ink}, white text {colors.on-dark} in {typography.body-sm}, padding {spacing.md}, with continuously scrolling job titles and mint Jobright marks.

feature-band — an AI-feature section on the mint wash

Background {colors.canvas-mint}, black headline {typography.heading-2}, padding {spacing.section}; copy + a black {component.button-primary} on one side, a {component.feature-card} mockup on the other.

testimonial-band-dark — the featured black testimonial band

Background {colors.ink}, white quote {colors.on-dark} in {typography.heading-4}, padding {spacing.section}, with an author avatar and title.

faq-item — a question accordion row

On the mint band {colors.canvas-mint}, 1px {colors.hairline} divider, question {colors.ink} in {typography.body-md}, padding {spacing.md}, with a plus/expand toggle.

cta-band — the closing "Let Jobright Take You to..." band

Background {colors.canvas-mint}, black headline {typography.heading-2}, padding {spacing.section}, with a {component.button-green} and a hand-drawn illustration.

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-jobright {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #00784f;
  --link-hover-color: #00452d;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #00f0a0;
  --button-text-color: #000000;
  --button-hover-bg: #00bd7e;
  --button-border: none;
  --button-border-radius: 24px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-inter);
  --heading-font: var(--font-inter);
  --card-border-radius: 24px;
}

Download theme.css

Where this came from

Source document: volt/design-md/jobright/DESIGN.md · 26.0 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.