Direction
Mode
Accent

Option A, Ledger

Desktop, 1280 px

Sidebar with the unit switcher top left. One job per screen.

Owner dashboardProduction first, the floor live, then the five other numbers. Every card opens its screen.
Staff list with today's statusCount strip filters the list; the side panel shows evidence and the override form.
Staff detailBalance in words, six actions, months with their pay state.
Production entryFive fields and More; today's entries beside it.
Order through its processesEach process has its contractor and rate; pay so far is units done × rate from approved entries.
Contractor staffing checkRequired against present, per role and per machine.

Phone, 390 px

The dashboard is shown at full scroll length. Tap a worker row to open the day status sheet.

Owner dashboardfull scroll
Staff list
Day status sheet
Staff detail
Production entry
Order and contractor payfull scroll
Contractor staffing check

Gate station

DEC-021. Camera first; after the match a frosted arc rises with the enrolment photo and the two buttons. Camera and photos here are placeholders.

ScanningOnly the face frame and the shift pill
IdentifiedTap the camera to replay the arc

Rules on this screen

  • Before the match: live camera, one maroon face frame with a slow glow, and the pill with gate, shift hours and time.
  • After the match: the arc covers about a third of the screen (36%), never half, so the face stays visible above it. "Not this person" clears the photo and saves no mark.
  • The enrolment photo shows only to confirm identity. It clears on Check in, Check out, cancel, or after 10 s (rule station.confirm_timeout_s), and on background or lock. Screenshots are blocked on the device.
  • Motion: the arc springs up in 320 ms and the photo scales in. Nothing else moves. With reduced motion it fades.
  • The supervisor taps Check in or Check out; there is no PIN or manual path.

Logo candidates

Three original marks, drawn as vector shapes. Each shown large, as an app icon, at 48 and 24 px, and in the sidebar. The owner picks one; it then gets a full brand set.

Palette, type and contrast

Warm stone greys, a deep maroon and a warm charcoal sidebar. The dashboard leads with a maroon production card woven like cloth, then the live machine floor. This is the owner's chosen reference (c8), made calmer and with our six numbers.

  • Font: IBM Plex Sans with IBM Plex Sans Devanagari. Engineered, tabular figures, one design across both scripts.
  • Cards: 14 px corners, hairline plus two soft shadows, a light inner top edge. Dark mode turns the floor into lit maroon glass.
  • Best for: owners on phone and desktop alike.
  • Watch: the maroon hero is the one loud thing; nothing else may be filled with maroon.

Cool greys and a crimson maroon on soft, separated cards with more air. The dashboard is a bento of six KPI cards; the production card is the wide one with progress to the ideal. A floating sidebar and a floating phone dock.

  • Font: Mukta (Ek Type), one family that covers Latin and Devanagari. Humanist, very readable on cheap Android screens.
  • Cards: 22 px corners, pill controls, status cards take a soft wash.
  • Best for: owners and supervisors mostly on phone.
  • Watch: less fits on a desktop screen; no floor map in this direction.

Near-black chrome, an icon-only rail and a dark top bar around the content. The dashboard is a control room: a large live floor map of the 24 looms and a lit production ring, then four KPI cards.

  • Font: Anek Latin with Anek Devanagari (Ek Type). Variable width, so numbers run condensed and labels stay normal.
  • Corners 4 to 8 px, status shown as a left rule plus icon and word. Best seen in dark.
  • Best for: a desktop or tablet left open on the owner's table all day.
  • Watch: the dark rail is heavy chrome; it must stay neutral, never coloured.

Type, Latin and Devanagari

Number 40
4,280 m 86% of ideal
Title 22
Contractor staffing check
Body 16
Loom L-03 is running 3 helpers short on Shift A.
Hint 16
ठेकेदार, हेल्पर, मशीन, मात्रा, हाज़िर, आधा दिन, छुट्टी
Meta 14
Ramesh Thekedar, Shift A, 10:05

Palette and contrast

Theme and motion

Settings, Appearance. Mode is per device; the accent list is the lookup set theme_palette, so a new palette is a data row plus a token block.

Appearance

Theme switch

  • Light and dark: the new theme grows as a circle from the button you pressed (View Transitions, 450 ms) while the sun turns into a moon. Without View Transitions it crossfades in 200 ms; with reduced motion it is instant.
  • System follows the phone and changes live.
  • Accent: <html data-palette="maroon"> swaps only primary, hover, soft and nav, with a 220 ms crossfade. Greys and status colours stay, so red always means a problem.
  • The owner sets the company default; each person can pick their own. Choices are restored before first paint.
  • Station phones never show the switch and follow the system.

Motion, all transform and opacity

Page loadcards rise 12 px and fade, 70 ms apart
Numberscount up over 900 ms, ease-out
Floor maptiles 28 ms apart; under-staffed tiles pulse softly
Ring60 ticks light up clockwise
Status chipsone indicator slides to the choice, spring 380 ms
Sheet, gate arcspring slide-up, 480 ms and 320 ms
Hover, presslift 2 px with a deeper shadow; press scales to 0.98
Loadingskeleton shimmer, never a spinner

With reduced motion everything is static and the gate arc fades. Station screens have no motion beyond the scan glow and the arc.