Brand & UI Guidelines — v1.0

Loud by design.

The complete design system for JJ Graphics & Signs — a Kirkland sign shop that makes things impossible to ignore. Bold type, hard shadows, four hot colors and zero subtlety. This is how it all fits together.

🎨 4 hot colors + ink & paper
🅰 Anton + Hanken Grotesk
▦ Hard-offset sticker shadows
Color✦Type✦Depth✦Buttons✦Badges✦Cards✦Motion✦Voice✦
01 — Color

Four hot colors,
one black,
one paper.

Black and paper carry 90% of every layout. The four brights are accents — pick one hero per section and let it shout. Never split a layout evenly between red, blue and yellow.

Do
  • One bright accent per section
  • Black borders on every colored block
  • Paper or ink as the canvas
Don't
  • Gradients between brand brights
  • Red text on blue (or vice-versa)
  • Pastel or desaturated tints
Pairings that work
on Yellow on ink
on White on red
on Paper on blue
Working neutrals — text & surfaces on dark
02 — Type

Anton shouts.
Hanken talks.

Two families, strict roles. Anton is display-only — always uppercase, always tight. Hanken Grotesk handles everything you actually read, from 700 labels down to 500 body.

Display
400 · uppercase
Anton
ABCDEFGHIJ 0123456789

Headlines, hero words, numbers, section labels. Tight leading (.84–.92). Never for body or anything under 18px.

Text
400–900
Hanken
abcdefghij 0123456789

Body copy at 500, labels & buttons at 800–900, fine print at 600. The 900 weight does the heavy lifting for UI.

03 — Depth

Hard shadows,
black borders.

No blur, ever. Every raised surface gets a solid offset shadow — like a die-cut sticker peeling off the page. The shadow color is a deliberate choice: ink for default, a brand bright for emphasis.

Border weights
2px — hairline
Inline chips, small swatches
2.5px — standard
Buttons, badges, nav logo
3px — structural
Cards, sections, feature blocks
Corner radii
04 — Buttons

Press it like
a big button.

Pill-shaped, 900 weight, uppercase. On hover the button lifts toward the cursor and the shadow grows in a brand color. Hover the swatches below to feel it.

Primary — Blue
Get a Free Quote → bg #1B4DFF · 3px border
shadow 6→9px · hover→yellow
Accent — Yellow
Get a Quote bg #FFC400 · 2.5px border
nav-scale · hover→blue
Ghost — Outline
See the Work transparent · paper border
hover→fill paper, ink text
Text + Phone
✆425.820.1808 no fill · ringed icon
hover→yellow text
States — primary button
Default rest · 6px shadow
Hover lift −2px · 9px yellow
Active press in · 2px shadow
Disabled muted · no shadow
05 — Badges

Little loud
labels.

Section eyebrows are rotated a degree or two and carry a hard shadow — they look slapped on. Pills and chips are level and quieter. Numbers go in pills, statuses go in chips.

Section eyebrows — rotated, hard shadow
What we do The work Let's roll
Status pills — animated dot
Kirkland, WA Open today
Square tags — flush callouts
★ Our specialty New
Filter chips — on dark, one active
All Work Vehicle Wraps Signs
06 — Cards

Things in
boxes.

Three workhorses: the service tile (image + label), the numbered step (dark on dark), and the checklist card. All share the 3px border + hard shadow recipe; hover lifts and recolors the shadow.

01

Service Tile

Image header, black divider, Anton title, one line of plain copy. Shadow lifts to red on hover.
02

Window & Wall

Same recipe, blue shadow on hover. Rotate the accent color per tile in a row.
03

Dimensional

Yellow header takes ink text, not white. Always check contrast on the bright headers.
Numbered step — dark on dark
01

Consult & Measure

#141416 surface, paper border, brand-color numeral. Used for process & how-it-works flows.

Checklist card — on a bright
✓ Design + Print + Install
✓ One van to a whole fleet
✓ Based in Kirkland, WA
07 — Motion

Keep it
rolling.

Motion is mechanical, not decorative — marquees scroll like a banner printer, words swap on a timer, hovers snap. Easing is linear for loops, quick ease for interactions. Nothing bounces.

Marquee
26s · linear · infinite
translateX 0 → −50%
duplicate row for seamless
Word swap
every 1.6s · color .3s
LOUD / BOLD / SEEN /
BIG / FAST
Hover lift
translate(−2…−3px)
shadow grows +3px
~.15s ease · snappy
Hero crossfade
every 5.2s · opacity 1.2s
scale 1 → 1.05 slow
Ken-Burns drift
Live — word swap
Make it LOUD.
Vehicle Wraps✦Fleet Graphics✦Lighted Signs✦Window Film✦Wall Murals✦Dimensional Logos✦Die-Cut Stickers✦
08 — Voice

Talk like the
shop floor.

Short, confident, a little blue-collar swagger. We make stuff and we're proud of it. Never corporate, never apologetic, never “solutions.” Plain trade words beat marketing words every time.

Loud

Headlines are imperatives. “Make it loud.” “Let's roll.” Big verbs, no throat-clearing.

Plain

“Stuff we put outside.” Trade words — wraps, vinyl, install — not “visual brand solutions.”

Proud

“Designed, printed & installed in-house.” We own the whole job — say so.

✓ Say this
“Make it loud.”
“Stuff we put outside.”
“One van or a whole fleet.”
“Let's make something loud.”
✕ Not this
“Comprehensive signage solutions.”
“Elevate your brand presence.”
“We leverage cutting-edge media.”
“Synergistic visual experiences.”