Surfaces and Boxes

DHL brand design is versatile and adapts to its purpose – focused and functional when needed, or energetic when we aim to inspire. Above all, it’s always accessible to everyone.

Logic & Benefits

Our Surface system is built on a Synchronized Semantic Scale. By decoupling the container from atomic components, we ensure that the "Bento" layout remains mathematically consistent.

• Efficiency: Using synchronized names (e.g., standard radius + standard padding) removes the guesswork of pixel values.
• Predictability: The 12px Floor (compact) ensures that even the densest data-heavy dashboards maintain professional breathing room.
• Concentricity: The scale is designed to support the formula Radius_OUTER - Padding = Radius_INNER, allowing for perfectly nested "Bento" curves.

The Box Component

The Box is the primary building block for layouts. It is a smart component that handles the pairing of background colors, radii, and paddings automatically based on the selected "Type".Variants (Types):

• Primary: The default surface (White background).
• Secondary: Subtle gray surface for grouping content.
• Tertiary: Deep contrast surface for high-level hierarchy.
• Brand: The "Post-Yellow" surface reserved for high-impact brand moments and Hero sections.

Our Box

The dhl-box is a fundamental developer component designed to ensure visual consistency and structural integrity across the entire DUIL ecosystem. It acts as the primary wrapper for grouping content while maintaining our standardized aesthetic.

How it works

• Foundation: Every layout starts with --dui-colors-background-base as the primary DOM/canvas foundation where all other containers reside.
• Border radii: Border radii must scale proportionally with the size and depth of the container. Do not apply a single radius token everywhere. Use Surfaces Radius/compact-12 for small inner elements, Surfaces Radius/standard-16 for medium components or cards, and Container/Padding/relaxed-32 for large, top-level outer containers.

Demo

The dhl-box is designed to be adaptive, allowing developers to swap background tokens to fit different hierarchical needs within a layout:

Sub header

A nice hero text here

Click Me!

I'm shipping as

Individual

Select this if you are shipping personal items, gifts, or one-off packages that do not require a business tax ID.

Business

Choose this for commercial shipments to include company names, tax registration details, and streamlined invoicing.

From

To

box using --dui-colors-background-primary

Estimated Shipment Cost

$XXX,XX CUR

box using --dui-colors-background-tertiary

Box

Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Switch LabelSwitch LabelSwitch Label

Surface Tokens

The dhl-box is a fundamental developer component designed to ensure visual consistency and structural integrity across the entire DUIL ecosystem. It acts as the primary wrapper for grouping content while maintaining our standardized aesthetic.