Identity · System · Product · 2026

A dual-use sonar company, designed in 24 hours

HADAL is a concept: a sonar company for navies and ports, built in a 24-hour exercise. I wrote the strategy, named it for the deepest zone of the ocean, drew the marks, set the system, designed the console and delivered a 26-page deck by morning. Then I kept going. This page is the brand as a system that runs: the library renders from its own tokens, the four behaviors play on a canvas, and the console works.

Client
Concept
Role
Everything. Name, positioning, identity, deck, product interface and renders, in one day. Then the design library and the pieces in motion on this page.
Stack
Figma, Illustrator, Next.js, motion, Canvas
The brief

Twenty-four hours, one company.

The exercise was one line: invent a sonar company and present it as if it were real, in a day. I started with the strategy, not the logo. Hadal is the deepest zone of the ocean. It sounded technical, severe and premium, and it carried none of the category's clichés: no Echo, no Trident, no Nautilus.

Dual-use was the constraint that shaped everything. It had to work for a navy and for a port authority, so no defense cosplay, no navy blue, no red alerts as decoration. One signal color, used when something is there. Signal below the surface.

24 h
From brief to deck
26
Pages in the deck
4
Behaviors the system may perform
1
Colored button
Narrative02

Noise to signal.
Depth to decision.

Positioning

HADAL builds distributed acoustic sensing systems that make the hidden ocean legible.

  • 01Listen

    Passive acoustic monitoring detects movement and anomalies.

  • 02Map

    Active and synthetic aperture sonar resolve terrain, objects and infrastructure.

  • 03Classify

    Signal processing turns uncertain returns into confidence-based detections.

  • 04Coordinate

    Distributed nodes create persistent undersea awareness across wide operating areas.

Identity

A node, and the signal through it.

The symbol is a regular hexagon, the shape a sonar array makes when you tile it, with two wedges cut in from its edges that meet at the centre: the signal passing through a node. The wordmark is monoline and squared with peaked A's that echo the cut. Nothing else in the system is pointed.

The lockup arrives the way a contact does. A sweep crosses the frame and the mark is there behind it, then the line types beneath in the data face.

Identity · LockupReveal 01 · 1.6 s · linear

SIGNAL BELOW THE SURFACE

Symbol · Wordmark · LineSignal · #5FD3CC
System

A library that renders from its own tokens.

Everything below is generated from one file: the palette with its contrast ratios computed live, the type ramp set in the real faces, the marks with their construction, clear space and misuse, the console's layout, eight icons, the components the console is built from, and the four motion timings. Change a hex and the kit changes.

The deck sets its display in T.26 Carbon, with Oxanium for every label and readout. The living kit sets the display in Oxanium until the Adobe Fonts kit is wired to this domain. The wordmark is Carbon either way: drawn once, delivered as a path.

Design library · v1.0

Mission-grade. Dual-use. Quiet.

01Color

Three grounds do the work. Four signals say something when something is there, one at a time. Alert is a button, not a mood.

01#050A0A
Abyss

Base. Every screen and every page starts here.

02#071A19
Pressure Graphite

Panels, cards, the console's frames.

03#151E1E
Bone

Chrome, dividers, the quiet parts of a layout.

Signal

Signal#5FD3CC

The acoustic highlight. Returns, rings, the selected contact.

11.1:1 on abyss · AAA

Phosphor#8BE27A

Confirmed. A classified contact, a healthy node.

12.6:1 on abyss · AAA

Amber#F2B441

Risk. A contact trending toward threat, a degraded node.

10.8:1 on abyss · AAA

Alert#FF5A36

Threat. Mine-like, escalate. The one colored button.

6.4:1 on abyss · AA

Ink

Sonar White#ECEFEF

Primary text.

17.2:1 on abyss · AAA

Sonar Bone#B7C1C1

Secondary text, captions, readouts at rest.

10.8:1 on abyss · AAA

Line#22302F

Hairlines. One pixel, never two.

hairline · 1 px

02Type

Oxanium for everything you read. JetBrains Mono for everything you measure.

Display · Oxanium

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

200 to 800, variable. Wide, squared, rounded corners. Uppercase for section titles, sentence case for statements. Stands in for T.26 Carbon until the Adobe Fonts kit is wired to the domain.

Data · JetBrains Mono

01

41°23'N · 029°48'E
DEPTH 412 M · BRG 087° · CONF 0.87

400, 500. Every readout, label and coordinate. Tabular figures. No ligatures in the console.

  • TitleSignal below the surface700 · -0.02em · 0.92
  • StatementNoise to signal. Depth to decision.600 · -0.01em · 1.1
  • HeadingDistributed acoustic sensing600 · 0 · 1.25
  • BodyOperators need faster ways to detect, classify and act on what is below the surface.400 · 0 · 1.55
  • LabelSECTOR DELTA-04600 · 0.22em · 1
  • Readout41°23'N · 029°48'E · 412 M500 · 0.04em · 1.4

03Marks

The hexagon is a node. The wedges are the signal passing through it. The wordmark's peaked A's are the only ornament.

Construction

C45.5°74.5°S37.8CORNER60°CUT45.5° · 74.5°THROAT10.87SYMMETRY180° about CBOX75.59 × 65.47

A regular hexagon, side 37.8, flat top. Two wedges cut in from the top and bottom edges, point-symmetric about the centre, meeting there. Their edges lie at 45.5° and 74.5°; the throat is 10.87, a little over a quarter of the side.

Clear space and minimum size

X = SYMBOL HEIGHT · CLEAR SPACE 1X ALL SIDESMIN · SYMBOL 24 PX / 6 MM · LOCKUP 96 PX / 24 MM
Never · Rotate it
Never · Outline it
Never · Ring it
Never · Stretch it

04Layout

Eight-pixel unit, two-pixel corners, four on panels. Nothing else rounds. Softness reads as consumer.

BAR · 48RAIL · 200SECTOR MAP · FLUID · 12 COLPANEL · 240TIMELINE · 96UNIT 8 · RADIUS 2 / 4 · HAIRLINE 1
8 px unit
r 2
r 4
hairline · line / ink / signal

05Iconography

Monoline, 1.5 px at 24, drawn on the same grid as the behaviors. Eight is enough: the four behaviors and the four things the console names.

01pulse24
02return24
03contour24
04classify24
05node24
06array24
07depth24
08bearing24

06Components

What the console is built from. Two buttons, one of them colored. Pills say state. Readouts say numbers.

Active pingPassiveConfirmedDegradedPriority
Depth184 M
Bearing087°
ModeActive ping

Contact C-118

Mine-like object

87%
  • Hydrophone αSN-01
  • Array γ-9SN-03
  • Drifter ηSN-06

07Motion

Four timings, one easing pair. Pick one, or let them run. Nothing bounces, nothing blinks for attention; the only blink is a recorder.

Pulse · 2.4 sauto

08Behaviors

The four things the system is allowed to do on screen, each doing it. Everything animated on this page is one of these.

  • 01Pulse

    Acoustic origin point and expanding signal.

  • 02Return

    Echo response. Something is there.

  • 03Contour

    Bathymetric linework. The seabed as intelligence.

  • 04Classification

    Bounding box, confidence score, object label.

09Avoid

From the brief, kept on purpose. The quickest way to look like every other defense startup is to do one of these.

  • Literal submarine or fish logos
  • Sonar rings as the whole identity
  • Neon cyberpunk overload
  • Defense cosplay: red alerts everywhere, fake classified stamps
  • Navy-blue nautical branding
  • A brand book bigger than the company
Behavior

Four things the system is allowed to do.

Pulse, return, contour, classification. The brief asked for motion that feels usable, not decorative, so every animation on this page is one of those four. Here they run as one loop: a node pulses every 2.4 seconds, contours drift under it, a return comes back from whatever the ring touches, and brackets close on it with a confidence figure counting up to a label. Then it lets go.

  • 01Pulse
  • 02Return
  • 03Contour
  • 04Classification

Canvas, one loop. The bar beneath names the behavior that is running.

Product

The console, working.

MCS is the mission control suite from the deck, rebuilt as an interface that runs. The contacts drift, the clock is real UTC, the acoustic signature breathes and the event log ticks. Press a contact and the anomaly panel follows it. Escalate is the one colored button on the screen, and it does the one thing it should.

Everything in it is built from the components in the library above. That was the test: could the system make a screen, not just a deck.

Rec
Sector Delta-04 · 41°23'N · 029°48'E
C-118 · MINE-LIKE OBJECT · 87% · 412M

Acoustic event timeline 04:23:08 elapsed

Passive lockBiologicCable prox.Mine-likeConf +12%Ping sweep

Press a contact. On phones the node rail and the timeline fold away and the map and the anomaly panel stack.

Applications

Off the screen.

The deck put the brand on a shipping container, a ship's hull, a truck, two hard hats and a billboard on the coast. The mark is the only ornament on every one of them, and the container carries the flag: built in the USA.

The badge is here twice: the render from the deck, and the same badge rebuilt in code beside it, hanging from its lanyard and tilting toward you. Then a sensor node's faceplate, a card both ways, and two pages of the deck rebuilt live.

From the deck
The HADAL lockup on the bow of a white ship
A HADAL container on a truck in a container yard at dusk
A HADAL billboard on a coastal bridge: Signal below the surface
Two HADAL hard hats, black and graphite
The container, lifted by crane, the symbol cut across its doors
Built in code
The badge on its lanyard, rendered for the deckDeck · render

Brandon
Ponce

Los Angeles, CA

Brand Designer
Status

Hydrophone array
Node SN-04

Serial
HDL-0419-2026
Depth rating
1200 M
Band
20 Hz – 8 kHz
Power
48 V DC · 0.6 A
Firmware
2.4.1

Built in the USADo not open · Pressure housing

hadal.tech

Brandon Ponce
Brand Designer

Los Angeles, CA
brandon@hadal.tech

HADAL TechnologiesBrand deck · v1
IdentityMay 2026Page 01 of 26
06 · Identity systemHADAL Technologies

Identity
system

02

03

04