Base
OmniONE design system + product skills for Claude Code
npx -y skills add teejayai/Omni-design-skill --skill baseAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Shared OmniONE Retail design system — exact tokens (Gordita type scale, full color ramps, semantic tokens), global rules, and components used across all products (DOS, MOS, AGENT, ROS, OMNIPAY). Reference this base before any product skill.
SKILL.md
15.3 KB, ~5.3k tokens by cl100k_base, as published. Nobody here has run it
OmniONE — Design System (Base)
Shared system for all Omni Retail products. Every product skill extends this base and never deviates. Use only the names/values below — never invent values. Machine-readable mirror: tokens.json.
Source: Figma OmniONE Design system (RNBrFtlAUysqguEEm4AzyY).
Typography
- Font:
Gorditaeverywhere. Weights: Regular 400 · Medium 500 · Bold 700 · Black 900 (every style has all four). Light 300 + italics also ship. - Designed to a 4px grid. Letter-spacing values are percentages (px = size × pct).
Font files (self-hosted)
Brand .otf files live in fonts/; @font-face declarations in fonts/gordita.css. Import once at the app root: @import "./fonts/gordita.css"; (or <link>), then use font-family: "Gordita".
| File | weight | style |
|---|---|---|
| Gordita-Light.otf / -LightItalic.otf | 300 | normal / italic |
| Gordita-Regular.otf / -RegularItalic.otf | 400 | normal / italic |
| Gordita-Medium.otf / -MediumItalic.otf | 500 | normal / italic |
| Gordita-Bold.otf / -BoldItalic.otf | 700 | normal / italic |
| Gordita-Black.otf / -BlackItalic.otf | 900 | normal / italic |
Web type scale (exact)
| Style | Size | Line height | Tracking |
|---|---|---|---|
| H1 - 48 | 48 | 56 (Regular) / 48 (M,B,Bk) | 0% |
| H2 - 36 | 36 | 44 (48 Black) | -3% |
| H3 - 32 | 32 | 40 | -3% |
| H4 - 28 | 28 | 36 | -2% (M,B) / 0% (R,Bk) |
| H5 - 24 | 24 | 28 | -2% (0% Regular) |
| H6 - 20 | 20 | 24 | -2% (0% Regular) |
| Body Large - 18 | 18 | 28 | 0% |
| Body Medium - 16 | 16 | 24 (R) / auto | 0% |
| Body Small - 14 | 14 | 20 | 0% |
| Body XSmall - 12 | 12 | 18 | 0% |
| Caption - 12 | 12 | auto | 0% |
| Label - 10 | 10 | 18 | 0% |
Mobile scale (Body Medium-14, Body Small-12, + heading mirror) — names known, exact values pending.
Icons
- 1,176 SVG icons in
icons/, grouped into 19 category folders. Index + full name list:icons/icons.json. - Each icon is 24×24,
viewBox="0 0 24 24", line/path-based. Recolor withfill/stroke— setcurrentColorso icons inherit text color. Size viawidth/height(use the 4px grid: 16/20/24). - File path:
icons/<category>/<icon-name>.svg(kebab-case). e.g.icons/general/home-01.svg,icons/arrows/arrow-right.svg.
| Category | # | Category | # | Category | # |
|---|---|---|---|---|---|
| general | 197 | media-and-devices | 108 | editor | 104 |
| arrows | 92 | finance-and-ecommerce | 78 | layout | 63 |
| communication | 58 | files | 58 | development | 57 |
| weather | 52 | charts | 49 | maps-and-travels | 43 |
| users | 42 | security | 36 | education | 31 |
| images | 29 | time | 28 | alerts-and-feedback | 26 |
| shapes | 25 |
Use only these icons — don't invent or pull from other sets. Country flags + file-type chips were excluded.
Color
Primitive ramps (25→900, 400 (Base) is the anchor)
Primary 1 — Dark Cornflower Blue (brand): 25 #F6F7FA · 50 #DCE2ED · 75 #C5CFE1 · 100 #A2B2CF · 200 #94BFE9 · 300 #2E5193 · 400 #173E87 · 500 #0E2856 · 600 #0F2858 · 700 #0B1F43 · 800 #071329 · 900 #030914
Primary 2 — Steel Gray: 25 #F8F8F9 · 50 #E4E5E8 · 75 #DBDDE0 · 100 #C0C3C8 · 200 #9CA1A9 · 300 #666E7A · 400 #4B5563 · 500 #404854 · 600 #343C45 · 700 #252A31 · 800 #161A1E
Secondary 1 — Teal: 25 #F6FDFB … 200 #63D9B6 · 300 #36CEA1 · 400 #20C997 · 500 #1AA179 · 600 #158362 · 700 #10654B · 800 #0A3C2D · 900 #051E17
Secondary 2 — Light Blue: 25 #F9FBFE … 200 #94BFE9 · 300 #75ACE3 · 400 #66A3E0 · 500 #5282B3 · 600 #426A92 · 700 #335170 · 800 #1F3143 · 900 #0F1822
Accent 1 — Soft Green: 50 #DFF2E3 · 100 #C9E9D1 · 200 #68C17D · 300 #3EB058 · 400 #28A745 · 500 #208637 · … · 900 #06190A
Accent 2 — Amber: 50 #FFF6DA · 100 #FFE69C · 200 #FFD451 · 300 #FFC720 · 400 #FFC107 · 500 #CC9A06 · … · 900 #261D01
Accent 3 — Soft Red: 50 #FAE1E3 · 100 #F1AEB5 · 200 #E7727D · 300 #E04958 · 400 #DC3545 · 500 #B02A37 · … · 900 #21080A
Neutral / Grey: 25 #F8F9FA · 50 #F0F0F1 · 100 #F0F2F5 · 200 #D9D9D9 · 300 #CCCCCC · 400 #B3B3B3 · 500 #667185/#999999 · 700 #344054 · 900 #101928 · Black #010611 · White #FFFFFF
Semantic tokens (use these in UI, not raw primitives)
- Surface: bg #F0F0F1 · bg-alt #FFFFFF · card-bg #FFFFFF · card-alt-bg #F8F9FA
- Border: Thick #B3B3B3 · bold #CCCCCC · mid #E5E5E5 · light #F0F0F1
- Text: default #101928 · subtitle #344054 · focused #333333 · subdued #999999 · disabled #D9D9D9
- Icon: focused #808080 · disabled #D9D9D9
- Button: primary #173E87 · hover #5D78AB · disabled #C5CFE1 · text #FFFFFF · alt primary #4B5563 / hover #9CA1A9 / disabled #DBDDE0
- Brand: primary #173E87 · hover #0B1F43 · secondary #20C997 · success #28A745 · alert #FFC107 · error #DC3545 · grey #D9D9D9
A secondary brand palette also exists (
Primary - main #034DB1/Secondary - main #FFC120, steps 01–06). Seetokens.json→alt_brand_palette. Default to the Brand/Button semantic tokens above unless a product specifies otherwise.
Layout
- Radius: control 4px · card/modal 8px · pill 30px
- Spacing: 4px grid — 4 · 8 · 12 · 16 · 20 · 24 · 32 …
- Button heights: sm 32 · md 36 · lg 44 · xl/2xl 48 · Icon 24×24
- Effects: see Shadows below.
Shadows (exact — same scale web + mobile)
Untitled-UI elevation scale, base color #101828. Use for overlays/raised surfaces; default to borders for flat separation.
| Token | box-shadow |
|---|---|
xs | 0px 1px 2px 0px rgba(16,24,40,0.05) |
sm | 0px 1px 2px 0px rgba(16,24,40,0.06), 0px 1px 3px 0px rgba(16,24,40,0.10) |
md | 0px 2px 4px -2px rgba(16,24,40,0.06), 0px 4px 8px -2px rgba(16,24,40,0.10) |
lg | 0px 4px 6px -2px rgba(16,24,40,0.03), 0px 12px 16px -4px rgba(16,24,40,0.08) |
xl | 0px 8px 8px -4px rgba(16,24,40,0.03), 0px 20px 24px -4px rgba(16,24,40,0.08) |
2xl | 0px 24px 48px -12px rgba(16,24,40,0.18) |
3xl | 0px 32px 64px -12px rgba(16,24,40,0.14) |
Plus a menu shadow for row/action popovers: 0px 15px 35px -5px rgba(17,24,38,0.15), 0px 5px 15px 0px rgba(0,0,0,0.08).
Guidance: xs/sm inputs & cards · md/lg dropdowns & toasts (toast = lg) · xl modals, Select & rich pickers · menu shadow for action/kebab menus · 2xl/3xl full-screen overlays.
Components
Button — Types: Primary · Secondary gray · Secondary colour · Tertiary gray · Tertiary colour. Sizes sm/md/lg/xl/2xl/Long. States Default/Hover/Focused/Disabled. Colour themes Native blue · Omnibiz Orange · Warning Yellow. Optional left/right icon (24px), gap 10. Primary = bg #173E87, text #FFFFFF, radius 4px, lg padding 10×20.
Input row / addons — bg #F6F6F6, padding 12, gap 8, Gordita Regular 16/24 #747474. Addons: Trailing Icon, Leading/Trailing dropdown, Flag + number, Bank Icon, Tags.
Modal — two shells:
- Web dialog — bg #FFFFFF, radius 12, shadow
xl. Headerpt-24 px-24/32, title Gordita Bold 18–20 (#333 / #101828), optional closex-close(24px Icon, top-right). Body Gordita Regular 16/24 #667085. Actions footerpt-24 pb-24 px-24/32, buttons right-aligned, gap 16. Buttons: h44, radius 4, padding 10×20, Gordita Bold 16. Primary = #173E87 text #FEFEFE · Secondary = #FFFFFF + 1px border #173E87, text #12326C · Destructive = #DC3545 text #FEFEFE. (Confirm/dialog modals stack title→body→actions; Select modal adds a search + list, full-width primary "Proceed".) - Mobile bottom sheet — bg #FFFFFF, rounded-top 30px,
pt-10 px-24, top grabber handle (64px line, Primary2/75 #DBDDE0), bottom home-indicator. Content centred, gap 30–41. Title Gordita Medium 16 #333; subtext Gordita Regular 14/20 #808080 centred. CTAs = two equal buttons, gap 20, radius 5, padding 10×16, Gordita Medium 14. Primary = Steel-Gray/900 #161A1E text #FEFEFE · Secondary = #FFFFFF + 1px border #333 text #333. Variants: Default · Warning · Error · Success (top featured icon in type color) · OTP · Check-box list · List · Language modal.
Divider — 1px, Grey/100 #F0F2F5.
Tag — radius 4, padding 10×(5–6), gap 4, Gordita Medium. Sizes S 12/18 · M 14/20 · L 16/24. Optional 12px leading/trailing icon (recolor to text). Types:
| Type | bg | text |
|---|---|---|
| Default | transparent, border #E4E5E8 | #4B5563 |
| Error | #FAE1E3 | #8F222D |
| Warning | #FFF6DA | #624A02 |
| Success | #DEF7EF | #0E5B43 |
Badge / Status — pill (radius 24), padding 20×(5–6), Gordita Regular. Sizes S 12/18 · M 14/20 · L 16/24.
| Type | bg | text |
|---|---|---|
| Blue | #E8F1FA | #2C517D |
| Red | #FFF0F1 | #8F222D |
| Yellow | #FFF8E3 | #624A02 |
| Green | #DEF7EF | #0E5B43 |
| Purple | #EDE6FF | #534180 |
| Orange | #FFF2EE | #962F10 |
| Grey | #F0F0F1 | #999999 |
Badge / Dot, Count & notification — Dot 6px in 10 colors (orange/teal/blue/yellow/red/dark-grey/light-blue/green/purple/gray). Dot-on-icon S 18 · M 20 · L 24. Dot-on-text leading dot before a label. Count sizes S 30 · M 32 · L 36, colors red/gray, digit Single/Double (+plus); hidden at 0, caps at 9+/99+. Mobile + Desktop variants.
Banner — inline messaging block. radius 8, padding 16, gap 12. Leading 20px status icon · title Gordita Bold 14/20 #0F0F0F · supporting Gordita Regular 14 #525252 · optional text-button actions (Learn more Regular #7A7A7A, View changes Medium #525252 + arrow) · trailing close x-close 20px. Type = color: info bg rgba(23,62,135,0.05) border #173E87 · success green · warning amber · error red · question. (bg = 5% tint of type color, border 1px type color.) Mobile = same, ~328px wide. Inline info-card variant = compact 1-line bar, Alert=Primary/Warning/Error.
Toast — transient overlay. bg #FFFFFF, radius 8, left border 4px in type color, shadow lg, padding 20×16. Two layouts:
- Stacked (w 420 / mobile 375) — featured icon = 36px tinted circle (e.g. success bg #E8FCE9) + 18px type-color icon; title Gordita Bold 14/20 #333; supporting Gordita Regular 14 #525252; actions (Dismiss / View changes, Medium 14 #525252); close
x-close20px. - Inline (w 549 / 375) — single row, icon + text + close. Types: info · success · warning · error.
Navigation
Breadcrumb — Gordita Regular 14/20. Inactive crumbs #CCCCCC, active (last) #333. Separator / (px-8, color rgba(0,0,0,0.45)). Counts 2/3/4/4+ (4+ collapses middle to …).
Steps (stepper) — Untitled-UI step item. Props: Direction horizontal|vertical · Size small|medium · Status finished|current|in progress|waiting|error · Icon on/off · Description on/off · Tail (connector line) on/off. Status → color: finished/current/in-progress = teal (Secondary 1), waiting = grey, error = red.
Bottom nav bar (mobile) — bg #F8F9FA, px-8, 3/4/5 segments, config Icon or Icon & label. Item: 24px icon inside a pill state-layer (h32 w64, px20 py4, radius 16), label Gordita 12/20. Active = label Medium #333 + 8.6px dot below; inactive = label Regular #B3B3B3. Bottom home-indicator.
Side nav bar (desktop) — w 255, bg #FFFFFF, border-right #F0F0F1. Top personalised widget (h80, p16): welcome Gordita Regular 14 #333 + role chip (globe 12px + Gordita Medium 12 #252A31, radius 4). Module rows: px16 py14, gap 12, 20px icon + label Gordita Regular 12/18 #333, optional trailing chevron (expandable group). Footer (border-top): Settings · Logout. Variant2 drops the role chip + header divider. A top/horizontal nav bar variant also ships for web shells.
Popover / Selector
Overlay surfaces for search, selection, and row actions. Sit on shadow xl (rich pickers) or the menu shadow 0px 15px 35px -5px rgba(17,24,38,0.15), 0px 5px 15px 0px rgba(0,0,0,0.08).
Pop Over List item — base row for all selectors. py-8, gap-8, text Gordita Regular 14/20 #333. State Selected = bg Grey/25 #F8F9FA + Medium weight + trailing control (24px radio/checkbox, teal check). Optional Text + supporting text.
Select (search picker) — bg #FFFFFF, radius 12, shadow xl. Header pt-24 px-24, title Gordita Bold 20/30 #101828. Search input: bg #FCFCFD, border #EAECF0, radius 8, h44, px-14, 20px search-lg + placeholder Gordita Regular 16/24 #667085. List = Pop Over List items. Footer pt-32 pb-24 px-24: full-width primary button #173E87, radius 4, h44, Gordita Bold 16 #FEFEFE.
Item Switch (account switcher) — bg Gray/50 #F9FAFB, border #E9EAEB, radius 12, menu shadow (untitled shadow-lg, base #0A0D12). White rounded menu wrapper. Section label Gordita Medium 12/18 #667085. Account card item: px-6, content px8 py6 radius 6 gap 12; selected bg Teal/50 #DEF7EF; title Gordita Medium 14/20 #333 + subtitle Gordita Regular 12/18 #667085; trailing 20px radio. Footer item (Logout): 24px icon + Gordita Medium 14 #DC3545.
Action menu (row "kebab" menu) — bg #FFFFFF, radius 6, padding 6×8, menu shadow. Items: px-10 py-8, radius 4, Gordita Medium 14/20 #333; destructive item text #DC3545.
Filters panel — modal-style right panel (~w506). Header (title Gordita Bold + icon, divider). Body = stacked Label-atom + select/dropdown input rows. Footer: Cancel (secondary) + Apply Filters (primary), radius-4 buttons. Multi-select dropdown input renders chosen values as _Badge base chips (text + 12px x icon) with trailing chevron; empty state = centred "No Search Query".
Logos
In logos/: a master sheet (omni-logos-sheet.svg / .png, 4000px) plus 18 per-logo SVGs — 6 brands × 3 forms.
- Forms:
wordmark(horizontal lockup) ·app-icon(white mark on #173E87 rounded square) ·mark(standalone swirl). - Files:
<brand>-<form>.svg, e.g.omnione-wordmark.svg,omnipay-app-icon.svg,omni-mark.svg. - Brands & accent: Omni (brand blue) · OmniBiz (orange) · OmniPay (purple) · OmniHub (green) · OmniOne (cyan/light-blue) · OmniRetail (bright green). The swirl mark is shared; only the accent stroke changes per brand.
- Each product skill uses its own brand lockup. SVGs are vector windows onto the master sheet (scale freely).
Global rules
- Type in Gordita only; pick from the scale above.
- Use semantic tokens (Brand/Button/Surface/Border/Text/Icon) for UI; reach for raw ramps only when no semantic token fits.
- Exact hex/names only — never approximate or introduce new colors.
- Radius by role: controls 4px, surfaces 8px, pills 30px. Spacing on the 4px grid.
- Separate flat content with borders + radius; use the Shadows scale only for raised/overlay surfaces (dropdowns, modals, toasts).
- Product skills select among these tokens and set component preferences — they may not redefine tokens.
Gaps
- Mobile type-scale exact values (names captured).
- Per-brand vector (SVG) logo files — sheet captured as PNG; vector export pending a re-issued Figma token.
Gives 0 of the 12 instructions most design systems skills give in ~5.3k tokens
Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06
- create a custom theme if neededin 54 of 528, across 10 files
- read the corresponding theme filein 54 of 528, across 10 files
- ask which theme to applyin 53 of 528, across 9 files
- show the theme showcasein 53 of 528, across 9 files
- maintain visual identity across all slidesin 50 of 528, across 6 files
- apply the specified colors and fontsin 47 of 528, across 3 files
- get explicit confirmationin 45 of 528, across 1 file
- Generate a design system before codingin 19 of 528, across 6 files
- Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
- Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
- Check Python installation and install if missingin 17 of 528, across 4 files
- Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files
Said here and by no other author read
- Use the Gordita font everywhere
- Design on a 4px grid
- Use only provided icon files
- Do not deviate from the system
- Use only the provided names and values
- Never invent token values
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.