Meechi Design System

The Atomic Elements of our Studio.

Colors

Atomic Foundations

Appbg-app
Panelbg-panel
Editorbg-editor
Glassbg-glass
Hoverbg-hover
Subtlebg-subtle
Highlightbg-highlight
Overlay Brandbg-overlay-brand

Semantic

Successbg-success
Warningbg-warning
Errorbg-error
Infobg-info

Component Semantics (Sample)

Cardbg-card
Inputbg-input
Toolbarbg-toolbar
Popoverbg-popover
Tooltipbg-tooltip
Toastbg-toast
Modal Overlaybg-modal-overlay
Badge Brandbg-badge-brand

Gradients

Herobg-gradient-hero
Hero Subtlebg-gradient-hero-subtle
Glass Shinebg-gradient-glass-shine
Brand Glowbg-gradient-brand-glow
Surface Depthbg-gradient-surface-depth

Typography

Display (H1)

The quick brown fox jumps over the lazy dog.

Heading (H2)

The quick brown fox jumps over the lazy dog.

Body (Base)

The quick brown fox jumps over the lazy dog. (Regular)

The quick brown fox jumps over the lazy dog. (Bold)

Caption

The quick brown fox jumps over the lazy dog.

Z-Index Stack

Base (z-0)
Float (z-10)
Overlay (z-30)
Modal (z-40)
Toast (z-50)
Max (z-100)

Motion & Animation

Grid Orchestration

Fade In
Slide Up
Shimmer (Loading)

Animation Utilities

Fade In
Slide Up
Scale In
Float
Pulse Subtle
Shimmer
Blink
Flash

Buttons

Inputs

This field is required

We will never share your data.

Advanced Inputs & Forms

Standard atomic select.

Active state

Navigation & Composition

Tabs

Account settings tab content.

Accordion

Yes. It adheres to the WAI-ARIA design pattern.

Dropdown Menus

Progress Tracking

Storage Quota45%

Cards

Standard Card

This is a standard card container.

It uses the standard surface color and border.

Interactive Card

Hover over this card to see the effect.

It lifts slightly and changes background color using `bg-surface-hover`.

Modals

Modals handle z-index management (`z-modal`) and backdrop blur automatically.

Feedback & Display

Badges

Default
Secondary
Outline
Destructive
Accent

Toasts

Skeletons

Tooltips & Separators

Add to Library
Settings

Advanced Interface

Luís MichioPro Member
Surface
Default
Editor Surface
Editor (White/Dark)
Card Hover
Hover State

Notifications

Receive daily digests.

Storage Used33%

Scroll Area

Item 1: The fast brown fox jumps over the lazy dog.
Item 2: The fast brown fox jumps over the lazy dog.
Item 3: The fast brown fox jumps over the lazy dog.
Item 4: The fast brown fox jumps over the lazy dog.
Item 5: The fast brown fox jumps over the lazy dog.
Item 6: The fast brown fox jumps over the lazy dog.
Item 7: The fast brown fox jumps over the lazy dog.
Item 8: The fast brown fox jumps over the lazy dog.
Item 9: The fast brown fox jumps over the lazy dog.
Item 10: The fast brown fox jumps over the lazy dog.
Item 11: The fast brown fox jumps over the lazy dog.
Item 12: The fast brown fox jumps over the lazy dog.
Item 13: The fast brown fox jumps over the lazy dog.
Item 14: The fast brown fox jumps over the lazy dog.
Item 15: The fast brown fox jumps over the lazy dog.
Item 16: The fast brown fox jumps over the lazy dog.
Item 17: The fast brown fox jumps over the lazy dog.
Item 18: The fast brown fox jumps over the lazy dog.
Item 19: The fast brown fox jumps over the lazy dog.
Item 20: The fast brown fox jumps over the lazy dog.

Accordion

Yes. It adheres to the WAI-ARIA design pattern.

Settings

Active View: profile

Content changes based on selection.

Editor Toolbar (Floating)

Topic Explorer Items

Physics Notes
Quantum Mechanics.pdf
13
Lecture 1
Assignment Draft

Floating variant mimics the Bubble Menu.

Jiyu Input Elements

History Calendar (Inline)

April 2026

SMTWTFS

Agent Selector

Grounded drop-up menu using Dropdown primitive.

Grounded Dropdowns

Matches .dropdownMenu style: 6px radius, shadow, surface bg.

Input Capsule

Uses Input variant="ghost" and Button shape="circle".

Settings Components

Settings Card & Section

Sample Section

This demonstrates the SettingsSection wrapper inside a SettingsCard.

Content inside a settings section. Use this area for controls and descriptions.

Badges, Divider & Model Row

DefaultAccentRecommended
gpt4o-miniActive
57MB•Local