Skip to content
Jaringan

Foundations

Shape and elevation

Seven shapes, each with one job. Radii come from Tailwind's scale. The site is flat: layers come from tone, not shadow.

Shape language

ShapeApplies toCharacter
CapsuleButtons, filter chips, station labels on maps, the interchange, avatarsThe metro “pill”: anything you press or that names a stop
Soft panelPanels, dialogs, toasts, popovers, photos in the grid (rounded-xl)Station screens and wall panels
Square edgeFull-bleed photos and bands, table rowsArchitecture
LineRoutes, dividers inside network graphicsThe network itself: round caps, constant weight
BadgeLine badges, tags and status badges (rounded-md)Line bullets. Never fully round, so codes don't look like buttons
ControlText inputs, selects, textareas and menu items (rounded-lg); checkboxes (a 5px corner)Fields you type or pick in: softer than a panel, never a capsule
Ticket notchTickets only: a 12px half-circle at each end of the perforation (ticket-notch-t, ticket-notch-b)The tear-off stub. The only cut corner in the system
Preview
Capsule
Badge
Sosial BudayaInformasi TeknologiMedia Kreatif
Soft panel

Registration form

Closes September 30

Line
Square edgePPIT Shenzhen members in batik posing together in front of a campus building.
Show code
<Button>Register</Button>          // capsule
<Card>…</Card>                   // soft panel
<Route /> <Station />            // line
<LineBadge code="sosbud" />      // badge

Network geometry

  • Routes run horizontally or vertically. Bends are 45° only; a route never curves freely.
  • Stations sit centered on their route.
  • Labels never overlap a route: below horizontal routes, right of vertical routes.
  • Line weight is constant within a diagram, and every route in one diagram uses the same weight.
  • Weight and station size come from the route and station utilities. Don't restyle them per page.

Elevation

Shadows exist only for things that float above content: dialogs, popovers and toasts. In dark mode floating layers use a lighter surface plus a border. No glass, blur, glow or colored shadows; the blur scale is removed from the theme.

Preview
Flat panel: tone only
Show code
<Popover>
  <PopoverTrigger render={<Button />}>See details</PopoverTrigger>
  <PopoverContent>…</PopoverContent>
</Popover>

Don’t

Frosted glass, glows, shadows on cards.

Do

Separate content by tone and hairlines. Shadows only on dialogs, popovers and toasts.