Signal Minimal

01 · Foundations

Clear before clever.

01

Show reachability

People should understand who is available, who is away, and what will happen to a message before they act.

02

Keep surfaces quiet

Whitespace, one-pixel borders, and restrained containers create hierarchy. Shadows are rare and never decorative fog.

03

Use motion as status

The radar sweep means discovery is active. Loading indicators mean work is happening. Nothing moves merely to decorate.

04

State limits plainly

Range varies. Phones do not relay. Honest operational copy builds more trust than exaggerated privacy or survival claims.

Do

Use direct, neutral language
Prefer real device and delivery states
Leave generous breathing room
Make the next action obvious

Avoid

Padlocks, shields, and military motifs
Neon cyberpunk or crypto aesthetics
Stock photography and fake testimonials
Glassmorphism, glow, and gradient clutter

02 · Color tokens

Signal color has a job.

Blue identifies an action or connection, green confirms availability, and red is reserved for urgency. Most of the interface is built from paper, ink, graphite, and borders.

Light mode

Warm paper, crisp ink

Background#F7F8F6

Surface#FEFFFD

Primary text#161A18

Secondary text#69716D

Signal blue#3D5AFE

Blue container#E9EDFF

Available green#16865B

Green container#DDF7EA

Urgent red#B5472E

Border#D8DEDA

Dark mode

Graphite, not navy

Background#0E1110

Surface#151917

Primary text#F3F5F3

Secondary text#9DA6A1

Signal blue#8EA2FF

Blue container#27325D

Available green#55D69B

Green container#123B2C

Urgent red#FF896F

Border#3A423E

03 · Typography

Neutral, compact, effortless.

Use the platform's clean system sans stack. Headlines are medium weight with tight tracking; body copy stays regular. Uppercase labels are small, spaced, and never used for paragraphs.

Display · 64/66 · 500

Send a signal.

H1 · 48/52 · 500

No signal required.

H2 · 36/42 · 500

People nearby

H3 · 22/28 · 500

Automatic discovery

Body large · 18/29 · 400

Message nearby friends without mobile data, internet access, or a Wi-Fi access point.

Body · 16/25 · 400

Signals show who your phone can currently reach. Range changes as people move.

Label · 11/14 · 600 · +.14em

Discovery active

Code · 13/20 · 500sha256sum offgrid-v0.4.1.apk

04 · Spacing & radius

One rhythm, several densities.

Spacing

4812162432486496

Corner radii

812182430

Use 8–12px for compact controls, 18px for cards, 24px for large surfaces, and 30px only for prominent containers. Pills are reserved for status and compact actions.

05 · Buttons

One primary action per surface.

Primary

Secondary

Quiet

Disabled

Loading

Minimum height: 44px. Large primary actions use 52px.
Hover moves by at most 1px and changes tone—not scale.
Focus uses a visible 3px blue outline with a 3px offset.
Disabled controls retain readable text and never rely on opacity below 45%.

06 · Status language

Words and color travel together.

Available Waiting Delivered Urgent Out of range

Available means the device is currently reachable.

Waiting means the item remains on this phone for retry.

Delivered means the other phone acknowledged persistence.

Urgent is user-assigned priority, not emergency certification.

Out of range is neutral and expected as people move.

07 · Components

Soft surfaces, hard information.

Download card

Current release

Offgrid 0.4.1

Android 8+ · 13.0 MB

Feature card

Discovery

Automatic nearby discovery

People appear as their phones become reachable.

Notice

Direct means direct.

Phones do not relay messages for other people.

FAQ row

What range should I expect?

Range varies with hardware, obstacles, crowds, and radio conditions.

Screenshot frame

Navigation

OffgridFeatures

08 · Iconography

Thin lines, simple geometry.

Icons use a 24×24 view box, round line caps and joins, and a 1.5px stroke. Filled icons are reserved for a selected navigation destination or a small state marker.

Discovery Message Friend Photo Delivered Urgent

09 · Radar & motion

Motion confirms activity.

Active discovery

One 360° rotation every 5.5 seconds.
Linear timing; no bounce or acceleration.
Concentric circles remain static and one pixel wide.
Device dots may breathe at low amplitude every 2.8 seconds.
Stop all continuous motion when discovery is paused.
Under prefers-reduced-motion: reduce, freeze the sweep at 32° and remove breathing.

Hover120–180ms

Border/tone change and ≤1px lift.

FocusImmediate

3px blue outline, 3px offset.

Loading900ms

Small circular progress indicator.

Reveal480ms

16px upward entrance, once only.

10 · Responsive behavior

Mobile first, spacious when possible.

Mobile0–639px

Single column, 20px page gutter, compact navigation, sticky download action, 44px minimum controls.

Tablet640–1023px

32px gutter, two-column feature layouts, wider install steps, no forced desktop navigation density.

Desktop1024px+

Two-column hero, 56px gutter, 1200px content maximum, asymmetrical grids and three-phone gallery.

Typography uses clamp() between breakpoints.
Layouts respond to available component width where practical.
At 320px, content must not scroll horizontally.
At 200% zoom, navigation and controls remain usable without overlap.

11 · Accessibility

Usable is part of the visual system.

WCAG AA contrast

Normal text reaches at least 4.5:1 and large text at least 3:1. Container colors never carry meaning without text.

Visible keyboard focus

Every interactive element is reachable and has a high-contrast focus ring that is not clipped by its container.

Touch targets

Buttons, navigation links, FAQ summaries, and icon actions are at least 44×44 CSS pixels.

Semantic structure

Landmarks, ordered headings, lists, descriptions, buttons, links, details, and native download semantics come first.

Reduced motion

Continuous radar and loading decoration stop or simplify when the user requests less motion.

System themes

Light and dark modes follow the operating system by default; the explicit choice is saved locally.