Größen und Abstände
Übersicht
Abstände und Größen müssen einfach und zugänglich definiert sein, um die richtige Anwendung zu gewährleisten. Deshalb gibt es bei KERN nur wenige Token, die untereinander kombiniert werden können. Damit lassen sich alle benötigten Abstände und Größen abbilden.
KERN bietet vier Gruppen mit jeweils einer Default-Größe.
Große Weißräume ergeben sich durch die Kombination mehrerer Spaces durch Frames (Container) und deren Padding.
Border-Token
| Border-Width-Token | Wert | Beispiel |
|---|---|---|
--kern-metric-border-width-none | 0 rem 0 px | |
--kern-metric-border-width-light | 0.0625rem 1 px | |
--kern-metric-border-width-default | 0.125 rem 2 px | |
--kern-metric-border-width-bold | 0.25 rem 4 px | |
--kern-metric-border-width-heavy | 0.5 rem 8 px |
| Border-Radius-Token | Wert | Beispiel |
|---|---|---|
--kern-metric-border-radius-none | 0 rem 0 px | |
--kern-metric-border-radius-small | 0.125rem 2 px | |
--kern-metric-border-radius-default | 0.25rem 4 px | |
--kern-metric-border-radius-large | 0.5 rem 8 px | |
--kern-metric-border-radius-full | – 9999 px |
Dimension-Token (feste Container-Größen)
| Token | Wert | Beispiel |
|---|---|---|
--kern-metric-dimension-2x-small | 0.5 rem 8 px | |
--kern-metric-dimension-x-small | 1 rem 16 px | |
--kern-metric-dimension-small | 1.25 rem 20 px | |
--kern-metric-dimension-default | 1.5 rem 24 px | |
--kern-metric-dimension-large | 2 rem 32 px | |
--kern-metric-dimension-x-large | 3 rem 48 px | |
--kern-metric-dimension-2x-large | 3.5 rem 56 px | |
--kern-metric-dimension-3x-large | 4 rem 64 px | |
--kern-metric-dimension-4x-large | 5 rem 80 px | |
--kern-metric-dimension-5x-large | 6 rem 96 px | |
--kern-metric-dimension-6x-large | 7.5 rem 120 px | |
--kern-metric-dimension-7x-large | 9 rem 144 px |
Space-Token (Padding / Gap / Margin)
| Token | Wert | Beispiel |
|---|---|---|
--kern-metric-space-none | 0 rem 0 px | |
--kern-metric-space-2x-small | 0.125 rem 2 px | |
--kern-metric-space-x-small | 0.25 rem 4 px | |
--kern-metric-space-small | 0.5 rem 8 px | |
--kern-metric-space-default | 1 rem 16 px | |
--kern-metric-space-large | 1.5 rem 24 px | |
--kern-metric-space-x-large | 2 rem 32 px | |
--kern-metric-space-2x-large | 2.5 rem 40 px | |
--kern-metric-space-3x-large | 3 rem 48 px | |
--kern-metric-space-4x-large | 3.5 rem 56 px | |
--kern-metric-space-5x-large | 4 rem 64 px | |
--kern-metric-space-6x-large | 5 rem 80 px | |
--kern-metric-space-7x-large | 6 rem 96 px | |
--kern-metric-space-8x-large | 7 rem 112 px | |
--kern-metric-space-9x-large | 8 rem 128 px | |
--kern-metric-space-10x-large | 10 rem 160 px | |
--kern-metric-space-11x-large | 12.25 rem 192 px |
Anwendung der Abstands-Token
Umgang mit Weißraum
Weißraum ist ein hilfreiches Mittel, die Zusammengehörigkeit von Elementen zu vermitteln: Je näher, desto höher der Bezug. Je weiter, desto deutlicher lassen sich Gruppen und Muster auf einem Screen erkennen (siehe auch Gesetz der Nähe der Gestaltgesetze).
Wir haben mittlerweile einige Größen ergänzt, nichtsdestoweniger lässt sich auch mit kleinen Größen wunderbar auskommen. Im Folgenden werden einige anschauliche Beispiele für den Umgang mit Abständen gezeigt und wie durch Auto-Layout (figma) bzw. Padding (CSS) schnell größere Dimensionen durch Kombination erzeugt werden können.
Stacking
Texte können durch „Body”- und „Heading”- Komponenten direkt aufeinandergestapelt werden:
Folgen weitere Elemente wie ein Button oder eine Card, ist es in der Regel ratsam die Elemente mit Weißraum zu gruppieren.
Im Regelfall empfiehlt es sich, Elemente abhängig von der Textgröße zu „stacken”, also zu „stapeln”. „Heading-Large” wird also mit einem --kern-metric-space-large kombiniert. Da der Abstand zum Button zu groß ausfallen und das Gesetz der Nähe brechen würde, wird zwischen Text und Button ein --kern-metric-space-default gesetzt, um die Objekte wieder zusammenzubringen.
Space Kombination beim Stacking
Layout-Gestaltung ist nicht immer leicht. Entsprechend möchte KERN eine Hilfestellung bieten, wenn mehrere Elemente übereinandergestapelt werden.
Bei KERN 2 lässt sich alles vom Text ausgehend gestalten: Ein „Title-Default“ kann gut mit einem --kern-metric-space-default kombiniert werden. Ein „Title-Small” passt wunderbar zu einem --kern-metric-space-small. In der Horizontalen wird in der Regel mehr Raum gegeben: Werden Elemente gemeinsam strukturiert (z. B. in einem „Div” oder in Figma einem „Frame”), werden sie in der Vertikalen mit einem kleineren Abstand getrennt als in der Horizontalen.
Ein „--kern-metric-space-default” wird z. B. mit einem --kern-metric-space-large zusammen verwendet. Der --kern-metric-space-default ist der Abstand zwischen den Elementen in der Vertikalen und der --kern-metric-space-large der Abstand in der Horizontalen.
Am Beispiel der Card lässt sich das Schema gut demonstrieren. Dieser Umgang mit Weißraum ist weniger eine Regel, sondern eine reine Hilfestellung.
