# Meniscus

> Meniscus is a hosted MCP (Model Context Protocol) server that gives AI design and coding agents a tested liquid glass design system: a design language with numbers, 34 component and 10 effect specs, build recipes for Figma, web, SwiftUI, Flutter and React Native, and verified reference renders.

- Hosted remote MCP server (Streamable HTTP, OAuth sign-in): https://meniscus.site/mcp
- Works with Claude Code, Claude desktop and claude.ai, Cursor, VS Code, Windsurf and any MCP client with remote servers.
- Tools: `create_design_brief`, `get_guidelines`, `get_component_spec`, `get_effect_spec`, `search_references`, `get_references`, `get_platform_support`.
- Free plan: design language, every spec, web and design-tool recipes, 30 calls a day. Paid plans add SwiftUI, Flutter and React Native recipes, all images and an Expo starter.
- Numbers follow the current generation of the look (iOS 27 / macOS 27, September 2026).
- Meniscus is an independent product and is not affiliated with, endorsed by or sponsored by Apple Inc. Apple, iPadOS, macOS, SwiftUI, Xcode, SF Symbols, visionOS and Metal are trademarks of Apple Inc., registered in the U.S. and other countries and regions. IOS is a trademark or registered trademark of Cisco in the U.S. and other countries and is used under licence. The words liquid glass are used only to describe a visual style.

## Start here

- [What is liquid glass? The rules vs glassmorphism](https://meniscus.site/liquid-glass.md): what liquid glass is, how it differs from glassmorphism, the rules, materials and anti-patterns
- [Set up the Meniscus MCP server: Claude Code, Cursor, VS Code](https://meniscus.site/docs.md): connect the server to your assistant
- [Pricing](https://meniscus.site/pricing.md): plans and what each includes
- [Meniscus](https://meniscus.site/index.md): product overview and FAQ

## Component specs

- [Liquid glass button](https://meniscus.site/components/button.md): Primary and secondary actions.
- [Liquid glass icon button](https://meniscus.site/components/icon-button.md): Single-icon actions: undo/redo chips, floating action, search button next to a tab bar.
- [Liquid glass toggle](https://meniscus.site/components/toggle.md): On/off toggle buttons and single-choice radios.
- [Liquid glass switch](https://meniscus.site/components/switch.md): Binary setting.
- [Liquid glass checkbox](https://meniscus.site/components/checkbox.md): Multi-select.
- [Liquid glass slider](https://meniscus.site/components/slider.md): Continuous value.
- [Liquid glass stepper](https://meniscus.site/components/stepper.md): Numeric input with −/+.
- [Liquid glass tabs](https://meniscus.site/components/tabs.md): Switch between views or modes.
- [Liquid glass tab bar](https://meniscus.site/components/tab-bar.md): Primary mobile navigation.
- [Liquid glass toolbar](https://meniscus.site/components/toolbar.md): Group of related actions.
- [Liquid glass navigation bar](https://meniscus.site/components/navigation-bar.md): Top navigation / site nav strip.
- [Liquid glass menubar](https://meniscus.site/components/menubar.md): Row of menus (desktop).
- [Liquid glass sidebar](https://meniscus.site/components/sidebar.md): Persistent navigation on large screens.
- [Liquid glass menu](https://meniscus.site/components/menu.md): Command list opened from a trigger.
- [Liquid glass context menu](https://meniscus.site/components/context-menu.md): Menu at the pointer.
- [Liquid glass select](https://meniscus.site/components/select.md): Choose one value from a list.
- [Liquid glass popover](https://meniscus.site/components/popover.md): Rich floating panel anchored to a trigger.
- [Liquid glass tooltip](https://meniscus.site/components/tooltip.md): Short label for a control.
- [Liquid glass dialog](https://meniscus.site/components/dialog.md): Blocking decision or form.
- [Liquid glass sheet](https://meniscus.site/components/sheet.md): Task surface from the bottom (mobile) or side.
- [Liquid glass toast](https://meniscus.site/components/toast.md): Transient feedback.
- [Liquid glass card](https://meniscus.site/components/card.md): Grouping surface in the controls/overlay layer (settings group, playground card, widget panel).
- [Liquid glass widget](https://meniscus.site/components/widget.md): Glanceable home/lock-screen or dashboard tile.
- [Liquid glass input](https://meniscus.site/components/input.md): Text entry.
- [Liquid glass search field](https://meniscus.site/components/search-field.md): Search entry.
- [Liquid glass avatar](https://meniscus.site/components/avatar.md): Person or entity.
- [Liquid glass badge](https://meniscus.site/components/badge.md): Count or status.
- [Liquid glass progress](https://meniscus.site/components/progress.md): Completion or level.
- [Liquid glass list](https://meniscus.site/components/list.md): Scrolling rows of content.
- [Liquid glass separator](https://meniscus.site/components/separator.md): Divide rows inside a glass body.
- [Liquid glass accordion](https://meniscus.site/components/accordion.md): Expandable sections.
- [Liquid glass media controls](https://meniscus.site/components/media-controls.md): Playback controls over media.
- [Liquid glass app icon](https://meniscus.site/components/app-icon.md): App or feature icon in the glass style.
- [Liquid glass dock](https://meniscus.site/components/dock.md): Desktop app launcher strip.

## Effect specs

- [Liquid glass refraction](https://meniscus.site/effects/refraction.md): Every liquid-glass body. It is the defining effect.
- [Liquid glass frost](https://meniscus.site/effects/frost.md): Large and text-heavy surfaces: dialogs, sheets, sidebars, long menus, notifications. Small controls get almost none.
- [Liquid glass specular](https://meniscus.site/effects/specular.md): Every glass body; it separates glass from the backdrop on busy and on flat scenes.
- [Liquid glass dispersion](https://meniscus.site/effects/dispersion.md): Accent only: hero lenses, large clear glass over high-contrast media, selected/hero states. Faint or off on everyday chrome.
- [Liquid glass iridescence](https://meniscus.site/effects/iridescence.md): Decorative hero objects (orbs, AI/assistant spheres, badges, app-icon layers), selected hero states. Not for everyday chrome.
- [Liquid glass caustics](https://meniscus.site/effects/caustics.md): Backgrounds and hero scenes (water, wellness, weather, AI ambience), light cast by a large glass object onto the surface below. Use sparingly and dimly behind chrome.
- [Liquid glass morph](https://meniscus.site/effects/morph.md): Transitions: tab/segment indicator travel, a floating button expanding into a toolbar or menu, grouped icon buttons merging, search field expanding.
- [Liquid glass tint](https://meniscus.site/effects/tint.md): Prominent buttons (glass prominent), selected states, accent/danger variants, tooltips; adaptive tint picked up from the backdrop.
- [Liquid metal](https://meniscus.site/effects/liquid-metal.md): Accent only, at most one element per view: logo and brand marks, app icons, the rim of a hero or primary action, the ring of the selected item in a bar, an assistant or voice trigger. It is not a glass material: on a glass interface it replaces the specular rim of that one element, and bars, panels and the other controls stay glass.
- [Liquid glass border beam](https://meniscus.site/effects/border-beam.md): Accent only, at most one beamed element per view: the primary call to action of a landing hero, a featured card or pricing plan, an upgrade or new badge, or a surface that is working (assistant thinking, recording, uploading), where the beam means activity and stops when the work ends.

## Optional

- [Liquid glass UI gallery: screens, components, effects](https://meniscus.site/gallery.md): every reference render with its caption
- [Changelog](https://meniscus.site/changelog.md): what changed and when, next to Apple's releases
- [Everything in one file](https://meniscus.site/llms-full.txt)
- [Terms of service](https://meniscus.site/terms): terms of service
- [Privacy policy](https://meniscus.site/privacy): privacy policy
- [Refund policy](https://meniscus.site/refunds): refund policy