OGANIKO Design System

Site header experimental Sticky site header: logo link, end-aligned primary nav with optional mega-menu disclosures, optional CTA, a trailing actions slot (e.g. cart) that stays visible on phones, and a mobile trigger that opens an accessible drawer (focus-trapped dialog with overlay). Button Native <button> with four token-driven variants (primary, secondary, ghost, destructive) and three sizes. Card Presentational surface container with flat (bordered) and elevated (shadow) variants. Persona card Data-review card for presenting one customer avatar/persona: an abstract ID mark (never a photo), a validation-status pill, scan-tags, a pain statement, and an expand-in-place evidence block (verbatim quote + cited source). Liquid Decorative wrapper that composites a pointer-driven WebGL fluid simulation over live HTML content, via the experimental html-in-canvas API. Sheet Edge slide-out panel (also known as slide-out, drawer, side panel) with dimmed backdrop for filters, cart, delivery detail, or short forms. Help launcher experimental Floating pill trigger that opens a non-modal, token-driven popover of short help destinations. Select Native single-choice dropdown (also known as dropdown / single-choice field) with a visible label and Material Symbol chevron. Tabs experimental In-page section switcher (also known as tab list, section switcher, in-page panels). Toast experimental Short floating notice (also known as snackbar, ephemeral notice). Service grid Section pattern coordinating a heading, optional intro text, and a grid of flat Cards with a named link each — for comparing a short set of destinations (services, case studies, stories). Stat banner experimental Experimental full-bleed inverse section coordinating an optional eyebrow, large heading, centred subhead, labelled numeric callouts, and an optional flat Card for consumer-owned inline emphasis. Feature grid experimental A concise, equal-column feature list: each flat Card centres a consumer-supplied Material Symbols icon in a quiet badge, then a title and description. Site footer experimental Inverse site footer: optional brand column, titled link columns with an optional note each, and an optional bottom row for copyright and legal notes. Status pill experimental Small non-interactive status label (also known as badge, status tag) with tone variants mapped to semantic status roles and an optional dot.

Header os-001 Fixed site navigation with brand, links, CTA, and mobile drawer. Tabs os-002 Switch between related content sections. Footer os-003 Site footer with copyright and optional multi-column links. Carousel os-004 Horizontally scrollable card container with navigation arrows and optional action link. Lightbox os-005 Show full detail for one item as a focused overlay above the page. FAQ Section os-007 Present frequently asked questions grouped by category: animated category pills switch between accordion lists. Showcase Tabs os-008 Vertical auto-playing tab list paired with a media pane — presents services or features one at a time. Card Grid os-009 A grid of cards where the hovered or focused card lifts while the rest soften — this page's own grid. Stepper os-010 Progress through a fixed multi-step process — done, current and upcoming on one line. Used in AdCraft.