RoadieRoadie
  • Home
  • Foundations
  • Tokens
  • Components
  • Charts
  • Widgets
  • Appearance
HomeFoundationsComponents
Appearance

Tokens

  • Reference

    • All tokens
  • Color

    • Color scales
    • Intents
    • Data visualisation
    • Emphasis and states
  • Type, shape and depth

    • Typography
    • Shape and layout
    • Elevation and layering
  • Motion and utilities

    • Motion
    • Component utilities

Shape and layout

GuidanceShape·Layout

Roadie keeps Tailwind's radius scale and adds rounded-5xl to rounded-7xl for hero and feature surfaces. container-* centres a page at any container width.

Open in all tokens

Radius

11

  • Tailwind
    0.125rem
  • Tailwind
    0.25rem
  • Tailwind
    0.375rem
  • Tailwind
    0.5rem
  • Tailwind
    0.75rem
  • Tailwind
    1rem
  • Tailwind
    1.5rem
  • Tailwind
    2rem
  • 2.5rem

    40px

  • 3rem

    48px

  • 3.5rem

    56px

Containers

2

  • 90rem

    1440px

  • Container: centered with responsive padding and configurable max width. Replaces Tailwind's default container and the v1 <Container> component. Usage: <div className="container-8xl">...</div> → max-width: 1440px <div className="container-4xl">...</div> → max-width: 896px Any --container-* token works: 3xs–7xl (Tailwind defaults) + 8xl (1440px).

Previous page← TypographyNext pageElevation and layering →