Outline Pill
Components,
tuned live.
A growing library of buttons, loaders, inputs, menus, modals and more. Every variant comes with its own controls – color, speed, radius, intensity, states. Push it until it feels right, then copy the code.
Buttons11
Pills, glows, magnets and morphs. Every one is a real <button> – focusable, keyboard-friendly and readable by screen readers.
Loaders12
Spinners, waves, skeletons and shimmer. All of them announce themselves to screen readers and stand still for people who prefer reduced motion.
Loading
Loading
Loading
Searching
Loading
Thinking…
Loading
Serkan is typing
Loading
Inputs8
Fields that explain themselves: real labels, visible focus, errors announced to screen readers. Type into them – they all work.
⌘ K
One-Time Code
Use a long, unique password
- At least 10 characters – not met
- Upper and lower case – not met
- A number – not met
- A symbol – not met
Guests
2
140 characters left
Menus7
Dropdowns, selects, context menus and navigation. Built on the WAI-ARIA patterns: arrow keys, Home/End, type-ahead, Escape – and focus that comes back where it started.
Status
Available
- AvailableOpen for new projects
- BusyBooked until next month
- Focus timeNotifications paused
- AwayBack on Monday
Right-click or long-press here
- Figma
- Framer
- Sketch
- Photoshop
- Illustrator
- InDesign
Sliding Pill Nav
Pill Stack
Modals5
Dialogs, sheets, drawers and a command palette – all on the native <dialog> element, so focus trapping, Escape and the inert page come for free.
Toggles6
Switches, checkboxes and segmented controls – each one tells assistive technology whether it is on, off or which option is chosen.
Tabs4
Four takes on tabs with one shared hook for the WAI-ARIA behaviour: roving focus, arrow keys, Home and End.
A brand identity and website, designed as one system from the first sketch.
Workshops, moodboards, three logo routes – then one system that scales from sign to screen.
Launch, measure, refine – the work goes on after go-live.
€ 12per month · cancel any time
€ 120per year · two months free
€ 290once · forever yours
Brand identity
Logo, type, color and voice – a system, not a single mark.
Websites
Fast, accessible sites that you can edit yourself.
Digital product
Apps and platforms, from first sketch to design system.
Care plan
Hosting, updates and small changes – one fixed monthly fee.
Toasts3
Notifications that come and go without stealing focus. They live in polite live regions and pause while you read them.
Tooltips3
Small hints and rich previews. They appear on hover and on keyboard focus, and Escape makes them go away.
Copy link to clipboard
Designed together with @serkanBen Serkan ZararsızDigital Product Designer – brand, UX/UI and web.Designing since 2011 on this one.
Sliders4
Range inputs that feel good to drag. Three are native inputs underneath – keyboard and screen readers work out of the box.
Progress6
Bars, rings, steps and liquids – progress you can watch, with real progressbar semantics.
- Brief – done
- Concept – done
- Design – current step
- Launch
Uploading 12 images64%
Good brand systems start with listening. Before the first sketch, we sit with the people who will live with the brand every day.
Then come the constraints: where will the logo appear first, what does the website have to do on day one, what can wait?
Type, color and voice follow from there. Each decision is tested on real layouts, not on empty artboards.
The result is a system that grows with the company – documented, so that it keeps working without me in the room.
And then the best part: watching it out in the world, on signs, screens and in people’s hands.
Cards5
Surfaces with character: 3D tilt, a spotlight, frosted glass, a flip and an in-place expand.
- Brand identityLogo, type, color and voice – one system.
- WebsitesFast, accessible, easy to edit.
- Digital productApps and platforms, end to end.
Studio Session 04
Deep focus · 52 min
What is the one thing a brand should never change?