Outpacers

Brand Kit • v1.2

Learn to Outthink the
competition through Outskilling

This single page renders real tokens, components, and examples so designers, engineers, and marketing can build consistently—no guessing.

Logo Usage

Linked PNG assets for pixel-perfect rendering. Monochrome generated via CSS filter.
HTML:
<img src="https://www.interplicity.com/wp-content/files/oai/Outpacers_Logo-Mock_v3.1b-B-transparent.png" alt="Outpacers dark wordmark with green arrow" />

Lockup (Dark on Light)

Outpacers dark wordmark with green arrow
HTML:
<img src="https://www.interplicity.com/wp-content/files/oai/Outpacers_Logo-Mock_v3.1b-W-transparent.png" alt="Outpacers white wordmark with green arrow on black" />

White on Black

Outpacers white wordmark with green arrow on black
CSS:
.mono-dark { filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%); }
HTML:
<div class="logo-slot bg-[var(--soft-bg)]"> <img class="logo-img mono-dark" src="https://www.interplicity.com/wp-content/files/oai/Outpacers_Logo-Mock_v3.1b-B-transparent.png" alt="Outpacers monochrome dark lockup" /> </div>

Monochrome (CSS)

Outpacers monochrome dark lockup generated via CSS filter
HTML:
<img src="https://www.interplicity.com/wp-content/files/oai/Outpacers_Logo-Mock_v3.1b-W-transparent.png" alt="Outpacers white wordmark on black background" />

Inverted Monochrome

Outpacers white wordmark on black background
CSS:
.logo-slot { display: flex; align-items: center; justify-content: center; padding: 1rem; border-radius: 8px; background: black; } .logo-svg { max-width: 55px; height: auto; }
HTML:
<div class="logo-slot bg-black"> <svg width="55" height="55" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" version="1.1" style="max-width: 55px;"> <path d="M 437.634 0.000 L 430.873 0.000 L 428.620 3.606 L 425.465 3.606 L 423.211 7.211 L 420.056 7.211 L 417.803 10.817 L 414.648 10.817 L 410.592 16.225 L 407.437 16.225 L 405.183 19.831 L 402.028 19.831 L 399.775 23.437 L 396.620 23.437 L 394.366 27.042 L 391.211 27.042 L 387.155 32.451 L 384.000 32.451 L 381.746 36.056 L 378.592 36.056 L 376.338 39.662 L 373.183 39.662 L 370.930 43.268 L 367.775 43.268 L 363.718 48.676 L 356.958 50.479 L 352.901 55.887 L 349.746 55.887 L 347.493 59.493 L 344.338 59.493 L 340.282 64.901 L 337.127 64.901 L 334.873 68.507 L 331.718 68.507 L 329.465 72.113 L 326.310 72.113 L 324.056 75.718 L 320.901 75.718 L 318.648 79.324 L 315.493 79.324 L 313.239 82.930 L 310.085 82.930 L 306.028 88.338 L 302.873 88.338 L 300.620 91.944 L 297.465 91.944 L 295.211 95.549 L 292.056 95.549 L 288.000 100.958 L 284.845 100.958 L 282.592 104.563 L 279.437 104.563 L 277.183 108.169 L 274.028 108.169 L 271.775 111.775 L 268.620 111.775 L 264.563 117.183 L 261.408 117.183 L 259.155 120.789 L 256.000 120.789 L 253.746 124.394 L 250.592 124.394 L 248.338 128.000 L 245.183 128.000 L 241.127 133.408 L 237.972 133.408 L 235.718 137.014 L 232.563 137.014 L 230.310 140.620 L 227.155 140.620 L 224.901 144.225 L 221.746 144.225 L 217.690 149.634 L 214.535 149.634 L 212.282 153.239 L 209.127 153.239 L 206.873 156.845 L 203.718 156.845 L 201.465 160.451 L 198.310 160.451 L 194.254 165.859 L 191.099 165.859 L 187.042 171.268 L 180.282 173.070 L 176.225 178.479 L 173.070 178.479 L 170.817 182.085 L 167.662 182.085 L 165.408 185.690 L 162.254 185.690 L 160.000 189.296 L 156.845 189.296 L 152.789 194.704 L 149.634 194.704 L 147.380 198.310 L 144.225 198.310 L 140.169 203.718 L 137.014 203.718 L 134.761 207.324 L 131.606 207.324 L 129.352 210.930 L 126.197 210.930 L 123.944 214.535 L 120.789 214.535 L 118.535 218.141 L 115.380 218.141 L 113.127 221.746 L 109.972 221.746 L 105.915 227.155 L 102.761 227.155 L 100.507 230.761 L 97.352 230.761 L 97.352 232.113 L 93.746 234.366 L 93.746 237.521 L 100.958 243.380 L 100.958 246.535 L 122.592 266.817 L 122.592 269.972 L 133.408 279.437 L 133.408 282.592 L 137.014 284.845 L 137.014 288.000 L 135.211 288.451 L 135.211 291.606 L 133.408 292.056 L 122.141 304.676 L 118.986 304.676 L 107.718 317.296 L 104.563 317.296 L 91.493 331.718 L 88.338 331.718 L 78.873 342.535 L 75.718 342.535 L 75.718 343.887 L 70.310 347.944 L 70.310 352.901 L 71.662 352.901 L 72.113 354.704 L 78.873 354.704 L 79.324 356.507 L 87.887 356.507 L 88.338 358.310 L 98.704 358.310 L 99.155 360.113 L 105.915 360.113 L 106.366 361.915 L 114.930 361.915 L 115.380 363.718 L 127.549 363.718 L 128.000 365.521 L 136.563 365.521 L 137.014 367.324 L 143.775 367.324 L 144.225 369.127 L 154.592 369.127 L 155.042 370.930 L 161.803 370.930 L 162.254 372.732 L 183.437 374.535 L 183.887 376.338 L 192.451 376.338 L 192.901 378.141 L 201.465 378.141 L 201.915 379.944 L 208.676 379.944 L 209.127 381.746 L 215.887 381.746 L 216.338 383.549 L 226.704 383.549 L 227.155 385.352 L 230.310 385.352 L 232.563 388.958 L 235.718 388.958 L 236.169 390.761 L 241.577 394.817 L 241.577 397.972 L 272.225 427.268 L 272.225 430.423 L 306.479 463.324 L 306.479 466.479 L 340.732 499.380 L 340.732 502.535 L 342.085 502.535 L 349.746 511.549 L 354.704 511.549 L 354.704 510.197 L 356.507 509.746 L 356.507 499.380 L 358.310 498.930 L 358.310 490.366 L 360.113 489.915 L 360.113 479.549 L 361.915 479.099 L 361.915 463.324 L 363.718 462.873 L 363.718 454.310 L 365.521 453.859 L 365.521 443.493 L 367.324 443.042 L 369.127 421.859 L 370.930 421.408 L 370.930 418.254 L 372.732 417.803 L 373.183 416.000 L 387.155 416.000 L 387.606 417.803 L 396.169 417.803 L 396.620 419.606 L 406.986 419.606 L 407.437 421.408 L 417.803 421.408 L 418.254 423.211 L 426.817 423.211 L 427.268 425.014 L 439.437 425.014 L 439.437 423.662 L 441.239 423.211 L 441.239 322.704 L 439.437 322.254 L 439.437 171.268 L 437.634 170.817 Z" fill="#FFFFFF"/> </svg> </div>

App/Favicon *

Outpacers green arrow mark
SVG Code:
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M 437.634 0.000 L 430.873 0.000 L 428.620 3.606 L 425.465 3.606 L 423.211 7.211 L 420.056 7.211 L 417.803 10.817 L 414.648 10.817 L 410.592 16.225 L 407.437 16.225 L 405.183 19.831 L 402.028 19.831 L 399.775 23.437 L 396.620 23.437 L 394.366 27.042 L 391.211 27.042 L 387.155 32.451 L 384.000 32.451 L 381.746 36.056 L 378.592 36.056 L 376.338 39.662 L 373.183 39.662 L 370.930 43.268 L 367.775 43.268 L 363.718 48.676 L 356.958 50.479 L 352.901 55.887 L 349.746 55.887 L 347.493 59.493 L 344.338 59.493 L 340.282 64.901 L 337.127 64.901 L 334.873 68.507 L 331.718 68.507 L 329.465 72.113 L 326.310 72.113 L 324.056 75.718 L 320.901 75.718 L 318.648 79.324 L 315.493 79.324 L 313.239 82.930 L 310.085 82.930 L 306.028 88.338 L 302.873 88.338 L 300.620 91.944 L 297.465 91.944 L 295.211 95.549 L 292.056 95.549 L 288.000 100.958 L 284.845 100.958 L 282.592 104.563 L 279.437 104.563 L 277.183 108.169 L 274.028 108.169 L 271.775 111.775 L 268.620 111.775 L 264.563 117.183 L 261.408 117.183 L 259.155 120.789 L 256.000 120.789 L 253.746 124.394 L 250.592 124.394 L 248.338 128.000 L 245.183 128.000 L 241.127 133.408 L 237.972 133.408 L 235.718 137.014 L 232.563 137.014 L 230.310 140.620 L 227.155 140.620 L 224.901 144.225 L 221.746 144.225 L 217.690 149.634 L 214.535 149.634 L 212.282 153.239 L 209.127 153.239 L 206.873 156.845 L 203.718 156.845 L 201.465 160.451 L 198.310 160.451 L 194.254 165.859 L 191.099 165.859 L 187.042 171.268 L 180.282 173.070 L 176.225 178.479 L 173.070 178.479 L 170.817 182.085 L 167.662 182.085 L 165.408 185.690 L 162.254 185.690 L 160.000 189.296 L 156.845 189.296 L 152.789 194.704 L 149.634 194.704 L 147.380 198.310 L 144.225 198.310 L 140.169 203.718 L 137.014 203.718 L 134.761 207.324 L 131.606 207.324 L 129.352 210.930 L 126.197 210.930 L 123.944 214.535 L 120.789 214.535 L 118.535 218.141 L 115.380 218.141 L 113.127 221.746 L 109.972 221.746 L 105.915 227.155 L 102.761 227.155 L 100.507 230.761 L 97.352 230.761 L 97.352 232.113 L 93.746 234.366 L 93.746 237.521 L 100.958 243.380 L 100.958 246.535 L 122.592 266.817 L 122.592 269.972 L 133.408 279.437 L 133.408 282.592 L 137.014 284.845 L 137.014 288.000 L 135.211 288.451 L 135.211 291.606 L 133.408 292.056 L 122.141 304.676 L 118.986 304.676 L 107.718 317.296 L 104.563 317.296 L 91.493 331.718 L 88.338 331.718 L 78.873 342.535 L 75.718 342.535 L 75.718 343.887 L 70.310 347.944 L 70.310 352.901 L 71.662 352.901 L 72.113 354.704 L 78.873 354.704 L 79.324 356.507 L 87.887 356.507 L 88.338 358.310 L 98.704 358.310 L 99.155 360.113 L 105.915 360.113 L 106.366 361.915 L 114.930 361.915 L 115.380 363.718 L 127.549 363.718 L 128.000 365.521 L 136.563 365.521 L 137.014 367.324 L 143.775 367.324 L 144.225 369.127 L 154.592 369.127 L 155.042 370.930 L 161.803 370.930 L 162.254 372.732 L 183.437 374.535 L 183.887 376.338 L 192.451 376.338 L 192.901 378.141 L 201.465 378.141 L 201.915 379.944 L 208.676 379.944 L 209.127 381.746 L 215.887 381.746 L 216.338 383.549 L 226.704 383.549 L 227.155 385.352 L 230.310 385.352 L 232.563 388.958 L 235.718 388.958 L 236.169 390.761 L 241.577 394.817 L 241.577 397.972 L 272.225 427.268 L 272.225 430.423 L 306.479 463.324 L 306.479 466.479 L 340.732 499.380 L 340.732 502.535 L 342.085 502.535 L 349.746 511.549 L 354.704 511.549 L 354.704 510.197 L 356.507 509.746 L 356.507 499.380 L 358.310 498.930 L 358.310 490.366 L 360.113 489.915 L 360.113 479.549 L 361.915 479.099 L 361.915 463.324 L 363.718 462.873 L 363.718 454.310 L 365.521 453.859 L 365.521 443.493 L 367.324 443.042 L 369.127 421.859 L 370.930 421.408 L 370.930 418.254 L 372.732 417.803 L 373.183 416.000 L 387.155 416.000 L 387.606 417.803 L 396.169 417.803 L 396.620 419.606 L 406.986 419.606 L 407.437 421.408 L 417.803 421.408 L 418.254 423.211 L 426.817 423.211 L 427.268 425.014 L 439.437 425.014 L 439.437 423.662 L 441.239 423.211 L 441.239 322.704 L 439.437 322.254 L 439.437 171.268 L 437.634 170.817 Z" fill="#FFFFFF"/> </svg>

SVG Icon

Clear-space: 1× the height of the mark on all sides. Minimum digital size: 24px height.
* Use for app icons, favicons, avatars. Recommended 180×180 for Apple Touch; 32×32/16×16 for favicons.

Color System

Live tokens + copy-to-clipboard. Click a hex to copy.

Primary Purple
Buttons, links, key accents
Primary Hover
Interactive hover
Primary Focus Color
Focus state styling
Chartreuse Highlight
Button & slab highlight
Gradient Accent
Blue → Purple for single-word emphasis
Outthink Everyone

Neutrals & Surfaces

Header
Ink
Hairline Border
Soft Section BG
Promo Strip
Partner Logo Gray

Typography

Family: Inter (Regular, Medium, Semibold, Bold, ExtraBold) + Italics.

Gradient Emphasis
CSS:
:root{ --grad-blue:#3B82F6; --grad-purple:#8B5CF6; --ink:#0E1116; } .brand-gradient{ background: linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } h1{ margin: 0; font-weight: 800; line-height: 1.24; font-size: clamp(42px, 7vw, 92px); text-wrap: balance; }
HTML:
<h1 class="text-5xl md:text-6xl font-extrabold leading-tight"> Everything you need to nail <br/>your <span class="brand-gradient">Next Interview</span> </h1>
Everything you need to nail
your Next Interview

Lead (18/1.6): Clear, encouraging, high-trust. Keep line length ~68ch for readability.

Inter ExtraBold 800

The quick brown fox jumps over the lazy dog 0123456789

Inter Bold 700

The quick brown fox jumps over the lazy dog 0123456789

Inter Semibold 600

The quick brown fox jumps over the lazy dog 0123456789

Inter Medium 500

The quick brown fox jumps over the lazy dog 0123456789

Inter Regular 400

The quick brown fox jumps over the lazy dog 0123456789

Inter Italic 400

The quick brown fox jumps over the lazy dog 0123456789

Gradient + Highlight
CSS:
:root{ --grad-blue:#3B82F6; --grad-purple:#8B5CF6; --chartreuse:#CCFF04; --ink:#0E1116; } .brand-gradient{ background: linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .slab-square{ background: var(--chartreuse); color: var(--ink); border-radius: 12px; padding: 3px 1.4em 8px 16px; display: inline-flex; align-items: center; font-weight: 800; white-space: nowrap; position: relative; line-height: 1.24; text-wrap: balance; } .slab-square .bolt{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 1em; width: auto; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: #FFFFFF; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .slab-square .bolt-fallback{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 1em; width: auto; color: #FFFFFF; } h1{ margin: 0; font-weight: 800; line-height: 1.24; font-size: clamp(42px, 7vw, 92px); text-wrap: balance; }
HTML:
<h1 class="text-5xl md:text-6xl font-extrabold leading-tight"> Outsmart them<br/> through <span class="slab-square">Outskilling <div class="bolt"></div> <svg class="bolt-fallback" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" fill="#FFFFFF"/> </svg> </span> </h1>
Outsmart them
through Outskilling

Hero Headline (48/60): Bold, impactful messaging with chartreuse slab highlight.

Brand Gradient Text

Blue to purple gradient for emphasis: Outthink

Chartreuse Slab Highlight

Square slab with knockout (bolt) icon: highlight

Typography Scale

text-5xl md:text-6xl (48px/60px) with font-extrabold (800)

Line Height

leading-tight for dramatic, impactful headlines

 


Stylized Icon End-caps

Eight different icon options for end-of-sentence highlights with AI/tech themes.

Lightning Bolt (Default)
Outskilling
Layers/Stack Icon
Innovate
Brain Icon
Outthinking
Robot Icon
Agentic AI
Data/List Icon
Outbuilding
Rocket Icon
Accelerate
Logo Icon
Outpacing
Network/Connection
Connect
Middle Highlight
CSS:
:root{ --chartreuse:#CCFF04; --ink:#0E1116; } .slab-highlight{ background: var(--chartreuse); color: var(--ink); border-radius: 12px; margin-top: 12px; padding: 3px 16px 8px 16px; display: inline-flex; align-items: center; font-weight: 800; white-space: nowrap; line-height: 1.24; text-wrap: balance; } h1{ margin: 0; font-weight: 800; line-height: 1.24; font-size: clamp(42px, 7vw, 92px); text-wrap: balance; }
HTML:
<h1 class="text-5xl md:text-6xl font-extrabold leading-tight"> Simply <span class="slab-highlight">Outbuild</span> them for <br/>your competitive advantage. </h1>
Simply Outbuild them for
your competitive advantage.

Mid-Sentence Highlight (48/60): Chartreuse slab applied to middle word for emphasis without icon.

Mid-Sentence Emphasis

Chartreuse highlight on middle word: emphasis

No Icon Variant

Clean slab without lightning bolt for subtle emphasis

Typography Scale

text-5xl md:text-6xl (48px/60px) with font-extrabold (800)

Line Height

leading-tight for dramatic, impactful headlines

Italic Emphasis
CSS:
:root{ --ink:#0E1116; --grad-blue:#3B82F6; --grad-purple:#8B5CF6; } .italic-emphasis{ font-family: 'Libre Baskerville', 'Baskerville', 'Times New Roman', serif; font-style: italic; font-weight: 400; color: #5524E0; } h1{ margin: 0; font-weight: 600; line-height: 1.24; font-size: clamp(36px, 6vw, 76px); text-wrap: balance; }
HTML:
<h1 class="mixed-headline text-4xl md:text-5xl font-semibold leading-tight"> Good, fast, cheap. <span class="italic-text">Pick two</span> </h1>
Good, fast, cheap. Pick two

Italic Emphasis (36/48): Elegant serif italic for sophisticated contrast against semibold sans-serif.

Serif Italic

Libre Baskerville italic for elegant emphasis: emphasis

Color Accent

Purple accent color (var(--primary)) for visual hierarchy

Typography Scale

text-4xl md:text-5xl (36px/48px) with font-semibold (600)

Font Pairing

Bold sans-serif + elegant serif italic

Mixed Style Headline
CSS:
:root{ --ink:#0E1116; --grad-blue:#3B82F6; --grad-purple:#8B5CF6; } .mixed-headline .main-text{ font-weight: 600; color: var(--ink); } .mixed-headline .italic-text{ font-family: 'Libre Baskerville', 'Baskerville', 'Times New Roman', serif; font-style: italic; font-weight: 400; color: var(--ink); } .mixed-headline .accent-text{ font-weight: 600; color: #5524E0; } .mixed-headline .gradient-text{ background: linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-weight: 600; } h1{ margin: 0; line-height: 1.24; font-size: clamp(36px, 6vw, 76px); text-wrap: balance; }
HTML:
<h1 class="mixed-headline text-4xl md:text-5xl font-semibold leading-tight"> <span class="main-text">Cutting edge </span> <span class="italic-text">skills</span><span class="main-text"> that</span><br/> <span class="main-text"><u>actually</u> get you </span><span class="gradient-text"><em>promoted</em></span> </h1>
Cutting edge skills that
actually get you promoted

Mixed Style (36/48): Complex typography combining semibold sans-serif, elegant serif italic, and accent colors.

Style Mixing

Semibold + italic + gradient + underline + emphasis combinations

Visual Hierarchy

Multiple emphasis levels for complex messaging

Typography Scale

text-4xl md:text-5xl (36px/48px) with varied weights

Line Breaks

Strategic line breaks for dramatic impact

UI Components

Buttons

Chips

Product Management
Data Science
Machine Learning
View all roles →

AI doesn't just make you smarter—it helps you outthink the competition. Join Outpacers today! →

Elevation & Radius

Card • radius 0.35rem • no shadow
Panel • radius 0.35rem • border
StatusPill / Label • full radius
Level up your AI skills and start Thinking in AI
to enhance your career. Try for free →

Accessibility Checks

Primary button text ≥ AA ✔︎
Chartreuse slab w/ dark text ≥ AA ✔︎
Body text on white ≥ AA ✔︎

Photographs

Black and white photography with clean, square corners for a timeless aesthetic

Photo Placeholder 1
Photo Placeholder 2
Photo Placeholder 3
Photo Placeholder 4
Photo Placeholder 5
Photo Placeholder 6

All photographs feature monochrome styling with sharp, square corners for a modern, minimalist aesthetic