Visual System · v1.0

Gunnar Energy Services UI Style Guide

A cinematic, defense-grade dark console. Near-black grounds, surfaces that rise in tight low-chroma steps, 1px hairlines instead of shadows, and a single electric-yellow accent used as a signal, never a fill wash. Corners are square on every element; the hard edge is the signature. Headlines are Archivo Expanded; body is Libre Franklin; every label, button and metadatum is IBM Plex Mono, uppercase, wide-tracked. On yellow, text is always near-black.

Theme · Dark Accent · #FEEE00 Corners · Square (0) Type · Archivo Expanded / Libre Franklin / IBM Plex Mono Click any swatch to copy

Color tokens

01 · Palette

Achromatic surfaces plus one yellow. Surfaces step up in hex rather than with shadow; borders are white at low opacity so they read on any ground.

Surfaces

Aa canvas

--ground

#0A0C0F

Primary page canvas, the near-black void

copy

Aa deep

--ground-2

#06080A

Deepest bands, top bar, footer, deep sections

copy

Aa surface

--surface

#111418

Raised panels and cards, one step up

copy

Aa raised

--surface-2

#16191F

Insets and hover state, two steps up

copy

Text

Aa primary

--text

#EAECEF

Primary text + headings, soft white, never #fff

copy

Aa dim

--text-dim

#9AA2AC

Body copy, ledes, nav at rest

copy

Aa faint

--text-faint

#7A828C

Captions, metadata, placeholders, meets 4.5:1

copy

Aa #0A0C0F on accent

--accent

#FEEE00

Electric yellow, the only chromatic color

copy

Hairlines & brand deep

1px rule

--line

rgba(255,255,255,.12)

Standard hairline border / rule

copy

faint

--line-2

rgba(255,255,255,.06)

Faintest divider, sub-strip borders

copy

strong

--line-strong

rgba(255,255,255,.24)

Emphasized / hover edge, ghost button

copy

Aa overlay

--navy

#0F2240

Brand deep, image overlays only

copy

Functional states, app UI only (absent from marketing)

Aa ok

--ok

#4ADE80

Success / healthy, signal, not fill

copy

Aa warn

--warn

#FBBF24

Caution, keep clear of the yellow CTA

copy

Aa danger

--danger

#F87171

Error / destructive

copy

Aa info

--info

#60A5FA

Neutral info

copy

Typography

02 · Type scale

Three families on three contrast axes, expanded grotesque display, humanist body, mono telemetry. Never two similar sans paired. Specimens below render in the actual faces.

Display XL

Archivo Expanded · 800
clamp 44→116px · lh .94 · -0.015em

Hit the well.

Display L

Archivo Expanded · 800
clamp 34→68px

Relative wellbore positioning

Display M

Archivo Expanded · 800
clamp 26→40px

When surface control has failed

Card heading

Archivo · 700
18–24px · lh 1.12 · -0.01em

DeadAhead™ wired-pipe ranging

Lede

Libre Franklin · 400
clamp 17→20px · lh 1.6

A single core capability, precise, deterministic, relative wellbore placement, across every application.

Body

Libre Franklin · 400
16px · lh 1.6 · 65–75ch

Excitation, detection and telemetry are integrated within the BHA, so ranging continues with no dedicated trips and no wireline entry into a live well, sustaining drilling momentum through convergence.

Eyebrow

IBM Plex Mono · 500
12px · 0.22em · UPPER

24/7 Emergency Well Control

Button / nav

IBM Plex Mono · 600
11–12.5px · 0.10–0.14em · UPPER

Talk to an engineer →

Components

03 · Building blocks

Square corners, hairline borders, mono labels. Hover the live elements, transitions are 150–180ms ease on border, background and color only.

Buttons

Primary = the one filled action per view (yellow → white on hover). Everything else is a ghost. Destructive is a danger-outlined ghost, filled color stays reserved for the single yellow primary.

Eyebrow + kicker tick

Technology

It's like underground GPS, accurate to an inch.

A 28px yellow tick before a mono label. Deliberate section marker, voice, not scaffolding on every block.

Link tile (hover)

Relief Well & Blowout Intercept

Deterministic intercept and kill when surface control has failed, ranged and drilled to inch-level accuracy.

Flat panel, 1px border → accent on hover. Never nest a card in a card.

Form field + chips

Operator email

Relief well P&A CCUS Geothermal

Enter a valid email so we can reply.

Status & badges

24/7 emergency line, active

Operational Caution Offline Queued

The pulsing dot is the only round element in the system. Badges stay square; color rides text + border, not a fill.

Alerts, full border, no side-stripe

OKIntercept confirmed, hydraulic communication established.

WarnTarget surveys are sparse below the packer.

ErrorTelemetry link lost. Re-establishing downhole comms.

InfoNew ranging measurement available for review.

Hairline stat grid, 1px gaps become the rules

100%

Intercept success rate

11+ mi

World-record combined wellbore

Projects · 7 countries

Data tables

04 · The common app surface

Mono uppercase headers, body-font cells, row hover steps the surface. Numbers, IDs and codes go in mono with tabular figures so columns align, instrument output, on-brand.

Project	Method	Location	Range (ft)	Separation	Status
North Dakota intercept	DeadAhead™	USA · 2025	8,642	5–10 ft	Complete
Bavaria closed-loop	Torped™ rotary	Germany · 2024	29,500	±2 ft	Complete
Louisiana dynamic kill	DeadSet™	USA · 2020	1,050	3 ft	Monitoring
Live-well CT intercept	CTRWD™	Confidential	300	,	Planned

The rules

05 · Hard constraints

Always

Dark canvas; surfaces step up in hex, not shadow
border-radius: 0 on every button, card, input, panel
Structure from 1px hairlines and 1px-gap grids
One accent, yellow as a signal, never a fill wash
Near-black text on every yellow fill
Mono uppercase for labels, buttons, nav, table headers
Placeholders on --text-faint (meets 4.5:1)
Visible focus ring; honor prefers-reduced-motion

Never

A second chromatic brand accent
Rounded pills or soft cards
Drop shadows or glassmorphism to separate surfaces
Pure white (#fff) for body text, use #EAECEF
Large yellow fills, gradient text, background-clip:text
Colored left/right accent stripes on cards or alerts
Bright, full-saturation or stock "corporate" imagery
Gating content visibility on a reveal animation