The Ozone Data Labs design system.
A dark, instrument-grade canvas on a measured grid, one polar-blue accent, DM Sans for display, Inter for reading and IBM Plex Mono for data, and the globe-and-shield mark: records protected on their way to the world's AI labs. Every page on this site is built from the tokens and components below.
What makes it Ozone
Owners are handing us something sensitive. The design has to feel like a bank, read like a term sheet and show its working.
Show the mechanism
Every claim about safety is backed by a diagram or a live example: the de-identified record, the pipeline, the protective layer.
Numbers in plain sight
Ranges, terms and timelines appear as data, in tabular figures, with the caveat next to the number.
Instrument, not advertisement
Solid surfaces, hairline rules and one polar-blue accent. Gradients and glow are rare and earned: one per view at most.
The globe and shield
A globe with an open edge and a shield with a check: company records leave protected, de-identified and verified. Drawn on a 64px grid with a 2.6px round stroke, always inside a circle.
Primary lockup: the Polar fill mark plus the Ozone wordmark in DM Sans, with the Data Labs superscript set in IBM Plex Mono.
Clear space equals half the mark's diameter on every side. Minimum size 16px for the mark, 120px for the full lockup. Never recolor outside these six variants, rotate, outline or place the mark without its circle.
Tokens
Defined once on :root in styles.css. Components never use literal colors.
Void--space #0A0D12
Page background, under the grid
Panel--navy #121821
Solid panels over imagery
Text primary--ink #FFFFFF
Headings
Text secondary--ink-2 #D3D6DB
Body copy
Text helper--ink-3 #98A0AB
Captions, meta
Rule--glass-line rgba(255,255,255,.12)
Hairlines on panels and tables
Card--glass-bg #0F151D
Cards, fields, tables
Polar blue--ozone #A3CDFB
Primary action, links, focus
Polar deep--ozone-600 #5B9BEA
Pressed states, chart series 1
Signal--ok #7DD3A8
Live and verified states only
Label blue--sky #B9D7F7
Data labels and kickers
Error--err #FF6B7A
Errors
DM Sans, Inter and IBM Plex Mono
DM Sans at a light 380 weight for display headlines and figures; Inter for body and interface text; IBM Plex Mono, uppercase and tracked, for data labels, figure captions and kickers. All self-hosted, latin subset.
Display, DM Sans 380Heading, DM Sans 380Title h3, 19px, 600Body, 16px, 400, 1.6Label, IBM Plex Mono 12px, uppercase, +0.08emFigure, DM Sans 380Buttons, pills, chips and fields
Pill-shaped actions with one primary per view. Chips carry real product logos so owners recognize their own systems.
Gmail
Microsoft 365
Slack
Salesforce
HubSpot
QuickBooksSTServiceTitanAEApplied EpicXXactimate exportsCall recordingsEstimator and value table
Money is always a range with its caveat. Bars scale to the largest value in the same table.
What could your data be worth?
Drag or typeIndicative only. Your final offer depends on a review of your systems and data volume.
| Company profile | Size and history | Indicative range |
|---|---|---|
| Our specialty | ||
| Home servicesHVAC, plumbing, roofing, solar, pest | 18 office + 40 field staff5 years of records | $250K – $500K |
| Insurance agencyPersonal and commercial lines | 20 office staff6 years of records | $280K – $560K |
| Every other industry | ||
| Law or accounting firmLegal and professional services | 20 office staff6 years of records | $280K – $560K |
| Healthcare practiceMedical, dental, specialty | 25 office staff5 years of records | $290K – $580K |
| Financial services firmLending, wealth, advisory | 30 office staff6 years of records | $340K – $680K |
| Construction or real estateContractors, property managers | 30 office + 50 field staff6 years of records | $340K – $680K |
| Logistics or manufacturingFreight, distribution, production | 40 office + 80 field staff6 years of records | $400K – $810K |
| Software or agencySoftware, IT, marketing, retail | 40 office staff5 years of records | $320K – $630K |
Pipeline, protective layer and safeguards list
Diagrams explain the mechanism. The glow marks the de-identification step in each one.
Read-only export
GmailMicrosoft 365SlackSalesforceSTServiceTitanAEApplied EpicFrom the tools your team already uses.
Scope, in writing
De-identified
Licensed copy
Used for AI training. Never published or resold.
You get paid
- Your originals. Never leave your systems and are never changed.
- Approved scope. Only the systems and dates you sign off on are copied.
- De-identification layer. Names, numbers, addresses and codes are replaced or removed.
- AI lab. Receives a licensed copy for training. Never published or resold.
Removed before delivery
- People's names, replaced with placeholders
- Customer, client and company names
- Addresses, phone numbers and emails
- Account, policy and card numbers
- Social Security numbers, dates of birth, health details
- Passwords, gate and alarm codes
What buyers keep
- The request or problem
- The diagnosis, decision or outcome
- Prices, quantities and timelines
- How the work moved between people and systems
Your originals never leave your systems. Only the agreed copy is processed.
Photography and logo walls
Real photography only: offices, meetings and field crews at work, from the Unsplash library. Natural light, no illustration, no generated imagery. Lab and vendor logos run in monochrome and gain color on hover.
OfficeReal teams at work
FieldDocumentary
InsuranceDocumentary
Plus the systems field and insurance operators run on
Field service, roofing, agency management and claims platforms
Logos belong to their owners. We work with your exports, not with these vendors.
Lucide, 1.75px stroke on a 24px grid
Icons sit in a 32 to 36px panel tile, stroked in polar blue. Use them to label categories, never as decoration.
How we write
Plain, specific and on the owner's side. Every estimate is called an estimate. We say what happens, who does it and when.
Say
"Your originals stay in your systems." "Typically net 30 after acceptance." "We disclose our fee before you sign."
Avoid
"Unlock the hidden value of your data." "Guaranteed payout." "Monetize your digital exhaust."
Always pair
A number with its caveat. A safety claim with its mechanism. A call to action with what happens next.