Network · sign

Signs and exits

The station's overhead sign as a list of destinations: an ink band, a lead cell, the name and the arrow. Pictograms and lines lead into the network; yellow exits lead out of it.

Sign board

For “where to next”: the app launcher in PPITSZ Account, the end of a finished flow, a staff app's home. The board is always ink, so it reads as signage in light and dark pages. Each sign's title link is stretched over its row.

Preview

Show code

<SignBoard aria-label="Your apps">
  <Sign
    href="/staff"
    direction="right"
    lead={<SignPictogram><StorefrontIcon /></SignPictogram>}
    title="Shop dashboard"
    description="Admin"
    linkAs={NextLink}
  />
  …
</SignBoard>

Places and linesA sign can lead with line badges, and carry a place's Chinese name. A sign without href is information only: no hover, no arrow nudge.

Preview

Dana UsahaBack to GumamChan
SZU深圳大学Pickup at the north gate, 12:00–14:00

Show code

<Sign direction="left" lead={<LineBadges codes={["danus"]} />} title="Back to GumamChan" href="/gumamchan" />
<Sign direction="ahead" title="SZU" zh="深圳大学" description="Pickup at the north gate, 12:00–14:00" />

Exits

In the metro, yellow means the way out. Here too: an ExitBadge marks a link that leaves the app (to the socials, another site, a PDF). Letter the exits A, B, C in the order they appear, and keep a letter for the same destination across pages.

Preview

Exit AInstagram (opens in a new tab)@ppitshenzhen
Exit BTikTok (opens in a new tab)@ppitshenzhen

Show code

<Sign
  href="https://instagram.com/ppitshenzhen"
  direction="out"
  lead={<ExitBadge letter="A" />}
  title="Instagram"
  description="@ppitshenzhen"
  newTab
/>

On its ownOutside a board the badge marks an exit in a row of links, like a footer.

Preview

ABC1

Show code

<ExitBadge letter="A" />

Anatomy

Part	Spec
Board	tone-ink, rounded-xl, rows divided by a border. At least 72px a row.
Lead	Optional. `SignPictogram` (a 40px light square, the icon at 24px), `LineBadges` or `ExitBadge`.
Name	type-heading-sm; the Chinese name (places only) and one description line in type-caption.
Arrow	Bold, 28px. `right`, `left` (drawn before the name), `ahead` or `out` (leaves the app). It nudges 2px its way on hover.
Exit badge	Exit yellow (`--exit`), condensed Archivo 800. Screen readers hear “Exit A”.

Rules

Exit yellow is not a color token: there is no bg-exit. It appears only through ExitBadge, and the badge only on ways out of the app.
One board per screen, for the screen's “where next”. Navigation within a page stays the route strip.
Pictograms are functional (they name a destination), from the approved icon set. No trains as decoration.

Don’t

A yellow badge on a link inside the app, or a yellow “Buy now”.

Pictograms and line badges for destinations in the app; an exit letter only when the link leaves it.