Brand Style Guide

Atkinson Aerial
Design System

This guide exists to keep Atkinson Aerial's visual identity consistent across every touchpoint. If you're a collaborator, vendor, or developer — start here.

A complete visual reference for colors, typography, spacing, components, and voice used across atkinsonaerial.com. Every decision documented, every token named, every pattern explained.

Version 1.02026 Edition
Robert AtkinsonConyers, GA
Newsreader + Instrument SansFont Stack
01 Color Palette
Orange Primary brand accent. CTAs, links, highlights, italic emphasis.
Orange Deep Hover state for orange elements. Darken on interaction.
Orange Light Subtle tints, glow effects, transparent overlays.
Stone Dark section backgrounds. Nav frosted glass. Primary text on light.
Stone Mid Body copy on light backgrounds. Secondary text.
Stone Light Eyebrow text, labels, muted supporting copy.
Stone 200 Rule lines, borders, placeholder text.
Rule Dividers, card borders, section separators on light bg.
Cream Light section backgrounds, page base, card surfaces.

CSS Custom Properties

--orange:       #ea580c;
--orange-light: #fb923c;
--orange-deep:  #c2410c;
--stone:        #1c1917;
--stone-mid:    #44403c;
--stone-light:  #78716c;
--stone-200:    #d6d3d1;
--cream:        #fafaf9;
--rule:         #e7e5e4;
02 Typography
Newsreader
Display / Heading Font
Google Fonts

An editorial serif with optical sizing, used exclusively for all headings. Weight 300 is the primary weight — it creates an airy, high-end editorial feel. Italics in orange communicate personality and warmth.

300 Light 400 Regular 600 Semi Italic
Aa Bb Cc Dd Ee
Instrument Sans
Body / UI Font
Google Fonts

A clean, geometric sans-serif for body copy, labels, buttons, navigation, and UI elements. Its clarity ensures legibility at small sizes while feeling modern and refined alongside Newsreader.

400 Regular 500 Medium 600 Semi Italic
Aa Bb Cc Dd Ee
Type Scaleclamp() responsive
Display — Newsreader 300 · clamp(2.4rem, 5vw, 4.8rem)
The difference is in
H1 — Newsreader 300 · 2.5rem
Ready When You Are.
H2 — Newsreader 300 · 2rem
Recent Work.
H3 — Newsreader 400 · 1.35rem
Local & Responsive
Eyebrow — Instrument Sans 600 · 0.68rem · 0.18em tracking
Selected Projects
Body — Instrument Sans 400 · 1rem · 1.75 leading
I'm Rob — I fly drones and design things. FAA Part 107 certified with over a decade creating websites, brand identities, and high-quality aerial video for businesses that want to stand out.
Small / Caption — 0.72–0.85rem
FAA Part 107 Certified · Designing since 2014 · Conyers, GA
03 Spacing System
Token Value Visual Use
4px 0.25rem
Inline gaps, badge padding
8px 0.5rem
Button icon gaps, tight labels
12px 0.75rem
Card internal padding small
16px 1rem
Base unit. Form fields, card padding
24px 1.5rem
Card gaps, nav item spacing
32px 2rem
Grid gap (gap-8), section gutters
48px 3rem
Section eyebrow-to-heading gap
64px 4rem
Section header margin-bottom
96px 6rem
Section top padding (inline)
128px 8rem
Hero section vertical padding
1280px 80rem
Max content width (max-w-7xl)
04 Components
Let's Talk → View Packages Recent work →
Buttons — Light Surfaces
Book a shoot Start a project View portfolio →
Buttons — Dark Surfaces
Selected Projects
Get In Touch
Aerial Services
Eyebrow Labels
DJI Phantom 4 Pro 24–48 hr turnaround No travel fees 4K/60fps
Pill / Feature Tags
★ Most Popular Starter Pro
Pricing Badges
01
Local & Responsive
Fast, reliable service for drone flights and web/graphic design. Same-day aerials available.
Service Cards (hover to see animation)
Form Fields (click to see orange focus)
Form Fields — Dark Surface
Border Radius Scale
6px
sm
12px
md
16px
lg
24px
xl
9999px
pill
05 Layout Patterns
Editorial Split Header — Used on all major sections
Get In Touch
Ready When You Are.
Whether you need a new website, brand refresh, drone video, or custom graphics — I'm right here in Conyers, ready to help. No big-agency runaround, no travel fees within 30 miles.
Background Textures
Light Dot Grid
radial-gradient(circle, rgba(28,25,23,0.07) 1px, transparent 1px) 28px 28px
Dark Dot Grid
radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px) 28px 28px
Navigation Bar
Atkinson Aerial
Home Services Work Pricing
Frosted glass — rgba(28,25,23,0.92) + backdrop-filter:blur(12px) · Active link in orange
Footer Pattern
Atkinson Aerial
Home Work Pricing Contact
© 2026 Rob Atkinson | Atkinson Aerial FAA Part 107 Certified · Conyers, GA
06 Motion & Animation
Hover Lift
translateY(-4px)
Cards and interactive elements lift on hover. Creates tangible depth without distraction.
Orange Sweep
width: 0 → 100%
Card top-border sweeps from left to right on hover. Duration: 0.3s ease.
Scroll Reveal
opacity 0→1 + translateY 18px→0
IntersectionObserver fires at 0.12 threshold. 0.55s ease. Staggered with transition-delay.
Button Hover
0.2s ease, shadow pulse
Primary CTA gains orange drop shadow on hover: 0 6px 20px rgba(234,88,12,0.3).
Image Overlay
opacity 0→1, translateY 10px→0
Portfolio tile title overlays fade up from the bottom on hover. 0.35s ease.
Image Scale
scale(1.04) + brightness(0.7)
Gallery images subtly scale in and dim on hover to surface the title overlay cleanly.
Transition Defaults
/* Standard micro-interaction */
transition: transform 0.25s ease, box-shadow 0.25s ease;

/* Color / bg changes */
transition: background 0.2s, color 0.2s;

/* Scroll reveal */
transition: opacity 0.55s ease, transform 0.55s ease;

/* Orange sweep on cards */
transition: width 0.3s ease;
08 Voice & Tone
Brand Voice Attributes
Direct
Clear, confident, no filler. Say what you mean.
Personal
First-person "I." Rob speaks, not a brand committee.
Expert
Knowledgeable without jargon. Credentials woven in naturally.
Warm
Approachable, not cold. Local business energy.
Transparent
Flat-rate prices, clear turnarounds. No surprises.
✓ Write like this
"I'm Rob — I fly drones and design things. FAA Part 107 certified with over a decade creating websites, brand identities, and high-quality aerial video."
✗ Avoid this
"Atkinson Aerial is a premier provider of unmanned aerial vehicle solutions and integrated creative marketing services for discerning clientele."
✓ CTA copy
"Let's fly" / "Book a shoot" / "Start a project" / "Let's create" — Action-first, casual, personal.
✗ Avoid
"Submit inquiry" / "Request a quote" / "Contact us today" — Generic, cold, corporate.
09 Do's & Don'ts
✓ Do
Use Newsreader weight 300 for all headings. The lightness is intentional — it creates editorial elegance.
✗ Don't
Use bold or heavy weights for headings. Don't swap Newsreader for a sans-serif display font.
✓ Do
Use italic Newsreader in orange (#ea580c) for the key word or phrase in every section headline.
✗ Don't
Italicize entire headings or use orange on more than one word per headline. It loses its impact.
✓ Do
Always apply padding-top as an inline style on section inner divs (6rem). Prevents cascade override issues.
✗ Don't
Use Tailwind padding classes on outer section elements — they get overridden by the Tailwind reset.
✓ Do
Keep eyebrow labels in Instrument Sans 600, 0.68rem, 0.18em letter-spacing, uppercase, stone-light color.
✗ Don't
Style eyebrows in Newsreader or use orange for them — they should recede, not compete with the headline.
✓ Do
Alternate between light (cream) and dark (stone) sections to create visual rhythm across the page.
✗ Don't
Stack two consecutive dark or two consecutive light sections without a clear visual break between them.
✓ Do
Apply the dot-grid background texture to every major section (light or dark variant). It unifies the brand.
✗ Don't
Use solid fill backgrounds without the dot grid texture — sections look flat and disconnected from the system.