Brand System

The complete identity behind JobXi — tokens, assets, motion and usage rules in one place.

01 Logo 02 Colors 03 Type 04 Motion 05 Downloads 06 Tokens 07 Social 08 Rules 09 Handoff

01Logo System

Size Variations

<jobxi/>16px

<jobxi/>24px

<jobxi/>32px

<jobxi/>48px

<jobxi/>64px

<jobxi/>96px

<jobxi/>128px

Wordmark Variants

Dark · Default

On dark / deep backgrounds

Light

On light / white backgrounds

Monochrome

On coloured / gradient fills

White

On brand-violet fills

Icon Mark — "xi"

xi16px

xi24px

xi32px

xi48px

xi64px

xi96px

xidark

xilight

xiviolet fill

Clear Space

1× height1× height1×1×<jobxi/>

Minimum clear space = 1× the logo height on all four sides

02Color System

Violet — Brand Scale

#F5F3FF

50 · rgb(245, 243, 255)

#EDE9FE

100 · rgb(237, 233, 254)

#DDD6FE

200 · rgb(221, 214, 254)

#C4B5FD

300 · rgb(196, 181, 253)

#A78BFA

400 · rgb(167, 139, 250)

Primary

#8B5CF6

500 · rgb(139, 92, 246)

#7C3AED

600 · rgb(124, 58, 237)

#6D28D9

700 · rgb(109, 40, 217)

#5B21B6

800 · rgb(91, 33, 182)

#4C1D95

900 · rgb(76, 29, 149)

Neutral — Terminal Scale

Surface Light

#F8F7FF

50 · rgb(248, 247, 255)

Text Primary

#F1F0FB

100 · rgb(241, 240, 251)

Text Secondary

#9896B0

300 · rgb(152, 150, 176)

Text Tertiary

#5C5A72

500 · rgb(92, 90, 114)

Border

#3D3B55

600 · rgb(61, 59, 85)

Raised

#2A2840

700 · rgb(42, 40, 64)

Card

#1A1830

800 · rgb(26, 24, 48)

Base

#0D0B1A

900 · rgb(13, 11, 26)

Deep

#050510

950 · rgb(5, 5, 16)

03Typography

font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace

Display

2rem / w700

Build faster. Hire smarter.

1.5rem / w700

Engineering-driven identity.

1.25rem / w600

Human centric. Friction free.

1rem / w600

Find the best job opportunities near you.

Body

0.875rem / w400

Consistent spacing · clear hierarchy

Small

0.75rem / w400

DESIGN TOKEN — VALUE

Micro

0.625rem / w500

04Motion System

motion.tokens

--motion-blink1s step-end infiniteCursor idle blink

--motion-type-min250msMin keystroke interval

--motion-type-max450msMax keystroke interval

--motion-delete-min120msMin delete interval

--motion-delete-max220msMax delete interval

--motion-fast150ms easeMicro-interactions

--motion-base200ms easeStandard UI transitions

--motion-slow400ms ease-outPage / panel entrances

05Download Center

Dark (default)

For dark backgrounds

Wordmark SVG

Wordmark PNG @2×

Icon SVG + PNG

Light

For light backgrounds

Wordmark SVG

Wordmark PNG @2×

Icon SVG + PNG

Monochrome

Single-colour violet

Wordmark SVG

Wordmark PNG @2×

Icon SVG + PNG

White

On brand-violet fills

Wordmark SVG

Wordmark PNG @2×

Icon SVG + PNG

// note · SVG exports reference JetBrains Mono. PNG@2× is rendered via canvas — install the font for pixel-perfect output. For fully embedded vectors, convert to outlines in Figma / Inkscape.

Social Cover Banners — Dark

Twitter / X

Profile header image · 1500 × 500px

LinkedIn Company

Company page cover photo · 1128 × 191px

Facebook Business

Business page cover photo · 820 × 360px

06Design Tokens

tokens.css

/* ── JobXi Design Tokens ───────────────────── */
:root {
  /* Brand */
  --brand:         #8B5CF6;
  --brand-dim:     rgba(139, 92, 246, 0.15);
  --brand-border:  rgba(139, 92, 246, 0.25);

  /* Violet scale */
  --violet-50:  #F5F3FF;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;   /* ← primary */
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;

  /* Neutral (dark-first) */
  --neutral-100: #F1F0FB;
  --neutral-300: #9896B0;
  --neutral-500: #5C5A72;
  --neutral-700: #2A2840;
  --neutral-800: #1A1830;
  --neutral-900: #0D0B1A;
  --neutral-950: #050510;

  /* Semantic */
  --text-primary:   #F1F0FB;
  --text-secondary: #9896B0;
  --text-tertiary:  #5C5A72;
  --bg-base:        #0D0B1A;
  --bg-deep:        #050510;
  --bg-card:        #1A1830;
  --bg-raised:      #2A2840;
  --border:         rgba(255, 255, 255, 0.07);

  /* Typography */
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Motion */
  --motion-fast:       150ms ease;
  --motion-base:       200ms ease;
  --motion-slow:       400ms ease-out;
  --motion-blink:      1s step-end infinite;
  --motion-type-min:   250ms;
  --motion-type-max:   450ms;
  --motion-delete-min: 120ms;
  --motion-delete-max: 220ms;
}
[data-theme="light"] {
  --text-primary:   #0D0B1A;
  --text-secondary: #3D3B55;
  --text-tertiary:  #9896B0;
  --bg-base:        #F8F7FF;
  --bg-deep:        #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-raised:      #F1F0FB;
  --border:         rgba(0, 0, 0, 0.08);
}

08Usage Rules

✓ Do

—Use dark variant as default on dark backgrounds

—Maintain 1× height clear space on all sides

—Scale proportionally — never stretch or squish

—Use monochrome on coloured / gradient backgrounds

—Minimum size: 16px in any context

✗ Don't

—Don't use a non-monospace font

—Don't recolour 'xi' away from #8B5CF6

—Don't add drop shadows, glows, or outlines

—Don't rotate, skew, or apply effects

—Don't place on low-contrast backgrounds without testing

09Developer Handoff

React · animated logo (AH)

import JobXiLogoAH from '@/components/logos/JobXiLogoAH'

<JobXiLogoAH size={36} />          // typewriter animation
<JobXiLogoAH size={24} />          // scales to any size

React · static logo (Q)

import JobXiLogoQ from '@/components/logos/JobXiLogoQ'

<JobXiLogoQ size={36} />           // static with blinking cursor

CSS · cursor blink keyframe

@keyframes blink-cursor {
  0%, 100% { opacity: 1 }
  50%       { opacity: 0 }
}
.cursor { animation: blink-cursor 1s step-end infinite; }

CSS · font stack

font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
/* Free open-source: jetbrains.com/lp/mono */