Go to Mística - Digital Design System

Sidebar navigation

Get started

  • What is Mística?
  • Start to design
    • Get Figma access
    • Which design library do I need?
    • Mística Catalog (native)
    • Storybook (web)
    • Playroom
  • Start to develop
    • Mística Catalog
    • Storybook (Web)
    • Development Link References

Fundamentals

  • Design Values
    • Mission & Purpose
    • Design Principles
  • Tokens
    • Learn to use Mística colors
    • Colours
    • Palettes
    • Border radius
  • Typography
    • Mística's font stack
    • What are text-presets?
    • Weighing details
    • Correspondences
    • Combining Text-presets
    • Titles
    • Subtitles
    • Bodies
    • Captions
    • Accessibility
  • Layouts
    • Using layout components
    • Responsive layout
    • Align
    • Grid layout
    • Grid
    • Horizontal scroll
  • Spacing
    • Spacing Types
    • Vertical Rhythm
  • Icons
    • Icons catalog
  • Motion
    • FadeIn
    • Emotional branded animations
  • Theming
    • Color
    • Theme context and variants
  • Customization
    • The happy path
    • Extended needs
    • Extended components
    • Design tokens
    • Primitives
    • Atomic builds
    • Accessibility
  • Localization
    • Phone numbers
    • Text wrapping
  • Accessibility
    • Building experiences for all
    • International Standards
    • Accessibility, a commitment of everyone

Components

  • Overview
  • Accordion
    • Anatomy
    • Grouped accordions
    • Slot
    • Accessibility
  • Avatar
    • Typology
    • Sizes
    • Custom colors
  • Breadcrumbs
    • Usage
    • Layout
    • Anatomy
    • Accessibility
  • Badge
    • What is a badge?
    • Non-numeric Badge
    • Numeric Badge
  • Buttons
    • Anatomy
    • Behaviour
    • Content
    • Button
    • Icon button
    • Toggle icon button
    • Hierarchy
    • Placement & alignment
    • Button Fixed Footer Layout
    • Accessibility
  • Callout
    • Anatomy
    • Usage
    • Accessibility
  • Cards
    • Display Media Card
    • Display Data Card
    • Poster Card
    • Media Card
    • Data Card
    • Highlighted Card
    • Snap Card
    • Naked Card
    • Small Naked Card
    • Card grouping
    • Slot
    • Accessibility
  • Carousels
    • Carousel
    • Slideshow
    • Centered carousel
    • Custom controls
  • Checkbox
  • Chips
    • Usage
    • Accessibility
  • Counter
    • Usage
    • Anatomy
    • Remove behaviour
    • Accessibility
  • Data Visualizations
    • Meter
    • Accesibility
  • Header
    • Main Section Header
    • Accessibility
  • Hero
    • Hero
    • Cover hero
    • Hero slideshow
    • Accessibility
  • Input fields
    • Anatomy
    • Usage
    • Accessibility
  • Lists
    • Anatomy
    • Typology
    • Grouped lists
    • Slot
    • Accessibility
  • Loading bar
    • Usage
  • Logo
    • Usage
  • Menu
    • Usage
    • Anatomy
    • Positioning
  • Modals
    • Alert
    • Confirm
    • Dialog
    • Drawer
  • Mosaic
    • Horizontal Mosaic
    • Vertical Mosaic
  • Navigation bars
    • Android
    • iOS
    • Web
  • Popover
    • Usage
    • Slot
  • Progress bar
    • Determinated
    • Stepped
    • Dynamic color
    • Accessibility
  • Radio button
  • Rating
    • Info Rating
    • Accessibility
  • Select
    • Usage
    • Anatomy
    • Sizing
    • Accessibility
  • Sheet
    • Single selection
    • Informative
    • Single filter
    • Multiple filter
    • Action list
    • Actions
    • Custom sheet
    • Web (desktop)
    • Accessibility
  • Skeletons
    • Usage
    • Predefined types
    • Behavior
    • Animation
  • Slider
    • Custom values
    • Accessibility
  • Snackbar
    • Usage
    • Anatomy
    • Duration
    • Content
    • Positioning
    • Accessibility
  • Spinner
    • Usage
    • Accessibility
  • Stacking group
    • Usage
    • Accessibility
  • Stepper
  • Switch
    • Accessibility
  • Table
    • Content type
    • Behavior
    • Accessibility
  • Tabs
    • Usage
  • Tab bars
    • Typology
  • Tag
    • Usage
  • TextLink
    • Usage
    • Accessibility
  • Timeline
    • Anatomy
    • Behaviour
    • Accessibility
  • Timer
    • Text timer
    • Accessibility
  • Title
    • Title1
    • Title2
    • Title3
    • Title4
    • Navigation Link
    • Semantic hierarchy
  • Tooltip
    • Usage
    • Slot
    • Accessibility

Patterns

  • Disabled states
  • Feedbacks
    • Success Feedback Screen
    • Error Feedback Screen
    • Info Feedback Screen
    • Success Feedback
  • Forms
    • Good Practices
    • Structure
    • Behavior
    • Errors
    • Actions in forms
  • Loading screens
    • Loading Screen
    • Anatomy
    • Brand Loading Screen
    • Accessibility

Contribute

  • How to contribute
    • Requirements to contribute
  • Join our community

Additional resources

  • Changelog
  • News and articles
  • Glossary