# 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](/foundations/border/border.overview)

[We use borders to define elements and create visual separation, making content easier to scan and understand.](/foundations/border/border.overview)

[Color](/foundations/color/color.overview)

[We use color to signal structure, highlight or emphasize important information or elements, and to display different states.](/foundations/color/color.overview)

[Layering](/foundations/z-index/z-index.overview)

[We use z-indices to manage layering in our interfaces, adding a third axis to arrange content.](/foundations/z-index/z-index.overview)

[Motion](/foundations/motion/motion.overview)

[We use motion to enhance interactions, provide feedback, and create a sense of continuity.](/foundations/motion/motion.overview)

[Opacity](/foundations/opacity/opacity.overview)

[We use opacity for overlays, shadows and illustrative effects.](/foundations/opacity/opacity.overview)

[Radius](/foundations/radius/radius.overview)

[We use border radiuses to create friendly, approachable interfaces that keep the focus on content.](/foundations/radius/radius.overview)

[Shadow](/foundations/shadow/shadow.overview)

[We use shadows to provide cues about depth, direction of movement and surface edges.](/foundations/shadow/shadow.overview)

[Spacing](/foundations/spacing/spacing.overview)

[We use spacing to create clear, balanced layouts that improve readability and visual hierarchy.](/foundations/spacing/spacing.overview)

[Typography](/foundations/typography/typography.overview)

[We use typography to create clear, consistent, and visually harmonious text across our products.](/foundations/typography/typography.overview)