Skip to content
Jaringan

PPIT Shenzhen design system

Jaringan

The design system for every PPIT Shenzhen website. It shows campuses, divisions and events the way the Shenzhen Metro shows lines and stations, and it is built on shadcn/ui.

  1. SZU深圳大学64 members
  2. HITSZ哈尔滨工业大学（深圳）58 members
  3. PKU Shenzhen北京大学深圳研究生院21 members
  4. Tsinghua SIGS清华大学深圳国际研究生院27 members
  5. SUSTech南方科技大学112 members
  6. CUHK-Shenzhen香港中文大学（深圳）236 members

The idea

Members travel between campuses on the Shenzhen Metro, so the system borrows its visual language: lines, stations, interchanges and departure boards. They show who runs something, where it happens, what comes next and how far along a process is.

The metro stays in the graphics, not the words. Copy is plain (“Upcoming events”, not “All aboard for adventure!”). There are no fake tickets, LED fonts or train sounds, and every line and station on screen carries information.

Network termWhat it represents
LineA division, with a permanent color and a line badge. The brand red line is PPITSZ itself.Hubungan MasyarakatPerkembangan Karir dan AkademikMedia Kreatif
StationA campus or an event venue.
InterchangeWhere lines meet: a joint event, or a campus served by many divisions.
RouteAny sequence: the oprec stages, the year's events, the sections of a long page.
“You are here”Today's position on a timeline, or the applicant's current oprec stage.
Departure boardThe list of upcoming events.

Principles

  1. 01

    Satu jaringan

    One network

    Show how things connect: who runs an event, where it happens, how far along a process is.

    This means: Every event row shows its division's line badge and its campus station; oprec status is a route with the applicant's stop marked.

    This doesn't mean: Decorative metro maps, or lines and dots that connect nothing.

  2. 02

    Petunjuk, bukan hiasan

    Wayfinding, not decoration

    Every screen tells the reader where they are, what comes next and where they can go.

    This means: Clear current-page markers, a route strip on long pages, “You are here” on timelines.

    This doesn't mean: Ornament of any kind. The network graphics are the only decoration, and they carry information.

  3. 03

    Merah adalah jalur utama

    Red is the main line

    Red marks the brand and the one action to take. Division colors exist only inside network graphics.

    This means: One red button per screen; the eight line colors only on badges, routes and stations.

    This doesn't mean: Colored section backgrounds, colored headings, rainbow layouts, gradients.

  4. 04

    Orang di setiap stasiun

    People at every station

    The network is the structure; members are the content. Real photos of real people lead every page.

    This means: The home page pairs the campus network with a large, natural-color group photo.

    This doesn't mean: Stock photos, 3D renders, illustrations of people, darkened photos with text on them.

  5. 05

    Bahasa yang jelas

    Plain English, Indonesian where it belongs

    The interface speaks plain English. Indonesian stays for proper names, the words members already use (Panitia, Danus, Oprec, Kasir) and the organization's own prose (ADR 0007).

    This means: English buttons, statuses and emails; division names in Indonesian, marked lang="id"; station labels still stack the Chinese name under the Latin one.

    This doesn't mean: Translating Panitia or Danus, glossing them, or a language switcher that doubles every string.

What carries over

Three things carry over from the old site:

  • the official PPI Tiongkok Cabang Shenzhen mark;
  • the color red, refreshed into a brighter signal red and used sparingly;
  • the people, through real photography.

Maroon backgrounds, gold, the newspaper theme, batik wallpaper, serif headlines and the old components are retired. People should recognize the site as PPITSZ from its logo, its red and its members. Everything else is new.

Using Jaringan

The system lives in the ppitsz/ monorepo as the @ppitsz/ui package. Every PPITSZ site is an app in apps/ that imports its stylesheet and components.

Components start from shadcn/ui on Base UI, then get a restyle pass: semantic tokens only, one type-* class for text, capsules for anything pressable. New shadcn components go through the same pass (the mapping table is in packages/ui/README.md).

// app/layout.tsx
import "@ppitsz/ui/globals.css"

// any page
import { Button } from "@ppitsz/ui/components/button"
import { LineBadge } from "@ppitsz/ui/components/network/line-badge"
import { DepartureBoard, DepartureRow } from "@ppitsz/ui/components/blocks/departure-board"
# add a shadcn component (lands in packages/ui), then restyle it
cd apps/docs && bunx shadcn@latest add tooltip

# before finishing any change
bun run guardrails && bun run typecheck && bun run build

The map

The sections of these docs, drawn as a route.

  1. FoundationsColor, type, layout, shape, motion and imagery: the rules every page is built from.
  2. Componentsshadcn/ui components on Base UI, restyled to Jaringan.
  3. NetworkRoutes, stations, line badges and the boards and maps built from them.
  4. ExamplesWhole pages composed from the system.