Foundations
Foundations
Foundations are the core styles and principles we use to create a consistent, scalable, and cohesive experience that looks, feels, and works like Pleo.
Border
We use borders to define elements and create visual separation, making content easier to scan and understand.
Color
We use color to signal structure, highlight or emphasize important information or elements, and to display different states.
Layering
We use z-indices to manage layering in our interfaces, adding a third axis to arrange content.
Motion
We use motion to enhance interactions, provide feedback, and create a sense of continuity.
Opacity
We use opacity for overlays, shadows and illustrative effects.
Radius
We use border radiuses to create friendly, approachable interfaces that keep the focus on content.
Shadow
We use shadows to provide cues about depth, direction of movement and surface edges.
Spacing
We use spacing to create clear, balanced layouts that improve readability and visual hierarchy.
Typography
We use typography to create clear, consistent, and visually harmonious text across our products.