Liquid Glass design system
IntelliHelper UI is a two-layer glass language:
| Layer |
Role |
Feel |
Typical components / variants |
| Chrome |
Toolbars, icon controls, navigation chrome, secondary actions |
Neutral, frosted, Apple mini-player |
outline, secondary, ghost, glass; glass-bar, glass-icon-button |
| Content |
Primary CTAs, marketing panels, destructive emphasis |
Theme-saturated, expressive |
primary, destructive; glass-content-card |
Rule of thumb: chrome stays quiet so content and data stay legible. One saturated CTA per region is usually enough.
Before styling
- Call MCP
list_themes for theme IDs and descriptions.
- Call
get_component for the real variant / size / shape APIs — do not invent them.
- Ensure project CSS loads tokens/themes (init + docs: https://ui.intellihelper.in/getting-started).
Themes
| ID |
Label |
Character |
mono |
Mono Basic |
Pure black/white foundational minimal |
aurora |
Cool Aurora |
Deep navy + cyan-violet accents |
sunset |
Warm Sunset |
Amber-coral + rose-gold glass |
frost |
Neutral Frost |
Icy slate, crystalline |
ocean |
Deep Ocean |
Teal depths + aqua accents |
Themes drive CSS variables used by glass utilities. Prefer theme tokens over ad-hoc hex for surfaces, borders, and glow.
Glass system components
Prefer these over custom backdrop-blur one-offs:
| Component |
Use |
glass-bar |
Neutral capsule for grouped media / chrome controls |
glass-icon-button |
Circular icon-only chrome actions |
glass-content-card |
Expressive saturated content panels under chrome |
background-picture-picker |
Mesh/gradient/upload backgrounds for glass stages |
component-preview |
Live preview + source (docs/playground style) |
card |
Frosted panels for chrome and content layouts |
Install (web): npx @intellihelper/cli@latest add glass-bar glass-icon-button card -y
Install (native): npx @intellihelper/cli@latest add @native/glass-bar @native/glass-icon-button @native/card -y
Button language (verify with get_component)
Typical button variants in the design system:
| Variant |
Layer |
Use |
default / glass |
Chrome-ish frosted |
Default frosted control |
outline / secondary / ghost |
Chrome |
Neutral toolbars, secondary actions |
primary |
Content |
Main CTA |
destructive |
Content |
Destructive CTA |
link |
Material |
Text link, no glass chrome |
Shapes commonly include rounded, pill, rectangular. Sizes: default, sm, lg, icon.
// Chrome toolbar
<Button variant="outline" size="icon"><Settings /></Button>
<Button variant="ghost">Cancel</Button>
// Content CTA
<Button variant="primary">Continue</Button>
<Button variant="destructive">Delete</Button>
Always re-check exports and prop names via MCP before shipping.
Visual quality bar
Ship interfaces that feel intentional:
- Hierarchy: one primary action; chrome supports, content leads.
- Density: pick comfortable (
gap-6 / p-6) or compact (gap-4 / p-4) per page — do not mix randomly.
- Radius: stay consistent with component shapes; avoid stacking many different radii.
- Contrast: verify light/dark on frosted surfaces (audit checklist).
- Motion: prefer existing component transitions over custom bounce everywhere.
- Icons: Lucide at consistent sizes (
size-4 / h-4 w-4).
Anti-patterns
- Glass on every surface (noise, illegible text)
- Saturated primary chrome on icon toolbars
- Nested glass cards three levels deep
- Random gradients + glow competing with theme
- Ignoring
focusRing / keyboard focus styles
- Using playground internal imports (
@intelli/ui, @intelli/ui-native, @intelli/utils) in consumer apps
Progressive disclosure
- Layer details & pairing → references/layers.md
- Theme setup notes → references/themes.md
- Page recipes → skill
compose-ui
- Install path → skill
add-component
1---2name: liquid-glass3description: IntelliHelper Liquid Glass design system — chrome vs content layers, frosted surfaces, themes (mono, aurora, sunset, frost, ocean), glass primitives, and visual polish. Use when styling glass UI, choosing button variants, building toolbars vs CTAs, setting themes, or fixing washed-out/over-saturated glass. Triggers: "liquid glass", "glassmorphism", "frosted glass", "chrome layer", "glass-bar", "theme mono aurora", "glass button variant".4---56# Liquid Glass design system78IntelliHelper UI is a **two-layer glass language**:910| Layer | Role | Feel | Typical components / variants |11| --- | --- | --- | --- |12| **Chrome** | Toolbars, icon controls, navigation chrome, secondary actions | Neutral, frosted, Apple mini-player | `outline`, `secondary`, `ghost`, `glass`; `glass-bar`, `glass-icon-button` |13| **Content** | Primary CTAs, marketing panels, destructive emphasis | Theme-saturated, expressive | `primary`, `destructive`; `glass-content-card` |1415**Rule of thumb:** chrome stays quiet so content and data stay legible. One saturated CTA per region is usually enough.1617## Before styling18191. Call MCP `list_themes` for theme IDs and descriptions.202. Call `get_component` for the real `variant` / `size` / `shape` APIs — do not invent them.213. Ensure project CSS loads tokens/themes (init + docs: https://ui.intellihelper.in/getting-started).2223## Themes2425| ID | Label | Character |26| --- | --- | --- |27| `mono` | Mono Basic | Pure black/white foundational minimal |28| `aurora` | Cool Aurora | Deep navy + cyan-violet accents |29| `sunset` | Warm Sunset | Amber-coral + rose-gold glass |30| `frost` | Neutral Frost | Icy slate, crystalline |31| `ocean` | Deep Ocean | Teal depths + aqua accents |3233Themes drive CSS variables used by glass utilities. Prefer theme tokens over ad-hoc hex for surfaces, borders, and glow.3435## Glass system components3637Prefer these over custom `backdrop-blur` one-offs:3839| Component | Use |40| --- | --- |41| `glass-bar` | Neutral capsule for grouped media / chrome controls |42| `glass-icon-button` | Circular icon-only chrome actions |43| `glass-content-card` | Expressive saturated content panels under chrome |44| `background-picture-picker` | Mesh/gradient/upload backgrounds for glass stages |45| `component-preview` | Live preview + source (docs/playground style) |46| `card` | Frosted panels for chrome and content layouts |4748Install (web): `npx @intellihelper/cli@latest add glass-bar glass-icon-button card -y` 49Install (native): `npx @intellihelper/cli@latest add @native/glass-bar @native/glass-icon-button @native/card -y`5051## Button language (verify with `get_component`)5253Typical `button` variants in the design system:5455| Variant | Layer | Use |56| --- | --- | --- |57| `default` / `glass` | Chrome-ish frosted | Default frosted control |58| `outline` / `secondary` / `ghost` | Chrome | Neutral toolbars, secondary actions |59| `primary` | Content | Main CTA |60| `destructive` | Content | Destructive CTA |61| `link` | Material | Text link, no glass chrome |6263Shapes commonly include `rounded`, `pill`, `rectangular`. Sizes: `default`, `sm`, `lg`, `icon`.6465```tsx66// Chrome toolbar67<Button variant="outline" size="icon"><Settings /></Button>68<Button variant="ghost">Cancel</Button>6970// Content CTA71<Button variant="primary">Continue</Button>72<Button variant="destructive">Delete</Button>73```7475Always re-check exports and prop names via MCP before shipping.7677## Visual quality bar7879Ship interfaces that feel intentional:8081- **Hierarchy:** one primary action; chrome supports, content leads.82- **Density:** pick comfortable (`gap-6` / `p-6`) or compact (`gap-4` / `p-4`) per page — do not mix randomly.83- **Radius:** stay consistent with component shapes; avoid stacking many different radii.84- **Contrast:** verify light/dark on frosted surfaces (audit checklist).85- **Motion:** prefer existing component transitions over custom bounce everywhere.86- **Icons:** Lucide at consistent sizes (`size-4` / `h-4 w-4`).8788## Anti-patterns8990- Glass on every surface (noise, illegible text)91- Saturated primary chrome on icon toolbars92- Nested glass cards three levels deep93- Random gradients + glow competing with theme94- Ignoring `focusRing` / keyboard focus styles95- Using playground internal imports (`@intelli/ui`, `@intelli/ui-native`, `@intelli/utils`) in consumer apps9697## Progressive disclosure9899- Layer details & pairing → [references/layers.md](references/layers.md)100- Theme setup notes → [references/themes.md](references/themes.md)101- Page recipes → skill `compose-ui`102- Install path → skill `add-component`
IntelliHelper