Shared Design System
GioSystem
55 components · 28 hooks

One library.
Every product.
Same look and feel.

GioSystem is the design system behind every Gio product. Shared components, tokens, hooks, and animations. A button in Streamguide looks the same as a button in GioPlayer because they use the same library. Developers build features instead of rebuilding UI from scratch, and when we fix or improve something, every product gets the update.

Without a shared design system, every team builds their own buttons, picks their own spacing, and misses their own accessibility bugs. GioSystem means we solve these problems once and every product gets the fix.

How It Works

Five Layers

The Library

55 Components

Layout (5)
WebShell
Full page shell — header, footer, nav, content area. Spin up a new Gio product with a working layout in minutes.
AdminShell
Dashboard layout with sidebar nav, breadcrumbs, and collapsible panels. For admin and back-office pages.
Header
Top nav bar with logo, links, sub-tabs, and mobile hamburger menu. Sticky and glass blur options.
Footer
Footer with link columns, legal text, and social links. Goes single-column on mobile, handles notched devices.
PartialGrid
Grid that handles partial rows cleanly. Set columns, gaps, and breakpoints. Last row looks fine even with fewer items.
Form (11)
Button
Primary, secondary, ghost, danger variants. Loading states, icons, keyboard accessible.
Input
Text input with label, validation, helper text, and prefix/suffix icons. All HTML input types.
Textarea
Multi-line input that auto-resizes. Character count, validation, configurable row limits.
Select
Dropdown with search, multi-select, grouped options, and custom rendering.
Checkbox
Custom styled checkbox with indeterminate state and group support. Keeps native accessibility.
Radio
Radio group with horizontal or vertical layout. Arrow keys move between options.
Switch
Toggle switch with smooth animation and proper on/off labels for screen readers.
Slider
Range slider, single or dual thumb. Step markers and a tooltip showing the current value.
FileUpload
Drag-and-drop area with upload progress, file type checks, size limits, and previews.
FormField
Wraps any input to add consistent labels, helper text, error messages, and required indicators.
FormBuilder
Pass in a schema, get a full form. Handles layout, validation, and submit logic.
Display (14)
Card
Content box with header, body, footer, and media slots. Elevated, outlined, or glass style.
Badge
Small count or label that sits on other elements. Number, dot, or text.
StatusBadge
Shows status — success, warning, error, info, neutral. Optional pulse for live indicators.
Avatar
User avatar — image, initials, or icon fallback. Multiple sizes, optional online/offline ring.
Chip
Small tag element. Can be removed, selected, or read-only.
Divider
Horizontal or vertical line separator. Can have a label in the middle.
Link
Styled link with router integration. Shows an icon for external URLs.
Rating
Star rating. Read-only or interactive, supports half stars.
Progress
Progress bar or circle. Shows a percentage or just spins when you don't know how long it'll take.
Skeleton
Loading placeholders that shimmer. Text lines, circles, rectangles — looks like the real content is about to appear.
Stepper
Multi-step wizard indicator. Horizontal or vertical, validates each step before moving on.
Timeline
Shows events in order. Custom icons, alternating layout, lines connecting each step.
Toolbar
Row of action buttons. Overflows into a menu when there's not enough space.
List
Structured list with icons, secondary text, actions, and keyboard nav.
Overlay (11)
Modal
Dialog with focus trapping, click-outside to close, and enter/exit animations.
Drawer
Slides in from any edge. Good for nav menus, detail panels, filters. Swipe to close on mobile.
Dropdown
Floating overlay that stays in view. Flips position if it would go off-screen. Full keyboard support.
Tabs
Horizontal or vertical tabs. Lazy-renders content, animated underline indicator.
Tooltip
Small popup on hover or focus. Set placement and delay.
Toast
Pop-up notification that goes away on its own. Success, error, warning, info styles.
Alert
Inline banner for notices. Can be dismissed or stick around. Supports action buttons.
Menu
Right-click or dropdown menu. Supports nested submenus and full keyboard nav.
Accordion
Expandable sections. Open one at a time or several. Smooth height animation.
Pagination
Page numbers with prev/next. Goes compact on mobile so it doesn't eat the whole screen.
EmptyState
What to show when there's nothing — empty lists, no search results, errors. Illustration, message, and action button.
Composite (14)
ActionMenu
The three-dot "more actions" button that opens a menu of options.
Chatbot
Chat widget with message bubbles, typing indicator, and quick-reply buttons.
DataTable
Sorting, filtering, pagination, row selection, column resize, virtual scroll for big datasets.
Controls
Settings panel that groups form elements into a clean config UI.
FormModal
Modal that's already set up for forms — layout, validation, submit and cancel buttons.
SearchBar
Search input with autocomplete, recent searches, keyboard shortcuts, and debounced queries.
BreadcrumbNav
Breadcrumb trail that collapses long paths. Plugs into your router.
ConfirmDialog
"Are you sure?" dialog for destructive actions. Warning icon, custom message.
StatCard
Dashboard number card — big value, label, trend arrow, and mini sparkline chart.
SectionHeading
Section header with title, subtitle, and an optional action button on the right.
Spinner
Spinning loader. Multiple sizes, optional "Loading..." label.
ContactModal
Ready-made contact form in a modal. Validation, prefill fields, handles submission.
CookieModal
Cookie consent banner. Accept, reject, or customize. Remembers the choice.
ServiceDetailModal
Full detail overlay for a service — what it does, use cases, how to get started.
Visual Foundation

Design Tokens

Colors
11-step grayscale, 7-step accent scale, and status colors (green/amber/red). Change the accent tokens and every interactive element updates.
Typography
Three fonts — Outfit for body text, JetBrains Mono for code, and a display slot. Eight sizes, four weights, three line heights.
Spacing & Radius
12-step spacing scale based on 4px increments. Four border radius options from subtle to fully rounded.
Shadows & Elevation
Four shadow levels, five z-index layers, glass morphism tokens for translucent surfaces.
Reusable Logic

28 Hooks

Application (5)
Routing, theming, shell context, auth, and SSO.
useNavigation useTheme useWebShell useAuth useSSO
Data (10)
Data fetching, user profiles, device detection, settings, and privacy consent.
useAccount useAsyncAction useAsyncFetch useConfig useLocation useUserProfile useDevice useSettings usePreferences usePrivacy
UI (5)
UI state, modals, toasts, screen reader announcements, focus management.
useUI useModal useNotification useScreenReader useFocus
Interaction (6)
Drag, grab-to-scroll, swipe gestures, debouncing, and virtual scroll for long lists.
useDrag useDragState useDragToScroll useSwipe useDebounce useVirtualizer
Motion

Animations & Transitions

12 animations for enter, load, and attention states. Three speeds (fast/normal/slow), four easing curves. Everything feels consistent — cards fade up, modals scale in, loading states shimmer. The spring easing adds a little bounce for toggles and notification badges.