TFR Tracker — Brand Guidelines

01 — Color Palette

Color system

Eight tokens cover the entire product. Deep navy backgrounds recede behind a single electric blue accent — keeping attention on flight data, not chrome.

Core tokens

#080c16

--bg

Page background

#0b1422

--bg2

Section alternate bg

#0e1828

--bg3

Cards, panels

#0c1220

--ctrl

Controls bar

#0a101e

badge bar bg

Team/venue badge row

#111928

--chip

Chips, selects, buttons

#1C8FE3

--accent

Primary accent, brand blue

#4AABF7

--accent2

TFR warning text, links

Borders & text

#1a2840

--border

Structural dividers

#253550

--border2

Interactive borders

#607080

--muted

Secondary text, labels

#8a9ab8

--muted2

Badge body text

#dde3f0

--text

Primary text

#b0bdd0

modal body text

TOS/modal paragraph

Status colors

#22c55e

saved-border

Saved game card border

#86efac

saved-text

Saved button text

#14381a

saved-btn-bg

Saved button background

#0a1a0a

saved-card-bg

Saved card background

#0e1a10

error-bg

Error / warning card bg

#1a3d20

error-border

Error card border

02 — Typography

Type system

DM Sans exclusively. Variable optical-size axis (9–40). Weight 200 for display, 300 for body, 400–700 for UI labels and buttons.

Display — cover title, section title

No active TFRs

Weight 200 Size clamp(42px, 5.5vw, 72px) Tracking -0.01em Leading 1.02

Section heading

App Components

Weight 200 Size clamp(26px, 3.2vw, 40px) Leading 1.15

Game matchup — primary game card label

Colorado Rockies vs San Francisco Giants

Weight 600 Size 14px

Control label / nav link

Home · App · Terms · Privacy

Weight 300 Size 12px Tracking 0.14em Transform uppercase

Section eyebrow / status label

01 — Color Palette

Weight 300 Size 10px Tracking 0.3em

TFR warning / supplemental info

⚠️ Restriction starts: 5:00 PM MDT — verify at tfr.faa.gov*

Weight 500 Size 11px Color --accent2 (#4AABF7)

Button label

I AGREE ↓ Export All 12 as .ICS ↓ Add TFR ✓ Saved

Primary CTA: 700 · 13px · letter-spacing 1px Export btn: 700 · 12px · letter-spacing 0.5px Game btn: 600 · 12px

Modal section heading

1. Acceptance of Terms

Weight 600 Size 11px Tracking 1.5px

03 — Logo & Mark

Logo system

The mark combines a globe grid with a map-pin drop — hinting at both airspace awareness and geographic coverage. The diagonal grid line added in v1.1 ties the mark to the drone's spread-arm silhouette.

TFR Tracker Drone Flight Intelligence

On dark — primary

TFR Tracker Drone Flight Intelligence

On bg2 — nav scrolled

TFR Tracker Drone Flight Intelligence

On light — print / docs

Footer mark (28 × 28)

TFR Tracker

Footer uses the 28 × 28 mark (border-radius 5px), weight-300 uppercase logo-name at 0.2em tracking in #607080.
Nav uses the 36 × 36 mark (border-radius 7px), weight-400 name in #1C8FE3.

Drone SVG icon — preloader & decorative use

80 × 80 container · bg #1C8FE3 · border-radius 16px
Preloader: animated with pre-spin (2.4s linear ∞) + pre-pulse box-shadow
In-app (DroneSVG): 26 × 26, static

04 — App Components

UI patterns

Every interactive surface is built from the same dark-panel vocabulary. Components are shown here at exact production dimensions pulled directly from the source.

Navigation bar (scrolled state)

TFR Tracker Drone Flight Intelligence

Home App Terms Privacy

height 68px · padding 0 40px · bg rgba(8,12,22,0.94) + backdrop-filter blur(14px) · border-bottom 1px --border
Logo: icon 36×36 br-7px · name 14px/400/0.22em uppercase --accent · sub 8px/300/0.24em uppercase --muted
Links: 12px/300/0.14em uppercase --muted → --text · active: --accent

Controls bar

bg #0c1220 · border-bottom 1px --border · padding 14px 28px · flex wrap gap 12px
Toggle: border-radius 6px · overflow hidden · border 1px #253550 · active bg --accent color #fff · inactive bg transparent color --muted
Select: bg #111928 · border 1px #253550 · border-radius 6px · padding 8px 14px · font-weight 500
Export: bg rgba(56,182,232,0.10) · color --accent · border 2px #0a4a6e · border-radius 6px · fw 700 12px · margin-left auto

Team / venue badge bar

COL · Coors Field

FIFA WC 2026 · Empower Field at Mile High

bg #0a101e · border-bottom 1px --border · padding 8px 28px · flex wrap gap 8px
Chip: bg #111928 · border-radius 4px · padding 3px 10px · 11px/500 #8a9ab8 · border 1px #253550
Abbr / WC label: color --accent fw 700

Game cards

12 UPCOMING HOME GAMES · CLICK TO DOWNLOAD .ICS ● LIVE · MLB.COM

Colorado Rockies vs San Francisco Giants

🕐 Mon, Jun 16, 7:10 PM MDT

⚠️ Restriction starts: 6:10 PM MDT — verify at tfr.faa.gov*

Group E

Germany vs Curacao

🕐 Sun, Jun 14, 11:00 AM MDT

⚠️ Airspace restricted match day — verify at FAA*

Colorado Rockies vs Los Angeles Dodgers

🕐 Tue, Jun 17, 7:10 PM MDT

⚠️ Restriction starts: 6:10 PM MDT — verify at tfr.faa.gov*

List meta: 11px/500 --muted · letter-spacing 1.5px · uppercase
Card default: bg --bg3 · border 1px --border · border-left 3px solid #0d2035 · border-radius 6px · padding 12px 16px · flex space-between wrap gap 10px
Card saved: bg #0a1a0a · border #1a3d1a · border-left #22c55e
Round label: 10px/600 --muted uppercase tracking 1.2px
Matchup: 14px/600 --text · "vs": --muted fw 400
Time: 11px --muted · TFR warn: 11px/500 --accent2
Add btn: bg #131f33 · border 1px #253550 · br 5px · 12px/600
Saved btn: bg #14381a · border #22c55e · color #86efac

Status states

⚠️ Schedule unavailable

Could not load schedule. Check your connection.

Verify active restrictions with your local aviation authority before flying.

✅

No remaining home games this season

🚫

Denver has no NFL team

Error card: bg #0e1a10 · border 1px #1a3d20 · br 8px · padding 16px 20px · title --accent2 fw 600
Empty (ok): text --muted · border 1px dashed --border · br 8px · padding 50px text-center
Empty (no team): text --accent2 · same border

Overlay: bg rgba(4,7,14,0.92) + backdrop-filter blur(6px)
Modal: bg --bg3 · border 1px --border · border-top 2px --accent · br 10px · max-width 560px
Header eyebrow: 10px/500 letter-spacing 2px --muted · Title: 18px/700 letter-spacing 2px --accent
Notice box: bg #0b1e10 · border 1px #1a3d20 · border-left 3px --accent · br 6px · 12px #8adba8
Agree btn: bg --accent · color #000 · br 6px · padding 11px 28px · 13px/700 letter-spacing 1px

Cookie consent banner

bg --bg2 · border-top 1px --border · padding 16px 28px · flex wrap gap 14px
Text: 12px #8a9ab8 · Decline: transparent bg · border 1px #253550 · color --muted · br 4px
Accept: bg --accent · color #000 · br 4px · fw 700

Site footer

bg --bg · border-top 1px --border · padding 32px 40px · flex wrap space-between gap 12px
Footer-logo: mark 28×28 br-5px · name 12px/300/0.2em uppercase #607080
Footer-copy: 11px/300/0.04em #607080 · width 100% order 2
Links: 11px/300/0.12em uppercase #607080 · gap 22px

05 — Spacing & Motion

Space & rhythm

The instrument-panel aesthetic depends on consistent, generous spacing. Motion is minimal and purposeful — no decorative animation.

Spacing scale

6pxgap xs

8pxbtn pad v

10pxgap sm

12pxctrl gap

14pxbtn pad h

16pxcard pad v

20pxgame-list px

22pxmodal pad v

24pxmodal pad h

28pxlist px

32pxfooter px

40pxnav px

68pxnav height

Motion tokens

Nav scroll fade

bg + backdrop-filter appear on scroll

0.4s ease

Nav link hover

color --muted → --text

0.2s

Sport toggle button

bg + color swap on click

0.15s

Game card border-color

--border → #1a3d1a on save

0.2s

Hamburger open/close

span transform + opacity

0.25s

Preloader badge pulse

box-shadow 0→18px rgba(56,182,232,0.4)→0

1.8s ease-in-out ∞

Preloader icon spin

drone SVG rotate 0→360°

2.4s linear ∞

Preloader scan bar

translateX -100% → 300% alternate

1.2s ease-in-out ∞ alt

Preloader fade out

opacity 1→0 then remove from DOM

0.5s ease

06 — Voice & Tone

Voice & tone

TFR Tracker speaks like an instrument panel — precise, minimal, authoritative. No alarm, no fluff. Pilots and drone operators need information they can act on immediately.

We do

Lead with the most actionable information first
Use specific altitudes, radii, dates, and coordinates
Keep sentences short — one fact per sentence
Uppercase short labels, lowercase natural prose
Name the authority: "FAA", "AFAC", "Transport Canada"

We don't

Use alarm language for routine informational TFRs
Add filler phrases like "please be aware that…"
Over-explain regulations pilots already know
Use exclamation marks or emoji in product copy
Apologize for restrictions we didn't create

✓ Do this

"Active TFR — Coors Field, Denver. 3 NM radius, surface to FL180. In effect 6:00–11:00 PM MDT. No UAS operations."

✕ Not this

"Warning! There may be a temporary flight restriction in your area. Please be aware that flying your drone could potentially be illegal and dangerous in this zone!"

Empty state

"No active TFRs within 25 NM of your location."

Clear, confident. Never "nothing found" or "no results."

Error state

"Could not load schedule. Check your connection."

Tell them what happened and how to fix it. No apology.

Authority labels

US games → "verify at tfr.faa.gov"

Mexico games → "verify at AFAC"

Canada games → "verify at Transport Canada"

TFR timing language

Game starts: shown as-is.
TFR start = game time − 1 hr.

For WC / round games use: "Airspace restricted match day" instead of a start time.