UltraHire — Brand Book

Official Brand Document · Locked June 2025

Brand Book

The complete reference for UltraHire's visual identity, voice, and component system. Everything here is locked — add, never replace.

Version 1.0 — June 2025

Primary Typeface Chillax (wordmark) + General Sans (primary)

Core Accent #E8FF4A

Default Theme Dark

01 — Brand Story

What UltraHire is.

UltraHire is the talent infrastructure for a new kind of India — one where education, culture, hospitality, and media are all converging. We list roles across a curated network of ambitious brands.

The Problem We Solve

India's best roles are scattered — buried in brand websites, shared in WhatsApp forwards, or just never posted at all. Talented people miss opportunities not because they're unqualified, but because the signal is too weak. UltraHire clears the noise.

Who We're For

Craft-driven people who care about where they work, not just what they earn. Designers, educators, coordinators, builders — people who want to join a brand they believe in, not just a company that pays.

Brand Positioning

Premium, editorial, dark-first. UltraHire feels like a curated platform, not a job board. The visual identity is borrowed from the world of culture and music — precise, atmospheric, and intentional.

The Network Promise

Every brand on UltraHire is vetted. We don't list jobs from companies we wouldn't work at ourselves. The platform's quality is its curation — and curation is everything.

Brand Pillars

Craft — We exist for people who take their work seriously. Every touchpoint should feel designed, not assembled.

Clarity — No friction. You should know the role, the brand, and the ask within 10 seconds of looking at a card.

Credibility — The brands on this platform have a story. We give them space to tell it — not a spreadsheet row.

02 — Logo

The logo.

The UltraHire logo is a lockup of the "ij" monogram mark and the Chillax 700 wordmark. They appear as a single unit — mark left, wordmark right. The mark may be used standalone only at sizes where the full lockup would become illegible.

Full lockup

Primary — on dark

On light background

On accent — full black

On surface / card

Monogram mark — standalone

Mark on dark

Mark on light

✓ Do

Always present the lockup as the primary logo — monogram mark immediately to the left of the wordmark, vertically centred.

✓ Do

Always use Chillax 700 for the wordmark. Always split "Ultra" and "Hire" in two colours.

✗ Don't

Never place the wordmark to the left of or below the monogram. The mark is always left; the wordmark is always right.

✗ Don't

Never stretch, rotate, add shadow, outline, or rasterise either the mark or the wordmark.

✗ Don't

Never place on a busy image background without a dark scrim. Ensure minimum contrast at all times.

↳ Note

On accent (#E8FF4A) backgrounds, render the full lockup — monogram and wordmark — entirely in #0A0A0A. No colour split.

↳ Note

Standalone mark: use only when the full lockup renders below 14px cap-height (e.g. favicons, app icons, small badges). Do not use the mark alongside unbranded text.

↳ Note

Clearspace: maintain a minimum of 1× the cap-height of the wordmark as clearspace around the entire lockup on all four sides.

03 — Colour

The palette.

One dominant accent. Everything else is a carefully graded neutral. The acid yellow exists to punctuate, never to fill. Use it deliberately.

Acid Yellow #E8FF4A · Dark mode accent

Acid Yellow Deep #B8CC1E · Hover state

Acid Yellow Light #8FA00E · Light mode accent

Black Base

#0A0A0A

Page background (dark)

Surface

#111111

Cards, nav panels

Surface Hover

#181818

Card hover state

Warm White

#F0EDE6

Primary text (dark)

Off White

#F5F4F0

Page background (light)

Industry badge colours

Education

#7DD3FC

Marketing

#C4B5FD

FMCG

#FDA4AF

Events

#6EE7B7

Accent Usage Rules

CTAs, active states, live indicators

Logo "Hire" split, section eyebrows

Hero title emphasis (em tag)

Active filter pill fill

Never Use Accent For

Large background fills or sections

Body text colour

Decorative illustration fills

More than 20% of any screen's visible area

04 — Typography

The type system.

Chillax for the wordmark, General Sans for everything else. Chillax brings personality to the brand mark; General Sans carries all headings, UI, and body copy with confident clarity.

Display specimen · General Sans 600

Build something

worth remembering.

Explore opportunities across the UltraHire network — from cinematic music experiences to education, hospitality, and beyond. Find the role that fits your craft.

Chillax

Wordmark only — UltraHire logotype

UltraHire 800 — headings, logo

UltraHire 700 — card titles

UltraHire 600 — labels

General Sans

Body · UI · Captions

Actively hiring 500 — CTA, buttons

Explore roles 400 — filter buttons

Role description text 300 — body copy

Display XL Hero

Display L Section heading

Display M Card title / role name

Body Standard body copy — General Sans 300, 15px, 1.6 line-height

Caption Card descriptions, filter labels, helper text

Label Eyebrow · Badge · Category

05 — Spacing & Layout

The grid.

An 8px base grid. All spacing values are multiples of 4. Page content is constrained to 960px max-width with 48px lateral padding (20px on mobile).

--space-1

4px Internal icon gap, dot spacing

--space-2

8px Filter pill gap, badge gap

--space-3

12px Card inner gap, icon-to-text

--space-4

20px Grid gap, card padding sub-sections

--space-5

28px Card internal padding

--space-6

48px Page lateral padding (desktop)

--space-7

64px Section top padding

--space-8

100px Section bottom padding

Border Radius

radius-xs

6px

Code blocks, small chips

radius-sm

10px

Logo tile, inner elements

radius

16px

Cards, modals, panels

radius-pill

100px

All buttons, filter pills, badges

06 — Light & Dark Mode

Two themes, one identity.

Dark is the default and primary brand expression. Light mode is provided as an accessibility and context option. The accent adjusts between modes — never use the dark-mode yellow on a light background.

Dark — default

Build something worth remembering. Explore opportunities across the UltraHire network.

Light — toggled

Build something worth remembering. Explore opportunities across the UltraHire network.

Dark bg

Accent: #E8FF4A
Surface: #111111
Text: #F0EDE6
Border: rgba(255,255,255,0.08)

Light bg

Accent: #8FA00E
Surface: #FFFFFF
Text: #0F0F0F
Border: rgba(0,0,0,0.09)

✗ Don't

Never use #E8FF4A (dark accent) on a light background — it loses contrast and fails accessibility.

07 — Buttons & Filters

Interactive elements.

All interactive elements use pill geometry (border-radius: 100px). Three button variants. One filter pill variant with active state.

Job description ↓

Button variants

Primary — Accent fill, dark text. For the most important action on a card (Apply now).
Secondary — Ghost with border-hover border. Equal weight to primary in dual-CTA layout.
Padding: 9px 18–20px. Font: General Sans 500, 13px.
Hover: primary darkens to #B8CC1E. Secondary gains surface background.
All buttons are pill-shaped — border-radius: 100px.

Filter bar system

Two independent filter rows — Industry and Role — stacked vertically, separated by a 1px border.
Sticky at top: 65px offset (below fixed nav).
Active pill: accent fill, dark text, font-weight 500.
Label column: 120px wide, 11px uppercase General Sans, text-dim colour.
Filters work combinatorially — industry × role = intersection.

We're hiring

Eyebrow pill

Used at the top of hero sections only.
Accent colour text, accent border at 25% opacity.
Animated pulse dot on the left.
11–12px, letter-spacing 0.12em, uppercase.

08 — Job Cards

The card system.

Job cards are the primary content unit. Each card carries the brand logo, role title, YoE badge, a short description, and two CTAs. Layout is fixed — do not reorder elements.

WH

Events

Event Planner

3–4 yrs exp

Own end-to-end event execution for WHAM's cinematic live experiences — from scouting locations to coordinating artists and production crews.

Card anatomy

Card top row — Brand logo (52×52px, radius-sm, dark bg) + industry badge (top-right).
Job meta row — Role title (General Sans 600, 19px) + YoE badge inline.
Description — General Sans 300, 13.5px, 2–3 lines, text-muted.
Footer — Dual CTAs separated by a 1px border-top. "Apply now" is always primary (accent fill); "Job description" is always secondary.
Hover: card lifts translateY(-3px), border brightens to border-hover, radial mouse-track glow appears.
Card background: surface (#111). Hover: surface-2 (#181818).
Grid: auto-fill, minmax(300px, 1fr), 20px gap.

09 — Badges & Tags

Labels and identifiers.

Four industry badge colours. One YoE tag style. All are pill-shaped. Badge colours are fixed per industry — never swap them.

Education Marketing FMCG Events 3–4 yrs exp Open level

Industry badges

11px, 500 weight, 0.08em tracking, uppercase. Pill border-radius. Background at 6% opacity; border at 25% opacity; text at full colour.

YoE tag

11px, 500 weight, 0.03em tracking. Background: surface-2. Border: border. Text: text-dim. Inline with role title.

↳ Adding industries

Add a new CSS class `.cat-newname` with a new pastel accent colour. Follow the same opacity pattern (text full, bg 6%, border 25%).

10 — Motion

How things move.

Motion should feel precise and purposeful — never decorative for its own sake. One well-orchestrated entrance animation beats five scattered micro-interactions.

Standard transition

Used for all hover states — buttons, cards, filter pills, links. Short and snappy.

0.22s cubic-bezier(0.4, 0, 0.2, 1)

Card entrance

Cards fade up on load and on filter change. Staggered by 60ms per card.

fadeUp 0.4s ease · delay: n × 60ms

Theme switch

Background, surface, and text colours transition smoothly when toggling modes.

background/color 0.3s ease

Card hover glow

Radial gradient tracks the mouse position within the card. Fades in on hover.

opacity 0.3s · translateY(-3px)

Live indicator pulse

The "We're hiring" dot pulses to signal active state. Runs indefinitely.

pulse 2s ease-in-out infinite

CTA arrow nudge

Arrow icon on "Apply now" / "Explore" buttons nudges right + up on hover.

translateX(2px) translateY(-2px)

Motion principles

Subtlety first. No bounces, springs, or dramatic easing unless the moment specifically calls for it.

State clarity. Every animation communicates a state change — hover, active, loading, filtering. No decorative idle animations except the hiring pulse.

Respect reduced motion. All non-essential animations should honour prefers-reduced-motion: reduce.

11 — Brand Voice

How we speak.

UltraHire speaks like a sharp creative director, not an HR portal. Confident, specific, a little cinematic. We treat job seekers as craft practitioners, not applicants.

✓ Write this

"Own end-to-end event execution for WHAM's cinematic live experiences — from scouting locations to coordinating artists and production crews across India."

✗ Not this

"The candidate will be responsible for managing event operations and coordinating with various stakeholders as per company requirements."

✓ Write this

"Build the visual world of WHAM's live performances. You'll design and oversee construction of stage sets and atmospheric props that bring each event's narrative to life."

✗ Not this

"Looking for a creative set designer to join our dynamic team. Must be a team player with good communication skills and attention to detail."

Confident Specific Cinematic Direct Craft-aware No jargon No corporate filler Warm, not casual

Writing job descriptions

Start with the action, not the job title. Lead with what the person will actually do on day one. Avoid "responsible for" — use active ownership language: own, build, lead, design, create, ship.

Writing brand descriptions

Give each brand one sentence that would work as a logline. Include the brand's point-of-view on its category, not just what it does. WHAM isn't "a music events company" — it's "cinematic live music set in India's most stunning landscapes."

12 — Design Tokens

The reference.

All CSS custom properties used across the UltraHire platform. Values shown for dark mode (default). Light mode overrides are applied via body.light.

Token	Dark value	Light value	Usage
--bg	#0a0a0a	#f5f4f0	Page background
--surface	#111111	#ffffff	Cards, nav, panels
--surface-2	#181818	#eeede9	Card hover, secondary surfaces
--border	rgba(255,255,255,0.08)	rgba(0,0,0,0.09)	Default borders
--border-hover	rgba(255,255,255,0.18)	rgba(0,0,0,0.20)	Hover borders, button outlines
--text	#f0ede6	#0f0f0f	Primary text
--text-muted	rgba(240,237,230,0.5)	rgba(15,15,15,0.5)	Body copy, descriptions
--text-dim	rgba(240,237,230,0.25)	rgba(15,15,15,0.3)	Labels, captions, metadata
--accent	#e8ff4a	#8fa00e	CTAs, active states, logo split
--accent-dark	#b8cc1e	#6b780a	Accent hover state
--accent-dim	rgba(232,255,74,0.12)	—	Accent backgrounds, code blocks
--nav-bg	rgba(10,10,10,0.85)	rgba(245,244,240,0.88)	Fixed nav background
--filter-bg	rgba(10,10,10,0.9)	rgba(245,244,240,0.94)	Sticky filter bar background
--radius	16px	16px	Cards, modals
--radius-sm	10px	10px	Logo tiles, inner elements
--font-display	'General Sans', sans-serif	—	Headlines, card titles, all UI headings
--font-body	'General Sans', sans-serif	—	Body, buttons, UI labels
--t	0.22s cubic-bezier(0.4,0,0.2,1)	—	All hover transitions

Extending the token system

When adding new components or sections to UltraHire, always use existing tokens rather than hardcoded values. If a new token is needed, define its dark-mode default in :root and its light-mode override inside the body.light block. Always provide both values. Naming convention: category-variant (e.g. --surface-3, --text-accent).