Components
Shared components come from the same source in every application. The examples below are drawn with the components’ real stylesheets.
Panel
Viewing, editing and confirmation windows all use the single panel component.
Delete record
Rules
- The browser’s built-in confirm dialog is never used; confirmations use the panel too.
- The view panel has a fixed width on desktop and becomes a bottom sheet on phones.
- Esc and the close button close the panel; focus returns to the element that opened it.
- With unsaved changes, clicking outside does not close the panel.
- When the on-screen keyboard opens, the bottom buttons stay in view.
Row menu
A row’s actions are grouped behind a single ⋯ button at the end of the row; rows do not line up several action buttons.
Rules
- No shadow; the menu is separated by its material and a thin line.
- Enter, Space and Down open it; Up/Down, Home and End move; Esc closes it and returns focus to the button.
- A destructive action is red and sits at the bottom.
- Actions the user is not allowed to perform are not listed at all.
- Clicking the menu does not trigger the row’s own click.
Side menu
The side menu is the same in every application: open and narrow widths, a single toggle, tooltips when narrow. Icons are line icons; emoji are not used.
Open / narrow width: 224 px / 72 px
Table
Tables use the shared density classes, the empty row and the loading skeleton.
| Date | Item | Quantity | Amount |
|---|---|---|---|
| 2026-10-01 | Olive oil, extra virgin | 120 L | ₺18,600.00 |
| 2026-10-02 | Glass bottle, 1 L | 400 pcs | ₺4,200.00 |
| 2026-10-03 | Label printing | 1 job | ₺950.00 |
| No records |
Rules
- Density is set on the table, not on cells.
- On narrow screens the table switches to cards: the header row is hidden and each cell shows its name above the value. No column is hidden.
- The card threshold is in em, so it applies on wider screens when the user enlarges text.
- Numbers are right-aligned and use tabular figures.
Report
Report screens use the shared stat boxes, the date range picker and the error box.
Sales
₺23,750.00
Purchases
₺9,150.00
Balance
₺14,600.00
Rules
- A stat box carries one label and one value; the value uses tabular figures.
- Money is written by a single formatter: ₺1.234,56.
- Preset ranges (today, this month…) are chips; the selected chip uses the accent color.
Tiles
Shortcut tiles on the home screen carry one icon and a short name.
Rules
- The icon is a line icon in the accent color; emoji are not used.
- The name is kept short and set in semibold (600).
- Tiles are laid out with the standard gap; the column count grows with screen width.