Author

Hanabi

Page 3

Blue and orange ink blooming through water. The bleed of two colors is a picture of decisions that were never given separate names.

September 26, 2026Design systems

Tokens, type, and the decisions that stop visual drift

Design tokens are named decisions for color, type, and size. Visual drift starts when a screen pastes a one-off value instead of using the name.

By Hanabi

Hands typing on a laptop at a wooden desk near a window. The quiet setup fits a piece about five people keeping shared decisions in one place.

September 26, 2026Design systems

A design system for a team of five

A design system for a team of five is type, color, space, and a few shared components. Keep it small enough that the team uses it while shipping the product.

By Hanabi

A hand holding a stylus over a tablet covered in wireframe sketches, with a keyboard and mouse beside it. The sketches fit a piece about a designed structure rather than a free-form page.

September 26, 2026Engineering

How to keep a site editable without a page-builder mess

A custom website vs page builder choice is about what editors may change. Give them fields for those things. Keep the layout out of a free-form canvas.

By Hanabi

A hand pinning string between printed mobile screens on a wall. The string and the screens fit a piece about the sequence that connects staging to the live domain.

September 26, 2026Engineering

Staging, DNS, and the week before launch

A website launch DNS checklist is unglamorous on purpose: a staging URL, a content freeze, DNS with a written rollback, and a person watching the first hour.

By Hanabi

Five people working on laptops around a wooden table. The shared table fits a piece about which accounts the company keeps when a studio engagement ends.

September 26, 2026Engineering

What you should own after a studio engagement

Website code ownership means the repository, the domain, the analytics, and the content logins sit with you. A studio that keeps those is a dependency.

By Hanabi

Hands typing on a laptop at a wooden desk near a window. The person at the keyboard fits a piece about who actually edits a small team's site.

September 26, 2026Engineering

Choosing a CMS when the marketing team is small

A CMS for a small marketing team should match who edits, how often, and whether drafts matter. A tool the founder will not open is not a publishing system.

By Hanabi

A silver laptop open to a code editor on a white desk, with a monitor, mug, and phone behind it. The editor on the laptop fits a piece about checks that catch a broken page before it ships.

September 26, 2026Engineering

Why TypeScript matters on a public site

TypeScript for websites is protection for the next person in the repo. It catches broken props and unsafe edits. It is not a badge to put in the footer.

By Hanabi

A bright office window ledge with a laptop, a closed notebook, white chairs, and a tall indoor tree. The quiet ledge fits a piece about pages that stay calm when motion is reduced.

September 26, 2026Engineering

Reduced motion is part of the craft

Prefers reduced motion means you ship two versions: the move you intended, and a still or instant version when someone asks the system for less motion.

By Hanabi

A close view of a smartphone home screen filled with app icons on a pale table. The phone fits a piece about motion on the screen people actually hold.

September 26, 2026Engineering

Motion that helps, and motion that makes people leave

Website animation best practices come down to one test: motion should show a relationship or a state. Looping decoration that fights reading should go.

By Hanabi

A long, quiet office corridor with glass rooms, a teal sofa, and a dark kitchen. The still corridor fits a piece about pages that load, respond, and stay put.

September 26, 2026Engineering

Core Web Vitals in plain language

Core Web Vitals explained: how fast the main content appears, how fast a tap responds, and whether the page jumps. The good thresholds are 2.5s, 200ms, and 0.1.

By Hanabi

A dim desk with an iMac showing a code editor beside a portfolio page, a second monitor with a mountain wallpaper, and a lit lamp. The two screens fit a piece about the site a founder can open and the code behind it.

September 26, 2026Engineering

What founders should expect from a Next.js company site

A Next.js marketing website should give you a fast public site, a repository you own, and a clear place to edit content. The framework name is not the outcome.

By Hanabi

A silver laptop open to a code editor on a white desk, with a monitor, mug, and phone behind it. The working desk fits a piece about making a site load before it performs.

September 26, 2026Engineering

Why a marketing site should be fast before it is clever

A fast marketing website earns the right to be clever. Paint the page quickly, then add the one motion that explains something. Slow decoration reads as carelessness.

By Hanabi

September 26, 2026Brand

Rebranding without confusing the people who already buy

Rebrand when the offer or the audience changed, not when the team is bored of the old site. Keep the paths regulars already use while the surface changes.

By Hanabi

A person gesturing in a meeting, with a laptop showing a colorful layout, a notebook, and a phone on the table. The group is checking whether the site and the product still share one idea.

September 26, 2026Brand

How brand and interface should share one idea

Brand and UX alignment means one idea survives from the homepage into the product. A quiet site and a loud app are an unfinished brand.

By Hanabi

September 26, 2026Brand

Photography and illustration direction for a young brand

Brand photography direction is a decision about subject, crop, and what you will not show. A young brand gets consistency from those limits, not from more pictures.

By Hanabi

Skyscrapers photographed from street level against a pale sky. Names on a skyline have to stay readable from far away, as a product name must in a short title.

September 26, 2026Brand

Naming a product without boxing the company in

Test a product name against the URL, the sentence a stranger will say, and the next product the name must still allow.

By Hanabi

A long, quiet office corridor with glass rooms, a teal sofa, and a dark kitchen. Files that live in a place you can walk back to are the idea of a portal.

September 26, 2026Brand

What a client portal is for after the brand is delivered

A brand asset portal keeps logos, tokens, docs, and project updates findable after delivery, so the current file is obvious months later.

By Hanabi

A silver laptop open to a code editor on a white desk, with a monitor, mug, and phone behind it. An engineer looks up a hex value from a setup like this.

September 26, 2026Brand

Brand guidelines your engineers will actually open

Engineers open a short page of logo files, hex values, and type settings. A mood film stays closed in the middle of a sprint.

By Hanabi

A close view of a fountain pen writing on lined paper. The picture is the slow version of choosing sentences a company is willing to say.

September 26, 2026Brand

Verbal identity: the sentences your site should sound like

Brand voice is three sentences you will say and three you will not. Apply them to the homepage, the button, and the error a customer actually reads.

By Hanabi

September 26, 2026Brand

A brand system small enough that a team will use it

Brand guidelines for startups get used when they stay small: one type pair, a short color list, logo files, and three sentences of voice.

By Hanabi

Two white smartwatch mockups on a plain light background, one showing the face and one the back. A mark has to survive at that size, on a product, beside type.

September 26, 2026Brand

A logo is not a brand system

A logo has to work small, on a dark surface, and beside type. The system around it is what keeps the next page from inventing a new palette.

By Hanabi

September 26, 2026Brand

Brand identity when you only have a name

A startup brand can begin with a name if you settle the audience, the offer, and the feeling you refuse. Type, color, and one sentence do the rest.

By Hanabi

A bright office window ledge with a laptop, a closed notebook, white chairs, and a tall indoor tree. The quiet, readable room sits with a piece about contrast, focus, and calmer motion.

September 26, 2026Product Design

Accessibility as a design quality bar

Accessible web design basics are contrast, focus, names, and reduced motion, treated as part of done. WCAG is the reference. A launch is not a certificate.

By Hanabi

A hand holding a stylus over a tablet covered in wireframe sketches, with a keyboard and mouse beside it. Sketch and machine share the frame, for a piece about when to leave the drawing.

September 26, 2026Product Design

When to prototype in Figma and when to design in the browser

Use Figma vs browser prototyping as a split: Figma for structure and options, the browser when type, motion, and real content decide the question.

By Hanabi