Zeplin Styleguide




Zeplin Documentation Layout example 
1ID2 Overlayhttps://zpl.io/VxNorYWcoming soon

The overlay serves as a focus aid for all components that are to be lifted from the dashboard. The overlay also has a column grid/row, this grid is the same to the Dashbord Column Grid.

Currently the overlay can be used for these applications:





Basic Overlay



1920 Basic Overlay definition

Zeplin Documentation

Astronaut: https://zpl.io/b6d0Y8R

Tokyo at Night: soon


1920 Basic Astronaut Overlay


1920 Basic Tokyo Overlay





Dialog Overlay

Der Dialog passt sich an den Column-Grid des Overlays an. Welche Dimensionen der Dialog besitzt ist vom unterschiedlichen  Inhalt abhängig. Mehr darüber erfahren Sie im Thema Dialog.


1920 Dialog Overlay definition

Zeplin Documentation

Astronaut: https://zpl.io/VQX5AvP

Tokyo at Night: soon


1920 Astronaut Dialog Overlay


1920 Tokyo at Night Dialog Overlay





Popup Overlay

Als Popup eignen sich alle möglichen Informations-Module oder Eingabe-Module. Das Modul passt sich an den Column-Grid des Overlays an. Welche Dimensionen das Modul besitzt ist vom unterschiedlichen Inhalt abhängig. Mehr darüber erfahren Sie im Thema Modul.



1920 Popup Overlay definition

Zeplin Documentation

Astronaut: https://zpl.io/2pGJrvN

Tokyo at Night: soon


1920 Astronaut Popup Overlay


1920 Tokyo at Night Popup Overlay

  • No labels