Soravi.
An operations assistant for any physical work.
Eyes on your floor you can ask.
This kit is the single source of truth for how Soravi looks, reads and behaves. One dark surface, one orange, one typeface.
The wordmark
Soravi is written as one word with a period — the dot always carries the brand orange.
Keep clear space at least the cap-height of the S on every side.
This sample is the real floor — 88px wide on screen, or 22mm in print. Never set the wordmark smaller.
The app icon
The white sprout on the ignition-orange tile. One master SVG scales to every size.
Rounded square, 22% corner radius. The sprout sits with ~19% padding — never crowd the edge.
Soravi — see your floor
New tab
Served as favicon.svg, favicon.ico (48px), apple-touch-icon.png and icon-512.png — all cache-busted ?v=2.
One dark surface, one orange
Click any swatch to copy its hex.
--text on --bg passes AA.
--accent is for action and emphasis, never large text blocks.
One accent per screen.
Space Grotesk
One variable typeface across all display, numbers and UI chrome.
Plain-language questions, answered with the moment you can replay. The subject is always you, your floor and the work — 安心地看着你的现场。This is the exact body stack the soravi.ai homepage renders: native SF Pro on Apple, Segoe on Windows, PingFang / Noto for Chinese, so copy loads instantly and reads native everywhere.
Display + body split by design: Space Grotesk carries every heading, number and UI label; running body text rides the system stack — verbatim from the live homepage, so this kit is a faithful single source of truth.
Display, numbers and all UI chrome are Space Grotesk. Body copy is the system stack (SF Pro / PingFang SC / Noto) for instant load and native CJK.
Body is never set in Space Grotesk; the display face is never used for long-form paragraphs.
Three signature surfaces
The dimmed video wall, the diagonal scrim, and liquid glass.
The dimmed video wall — real-floor footage behind everything. Posters paint instantly, a capped set of muted clips fade in.
Lighter top-right reveals the footage; darker lower-left carries the headline. This keeps text legible over motion.
Pure --bg (#0A0B0D) at rising opacity — no hue, no rainbow. The scrim only thickens the brand black diagonally, so orange stays the one color on screen.
#bgscrim · linear-gradient(212deg, rgba(10,11,13,.48), rgba(10,11,13,.72) 48%, rgba(10,11,13,.88)) , radial-gradient(72% 68% at 13% 74%, rgba(10,11,13,.46), rgba(10,11,13,0) 70%) · then a flat #bgscrim2 layer rgba(10,11,13,.30) under content.
background rgba(20,22,28,.55) · backdrop-filter blur(24px) saturate(160%) · 1px rgba(255,255,255,.12) border · inset top highlight.
Radius and border tokens — 18px on panels, 12px on tiles, 999px on pills, the #24262C hairline on dividers.
Focus dim
When a framed demo centers the viewport, the wall recedes: it dims and desaturates while an extra veil drops, so the demo and the one orange own the screen. Restored on exit.
#bgwall filter: brightness(.5) saturate(.82) · veil rgba(8,9,11,.55) (one notch darker than --bg) · eased background/filter .55s cubic-bezier(.22,.61,.36,1) · toggled by body.focus-dim / body.demo-active.
Use video only where it earns attention and the link is fast.
Default to posters.
The wall is always dimmed — never foreground.
When a demo centers, deepen the dim and desaturate the footage so orange stays the only color — then restore on exit.
Calm, deliberate motion
One easing curve, gentle reveals, and a quiet focus-dim.
Real Soravi surfaces
Copy these patterns, don't reinvent them.
Is Soravi watching my workers?
Real Soravi surfaces — copy these patterns, don't reinvent them.
How Soravi speaks
Do
- Talk about you, your floor and the work.
- Plain, calm, confident — never hype.
- Say "processes, not people."
- "Footage and metrics stay yours."
Don't
- Never say we watch, monitor or track workers.
- Never imply data leaves the customer.
- No buzzwords, no exclamation stacking.
Hard rule
No personal information — only processes.
Never reveal or imply any link to selling data to AI labs.
Grab the assets
Every file here is the real, production asset — the same wordmark, icons, tokens and typeface this site ships. Zips are assembled in your browser, so nothing leaves your machine.