I built the Haven Smith & Company brand, design language, and component library with AI-native product research and design.

I turned AI-native product research and design on my own business. AI made each early direction into a real page I could judge, and a written design language with a lean component library now gives every page of havensmith.company the same parts to build from.

See prototype

  • Company

    Haven Smith & Company

  • My role

    Founder and principal designer

  • Focus

    Brand, website, and component library

  • Result

    One design language and one component library behind the site

Before the H

My business needed one brand that could carry books, guides, teaching, and consulting.

Haven Smith & Company is the imprint for my work as a human factors based product designer. Under one name it publishes books and guides, offers live help with digital life, and carries my product design consulting, accessibility reviews and audits, and teaching. Each of those has a different reader, and every reader has to trust the page in front of them.

I did not start with the answer. I started the way I start work for a team, by getting to something real as quickly as possible and then looking hard at the result.

How it grew

Each early direction became a real page I could judge, and each one taught me something.

I used Figma Make, an AI design tool, to turn each direction into a full page. AI made the drafts fast. The choices about what to keep stayed with me. Click or tap a card to turn it over.

The rules behind the look

I write the rules down, because AI drifts and written rules make AI drift less.

I build pages with AI, and AI wanders. The cure I trust is a written design language that a person and a model can both follow. /brand names every color, typeface, size, and spacing step, and the component library turns those rules into parts a page can reuse.

I also found that AI follows a clear list of don'ts more closely than a list of dos. Human guidance from me leads with what to do, and the rules I give a model lean on what never to do.

  • Every corner is square, because the H mark set the rule.
  • Playfair Display sets every heading, and Montserrat sets everything else.
  • Mocha stays an accent, at roughly one part in twenty of a page or less.
  • Every text block in a section ends on the same right edge.
  • A flip card turns only on a click, a tap, or a key press.
  • Every page carries the Display control, and anything that moves can be paused.
Play with the parts

Try a working slice of my component library.

I rebuilt a small part of the library as a prototype, with AI writing the code from my rules. The parts follow /brand, and every one of them respects reduced motion.

Things to try

  1. Choose a link at the top to jump to the atoms, the molecules, the organisms, or then and now.
  2. Press Get the guide or Read a sample to see what each button promises.
  3. Click or tap a flip card, or press Enter on one, to turn the card over.
  4. Pause the ticker with its square button or hold the pointer on the strip to stop it.
  5. Open the Aa square in the top right corner, then change the text size, contrast, motion, spacing, underlines, and theme.
The kit

Black and white do the work, and latte stays an accent.

This style guide comes from /brand and the template parts of my live component library. The hex values match the prototype.

Color

  • Black#000000Headings, buttons, chosen chips, the ticker strip, and the Organize card
  • White#FFFFFFThe page ground and the type on every dark surface
  • Beige#E2DBD1The warm bands behind the molecules and then and now, and the warm mark
  • Latte#C9B2A0The accent: the Prepare card and the Display control square, both with black type, and numerals and small type on black or charcoal
  • Charcoal#2E2B28Body text, eyebrows, the back of every flip card, and the Protect card

Type

  • Headings

    Organize, Protect, Prepare.

    Playfair Display

  • Pull quotes

    Good design. Always.

    Playfair Display Italic

  • Body

    An email address is a mailbox, and it is also a key.

    Montserrat

  • Eyebrows and buttons

    Inside the book

    Montserrat Bold caps

Components

  • H mark

    One letter in a square with square corners, in black, reversed, or on beige, and the square sets the shape of every other part.

  • Buttons

    Solid black with white type and words that say what happens, and the primary empties on hover while the secondary fills.

  • Chips

    A row of square toggles that filters a page, where the chosen chip fills with black so the choice reads without color.

  • Ticker strip

    A black strip that moves slowly from the first frame, pauses on hover or with its square button, and lays its words out still under reduced motion.

  • Flip cards

    A solid front with a serif title and a large numeral turns to a charcoal back on a click, a tap, or a key press, never on hover.

  • Display control

    A latte square in the top right corner opens six settings for text size, contrast, motion, spacing, underlines, and theme.

Principles

  • Make it beautiful.
  • Make it as simple as possible and no simpler.
  • Make it accessible and usable.
  • Make it honest, trustworthy, and safe.
Where it landed

One look now runs from the homepage to the smallest button.

The homepage is locked as the template, and its parts live in the component library for every other page to reuse. Click or tap a card to turn it over.

What I bring to your team

I bring the same method to teams that build products.

I get to something real quickly, judge the result honestly, and write the rules down so the next page starts from parts that already work. That is how I run AI-native product research and design for teams too.

Still curious?

There is plenty more where this came from.

Names, brands, and data in my case studies are changed to protect my clients.

See all case studies
Connect

Tell me about your project.

Tell me a little about it on my contact form, and a real person will get back to you soon.

Get in touch