Come Play
Brand & Design System · New York City
Brand
Guidelines
Proud, on purpose. The logos, colors, type and voice of Gotham Knights RFC — everything you need to make something that looks and sounds like us.
Who we are
A fearless, welcoming home for queer athletes.
Gotham Knights is New York City's LGBT rugby club. The brand is heraldic and athletic — a dragon crest, deep navy, bold gold — with a tone that is bold, warm, and a little cheeky. It speaks to two rooms at once: the queer NYC community and the players who live for matchday, and the grant officers and sponsors who fund the club. So the system ships in two registers.
Loud · Matchday
NAVY FIELD,
GOLD SHOUTING
GOLD SHOUTING
Gotham Black all-caps energy. Posters, socials, hype, recruitment — the swagger that fills a pitch.
Posters · Social · Recruitment
Professional · Clubhouse
Warm paper,
navy ink
navy ink
Modern Hanken headings on cream. Decks, grant applications, sponsor one-pagers, the calmer pages.
Decks · Grants · Sponsors
Both share one palette and one type-family set — only the emphasis changes. The club is proudly LGBT, but the identity leads with navy + gold confidence. Pride shows up as a deliberate spectrum accent — a thin rule, a single highlighted moment — never a default gradient on everything.
Voice & tone · How we write
Confident without being macho. Welcoming without being soft.
The club has swagger and a door held open. We speak as "we" (the squad) and address you as "you." A wink is welcome — it never punches down, and inclusivity is structural, not decorative.
Loud register
COME PLAY.
TUESDAY NIGHTS, WALL STREET.
NO EXPERIENCE — BRING YOURSELF.
Professional register
"One of New York's longest-running inclusive rugby clubs. We field competitive sides while keeping our doors open to players of every background and skill level."
Do
- Say queer and LGBT plainly and proudly
- Use ALL CAPS athletic type for hype headlines
- Frame welcome explicitly — "all bodies, all levels"
- Set scores, fixtures & kit numbers in the mono face
- Keep hype lines short and punchy; stack them
Don't
- Lean on tired gay-bar clichés
- Punch down, ever — cheek is generous, not mean
- Use emoji in formal or professional contexts
- Go corporate-stiff in grant & sponsor copy
- Default to rainbow gradients to signal pride
Logo system
The crest & lockups
The dragon shield is the brand's strongest icon — a badge, watermark, and bullet mark all at once. The horizontal and stacked lockups pair it with the Harbour wordmark. Never redraw the crest by hand; always place the supplied vector.
All logo files
| Mark | 2-color | Navy · 1-color | Black | White · knockout |
|---|---|---|---|---|
| Shield | SVGPNG | SVGPNG | SVGPNG | SVGPNG |
| Horizontal lockup | SVGPNG | SVGPNG | SVGPNG | SVGPNG |
| Stacked lockup | SVGPNG | SVGPNG | SVGPNG | SVGPNG |
| Wordmark | — | SVGPNG | SVGPNG | SVGPNG |
Use 2-color on light backgrounds; all-white or knockout on navy and photos. Prefer SVG wherever it's accepted — it stays sharp at any size. Download everything as a .zip.
Protecting the mark
Clear space & don'ts
Clear space
Clear space (X) equals 30% of the crest's height — scale it up or down with the logo. Keep X clear on every side; nothing — type, photo edges, other logos — enters this zone.
Minimum size
Crest never below 24px / 0.25in. Horizontal lockup never below 120px / 1.25in wide, so "Rugby Football Club" stays legible.
clear-space boundary
X
X
X = 30% of the crest's height
Building the lockup from icon + wordmark
X = crest height · gap = X ⁄ 6
Prefer the supplied lockup files — only rebuild when you truly must. Set the space between crest and wordmark to one-sixth of the crest's height, the ratio drawn into the supplied lockup. Measure to the nearest ink, not the file's bounding box.
Center the wordmark block on the crest's height; the "Rugby Football Club" line sits inside, not below. Match colors exactly: navy crest + navy wordmark, or all-white.
On navy
Never do this
✕Don't stretch, squash, or distort the proportions.
✕Don't place on a rainbow or busy gradient — navy/gold leads.
✕Don't recolor. The crest is navy + gold, full stop.
✕Don't add shadows, bevels, outlines, or other effects.
Stay on-brand
- Use the supplied lockup files at the fixed crest-to-wordmark ratio
- 2-color on light; all-white or knockout on navy / photo
- Scale the whole lockup as one locked unit
- Wordmark in Harbour, UPPERCASE, tight tracking — as drawn
Never
- Re-space, stretch, or rebuild the wordmark in another font
- Let the crest and wordmark touch, or float them far apart
- Crowd the clear space with text, rules, or photo edges
- Place a busy photo behind the 2-color lockup (use knockout)
Color · Two heroes, sampled from the crest
Navy anchors. Gold accents.
Navy scale
Click any swatch to copy its hex. 700 is the primary.
Gold scale
500 is the primary. Step down to the darker tints for text on light.
Neutrals are intentionally warm — a cream #FBF7EE paper rather than cold white — which keeps the professional mode from feeling clinical. For gold text on light backgrounds, step down to gold-700 for contrast.
Color · Support palettes
Neutrals, pride & status
Warm neutrals — paper & ink
Pride spectrum — accent only
Warm, slightly muted to sit beside navy + gold. Used as a thin rule or a single highlighted moment — a deliberate spectrum, including the Progress flag additions. Never a default gradient.
Core six · red → violet
Progress additions · trans · brown · black
Status colors
Apparel · Manufacturer reference
Pantone apparel standards
For printed graphics, hangtags, and screen-print inks. Match to physical Pantone chips only — never to this on-screen render. For dyed fabric, request the equivalent Pantone TCX / TPG textile standard.
Typography · Four voices
The type system
Come find your pack
COME PLAY. NO EXPERIENCE.
27 — 12 · 1998
Use Harbour for
- The words "Gotham Knights" in logo / title form
- The wordmark lockup beside the crest
- Always UPPERCASE, always tight tracking
Don't use Harbour for
- Headings → Hanken 800 (
--font-heading) - Loud moments → Gotham Black (
--font-athletic) - Body, quotes, or any text that isn't the name
Typography · Rem-based, 1rem = 16px
Type scale
display-2xl · athletic88pxHERO
display-xl64pxBuilt different
display-lg48pxMatchday
display-md36pxCome play
h132pxFind your pack
h224pxSection heading
h320pxSubsection title
body-lg18pxAll bodies, all levels — welcome here.
body16pxTuesday nights on Wall Street. Bring yourself.
body-sm14pxSupporting copy and captions.
caption12pxFine print and footnotes.
overline11pxJoin us · eyebrow label
Leading & tracking
Headlines run tight — --lh-tight 0.95 to --lh-heading 1.18 with negative tracking (-0.02em). Body breathes at --lh-body 1.55. Eyebrows are the only all-caps in the modern voice, at +0.16em. The Harbour wordmark tightens to -0.05em to match the official lockup.
Layout · 4px base scale
Spacing, radius & borders
Spacing scale
Corner radius — low & athletic
xs · 3
sm · 6
md · 10
lg · 16
xl · 24
pill
6–10px for most UI, 16px for large feature cards. Pills only for chips, tags & avatars. Nothing is bubbly.
Border widths — the confident 2px stroke
hairline · 1px
base · 2px
bold · 3px
The brand likes a confident 2px stroke — gold or navy outlines on cards, buttons, and the crest itself. Hairlines for quiet dividers only.
Layout · Restrained, navy-tinted
Shadows, motion & focus
Elevation — cool, never gray
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-gold
inset top
Cards lift with a soft --shadow-md; the gold glow is reserved for the primary CTA on dark. Cards use a flat fill + 2px border or a soft navy shadow — rarely both.
Motion — quick & decisive
fast · 120ms
base · 200ms
slow · 320ms
ease (.2,0,0,1)
Fades and short slides; no spring or bounce on UI. Press nudges 1px down — never a cute bounce. Respect prefers-reduced-motion.
Focus — always visible
Join
you@club.nyc
A 3px gold ring at 2px offset, on every interactive element. Transparency & blur used lightly — a navy scrim over photos, a translucent sticky header. Not frosted-glass everywhere.
Building blocks · Actions, labels, surfaces & data
Components
Button
Confident uppercase action — gold primary, navy secondary, outline & ghost. Labels render UPPERCASE; hover lifts 1px, press nudges down.
Badge
Tiny uppercase status marker — kit context, match status, "NEW", "HOME/AWAY".
Home
Away
Win
Draw
Loss
TBD
Subtle
Tag
Rounded chip for filters, positions, categories. Toggles to navy when selected — softer than Badge.
Forwards
Backs
Beginner
All levels ✕
SectionHeading
The workhorse for page sections — eyebrow, title, gold rule, optional description.
Join us
Come find your pack
All bodies, all levels — welcome here. No experience? Perfect.
Card
Content surface — default, outline, navy, or featured (gold top-rule). One emphasis cue, never both.
Tuesday Training
Wall Street · 8–9pm
Stat
Big mono figure + uppercase label for results, counts, KPIs. Tabular scoreboard feel.
150+
Active members
1998
Established
Input
Labeled field with hint & error states — gold focus ring, confident 2px border. Works light & loud.
Email
you@club.nyc
We'll only email about matches.
Name
Alex Rivera
Focused — gold ring.
Pronouns
Required
This field is required.
FixtureRow
The club's signature list component — date, home/away accent (gold / navy left border), opponent, and score-or-kickoff.
12
OCT
Village Lions
1:00 PM
28
SEP
Brooklyn RFC
27–12W
Building blocks · Brand textures
Patterns & textures
Seven reusable surfaces, shipped as .gk- utility classes that run from loud to a whisper — reach for the quietest one that does the job. Loud by nature: use sparingly — borders, bands, accents, single moments. Never wallpaper a whole layout.
Loud — borders, bands & matchday
Quiet — texture without the shout
The checkerboard is the loudest thing we own. Reserve it for borders and hard frames — never as a fill behind content. The halftones fade their dots, not the surface, so edges and borders stay solid. The pride rule is one deliberate spectrum line, never a default gradient.
Loud patterns — usage
DoKeep it to borders, slim edges, and small contained blocks.
MATCH NIGHT
Checker — frame content with a thin band.
Tuesday socials →
Stripes — a slim accent edge or footer.
COME PLAY
Duotone — behind one short, bold headline.
Don'tNever wallpaper a layout or run body copy over a loud pattern.
Gotham Knights field competitive sides while keeping the door open to players of every background and skill level. No experience needed.
Don't fill the field — copy becomes unreadable.
Whole-panel fill
Don't cover large areas — it fights everything.
One of New York's longest-running inclusive rugby clubs, fielding competitive sides across multiple divisions throughout the season.
Don't run paragraphs over the dots.
Backgrounds & photo treatment
Tuesday Nights · Wall Street
Three background modes: solid navy field, warm paper, or full-bleed matchday photography with a navy scrim and gold type over it. No noisy gradients, no purple. A faint paper texture is fine; loud mode stays flat navy.
Building blocks · The crest leads
Iconography
The brand has no proprietary icon font. Its signature "icons" are the crest, shield, and dragon — used as badges, watermarks, and bullet marks, not decorative line icons.
Brand marks as icons
Use the shield as a favicon, bullet, loading mark, or section divider. Fill style only for the crest — never reoutline it.
UI icons — Lucide
A documented substitution (no club icon set exists): Lucide, 2px stroke, 24px grid, round caps — matching the brand's confident --bw-base stroke.
Emoji and Unicode are not used as UI icons. The brand's energy comes from type and color, not emoji. Stroke weight stays at 2px to echo the brand stroke; the crest is the only fill mark.