The Inkwell Kinetic

Design System for A&O Premium Locksmith

1. Creative North Star+
What this brand feels like

Not This

Cold, industrial, sterile. Generic locksmith template with stock photos and thin gray lines.

This

High-energy, hand-crafted, alive. A cel-animated performance meets modern utility. Trustworthy but fun.

The Vibe

If a 1930s cartoon character opened a locksmith business and hired a modern designer to build the website.

2. Color Palette+
Primary brand colors

Hot Pink

#FF69B4

Primary Container

CTAs, accents, brand moments

Deep Pink

#AC2471

Primary

Links, hover, text accents

The Ink

#000000

On Background

Text, borders, shadows

The Paper

#FFFFFF

Surface Lowest

Cards, containers

Supporting colors

Backdrop

#F9F9F9

Page background

Surface Low

#F3F3F4

Section bgs

Surface Variant

#E2E2E2

Nested blocks

The Shadow

#646464

Secondary text

WhatsApp

#25D366

WhatsApp ONLY

Pink accent range

#FFF5F8

#FFE0EC

#FFB0D0

#FF8DC0

#FF69B4

#E84DA0

#D1368C

#AC2471

#8C0058

#3D0024

Neutral range

#FFFFFF

#F9F9F9

#F3F3F4

#E8E8E8

#E2E2E2

#C6C6C6

#646464

#000000

3. Typography+
Three typefaces, three jobs

Logo / Brand Mark

Roboto · Black 900

Headlines & Display

Epilogue · 700 / 800 / 900

Locked Out?

We're On Our Way.

Our Services

Commercial Locksmith

Body & UI Text

Plus Jakarta Sans · 400 / 500 / 600 / 700

24/7 Emergency locksmith services for your home, car, and business. Our certified technicians bring professionalism, precision, and peace of mind to every job.

Secure your business with confidence. We provide master key systems, high-security locks, access control, and emergency lockout solutions.

© 2026 A&O Premium Locksmith, LLC. All Rights Reserved.

4. Elevation & Depth+
Solid offset shadows. No blur allowed.

Small Shadow

4px 4px 0 0 #000

Cards, badges, nav buttons

Large Shadow

8px 8px 0 0 #000

Hero CTAs, mascot frame, featured cards

Pressed / Active

Shadow removed plus translate 4px

Button click state

Rule: No Soft Shadows

Any use of blur-radius in CSS box-shadow is a system failure. All depth is achieved through solid black offset and tonal layering.

5. Components+
Buttons. The Pill-Push.

Primary CTA

Pink fill, white text

Secondary CTA

Black fill, white text

Tertiary

White fill, black text

WhatsApp Only

#25D366 exclusive

Trust Badges
verified Licensed
star 5-Star Rated
Service Card
meeting_room

Residential Locksmith

Protect what matters most. From lock changes and rekeying to smart lock installation and home lockouts.

Learn More →
Review Card. Speech Bubble.
star star star star star

"Amazing locksmith service! Oscar was professional, on time, and very knowledgeable."

Gabe Olivares
Checklist & Numbered Lists

Variant A. Checkmark.

check_circle

Rekey every exterior lock.Front, back, garage side door, patio. Cheaper than replacing.

check_circle

Replace the mailbox lock.Identity theft starts here. Fastest upgrade on the list.

Variant B. Numbered.

1.

Call or text us first.The sooner you call, the sooner you're rolling.

2.

Move to a safe spot.Get to shade, a storefront, or somewhere you can wait comfortably.

6. Textures & Patterns+
Signature treatments

Halftone Dots

Radial gradient dots at low opacity over light pink. Used on services backgrounds and secondary content to evoke vintage comic printing.

Ink Contour Border

Every card, button, and container gets a 2 to 3px solid black stroke. Never use 1px borders. Mimics a hand-drawn brush line.

7. Do's & Don'ts+

Do

  • check_circleExaggerate. Bubbly corners, ink-heavy lines.
  • check_circleUse halftone dots on secondary sections.
  • check_circleUse solid offset shadows exclusively.
  • check_circleKeep corners rounded. Minimum 8px radius.
  • check_circleReserve green (#25D366) for WhatsApp only.

Don't

  • cancelNo soft or blurred shadows. Ever.
  • cancelNo sharp corners. Everything is rounded.
  • cancelNo 1px borders. Minimum 2px stroke.
  • cancelNo horizontal rule dividers inside cards.
  • cancelNo stock photography. Only mascot and icon art.