Jotpack Brand Field Guide

Brand directionMK. 01

The quiet control room for active projects.

Calm command with a live current. Jotpack pairs Apple-native precision and hand-built rocket-age machinery with a fresh neon signal system for action, focus, and state.

Open the field guide ↘Identity status

Visual mood specimenNot a proposed mark

A realistic polished-metal twin-tank jetpack crossing a vivid neon field with a subtle horizontal ignition streak

Observant◆Capable◆Adventurous◆Native◆Electric◆Warmly mechanical

Foundation

Quiet command.
Visible momentum.

The brand has two speeds. The product is a calm instrument panel: legible, native, and never competing with the work. Heritage materials give it character; neon signals make action and state feel unmistakably current.

Calm at rest

Most of the experience is black, white, and silver. Space, alignment, and hierarchy do the work.

Electric on purpose

Neon appears only when the interface is speaking: act, focus, notice, wait, complete, or recover.

Made, not themed

Mechanical references feel engineered and useful. Avoid costume steampunk, faux grime, gears, and novelty type.

Native by instinct

The app follows Apple conventions. Brand character lives in restraint, copy, accent, and crafted marketing moments.

The visual recipe64 / 22 / 8 / 6

Carbon 64%Silver 22%Heritage 8%Signal 6%

Identity

Approved identity system

One signal.
Two expressions.

The plume mark suggests acceleration, creative momentum, and the energy of launch without illustrating a literal jetpack. Futura Bold gives the name a confident rocket-age signature. The horizontal monochrome lockup is the default application.

01 / Logomark

Negative-space plume

Use this one-color form whenever the mark appears beside the wordmark.

02 / Wordmark

Futura Bold

Approved artwork, not live type. Never reset, retype, stretch, or alter its spacing.

03 / Color mark

Standalone only

Reserved for the mark by itself and for app icon artwork. Never use it in a lockup.

Primary / default

Horizontal lockup

Use the horizontal arrangement wherever width allows. Keep the mark and wordmark together as fixed artwork and render the entire lockup in one color.

CCCC

Secondary / stacked

Vertical lockup

Use the stacked arrangement in centered compositions or narrower spaces. Its established vertical section distance becomes the same clear-space unit C.

Vertical section y= C

Minimum clear space= 1C

Color restriction

Color belongs to the mark alone.

The Ion, Arc, and Pulse logomark is intentionally exceptional. It may appear only as a standalone brand mark or as app icon artwork. Every wordmark and every lockup remains monochrome.

Do not place the color mark beside, above, or below the wordmark.
Do not colorize the wordmark or introduce neon into a lockup.
Do not substitute the color mark for decorative status or interface graphics.

Standalone mark

App icon artwork

Color system

Old machine.
Live circuit.

Carbon, silver, chrome, and leather build the physical world. A tight neon spectrum carries the interface language. Brass and ember remain heritage details—not action colors and never the dominant voice.

#08090B

Carbon

Primary field

#15171C

Graphite

Raised dark surface

#E7E9ED

Silver

Primary light field

#F7F8F6

Paper

Warm white surface

#C8FF3D

Volt

Primary action / ready

#20DFFF

Ion

In progress / information

#A886FF

Arc

Focus / selection / suggestion

#FF4FA3

Pulse

Waiting / attention

#50F0A8

Mint

Complete / success

#FF5B67

Flare

Error / destructive

Use

Make the signal unmistakable.

Use one Volt primary action per view. Let Ion, Arc, Pulse, Mint, and Flare describe distinct states without competing.

Avoid

Do not turn up every channel.

No rainbow surfaces, neon body copy, decorative status dots, or multiple bright calls to action in one view.

Typography

One content family · every surface

San Francisco
beyond the signature.

Use Apple’s San Francisco system family for the app and all marketing content. Rely on semantic system styles in SwiftUI and the system font stack on the web. Futura Bold is the sole exception: it exists only as outlined artwork in the approved Jotpack wordmark, never as a heading, body, label, or interface typeface.

Web stack-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif

64 / 66 · 800

Ready when
you are.

17 / 26 · 400

Jotpack turns active project signals into a clear view of what happened, what matters, and what should happen next.

11 / 14 · 700 · +.12em

FLIGHT PLAN / ACTIVE

Marketing scale

CSS · px / line-height

Style	Size	Weight	Tracking	Use
Hero	64 / 66	800	−0.045em	Campaign line only
Display	48 / 52	750	−0.035em	Marketing page lead
Title 1	40 / 44	700	−0.025em	Page title
Title 2	30 / 36	700	−0.015em	Major section
Title 3	22 / 28	650	−0.010em	Subsection
Body large	20 / 30	400	−0.005em	Introductory copy
Body	17 / 26	400	0	Default reading
Small	15 / 22	400	0	Supporting detail
Label	13 / 16	650	+0.010em	Controls and metadata
Micro	11 / 14	700	+0.120em	Uppercase stamped label

App semantic scale

SwiftUI · default reference size

Style	Reference	Weight	SwiftUI
Large title	34 pt	Bold	.largeTitle
Title	28 pt	Bold	.title
Title 2	22 pt	Bold	.title2
Title 3	20 pt	Semibold	.title3
Headline	17 pt	Semibold	.headline
Body	17 pt	Regular	.body
Callout	16 pt	Regular	.callout
Subheadline	15 pt	Regular	.subheadline
Footnote	13 pt	Regular	.footnote
Caption	12 pt	Regular	.caption

Always support Dynamic Type. Never replace semantic styles with fixed sizes in app content.

Materials & texture

Built for the
next adventure.

Materials are punctuation. Use them to frame, fasten, or warm a composition—not to turn the whole surface into a prop.

CHROME

Chrome

Edge highlights, dividers, hero hardware. Never use chrome behind reading text.

BRASS

Aged brass

Fasteners and fine rules only. It adds history but never behaves like an interactive color.

LEATHER

Leather

Optional warmth for editorial covers, packaging, or straps. Never use it as an app surface.

IGNITION

Ignition streak

A thin lateral gesture: hot white core, ember edge, neon afterglow. Never use twin cartoon exhaust plumes.

Components

Controls that feel
ready to fly.

Marketing components carry the tactile brand. In the app, prefer native SwiftUI controls, system materials, SF Symbols, semantic colors, and platform behavior.

Actions

Sentence case, verb first.
48 px marketing height; native control sizing in app.
Volt owns the primary action.

Labels & status

Ready In progress Waiting Suggested Complete Error

Status always includes text or a symbol. Neon is the fast recognition layer, never the only meaning. Preserve Apple conventions when a system color has stronger platform meaning.

Product surface

Project · JotpackUpdated 2m ago

WHAT'S NEXT

Prepare the developer release

Verify the signed macOS build

✓Review the release notes

Opaque content, semantic text, native spacing. No decorative chrome, leather, rivets, or flame inside the working canvas.

Voice & motion

Clear enough for
the control room.
Alive enough for launch.

Write direct, useful sentences. Lead with state or action. Let a little aviator confidence into campaign headlines, never into error messages.

Say

“Ready when you are.”

“Refresh project status”

“Waiting for approval”

“No blockers found”

Avoid

“Blast off into productivity!”

“Leverage agentic synergies”

“Oopsie! The engine exploded.”

“Click here”

Motion principle

Charge builds. The signal sweeps across. Then everything settles.

Use 180–240 ms transitions for controls and 320–420 ms for editorial reveals. Prefer ease-out. Honor Reduce Motion and never loop decorative flame or glow.

RESTIGNITIONSETTLE