← ClaudeAtlas

omni-omnipaylisted

OmniONE — OMNIPAY design skill. Payments/wallet/card product (web + mobile). PURPLE brand accent (#A682FF) replaces brand blue, signature status chips, data tables, finance-grade trust cues. Extends the shared omni-design-system base.
teejayai/Omni-design-skill · ★ 0 · Web & Frontend · score 62
Install: claude install-skill teejayai/Omni-design-skill
# OmniONE — OMNIPAY Payments / wallet / card product, web (1440px) + mobile (375px). Extends [omni-design-system](../base/SKILL.md). Gordita is the system font. OmniPay overlays a distinct **purple** accent and (legacy) mixes in third-party kits — treat those as debt, not patterns. ## Voice / personality Functional, transactional, finance-grade. Plain labels ("Wallet Balance", "Add Money", "Withdraw"). Explicit trust/compliance cues on money flows ("Powered by Victory MFB — Trusted, Secured, and CBN Licensed", "Terms and Conditions of OmniPay cards"). Warm onboarding microcopy on auth. Clear + reassuring, not playful. ## Preferred components & variants - **Status chip** (signature): pill h-30, radius 12, px-16, tinted bg + matching text. Successful / Pending / Failed. - **Data table**: card-wrapped (r16 + shadow), sortable uppercase headers (Gordita Medium 16/24 + sort icon), rows px-16 py-12 with 1px inset bottom divider. Used for all transaction lists. - **Stat / balance cards**: ~264×125, r10, purple 1px border, faint teal shadow; selected = purple-tinted fill `rgba(166,130,255,.05)`. - **Tabs**: text + 2px underline; active = purple `#A682FF` Medium, inactive grey `#6C757D` Regular. - **Buttons** — web: Primary solid purple r12 h52; Secondary purple-outline r12. Mobile: Primary solid purple **r20** h48; Secondary purple-outline r20. - **Input (auth)**: labeled, r8, 1px `#D0D5DD`, px-14 py-10, shadow-xs, trailing eye/mail icon (Untitled-UI kit). - **Payment card visual*