Table 4
2
Protein shake
1
Oat bar
1
Iced coffee
An interface language for business panels
Our own interface library. Every screen in MEG Spor and Pi Resto is drawn with it: readable instead of crowded, with the same layout on desktop and phone.
- MEG Spor
- Pi Resto
A live panel built with Pi UI
The phone view isn’t a mock: the panel runs in its own document and really switches to the phone layout when it narrows.
Four principles, shown in the panel above
The button under each principle shows it in the panel above.
Clean
The number that matters up front, no noise.
Sections are separated by surface tone, not frames. No boxes inside boxes; the eye finds the day’s key number first.
Easy to learn
Every screen is two clicks away.
Area first, then page. Every area opens the same way; learn one screen and you know them all.
Fast
Type, find, go.
Search sits on top of every screen. Page, member or record: a few letters and Enter beats digging through menus.
Modern
Light or dark, one tap.
Light at the front desk by day, dark at the register at night. Both themes are measured; neither is a faded copy of the other.
Try it piece by piece
The pieces the panels use most, straight from the package. Each comes with a control that changes it.
Button
One primary action. Locks while it works and says why when it can't run.
Segmented
A single choice from a few options. Scrolls sideways instead of clipping.
38
Switch
An on/off setting. States its value in words, not just colour.
SMS reminder
Weekly summary email
Stat + Meter
A number and its ratio. Past a threshold the tone changes and is named.
Floor occupancy
%62
Busy · 74 of 120 people
ElapsedPill
How long a job has waited. Each stage adds its name next to the colour.
Table 4 · order waiting
0 dakikaResourceGrid
A plan of tables, rooms or machines. Fill shows state; selection has its own mark.
Gym café
KullanılamıyorTable 5SearchInput
Filters as you type. With no match, it says what to do next.
- Reformer pilates
- Kickboxing
- Swimming
- Spinning
- Functional training
- Yoga
ScanFeedback
The answer after a scan, read at a glance: who, the verdict, what next.
AGAyşe Güler
You're checked in
8 classes left. Have a good session.
AgingJobCard
A waiting job: its lines, a time warning and one primary action.
Light and dark, in your brand
Colours come from a single brand switch. The same screen reads in light and dark, and hover and press feedback is checked in both.
Six rules under every screen
They’re written in the library’s own docs and every new screen is checked against them. Here they are as you see them on screen.
Layers, not boxes
Screens don’t look like cages; cards, rows and pop-ups separate by tone.
Emphasis is a mark
A selected row isn’t painted; a thin notch appears at its edge. You always know which record you’re on.
Big numbers, small labels
Amounts are aligned and large, labels small and quiet. You read the answer first, the question second.
Brand colour, sparingly
Colour only points to the next step. When everything is coloured, nothing stands out.
Colour never works alone
Status comes with colour, text and icon together, so colour-blind users read it too.
Same layout on every device
Desktop, tablet and phone share one information architecture; nothing is missing on the phone.
How it looks in your product
Pi UI is a private package: we set it up for product teams. The brand is one line; the rest is the components themselves.
import "@piklo-studio/pi-ui/tokens/themes/blue.css";
import { Button, SegmentToggle } from "@piklo-studio/pi-ui";
// <html data-pi-brand="blue" data-pi-theme="light">
export function Kasa() {
return (
<div className="pi-scope">
<Button variant="primary">Tahsilat al</Button>
</div>
);
}See it where it works
The screens in the films are captured from the real panel.
Let’s build your product in this language
A panel for your trade or a new face for your existing software: screens built on Pi UI work on the phone from day one.