Hustle System design system

Court CardKing, Queen, and a very good shuffle.

A playing-card identity built from a King and Queen court card: card-stock cream, court red, queen blue, crown gold, thick ink lines and mirrored layouts. This page is the whole suite in one place, so anyone can grab a template and go.

v1 · 2026-10-07 4 fonts 12 colors Live quiz page
A

Colors

Pulled straight off the face cards: card-stock cream, court red, queen blue, crown gold, all held together by one brown-black ink. Every suit owns a color.

Card Stock#FBF4E8 · --cc-paper
Page + card base
Parchment#F2E6D0 · --cc-paper2
Panels, demo wells
Royal Ink#2B1A16 · --cc-ink
Text, outlines, shadows
Sash Brown#4A2E26 · --cc-sash
Sash bands, dark trims
Court Red#D62B1E · --cc-red
Primary CTA, Hearts
Deep Red#A8201A · --cc-reddk
Hover, pressed red
Queen Blue#3E5BA9 · --cc-blue
Clubs, links, focus
Powder Blue#7E97D6 · --cc-bluelt
Hair lines, dark-bg Clubs
Crown Gold#EDC57A · --cc-gold
Highlights, gold CTA
Old Gold#C28F35 · --cc-golddk
Diamonds, gold text
Skin Tone#F7E3C8 · --cc-skin
Illustration only
Ivory#FFFDF8 · --cc-white
Card faces, inputs
Ink on Card Stock · 15.6:1 AAA
Ivory on Court Red · 4.9:1 AA
Gold on Royal Ink · 10.9:1 AAA
Ivory on Queen Blue · 6.4:1 AA
Spades = Intelligence = Ink
Clubs = Action = Blue
Hearts = Intuition = Red
Diamonds = Imagination = Gold
2

Fonts

A slab for the card indices, a swooping Bodoni italic for the royal flourish, a sturdy grotesk to read, and a typewriter for the fine print on the back of the box.

Display · Alfa Slab One · --cc-dispKing me.ABCDEFGHIJKLM NOPQRSTUVWXYZ 0123456789 KQJA
Flourish · Bodoni Moda Italic 700 · --cc-serifof HeartsFor subtitles, suit names, and anything said with a raised eyebrow.
Body · Libre Franklin 400/500/700/800 · --cc-bodyThe quiz takes six minutes. The argument in the group chat takes longer.Body copy sits at 17 to 20px with a 1.6 line height. Keep paragraphs short, like a dealer who wants to get home.
Label · Courier Prime 700 · --cc-monoShuffle responsiblyEyebrows, captions, legal lines, tiny "printed on the box" details. Uppercase with wide tracking.
Type scale (fluid, desktop sizes shown)
H1 108 / .92Court card
H2 72 / .95Meet the court
H3 26 / 1Queen of Diamonds
Flourish 40which one are you?
Body 18 / 1.6Hover or tap any card to flip it.
Label 14 / +.18em Meet the court
3

Motifs

The little pieces that make anything look like it fell out of the same deck.

The court card

King on top, Queen mirrored below, a sash between them. Original vector, use it whole or crop to a face.

The card back

Red lattice, gold grid, a spade and a heart kissing in the middle. The default "mystery" state.

Suit pips

Mask icons that take any color. Never type them as text characters, iOS turns hearts into emoji.

K

The Strategist

King of Spades

K

Corner index

Rank over suit, top-left, then repeated upside down bottom-right. Put it on cards, slides, stickers.

The sash

Brown band, gold studs, always at an angle. It divides sections the way it divides the King from the Queen.

Diamond chain

The border trim from the card. Use as a divider, underline accent, or footer edge.

Hard ink shadow

5px 5px 0, no blur. Buttons press down into it. No soft drop shadows anywhere.

Card-stock dots

A faint print-dot texture on every cream surface so nothing looks like flat web white.

4

Components

Chunky, pressable, slightly smug. Everything has a 3px ink outline and that hard shadow.

Buttons

Deal me in Flip my card Retake Share

Form field

Quiz answer

Badges + progress

Intelligence Action Imagination

Question 12 of 32 · each pip is a card dealt

Flip card

K

The Visionary

Sees the empire, not the garage.

King of Diamonds

K
Q

The Visionary

Sees the empire, not the garage.

Queen of Diamonds

Q

Hover or tap to flip.

Loading state

Shuffling the deck...

5

Page

The live quiz landing page, live, inside desktop, tablet and phone frames. Scroll inside any frame, or open it full size.

Desktop · 1280 wide

Tablet · 820 wide

Phone · 390 wide

6

Content

Social templates for every feed. Swap the headline and the suit, keep the card.

Hustle System

Which court card runs your business?

King or Queen.
16 archetypes.

Take the quiz
Instagram post · 1080×1080

1 / 3 · swipe

Pick a card, any card.

(Actually the quiz picks it for you. That's the fun part.)

Carousel slide 1 · 1080×1350

2 / 3

Four suits

Spades · Intelligence
Clubs · Action
Hearts · Intuition
Diamonds · Imagination
Carousel slide 2 · 1080×1350

3 / 3

Flip yours, then start a fight in the group chat.

Link in bio
Carousel slide 3 · 1080×1350

Your card is face down

Tap to flip

hustle-system.com

Story / Reel cover · 1080×1920

I took the Entrepreneur Archetype Quiz

Turns out I'm the King of Clubs.

Which explains why I launched before the landing page was finished. Again.

Action · The Warrior
LinkedIn post · 1200×627

"I'm a Queen of Diamonds and I'm not sorry."

@hustlesystem · archetype quiz

Q

The Designer

Queen of Diamonds

Q
X / Threads post · 1600×900
7

Thumbnails

Big faces, big words, one card. Readable at the size of a postage stamp.

KING OR QUEEN?

The founder test
YouTube thumbnail A · 1280×720
K

K
Q

Q

VS

I took the founder quiz

YouTube thumbnail B · 1280×720

The Court

a Hustle System podcast

Podcast cover · 3000×3000
8

Email

Single column, 600px wide, built to survive Gmail. This is the "your card is in" result email.

Inbox
Hustle System <cards@hustle-system.com>
Subject: Your card just got flipped
Preview: You're the Queen of Hearts. We have notes (nice ones).
HUSTLESYSTEM

Your card is in.

Queen of Hearts · The Oracle

Q

The Oracle

Called the trend six months early.

Queen of Hearts

Q

Hey Sam,

You read rooms the way other people read headlines. That's why you saw the shift coming before your competitors did, and also probably why you second-guess the gut call right before you're proven right.

Your superpower: spotting the move before the data catches up.
Your blind spot: writing it down, so the rest of the team can follow you.
Your best partner: a King of Spades with a spreadsheet.
Read my full profile
Know someone who's sure they're a King? Deal them in.
Hustle System · You got this because you took the quiz · Unsubscribe
9

Ads

Paid placements in every common size. Small banners are shown at real pixel size.

You're one of 32 cards.

Find yours free
Feed ad · 1080×1080

6 minute quiz

Are you a King or a Queen?

Swipe up
Story ad · 1080×1920

The founder quiz that deals you a card.

16 archetypes, King or Queen. Free, six minutes, oddly accurate.

Take the quiz
Link ad · 1200×628

King or Queen?

Find your founder card in 6 minutes.

Play free
Medium rectangle · 300×250

Which card are you?

Deal me in
Skyscraper · 160×600

Every founder is a court card.

Find out which one you are.

Take the quiz
Leaderboard · 728×90

King or Queen? Find out

Go
Mobile banner · 320×50
10

Extras

The bits people forget until launch day: share cards, link previews, icons, business cards.

I got dealt

Q

The Oracle

Called the trend six months early.

Queen of Hearts

Q

What's your card?

hustle-system.com/archetype-quiz

Result share card · 1080×1920

Every founder is a court card.

Entrepreneur Archetype Quiz

Link preview (OG) · 1200×630
App icon + favicons · 1024 / 64 / 32

Mikhail

King of Clubs, Founder

hustle-system.com

Business card, front · 3.5×2 in

HUSTLE SYSTEM

Business card, back · 3.5×2 in
J

Quiz screens

How the quiz itself should feel once someone hits Deal me in.

Question 12 / 32

When pressure mounts and decisions can't wait, you find yourself:

BackNext card

Result

K

The Warrior

Ships first and reads the feedback live.

King of Clubs

K

You're the King of Clubs.

Action first, apologies later.

Full profileShare my card
Q

Merch + the deck

The obvious next move: print the 32 cards for real. Here's how a face and the box would look.

K

The Strategist

King of Spades

K
King of Spades
Q

The General

Queen of Clubs

Q
Queen of Clubs
K

The Mystic

King of Hearts

K
King of Hearts
Q

The Artist

Queen of Diamonds

Q
Queen of Diamonds
Box art · tuck box front
CERTIFIEDKINGof clubs
Sticker · 3 in die-cut
K

Voice + rules

How it sounds and the few lines nobody crosses.

Sound like

  • A dealer with good jokes. Card puns are welcome, one per screen, never three in a row.
  • Specific and a little nosy: "you second-guess the gut call right before you're proven right."
  • Flattering but honest. Every card gets a strength and a blind spot.

Don't

  • No em dashes, no "unlock your potential", no "game-changer".
  • Never type suits as characters (iOS turns them into emoji). Use the pip icons.
  • No soft blurry shadows, gradients-for-the-sake-of-it, or stock photos of handshakes.

Build rules

  • Every surface: cream card stock with dots, 3px ink outlines, 5px hard shadow.
  • Red is the action color. One red CTA per view, gold for the second.
  • Suits carry meaning (Spades = Intelligence, Clubs = Action, Hearts = Intuition, Diamonds = Imagination). Don't use them as random decoration.
  • Min tap target 44px. Ink on cream for all body text.

Court Card design system · Hustle System · © 2026

Terms of ServicePrivacy Policy