dashboard / ops
202647 days
Helio — Energy ops.
A control plane for a 14-person energy team. 19 internal screens, one shared design vocabulary.
Atelier of interfaces.
A component library built on top of the BR brand. Three variants, one accent, one ethos: elegance that survives at small sizes.
Now showing
Glass / FrostedLive
Refined translucency. Soft refractions over a warm paper base. Edges feel airy; surfaces breathe.
The vocabulary.
Tokens swap per variant. Typography stays loyal to Clash Display for display, Geist for UI, JetBrains Mono for data.
Type scaleclash display · geist
display-xl · 96Pretium Aa
display-l · 56Subtilitas Aa
display-m · 36Eleganter Aa
display-s · 22Compositio Aa
body · 14The right typographic system disappears. You read the text, not the type. Geist holds a calm, even color on the page across weights.
mono · 120123456789 · MM/DD · €1,248.00
Surfaces & color6 tokens
Accent
--accent
Ink
--ink
Paper
--bg
Surface 1
--surface-1
Surface 2
--surface-2
Border
--border
Where could Fira Sans live?
Three places it changes the texture: tabular data, long-form copy, and condensed metadata. Each pair: Geist / Mono on the left, Fira on the right. Pick what reads better and we'll commit.
Pairing 01 · Numbers in tablestabular numerals · data column
Tabular data— MRR, prices, KPIs
Geist Monocurrently in use
| Helio Energy | €12,400.00 |
| Verba Editorial | €4,800.00 |
| Atlas Robotics | €12,400.00 |
| Pebble Health | €0.00 |
Technical, code-aware. Reads "spreadsheet". Numbers feel locked-in but the texture is a bit cold next to humanist body copy.
Fira Sansproposed
| Helio Energy | €12,400.00 |
| Verba Editorial | €4,800.00 |
| Atlas Robotics | €12,400.00 |
| Pebble Health | €0.00 |
Strong tabular figures with warmer, humanist letterforms. Reads as editorial finance — closer to a printed quarterly report than to a terminal.
Pairing 02 · Long-form copyjournal · case body · documentation
Body copy at reading size— 14–16px paragraphs in articles, case studies, docs
Geist
We work in small, opinionated teams. Two people, six weeks, one shipped product. The team that builds it talks to the client, every day, and stays on the work until it ships — not until the contract ends. The contract is a courtesy; the work is the point.
Neutral, modern, dense. Excellent for product UI; on a 60-character measure it reads efficient — but cool.
Fira Sans
We work in small, opinionated teams. Two people, six weeks, one shipped product. The team that builds it talks to the client, every day, and stays on the work until it ships — not until the contract ends. The contract is a courtesy; the work is the point.
More humanist. Open apertures (e, c, a), slightly taller x-height. At paragraph length it reads warmer, closer to a magazine column than a control panel.
Pairing 03 · Eyebrows, metadata, captionscondensed · section headers · chrome
Section eyebrows & meta chrome— the all-caps captions across the system
Geist Mono
§ 03 — Input · Forms that listen.Workspace · Inbox · Settingsfield · input · textarea · select
Code-aware tone. Reinforces the "designed by engineers" feel — good for a CLI, slightly off-key for an editorial brand.
Fira Sans Condensed
§ 03 — Input · Forms that listen.Workspace · Inbox · Settingsfield · input · textarea · select
Editorial newsprint. Condensed letterforms with slight bookishness — pairs naturally with Clash Display, gives the whole system a signed-and-dated quality.
Pairing 04 · Underline as a header treatmentaccent rule · short bar · marker
The accent bar from the topbar's active link, applied to display type. A small, decisive cue that says "this is the live one" — without bolding the type or adding another size step. Four flavors, same vocabulary.
- One underlined heading per visible viewport — it's a marker, not a pattern.
- Pair with calm body type (Geist 14 px) — let the accent do the lifting.
- Use the short bar (A) anywhere the topbar's active link lives.
- Stick to
var(--accent)— never invent a second color.
- Don't stack two variants on adjacent headings — they cancel each other.
- Don't use under buttons, inputs, or interactive text — too close to a link affordance.
- Don't bold the heading and underline it. Pick one signal.
- Don't apply to long phrases — the marker should ride one or two words.
My recommendationwhere Fira earns its place
Strong yes
Eyebrows & meta
Replace mono in section headers, breadcrumbs, table column heads, sidebar dividers. Editorial vocabulary instantly.
Conditional
Numbers in tables
For finance, KPIs, invoices — Fira's tabular figures match the editorial tone. For code/CLI-adjacent — keep Geist Mono.
Probably not
UI body / labels
Geist holds calmer color in dense UI at small sizes. Fira is gorgeous at 16–20px+, less so at 11–13px in chrome. Keep Geist for app shell.
Try it live → Open the Tweaks panel and switch Eyebrows / meta to Cond.— you'll see every section header, sidebar divider, table head, and command palette label adopt Fira Sans Condensed at once.
Buttons, refined.
Pulled in from your existing system — slimmer padding, lighter weight, motion that hints rather than shouts.
Variants & sizesbtn · primary / ink / ghost / quiet / danger
Primary, default, small
Ink (solid neutral)
Ghost — glass on glass
Quiet, danger, icon only
Button group / segmented
Forms that listen.
Hairline borders. Focus ring at 1.5 px, accent-tinted halo at 14% opacity. Labels stay quiet, fields do the talking.
Text fieldsfield · input · textarea · select
Choice, weighed.
Bigger hit targets than they appear. Subtle focus halos. Switch thumbs lift on activation.
Toggles & choicesswitch · checkbox · radio · chip
Switches
Checkboxes
Radio group
Chips (toggleable)
Slide, step, progress.
Thin tracks, small thumbs, monospace numbers. Restraint at every step.
Sliders, steppers, progressrange · stepper · linear · circular
Slider · 72%
Slider · 40/100
Stepper
3
Progress & loaders
Skeletons
Small things, said well.
Badges, tags, avatars. The atoms that pepper density into a layout without weight.
Badges & avatarsbadge · chip · avatar · stack
Badges
DefaultNewFeaturedProOnlinePending
Tags / Chips
Avatars
BRJKAMS
BRJKMS+12
Cards & case work.
Three families. The stat card with a whisper of sparkline. The content card with a quiet rhythm. The case card that opens like a portfolio plate.
Stat cardskpi · trend · sparkline
Active projects+3 mo
14
vs. last quarter
Time to ship-22%
11days
median, 30d window
Net revenue+12%
€428k
rolling 12 months
NPS
74
Promoters / detractors · 8.4×
Content cardscard · card-foot · interactive
Method · 01
Listen first.
Two long calls. One walkthrough. We map the business, the team, and the system before a single Figma frame.
Week 1
Featured
A design system, in 14 days.
Tokens, primitives, three flagship flows. Shipped to production with a Storybook and a handoff doc.
BJM
2026Method · 02
Ship in plain sight.
Async Loom every other day. Daily commits. No screensharing-as-theater — you watch the work happen.
Week 2–4
Case cardsportfolio · placeholder
editor / publishing
202532 days
Verba — Editorial CMS.
A long-form CMS for two news rooms. Built in 32 days end-to-end including migration.
booking / mobile
202521 days
Mara — Booking flow.
Re-engineered a five-step booking funnel. +18% conversion in the first month.
Move through the work.
The topbar above is part of this system. Below: tabs (two flavors), breadcrumbs, and a sidebar that whispers active state with a 2px accent rule.
Tabs & breadcrumbsunderline · pills · crumbs
Underline (page-level navigation)
Pill / segmented (panel-level)
Breadcrumbs
Sidebarnav · sections · badges · brand foot
BRBR Atelier · Ed. 01
Created with passion.
A small atelier for product systems, dashboards and the workflows beneath them.
Active page · Dashboard
The sidebar marks active items with a 2 px accent rule on the left edge and the icon tinted to accent. Hover gives a subtle surface-2 fill — never a heavy color block.
Brand mark · always at the bottom
The colophon card pinned beneath the nav is a shared component — same in CRM, Folio, settings drawers. It carries the signature, a one-line tagline, and a single link out. Tiny accent ember in the corner pulses to mark it as alive.
Brand mark · shared colophonfull · compact · drop anywhere
BRBR Atelier · Ed. 01
Created with passion.
A small atelier for product systems, dashboards and the workflows beneath them.
BRRychlicki Holding · 2026
Business systems with craft.
Components, dashboards and quiet workflows for product teams that ship.
Compact — sidebar foot, drawer base, account menu
BRBuilt with quiet conviction.
Drop <BrandCard /> at the end of any sidebar list and it gravitates to the bottom (parent uses display:flex; flex-direction:column, card gets margin-top:auto).
props · glyph · eyebrow · tagline · taglineHighlight · description · signature · signatureMeta · link · compact
Tables, calmly.
Monospace numbers right-aligned, mono headers in caps, hairline dividers, hover lighting only one row at a time.
Clients
| Client | Plan | Status | MRR | Joined | |
|---|---|---|---|---|---|
| HE | Studio | active | €12,400 | Mar 04 | |
| VE | Pro | active | €4,800 | Feb 11 | |
| MB | Pro | paused | €4,800 | Jan 22 | |
| AR | Studio | active | €12,400 | Jan 09 | |
| PH | Starter | trial | €0 | Dec 28 |
Charts, in the dialect.
Five shapes that cover most product analytics: area for trends, bars for compare, line for parallels, donut for share, radar for shape. Same tokens as the rest of the system.
Revenue
Last 12 months · MRR equivalent
€428k
This period Previous
Shipped projects
By quarter · 2024 vs 2025
38this yr
This year Last year
Days to ship
Median time from kickoff to launch
11days
Current Previous
Where time goes
Hours · current sprint
248h
this sprint
Design9237%
Engineering8434%
Research3815%
Ops3414%
Component health
Latest audit · 6 dimensions
This product Category avg.
Activity by day
Last 14 days · merged PRs
142
Thu Mar 12 · 15 PRs merged — highest day of fortnight.
Layers, with intent.
Dialogs, sheets, drawers. Every overlay gets the deeper blur (var(--blur) + 8px) for a true glass focus.
Modalsdialog · sheet · drawer · scrim
Press Esc to dismiss any overlay. The scrim absorbs clicks and dims the background. Variant B uses a heavier scrim (56%) for theatrical contrast.
Tooltips & popoverstt · popover · hover-card
Save changes⌘SNew project⌘NOpen settings
BR
Notify, never nag.
Toasts arrive with a fade-up of 8 px. Alerts hold their tone. Voice steps in when eyes are elsewhere — same payload, different channel.
Alertsalert · banner
Heads up.
A new version of this design system is ready. Take a look at what changed.
You're on the list.
Your slot for the next sprint is confirmed for Mar 18.
Two-factor auth is off.
Add a second factor to protect your account.
Standard toastsfadeUp · bottom-right · 4.2s
Creative toastspill · progress · undo · stepper
01 · Pill / dynamic island
Top-centre, single-line. Status the screen needs to acknowledge but not act on — recording, syncing, ambient state. Lands with a spring.
02 · Progress · stays until done
Upload, build, export. Live percentage, ETA text, hairline meter on the bottom edge. Auto-dismisses 1.8 s after completion.
03 · Undo · destructive shortcut
Action confirmed, with a 6 s window to reverse. Dark canvas separates undo from the rest of the UI. Clicking Undo fires a pill toast.
04 · Stepper · multi-stage task
For tasks with named stages. The live step pulses, finished steps fill solid, remaining stay outlined. Useful for deploys, imports, migrations.
Everything, one keystroke away.
The palette is glass at its most useful: deeper blur, gentle elevation, monospace shortcuts in the right gutter.
Command palette⌘K to open · arrow keys to navigate
Pick a day.
A calendar with one accent dot for today, a filled disc for selection, and a soft tint for ranges. No grid lines, no shadows on cells.
Calendarsingle · range
Single date
Range
Stitched together.
Full-screen compositions assembled from the kit — entry points, working surfaces, the moments that frame everything else.
· Sign-in screentwo-pane · social providers · keyboard-first
atelier.brych.studio / sign-in
Atelier
Calm software, made by hand.
New here?Create account →
§ Welcome back
Sign in to Atelier.
Pick up where you left off — invoices, sprints, the journal.
or with email
· Workspace dashboardsidebar · topbar · header · kpis · table
atelier.brych.studio / clients
§ Q2 · 2026
Clients
142 total · 38 active this week · €48.4k MRR
MRR
€48,400
↑ +12.4%vs last month
Clients
142
↑ +6vs last month
Active now
38
→ 0vs last month
Churn
1.8%
↓ −0.4%vs last month
All clients
| Client | Plan | Status | Owner | MRR | Joined | |
|---|---|---|---|---|---|---|
| HE | Studio | active | BR | €12,400 | Mar 04 | |
| VE | Pro | active | JK | €4,800 | Feb 11 | |
| MB | Pro | paused | BR | €4,800 | Jan 22 | |
| AR | Studio | active | MN | €12,400 | Jan 09 | |
| PH | Starter | trial | BR | €0 | Dec 28 | |
| NA | Pro | active | JK | €4,800 | Dec 12 |