Every Atelier component in every state it can be in, in manifest order. The accent is the owner's color: switch it to see the presets.
Pill buttons in Funnel Sans: the moss primary (optionally with a round arrow knob), outline, ghost, inverse, danger and icon buttons, with sizes, loading and disabled states, and an action group with a note line.
Small pill badges for status and labels (neutral, accent, success, warning, danger, outline) and pill tags that act as filter chips with a selected state.
Round initials set in Instrument Serif italic, in four sizes and two fills, plus an abstract mark for when there are no initials and an overlapping group.
The availability pill: a live dot that pulses gently (still under reduced motion) and one line such as "Booking work from March", in available, limited and booked states and three sizes.
One dismissable line above the nav for a new essay or an opening, remembered per announcement.
New essay Settings pages are where trust is won or lost. Read it
Two project spots open from March 2. Book an intro call
A slash-separated trail in Funnel Sans for project, article and service pages, with the current page in ink.
The signature: the person's name in Instrument Serif sized to fill the full width of the first screen, one word in italic in the owner's color, then a hairline, a one-line role, the availability badge and the booking pill.
Noor Ellison
Independent product designer. I design onboarding, settings and the quiet screens of B2B software.
On a real page the name is the h1 and fills the full width of the first screen. Here it's capped with the compact modifier.
The page title on every other page, in the masthead's language: a huge Instrument Serif title with one italic word in the owner's color, a hairline, then an intro and an aside for facts, a badge or actions.
Selected work
Twelve projects from eleven years of independent work. Most of them are onboarding, settings and billing for software teams of 10 to 200 people.
The heading row of a section: an Instrument Serif h2 with an optional count in a small outline pill, an intro in Funnel Sans and one arrow link, laid out as a wide title and a narrow note.
Each row opens into a short preview. The full story of every project is one click further.
All twelve projectsFour steps from the first email to the handoff, with a price you know before we start.
Coded product compositions that stand in for screenshots: a rounded well holding an SVG drawing of a product screen, drawn only from theme tokens so it follows dark mode and the accent preset, with a caption.
Work shown as an index, not a card grid: a ruled table of year, project, client type and discipline whose rows open into a preview with a coded composition, a summary, facts and a link to the case study.
| Year | Project | Client | Discipline | Preview |
|---|---|---|---|---|
| 2026 | Series B fintech | Onboarding, research | ||
|
New accounts stalled on step three of nine. I cut setup to four steps you can finish in one sitting, and moved bank linking to the moment it's needed.
|
||||
| 2025 | Logistics software | Settings, design system | ||
|
Two hundred settings across eleven pages. I grouped them by the job people came to do and wrote every label again.
|
||||
One project told in a glance: a large composition beside the title, a meta line, a two-sentence summary, three outcome numbers in Instrument Serif and a link to the full case study.
Agronomists logged visits on paper and typed them up at night. I spent four days on farms, then designed a phone app with big targets, offline drafts and voice notes.
Rounded 20px cards on a lighter sheet with a hairline edge: an inset media well, an Instrument Serif title, text and a meta line, with tint, inverse and flat variants and a whole-card link.
What changed when we rewrote 200 settings labels as sentences that say what will happen.
A talk for product teams on checklists, empty states and the first useful minute.
A printable notebook for research visits. Free, and updated every spring.
A six-column grid of cards in mixed spans (wide, half, tall) for deliverables and side work, each holding a coded composition or a short fact.
Every state of every screen in the scope: empty, loading, error and the one with 4,000 rows.
2 days
Every email gets a real answer within two working days.
What I heard, what I think it means, and what I'd do first.
Tokens and components your engineers can keep using after I leave.
A ruled grid of features: a Tabler icon in a round soft chip, a short Funnel Sans title and two lines of text, in two or three columns or as a list.
Empty, loading, partial, error and full. Engineers never have to guess.
Labels, errors and empty states arrive written. I treat words as part of the design.
Annotated files, a short walkthrough video and an hour with your engineers.
A row of honest numbers about how the practice works, each set large in Instrument Serif with a Funnel Sans label and an optional note.
A quiet row of teams worked with: invented geometric monograms in currentColor beside each name, wrapping on small screens.
Services as ruled rows that answer the three questions buyers ask first: what it is, how long it takes and what it starts at, with what's included as outline badges.
I sign up as a new customer, record every step and hand you a ranked list of fixes, with drawn screens for the top five.
One flow, designed end to end: research calls, every state drawn, words written and a handoff your engineers can build from.
Two days a week inside your team, in your standups and your files, for three months or more.
How working together goes, as a numbered track: italic serif numerals in the owner's color on a hairline with a node per step, a short title, two lines and the time each step takes.
You tell me about the product and the problem. I tell you honestly whether I'm the right person.
FreeScope, weeks, a fixed price and what you'll have at the end. No surprises later.
Within 3 daysA short video every Friday and a shared file you can open any time.
2 to 8 weeksAn hour with your engineers, then a month of answers while they build.
IncludedThe testimonial component for Atelier: short quotes from collaborators in Instrument Serif, attributed to a role and a year ("A product lead I worked with in 2025"), never to invented names, ratings or counts.
Noor found the problem in our signup on day two. We'd been looking past it for a year.
The handoff was the first one our engineers didn't have questions about.
She rewrote our error messages and support tickets about billing dropped the next month.
The dated now entry: what I'm working on, reading, learning and booking this month, with the date and place it was written, as a card or a full page section.
Updated , Lisbon
The booking panel: an off-black card with the call in Instrument Serif, a week of open slots as pill radio buttons (booked ones struck through), the time zone and one request button. Static UI that submits like a form.
Tell me about the product and the problem. If I'm not the right person, I'll say so and point you to someone who is.
Ways to work together as plan cards: an Instrument Serif price with its unit, what's included with check icons and one pill action each, the featured plan set on the off-black inverse card.
A clear look at one flow, with fixes ranked by what they're worth.
$6,800fixed, 2 weeks
One flow designed end to end, from research calls to handoff.
$14,500fixed, 4 to 6 weeks
Two days a week inside your team, for three months or more.
$9,000per month, 3-month minimum
Write anyway: I keep a short list for May.
A closing call to action: an Instrument Serif line with one italic word, a sentence and one pill pair, as a plain band, a split row or the off-black inverse panel.
Thirty minutes on a call, free. You'll leave with at least one thing to try, whether we work together or not.
Six weeks or more, one product team at a time.
Essays and notes as ruled rows: the date in tabular figures, the title in Instrument Serif, an optional one-line excerpt, the topic and reading time, and an arrow that moves on hover.
People open settings when something has gone wrong. What they find there decides whether they stay.
Tours explain the product. Checklists get people to the first useful minute.
Long-form typography for articles and case studies: Funnel Sans at 18 to 19px on a 68-character measure, Instrument Serif headings, pull quotes, lists with moss markers, figures, code, tables and a rule.
People open settings when something has gone wrong. The bill was higher than they expected, a teammate can see what they shouldn't, or the emails won't stop.
That makes settings the most emotional screen in most products, and the one we design last. Here's what changed when we wrote every setting as a promise about what will happen, not as a label for a switch.
Before drawing anything, I write every setting as one plain sentence: "Send me an email when an invoice fails." If I can't write the sentence, the setting isn't ready.
The best settings page is the one people leave sure of what they changed.
Saltmarsh had eleven pages named after tables in their schema. We moved to four pages named after jobs: your account, your team, billing and notifications. Search for a setting with / anywhere.
Next: the same idea applied to error messages.
A rounded note inside articles and case studies: an icon in a circle, a short bold title and one or two sentences, in accent, success, warning, danger and plain tones.
In-page contents for long articles and case studies: numbered links in Funnel Sans, the current section marked with a moss bar, sticky beside the text on wide screens.
Who wrote it and when: a round initials avatar, the name and a meta line with the date and reading time, in one line or stacked.
Dated entries on a vertical hairline with a node each, for a career on the about page and past now entries, with the current entry marked in moss.
Onboarding, settings and billing for software teams of 10 to 200 people, two clients at a time.
Four years on one product taught me that the second year of a feature matters more than the launch.
Websites for bakeries, a dentist and a ferry company. I learned to write my own copy.
Facts as ruled rows of a muted term and an ink detail, for project facts, about pages and invoices, in rows, a two-column grid or inline.
How to reach the person: the email set large in Instrument Serif with a copy button that confirms in a polite live region, socials as plain text links and a reply-time note.
Form fields with pill inputs and selects, a 20px textarea, drawn checkboxes and radios, labels above, hints and errors below, and every state: focus, filled, invalid, valid, disabled and read-only.
An on and off switch built on a real checkbox with role="switch": a pill track in moss when on, inline or as a settings row with a title and a hint.
Big radio or checkbox choices as 20px cards with a title, a line of detail and a round mark, for picking a service or a project size; checked cards take a moss edge.
A pill search box with an icon, a clear label for screen readers and a submit pill tucked inside the end, in a regular and a large size.
A rounded drop zone for briefs and screenshots on a real file input: an icon, a line of what to drop, limits, a choose button, the files picked and drag-over and error states.
research-video.mov is 340 MB. Share a link instead.
A monthly letter sign-up: a title with one italic word, a promise in one sentence and a pill field with the subscribe pill inside it, with error and done states.
Ruled data tables in Funnel Sans with tabular figures, a caption, end-aligned numbers, an optional featured column and group rows, collapsing into labelled stacks under 640px.
| Included | Audit | Sprint | Retainer |
|---|---|---|---|
| Research | |||
| Customer calls | Not included | 5 | As needed |
| Recorded walkthrough | Included | Included | Included |
| Design | |||
| Drawn screens | 5 | Every state | Every state |
| Price | $6,800 | $14,500 | $9,000 / mo |
Round page numbers in a row with the current page filled in ink, newer and older pills at the ends and a gap for skipped pages.
Inline SVG charts that read only the viz tokens: labelled horizontal bars, a two-line chart with a legend and a donut with its total in the middle, each with the data in a table under a disclosure.
| Phase | Hours |
|---|---|
| Screens and states | 44 |
| Flows | 26 |
| Research | 18 |
| Words | 12 |
| Handoff | 10 |
| Week | Checklist | Tour |
|---|---|---|
| 1 | 41% | 41% |
| 6 | 52% | 41% |
| 12 | 68% | 41% |
| Activity | Share |
|---|---|
| Client work | 62% |
| Writing | 13% |
| Research visits | 11% |
| Admin | 9% |
| Learning | 5% |
Questions as ruled rows that open on a round plus, built on native details and summary: the question in Instrument Serif, the answer in Funnel Sans on a readable measure.
Yes, once there's a product people use. Before that, an audit is usually more useful than a sprint, and it costs less.
Yes. I'll send mine, or sign yours if it's mutual and under three pages.
Half when we start, half at handoff, by bank transfer in USD or EUR. Retainers are billed on the first of each month.
Inline messages after an action, on the page surface with a status edge and icon: information, success, warning and error, with an optional dismiss button.
I'm away from December 20 to January 6
Messages sent then get an answer on January 7.
Message sent
You'll hear back by Thursday, November 12.
That slot was just taken
Pick another time below. Nothing was booked.
The message didn't send
Your words are still in the form. Try again, or email [email protected].
Short confirmations in a dark pill that rises from the bottom of the screen into a polite live region and leaves after four seconds; one at a time.
A native modal dialog on a 20px sheet over a warm overlay: a serif title, a close button, the body and a pill action row; opens from any trigger with data-at-dialog-open.
A small dark bubble that explains a term on hover and on keyboard focus, tied with aria-describedby, closing on Escape and never holding essential content.
Prices are a The price for the smallest scope. Most projects land within 20% of it. in US dollars. Calls happen between 9:00 and 17:00 Lisbon time.
What a list shows when there's nothing in it yet: a small coded drawing, a plain title, one sentence on why and one way forward, in a dashed 20px frame.
I'm writing one now. Until then, the onboarding essays cover most of the same ground.
Loading placeholders in bone-2 that breathe with opacity only: lines, a title bar, a rounded media block and a circle, grouped under one status message.
Progress as a native progress bar in a moss pill track with its label and value, an indeterminate state, and a row of step pills for where a project stands.
Part of the Design Systems Library