DESIGN SYSTEM
One system, every screen.
Every button, badge and colour in Pierrr comes from the same source: this page. No duplicated components, no one-off styles - what you see here is exactly what ships in the product.
BRAND
Logomark and logo.
Two uses, one drawing. Both inherit the surrounding text colour and read the same on any surface, light or dark.
LOGOMARK
The mark and the name together. This is the default form, used in headers, footers and anywhere the brand introduces itself.
LOGO
The mark on its own, when the name is already there or space is tight: favicon, avatar, notification, app tile.
SUB-BRANDS
Every product reuses the same mark and the same house name, followed by its own. Pierrr leads, the product follows: that is what makes them read as one family rather than as neighbouring logos.
- Pierrr Agent
- Pierrr Security
- Pierrr Mail Relay
- Pierrr MCP
- Pierrr Monitoring
- Pierrr Backup
- Pierrr Topology
- Pierrr Agent
- Pierrr Security
- Pierrr Mail Relay
- Pierrr MCP
- Pierrr Monitoring
- Pierrr Backup
- Pierrr Topology
COLOUR
Our palette.
A dark, focused backdrop with one signal colour that never competes for attention - built for long sessions, not a splash page.
Background
Foreground
Card
Popover
Primary
Secondary
Muted
Accent
Destructive
Signal
Beacon
Border
TYPOGRAPHY
Sans for reading, mono for data.
Headings and body copy use the system sans stack; anything numeric, technical or machine-generated (slugs, timestamps, logs) switches to monospace.
Dock the containers, raise the gangway, ship it
Dock the containers, raise the gangway, ship it
Dock the containers, raise the gangway, ship it
Dock the containers, raise the gangway, ship it
Dock the containers, raise the gangway, ship it
PRINCIPLES
The rules behind the pixels.
Not aesthetic preferences - constraints every screen has to satisfy before it ships.
Reuse, never recreate
Every screen pulls from this package. If a component is missing a variant, we extend it once - we never fork a local copy.
Squared corners
Zero border-radius across the entire product. Buttons, cards, dialogs, avatars - straight edges, no exceptions.
Tokens over hardcoded values
Colours, spacing and radii are shared variables, not one-off values. Change one, re-theme the whole app, light and dark.
Accessible by default
Dialogs, dropdowns, tabs and switches ship with keyboard navigation and focus management out of the box, not bolted on after.
COMPONENTS
Live, not screenshots.
Every element below is the real component, rendered on this page - not a mockup.
Buttons
Badges
Form controls
Feedback
Surfaces
Demo Stack
6 containers · Online
No project yet
Connect a repo to deploy your first app.
ICONS
One curated set.
Every icon in the product is drawn from Phosphor Icons, hand-picked into a single consistent set.