p3l6.dev|

Meet the new design system

<<Back to Index

Design language

  • System color family adjusted a little bit
  • Left aligned typography
  • Consistent shape borders matching devices
  • Three main shape types: round/fixed, capsule, concentric. ie corner radiuses
  • Macos will continue using rounded rect buttons for small and medium sizes

    Structure

  • New layer above the UI for actions/etc.
  • Relationships
    • Action sheet anchored on touch point instead of phone bottom
  • Remove your extra customization on nav bars, and redefine how to group and elevate items
  • Text and Primary actions should be separate from grouping
  • Tab bar can have accessory view, like media playback control
  • Scroll edge effects can add a UI background between controls and content
    • Can appear by default when scroll views are used
  • Background extension effect can repeat an image behind the sidebar
    • Scroll views will slide behind as well

      Continuity

  • One decision, all platforms
  • Use shared content
    • Use the same symbols, groups, etc
  • Add symbols for menus
    • One symbol for group, ie if there are various types of copy. only symbol the first one