The idea
Three roster rows — AM, PM, night — offset like shifts sliding into place.
The amber row is the live shift: the slot being filled right now. Slota is sling + rota — the mark shows the roster, the motion shows the sling.
The mark
One mark, two finishes. On dark surfaces the outer bars go white — never navy. The amber bar never changes.
16px24px32px48px64px16 px is the floor on screen; 6 mm in print. Below that the offset stops reading.
The mark in motion
Waiting states use the Shiftlines loader — the three bars re-slot on a 2.4s loop, and hold still under reduced-motion. It replaces every spinner at page and route level.
Colour
Amber is reserved for one element at a time — the middle bar, a primary button, a live status. Never two amber elements competing for the same glance.
#2E3E54
Primary. Bars, wordmark, headings.
#1E2836
App-icon ground and dark surfaces.
#F5A623
The live shift. Accent — one element at a time.
#FCFBF8
Light surfaces. Warmer than white.
Type
Two open-source families (OFL), safe to bundle on the web and in the Expo app.
Space Grotesk Bold · wordmark + headings
SLOTA
Every slot filled.
Wordmark tracking is +22%. Always caps — lowercase “slota” belongs in body copy only.
Manrope · UI + body
Aa Bb Cc 0123456789
Managers publish the week, staff clock in, and timesheets fill themselves. Manrope carries every label, table cell and paragraph in the product.
Semibold for labels, extrabold for numbers that matter. Body sits at 14–15 px.
Usage
Clear space on all four sides is one bar-height. Nothing crosses into it — not type, not a container edge, not a photo.
- Clear space: at least one bar-height on every side.
- Minimum size: 16 px mark height on screen, 6 mm in print.
- Use the white mark on dark surfaces and over photography.
- Pair the name with the category on first contact — “Slota — Workforce Deployment”.
Don't recolour the bars
Don't add a fourth bar
Don't outline the mark
Don't rotate or skew it
Assets
Everything below is served from /brand/. In code, import SlotaLogo and SlotaLoader from @/components/brand rather than dropping in a PNG.
slota-mark.svg / slota-mark-white.svgMaster vector marks — navy and white, transparent groundslota-appicon.svgVector source of the app icon (full-bleed square)icon-1024.pngExpo icon — iOS app iconadaptive-icon-1024.pngExpo adaptiveIcon.foregroundImage (backgroundColor #1E2836)playstore-512.pngGoogle Play listing iconsplash-icon-400.pngExpo splash icon, on paper #FCFBF8favicon-48.png / favicon-32.pngWeb faviconslota-logo-light.png / -dark.pngFull lockups for site headers, decks, documentsslota-wordmark-light.png / -dark.pngWordmark alone