DG Vault Hi-Fi Wireframes · v01
DG VAULT — FULL PRODUCT REDESIGN · BUILT TO BRAND BOOK VOL. 01

Every DG Vault screen, rebuilt to the brand.

A complete high-fidelity wireframe library — website, company web app, driver mobile app, and emergency responder retrieval — every screen following the DG Vault brand book: the vault-dial mark, the Front-proven blue/ink/cyan palette, Inter + IBM Plex Mono, and the calm-white / ink-gravity surface system.

Primary Blue #377DFF Ink #132144 Cyan #09A5BE Cloud #F9FAFC
00

The applied system

The building blocks every screen is assembled from — pulled straight from the brand book so fidelity is guaranteed, not guessed.

LOGO — THE VAULT MARK
DG Vault
DG Vault

Locking ring opens top-right (the moment of access); dashed dial inside; center pin = the verified document. Blue→cyan gradient ring. Wordmark Inter Extrabold, −2.5% tracking. Mark alone below 32px.

TYPE — INTER + IBM PLEX MONO
Display 800
Headline one 700
Headline two 600

Body runs Regular 400 at 16 over 1.65 for comfortable reading, gray-700, capped near 72 characters per line.

UN1203 · SHIP-2026-08841 · 14:38 MST

Information when it matters most

Signature line — always ends on a blue period.

Colour — the Front-proven palette · proportion 70 / 20 / 8 / 2
Primary Blue
#377DFF
Actions, links, active. Hover #1366FF
Ink
#132144
Dark surfaces, gravity, footers
Cyan
#09A5BE
Gradient partner, info states
Cloud
#F9FAFC
Section & card backgrounds
BUTTONS — SOLID / SOFT / QUIET
Search shipments…
Compliant In Transit ERAP Required Watch Overview Expiring Soon Created
CARD

White · 14px radius · gray-300 border · one soft ink shadow.

WELL

Cloud fill, no shadow — grouped content & alternating sections.

INK PANEL — RESERVED FOR GRAVITY

Emergency access · security · the final CTA.

Calm white operations, ink-dark gravity — nothing in between.

01

Website — marketing homepage

Calm-white operations, ink for gravity, blue only where action lives. The product screenshot is the hero asset — large, in a card with the standard shadow. No hazard clichés, no orange.

🔒 dgvault.ca
DG Vault
PlatformIndustriesEmergency ResponsePricingAbout
Sign in
◆ ELECTRONIC SHIPPING DOCUMENTS

Secure. Compliant.
Always accessible.

DG Vault digitizes your dangerous-goods shipping documents and gives first responders instant, automated access — 24/7, when every second matters.

Transport Canada EC Framework compliant
Active
128
Delivered
342
Alerts
2
SHIP-2026-08841IN TRANSIT
Gasoline — UN1203, Class 3
Calgary, AB → Red Deer, AB · Unit 4471
ETA 14:38 MSTView document →

Everything you need. One secure platform.

Digital documents

Upload, OCR-extract and store every DG shipping document securely.

Driver-friendly

QR access, delivery status and digital signatures on the go.

24/7 access

Responders retrieve critical info instantly by phone, SMS or QR.

Built for compliance

TC EC Framework, audit-ready records, two-year retention.

EMERGENCY RETRIEVAL · WITH HM INTEL

Information when it matters most.

Text a unit number, get the shipping document. No login, day or night — bridging industry and emergency response.

Call
Text
Scan QR
Trusted by forward-thinking companies · Kemira · Diverse · Frew Energy · Nalco · GFL · Tetra-Chem
DG VaultBuilt for safety. Backed by technology. Committed to compliance.
02

Auth & company onboarding

Split-screen: ink panel carries the brand and the signature line; white side carries the calm form. Focus rings are gray, not blue. Fixes the old empty, top-aligned screens and the "succesfully" typo.

Sign in as a company
🔒 app.dgvault.ca/login
DG Vault

Critical information,
beautifully secured.

The system of record for electronic dangerous-goods documentation.

© 2026 Commercial Transport Solutions Ltd.

Sign in to DG Vault

Welcome back. Enter your company credentials.

you@company.ca
••••••••••👁

Don't have an account yet? Sign up your company

Register — step 1 · credentials
app.dgvault.ca/register
DG Vault

Register your company

Step 1 of 3 — account credentials

Acme Chemical Logistics Ltd.
ops@acmechem.ca
••••••••👁

8–64 characters · letters, numbers, symbols & spaces allowed.

Register — step 2 · verify email
app.dgvault.ca/register/verify
DG Vault

Verify your email

We sent a 6-digit code to ops@acmechem.ca

4
1
9
2
|

Didn't get it? Resend code · 0:42

Register — step 3 · company & TDG profile
app.dgvault.ca/register/profile

Company & compliance profile

Step 3 of 3 — used on every shipping document and emergency lookup.

Acme Chemical Logistics Ltd.
1200 Industrial Way, Burlington, ON
800-424-9300
Name of responsible person
Acme Transport
⬆ Drop logo or browse (PNG/SVG)
Forgot password
app.dgvault.ca/forgot
DG Vault

Reset your password

Enter the email used to create your company account and we'll send a reset link.

you@company.ca

← Back to sign in

Password reset — success
app.dgvault.ca/reset/done

Password reset successfully

Your password has been updated. You can now sign in with your new credentials.

03

Company web app

Calm-white operations: cloud canvas, white cards with one soft shadow, a quiet white sidebar with a blue-soft active state. Ink is held back for emergency and security only. IDs, UN numbers and timestamps set in IBM Plex Mono.

Dashboard — overview
🔒 app.dgvault.ca/dashboard
DG Vault
⌕ Search shipments, UN #, driver…
AC

Good morning, Acme Chemical

Wednesday, 8 July 2026 · all systems compliant

Active shipments
128
▲ 12 this week
Delivered
342
▲ 28 this week
In transit
16
Real-time
Alerts
2
ERAP · expiring

Recent shipments

View all →
IDDangerous goodStatusETA
SHIP-08841UN1203 · GasolineIn transit14:38
SHIP-08840UN1993 · Flammable liq.Delivered
SHIP-08839UN3265 · Corrosive liq.Pending sig.16:10
SHIP-08838UN2031 · Nitric acidERAP required
SHIP-08837UN1824 · Sodium hydroxideCreated
EMERGENCY RETRIEVAL

24/7 responder access is live.

Every active shipment is retrievable by unit number, phone or QR.

Live shipment map

Shipping documents — list
🔒 app.dgvault.ca/shipments
DG Vault
⌕ Search by ID, driver, trailer, carrier…
AC

Shipping documents

128 active · 342 delivered

All Created In transit Delivered
SHIP-2026-08841In transit
Gasoline — UN1203, Class 3
Calgary → Red Deer · Unit 4471
ETA 14:38 MSTView →
SHIP-2026-08839Pending sig.
Corrosive liquid — UN3265
Hamilton → London · Unit 2210
ETA 16:10 ESTView →
SHIP-2026-08838ERAP required
Nitric acid — UN2031
Sarnia → Toronto · Unit 1188
Not dispatchedView →
SHIP-2026-08840Delivered
Flammable liquid — UN1993
Guelph → Barrie · Unit 3390
Delivered 11:02View →
SHIP-2026-08837Created
Sodium hydroxide — UN1824
Awaiting dispatch · —
SHIP-2026-08836Delivered
Styrene monomer — UN2055
Valparaiso → Guelph · Unit 4471
Delivered 09:44View →
Shipping documents — empty state
app.dgvault.ca/shipments

No documents yet

Upload a shipping document (PDF, PNG or JPEG). DG Vault reads it and pre-fills the details for you to review.

Add document — step 1 · upload & OCR
app.dgvault.ca/shipments/new
Add a shipping document

Step 1 of 2 · Submit a shipping document

PDF, PNG or JPEG · we'll extract the shipment details automatically.

Drop file here
or
PDF
UN1866_AOC_BOL.pdf
Reading…
Add document — step 2 · review & complete (OCR extraction + UN search)
app.dgvault.ca/shipments/new/review
Add a shipping document

Step 2 of 2 · Review & complete

We pre-filled these from the document. Confirm and complete the dangerous-goods details.

GENERAL
09 / 07 / 2026 ▾
AOC
800-424-9300
Add recipient

DANGEROUS GOODS
⌕ UN1..
UN1866 — Resin solution
UN1133 — Adhesives
UN1170 — Ethanol solution
UN1866
20,112
Kilograms (kg) ▾
Class 3 · PG III matched from TDG schedule

ERAP
SOURCE DOCUMENT
BILL OF LADING — AOC, LLC VALPARAISO
─────────────────────────
Sold to: AOC Resins · Guelph, ON
BOL No. 130-46312 · Route PREMIER
─────────────────────────
1 CARGO TANK · UN1866 Resin Solution
3; III · RQ (STYRENE)
Gross 58,010 · Net 44,340 · Tare 13,670
─────────────────────────
HAZARDOUS MATERIALS · CHEMTREC 800-424-9300
Shipper: Hilman Lozano · 17-JUN-25 08:00
Trailer 413480
─────────────────────────
SHIPPER'S CERTIFICATION · 49 CFR / TDG 3.6.1
Shipment detail — record, QR share, status & delete
🔒 app.dgvault.ca/shipments/SHIP-2026-08841

SHIP-2026-08841

In transit
QR — SCAN TO VERIFY

Scan to verify shipment & compliance, or retrieve during an incident.


GENERAL
Shipment date
08 / 07 / 2026
Carrier
AOC
24-hr emergency
800-424-9300
Unit
4471

DANGEROUS GOODS
UN1203 — Gasoline Class 3 · PG II
Quantity 23,000 kg · ERG 128 · Isolation 50 m
SHIPPING DOCUMENT
BILL OF LADING — AOC · BOL 130-46312 · UN1203 Gasoline · Class 3 · Cargo tank · CHEMTREC 800-424-9300 · Route PREMIER · 49 CFR / TDG certified
STATUS TIMELINE
Created 08 Jul · 07:14
Dispatched · driver assigned 08 Jul · 08:02
In transit now · ETA 14:38 MST
Delivered · signature
🗑

Delete this shipment record?

SHIP-2026-08841 and its document will be permanently removed. Emergency retrieval will stop immediately.

Drivers
app.dgvault.ca/drivers

Drivers

DriverUnitStatus
M. Okafor
CDL-Z · TDG cert
4471On route
S. Patel
CDL-AZ · TDG cert
2210Available
R. Boivin
CDL-AZ
Cert expiring
Vehicles / units
app.dgvault.ca/vehicles

Vehicles & units

UnitTypePlateStatus
4471TC406 cargo tankCF-8821In transit
2210Dry vanBX-1140Idle
1188TC407 tankCF-9903Inspection due
Reports & compliance analytics
app.dgvault.ca/reports

Reports

Shipments per week

+18%
BY CLASS
Class 3 · Flammable54%
Class 8 · Corrosive31%
Class 5 · Oxidizer15%
COMPLIANCE
99.2%

Documents complete & audit-ready

Settings — team & roles
app.dgvault.ca/settings/team

Settings

CompanyTeam & rolesSecurityBilling

Role-based access · 3 seats used

MemberRoleStatus
Chris Wells
cwells@ctsolutions.ca
OwnerActive
Ops Manager
ops@acmechem.ca
AdminActive
Dispatch
dispatch@acmechem.ca
EditorInvited
04

Driver mobile app

Big touch targets, one job per screen, QR front-and-centre. The same brand — Inter, blue actions, mono for units — sized for a cab and a glove.

9:41▲ ▮▮▮ 100%
DG Vault
DRIVER
Driver ID or email
••••

▦ Scan QR to load a shipment

9:41▲ ▮▮▮ 100%
DG VaultM. Okafor
Today · 3 assigned
SHIP-08841In transit
UN1203 · Gasoline
Calgary → Red Deer
SHIP-08845Next
UN1824 · Sodium hydroxide
Red Deer → Edmonton
SHIP-08850Next
UN1993 · Flammable liquid
Edmonton → Leduc
LoadsScanMore
9:41▲ ▮▮▮ 100%
← SHIP-08841In transit

Show at consignee / to a responder

DANGEROUS GOOD
UN1203 Gasoline
Class 3 · PG II
23,000 kg · ERG 128 · Isolate 50 m
9:41▲ ▮▮▮ 100%

Update shipment

Quantity delivered
23,000 kg
9:41▲ ▮▮▮ 100%
← Delivery signature

Recipient signs to confirm delivery of SHIP-08841.

Clear09 Jul 2026 · 14:41
J. Marsh
9:41▲ ▮▮▮ 100%

Delivered.

SHIP-08841 signed by J. Marsh at 14:41. Record archived and consignee notified.

UN1203 · GasolineComplete
05

Emergency responder retrieval

The one place the brand goes fully ink — the moment of gravity. No login, day or night: a unit number, an SMS, or a QR scan returns the exact information a responder needs, cyan and white on ink for instant legibility.

9:41▲ ▮▮▮ 100%
EMERGENCY RETRIEVAL · NO LOGIN

Look up a shipment.

Enter the vehicle unit number from the placard or truck.

4471

Information when it matters most

9:41▲ ▮▮▮ 100%
DG Vault · 1-833-DG-VAULT
4471
UN1203 — GASOLINE
Class 3 · PG II · ERG 128
Isolate 50 m · 24-hr 800-424-9300
Document: dgvault.ca/e/4471
Reply ERG for response guide · SDS for safety sheet.
Responder view — retrieved document (public, ink)
🔒 dgvault.ca/e/4471 · no login required
DG Vault EMERGENCY RETRIEVAL · UNIT 4471
PRODUCT
Gasoline
UN1203 · Class 3 · PG II
ERG GUIDE
128
Flammable liquids
INITIAL ISOLATION
50 m
All directions
QUANTITY
23,000 kg
TC406 cargo tank
24-HR EMERGENCY
800-424-9300
CHEMTREC
SHIPPING DOCUMENT
BILL OF LADING — AOC · UN1203 Gasoline · Class 3 PG II · Cargo tank 4471 · Consignor Acme Chemical · CHEMTREC 800-424-9300 · ERAP — · Route Calgary→Red Deer

Retrieved 14:44 MST · verified via DG Vault · powered by HM Intel