← ClaudeAtlas

omni-roslisted

OmniONE — ROS (Retail Operating System) design skill. Mobile-first onboarding/retail app. Warm + guided, near-black STEEL-GRAY primary action, teal
teejayai/Omni-design-skill · ★ 0 · AI & Automation · score 62
Install: claude install-skill teejayai/Omni-design-skill
# OmniONE — ROS Mobile-first (375px, PWA + native) retail operating system. Extends [omni-design-system](../base/SKILL.md). Gordita throughout. **Biggest deviation: ROS uses near-black steel-gray as its action color, not brand blue.** ## Voice / personality Warm, personable, low-friction. Headers address the user by name ("Hi Cece!") with reassuring sub-lines ("We need a bit more information. Please enter your business details"). Progress always shown ("1 / 3" + bar, or step dots) — onboarding framed as short and guided. Calm neutral chrome: black/white/grey + a single teal accent, no decorative color. ## Preferred components & variants - **Omni_Inputs** (workhorse): label row (Gordita Medium 14, `#515151`/`#4B5563`) + red `*`, over white field `h-48`, border `#ECECEC`, radius **10px**, padding 16/12. Trailing chevron when it's a select. - **Main Buttons**: full-width, radius **5px**, py-10/px-16, Gordita Medium 14 `#FEFEFE`. Active `#252A31` (steel-700), modal action `#161A1E` (steel-900), disabled `#C0C3C8`. - **Mobile header**: iOS status bar + language selector pill (bordered, r4, `#C0C3C8`) + help icon. Persistent on every screen. - **Bottom button dock**: white, sticky, pt-15 pb-60 px-16. - **Modal — bottom sheet**: top corners radius **30px**, grab handle, header (Medium 16), search input, scrollable radio list, sticky action button. - **Steps-Dot stepper**: dot + tail, active `#4B5563`, inactive `#D9D9D9`. - **Radio (Form Control Element)**: 24px, active = filled b