Skip to content
Jaringan

Foundations

Shape and elevation

Six 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
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.