Design system
The mark is the small part. The rules are the system.
Lowbotics is a field service company that happens to deploy robots. Everything here — voice, color, type, layout, motion — exists to make that read as credible before it reads as cinematic. Dark-first, industrial, precise. There is no light mode.
Positioning
Anyone can buy the hardware. Nobody can stand up the field service.
What we sell
Vetted OEM autonomous floor-care machines wrapped in a turnkey managed program: delivery, site mapping, cloud connection, staff training, day-1 and day-30 check-ins, quarterly PM, break/fix dispatch, hot-swap units, remote monitoring, dashboards.
Who buys
Facilities directors, VPs of operations, and national-accounts leads at multi-site enterprises — QSR, retail and c-store, hospitality, logistics, healthcare. Credibility first, cinema second.
The spine
The product is not the robot. It is the deployment and support program around it. The customer starts on day one and never thinks about the machines again.
Voice
An operations partner who has done this before and is not excited about it.
Register
- First-person plural “we.” Professional, direct, confident, experienced.
- Short, scannable sentences. Concrete over abstract: “a technician is on site” beats “world-class support.”
- Sell peace of mind, uptime, clean sites, and the fact that nobody at the customer's company has to become a robot expert.
- No exclamation marks. No rhetorical questions as headlines. Statements only.
- Sentence case for headlines and buttons. Uppercase is reserved for mono eyebrows and labels.
- Never emoji.
- Headline pattern: two short declarative sentences, the second landing the turn. Candor about limits is a recurring section type — honesty is a device, not a disclaimer.
Calls to action
Primary is always “Request a pilot.” Secondary varies with context: “How deployment works,” “Request an assessment,” “Talk to us,” “Start the conversation.” Pilot-first framing everywhere.
Voice samples
The robot is the easy part. We run everything after it.
Most robot programs don't fail on the floor. They fail in the closet.
Sell the outcome. We carry the wrench.
Start with one site. Judge us on the second month, not the first day.
We will tell you when a site is a bad candidate.
Banned words
Logo
Size by height. Never re-typeset the mark.
Clear space = mark height, all sides
Monoline geometric face, very wide letterspacing, 10.9:1 aspect. The second-position “O” is a red power symbol — the only color in the mark. The reversed “B” is deliberate.
- Size by height, never width
- Nav & footer: 20px (h-5)
- Min 16px → then icon
- Never recolor / rotate / stretch / add effects
- Never re-typeset · B is reversed
- Never alter letterspacing
- Never on busy photos
- White master on dark, black master on light
- 2400×1800 lockups are OG/social only, never on-page
The power-symbol icon is the shipped favicon (#ED1C24). Red, white, and ink variants exist for standalone use below 16px.
Color
Warm near-black, authored in OKLCH at hue 34.
Background
#141110
--background
Surface
#211D1C
--surface
Surface strong
#2E2927
--surface-strong
Accent / hover
#38312F
--accent
Border / input
#3C3735
--border
Muted foreground
#A19D9C
--muted-foreground
Foreground
#F3F1F1
--foreground
Signal
#E41C13
--signal
Do
Red as instrument markings
Eyebrows, step numbers, icons, rule ticks, required asterisks, focus borders, the hero headline's second line — and the CTA fill. Small, precise, engineered. Signal renders as oklch(0.586 0.229 29.2) = #E41C13; brand #ED1C24 survives only in the favicon.
Don't
Red as a surface
No red section backgrounds, no red body copy, no red headlines beyond the single hero line. On dark ground red reads at 4.1:1 — display and UI only. The one-red-per-viewport rule is retired; the surface rule is not.
| Pair | Ratio | Verdict |
|---|---|---|
| foreground on background | 16.4:1 | AA all sizes |
| foreground on surface | 14.3:1 | AA all sizes |
| muted-fg on background | 7.2:1 | AA all sizes |
| muted-fg on surface | 6.3:1 | AA all sizes |
| signal-fg on signal | 4.6:1 | AA — CTA fills |
| signal on background | 4.1:1 | Large text / UI only — 11px eyebrows shipped; flag before body use |
Typography
Archivo display, Barlow body, IBM Plex Mono instrumentation.
Managed autonomous floor care
The robot is the easy part.
We run everything after it.
Barlow at 18px, line-height 1.625, in muted-foreground. Nearly all secondary copy on the site is set exactly like this.
Home hero h1
Archivo 700 · 36 → 60 → 72px · lh 1.02 · -0.02em · second line in signal
Page h1
Archivo 700 · 36 → 48 → 60px · lh 1.05 · -0.02em
Section h2
Archivo 700 · 30 → 36px
Tile h3
Archivo 700 · 20px
Stat figure
Archivo 700 · 30px
Body
Barlow 400/500/600 · 14–18px · lh 1.625 · muted-foreground for secondary copy
Eyebrow
IBM Plex Mono · 11px · 0.18em · uppercase · signal
Meta label
IBM Plex Mono · 11.2px · 0.14em · uppercase · muted-foreground
Button label
IBM Plex Mono · uppercase · all marketing buttons
Loaded from Google Fonts — Archivo 500–800, Barlow 400/500/600, IBM Plex Mono 400/500. No font binaries in the repo. The wordmark is outlined paths.
Layout
One centered container. Hairline grids. Square corners.
Container
Centered max-w-6xl (1152px) with 20px side padding. Not asymmetric.
Sections
py-24 (96px). Home hero 112 → 160px. CTA panels p-10 / p-16 on surface.
Tiles
Flat surface fills, p-8, no border on the tile — 1px gaps over a bg-border parent inside a 1px outer border.
Radius
0 on all marketing UI: CTAs, cards, inputs, nav, footer. shadcn controls only: 4px. No shadows on marketing UI.
.rule-tick
A 1px border rule with a 3rem × 2px signal tick at its start. Used to open subsections.
.grid-field
72px blueprint grid of 4%-white lines, applied to dark sections behind content. Hero photography sits at opacity 0.4 under a to-right gradient (100% → 85% → 30%).
Components
Every control is mono, uppercase, and square.
Buttons
Primary fills signal; hover drops to opacity 0.9. Outline variants fill on hover. Icons are lucide at size-4 inside controls.
Badges & index numbers
Installed, not shipped
We deliver, power up, map, connect, and validate.
Uptime by design
Quarterly PM, break/fix on call, hot-swap in place.
Stats
Associate hours / day
1.67 → 0.25
Typical payback
6–14 mo
Mono meta label above, Archivo 700 figure below. These two figures and qualitative water/chemical reduction are the only numbers cleared for publication.
Form inputs & TK placeholders
TK · Cleared customer logos
TK · Customer quote at six months
Marketing inputs swap their border to signal on focus — no ring. shadcn controls use ring-1 in signal. Anything not yet cleared renders as a visible TK placeholder, never faked.
Motion, imagery, icons
Restraint is the effect.
Motion
150ms cubic-bezier(0.4, 0, 0.2, 1) only. CTAs hover to opacity 0.9; everything else is transition-colors. In the system spec: no keyframes, no scroll animation, no parallax.
Imagery
Real photography only — a machine on a polished retail floor at night (hero, opacity 0.4 under gradient), a technician in the staging warehouse (1px border frame). No smiling-staff stock, no visible OEM branding.
Icons
lucide, stroke style, in signal. 16px in CTAs and shadcn controls, 24px in tiles, 20px for the nav toggle and contact details. No emoji, no unicode-as-icon, no icon fonts.
Nav: sticky, h-16, background at 90% with an 8px backdrop blur, bottom border at 80%. Logo h-5. Mono uppercase links in muted-foreground moving to foreground on hover and active. The nav CTA is a signal outline that fills on hover.
Prohibitions
What the client shipped defines what is publishable.
No invented statistics. Publishable: 1.67 → 0.25 associate hours/day (one enterprise deployment model), 6–14 month payback, qualitative water and chemical reduction.
No customers, pilots, or channel partners named or shown. None are cleared.
No American manufacturing claim and no proprietary hardware platform claim. We resell vetted OEM machines.
No pricing. The shipped line is “Service is quoted per deployment.”
No FCC, compliance, or certification claims of any kind.
No testimonials or quotes. None are cleared.
OEM names are public in a factual register only — Gausium Phantas, Pudu CC1/CC3. No comparisons against them.
Public contact facts: info@lowbotics.com · Dallas, Texas — staging warehouse, national coverage
Site structure
Five pages, one argument.
Home
Hero → failure mode → program pillars → outcomes and stats → pilot CTA.
The Service
Eight-step deployment sequence, the 2 a.m. escalation path, monitoring, reporting, commercials. Gausium Phantas and Pudu CC1/CC3 are named here in a factual register.
Industries
Six verticals plus the fit assessment — “we will tell you when a site is a bad candidate.”
Partners
No technical abandonment, and three routes to market.
Contact
mailto-based form, email, and the Dallas staging line.
Want the program, not the poster?
Start with one site. We'll scope it, deploy it, and support it. Service is quoted per deployment.
Request a pilot