PI UI

Complex
work,
calm system.

Business panels go unused because they're hard to use. Pi UI is an interface language that rethinks those screens: forty-one building blocks, four rules, a setup running in two sectors.

SECTOR
pDay end
16:35MG
TODAY
38.450
CASH
12.200
CARD
26.250
PENDING
3
AllPaidPending
Ayşe Yılmaz
6 MONTHS · 12 CLASSES
12,500
Elif Demir
3 MONTHS · 8 CLASSES
6,750
Zeynep Kaya
MONTHLY · 4 CLASSES
2,500
Selin Arslan
6 MONTHS · 12 CLASSES
12,500
Deniz Şahin
MONTHLY · UNLIMITED
3,200

Three different jobs: closing the day, turning tables, keeping appointments. The layout is identical — only the data and the theme file change.

LAYERS NOT BOXESEMPHASIS IS A MARKCOLOUR IS RARECONTRAST IN TYPELAYERS NOT BOXESEMPHASIS IS A MARKCOLOUR IS RARECONTRAST IN TYPELAYERS NOT BOXESEMPHASIS IS A MARKCOLOUR IS RARECONTRAST IN TYPE
RULES

Four decisions, forty-one components.

These aren't preferences; they bind every component and are measured on screen. A new building block that breaks them doesn't get in.

01

No boxes. Layers.

Depth comes from surface tone, not borders. A hairline vanishes on dark themes; thicken it and the screen turns into a cage.

WITH BORDERS
Today
12.400 ₺
Cash
12.400 ₺
Card
12.400 ₺
WITH LAYERS
Today
12.400 ₺
Cash
12.400 ₺
Card
12.400 ₺
02

Emphasis is a mark, not a fill.

The active row isn't painted over; it gets a three-pixel notch on its left. The eye knows where to look and the screen doesn't shout.

AS A FILL
Ayşe Yılmaz6.750 ₺
Elif Demir6.750 ₺
Zeynep Kaya6.750 ₺
AS A NOTCH
Ayşe Yılmaz6.750 ₺
Elif Demir6.750 ₺
Zeynep Kaya6.750 ₺
03

Brand colour, used sparingly.

Spend it on navigation and there's nothing left where it matters: the amount, the warning.

EVERYWHERE
AllPaidPending
Elif Demir6.750 ₺
IN ONE PLACE
AllPaidPending
Elif Demir6.750 ₺
04

Contrast in type.

Numbers large and tight, labels small and uppercase. Reading a table doesn't require counting rows.

ONE WEIGHT
Cash
12.200
Card
26.250
WITH CONTRAST
Cash
12.200
Card
26.250
WHAT'S INSIDE

Three layers, one package.

01

Language

Tokens, surfaces, headings, numerals, rows and table primitives.

StatTile · StatusPill · FilterBar · SearchInput

02

Shell

Navigation rail, mobile bar, live rail, command palette.

IconRail · IdentityBar · NavList

03

Pattern

Record lists, people lists, tender panels, customisable boards.

RecordList · MasterDetail · TenderPanel · QuickGrid

import { RecordList, StatTile, TenderPanel } from "pi-ui"
41Components
4Ready themes
2Sectors in production
0External UI dependencies

It replaces off-the-shelf libraries, shadcn and Radix included. An interface problem is solved here first, then every project inherits it — we don't write the same thing twice.

Stop fighting your own panel.

We can move an existing panel into this language, or build a new one on it from the start. Both draw from the same source.

Let's talk