shiqi.si
--:--
ui/
@shiqi/ui

Components

Every element on this site comes from here. A theme is just a set of CSS variables; components only read semantic variables, so switching themes never touches a component.

Theme
TOKENS

Semantic colors

From themes.css. Components only use these.

--bg
--surface
--text
--text-muted
--border
--accent
--accent-soft
--accent-2
--link
--code-bg
TYPE

Type

Heading one H1

Heading two H2

Heading three H3

Body text uses the system font (PingFang / SF), labels use the SILKSCREEN pixel font, code uses ui-monospace.

BUTTON

Buttons

FORM

Forms

Field wires up the label, hint and error for you.

DISPLAY

Display

NEWOKShortcut ⌘ K
Key
Value, copyable
ISO 8601
2026-10-09
  • List itemA Settings-style grouped list›
  • Another itemCan render as a link12
window.app

Window: striped title bar plus a square close box. Every page sits inside one.

ICONS

Pixel icons

Each icon is a few lines of ASCII art in @shiqi/pixel.

cursor
terminal
heart
star
floppy
folder
envelope
magnifier
mug
braces
bolt
note
leaf
moon
sun
bee
flower
blob
clock
dice
palette
swap
book
picture
glider
face
pencil
grid
theme
quiz
QUIZ

Quiz

For course notes.

DEMO1 / 2
What are this site’s theme colors?