Haven Smith & Company
Component Library
These are the parts I build every page of this site from. Each one is tested on its own and used again wherever its job comes up. Every entry shows the part, says what it is, and says when I reach for it, so you can see how a small set of parts holds a whole site together.
Start here
01.1What this is
This is the working set of parts I build every page of this site from. Each one is a component, a piece of a page with one job. I build it once, test it, and use it again wherever that job comes up. When I need something new, I check here first, and I add to the set only when nothing here does the job.
01.2How I sort the parts
I sort the parts by size, the way atoms make molecules and molecules make organisms. An atom is the smallest useful piece, such as a chip. A molecule joins a few atoms into one small tool, such as the sign-up form. An organism is a whole band of a page, such as the hero. Each entry names its level, says what the part is, and says when I reach for it.
- FoundationWhat every page loads first.
- AtomThe smallest piece that still does a job.
- MoleculeA few atoms working as one small tool.
- OrganismA whole band of a page.
01.3Where the rules live
The rules underneath every part, such as color, type, spacing, and motion, live in my design language. The two pages work together. The design language says why, and this page shows the parts that follow those reasons.
Template base
LevelFoundation
02.1What it is
The template base is everything a page needs before its first section: the colors, the type, the page edges, the bands, the eyebrows, the headings, the buttons, the motion, and the one script that runs them. Every page on this site starts from it, so a heading on the Shop looks and behaves exactly like a heading on the homepage.
02.2When I use it
I put it at the top of every new page. Nothing else in this library works without it, and everything you see on this page sits on top of it.
Drawing panel
LevelAtom
03.1What it is
A drawing panel holds one thin line drawing on a warm ground and fills its box. The lines draw themselves in as the panel comes into view, and a little mocha color fades in after them. If you have asked your device to reduce motion, you see the finished drawing straight away.
03.2When I use it
I use a drawing panel wherever a picture stands for an idea, such as the carousel cards, the Connect strip, and the shop.
Header and menus
LevelOrganism
04.1What it is
The header stays at the top of the window as you scroll. My logo sits on the left with the menu beside it, and two small line icons sit on the right: Aa for display settings and the cart. Each menu opens with an italic line that says what the section is for, then its links. On a phone, the menu button opens a full screen menu with each section as a large serif heading.
04.2When I use it
The header is on every page of the site. I build it once from one list of links, so a new page appears in every menu at the same moment.
Social links
LevelMolecule
05.1What it is
This is one list of social links, each with a small line icon: LinkedIn for me, LinkedIn for the company, Pinterest, YouTube, Spotify, X, Instagram, and Facebook.
05.2When I use it
The same list appears in the Connect menu, the phone menu, and the footer. Because the list lives in one place, a new account shows up in all three at the same time. You can see it in the footer at the bottom of this page.
Footer
LevelOrganism
06.1What it is
The footer closes every page. It carries the brand block, columns that mirror the menu with an italic line under each heading, the social links, the copyright line for Haven Smith, LLC, a note that the company is woman-owned, and a link to Legal.
06.2When I use it
There is one footer for the whole site, and it is set in one place. I never paste a footer into a page, which is why every page ends the same way.
Chat with me
LevelOrganism
07.1What it is
Chat with me is a dark round button in the bottom right corner of every page, marked with the H from my logo. It opens a chat window in the same corner, or a full screen under the header on a phone. Answers sit on a soft mocha ground, your words sit on the right, and a few question ideas sit under the first answer.
07.2When I use it
It is on every page, so a question about your digital life, the shop, or working with me always has somewhere to go.
Display settings
LevelOrganism
08.1What it is
The Aa icon in the header opens a panel of reading settings: text size, line spacing, contrast, theme, reduced motion, and underlined links. Your choices are remembered on your device, so every page opens the way you set it.
08.2When I use it
It is on every page, in the same place in the header. You can try it now: press Aa at the top of this page, change a setting, and watch this page follow.
Half-and-half hero
LevelOrganism
09.1What it is
The hero splits the top of a page down the middle. The words sit on the left: a short eyebrow, a large serif headline, a sentence that says what the page offers, a free offer, and the sign-up form. A photograph fills the right half out to the edge of the window.
09.2When I use it
I use it at the top of a page whose main job is to grow my email list, such as the homepage.
Sign-up form
LevelMolecule
10.1What it is
The sign-up form is Squarespace's own newsletter form, dressed to match the site. The labels sit above the fields, and the first name field, the email field, and the button are all one width. After someone signs up, the form gives way to a short thank-you.
10.2When I use it
I use it inside the hero and in any band that offers something free by email.
Experience ticker
LevelMolecule
11.1What it is
The ticker is a black bar with my years of experience on the left. On the right, the places I have worked and taught move slowly across in white serif type, and a square button pauses them.
11.2When I use it
I use it directly under a hero, on the homepage and the Shop, where a new visitor is deciding whether to trust me.
Full-bleed half
LevelOrganism
12.1What it is
This band comes in two halves. A line drawing fills one half from top to bottom and out to the edge of the window, and the words sit centered in the other half. The words end in an italic callout with a short mocha rule.
12.2When I use it
I use it for a story told in a few paragraphs, such as why I wrote the book.
Counter strip
LevelOrganism
13.1What it is
The counter strip is a dark band with an eyebrow and a heading, then a row of large serif figures with a fine line between each one. Each figure has a short caps line under it, and the sources sit in small print under the row.
13.2When I use it
I use it when a few numbers make the case better than a paragraph, and every figure carries its source. On a phone, the figures stack with a line between each.
Flip cards
LevelMolecule
14.1What it is
Flip cards turn over on a click, a tap, or the keyboard, never on hover. The front is a solid block of color with a caps label, a serif title, and a large serif numeral. The back carries the detail, and every card in a row is the same size.
14.2When I use it
I use flip cards for a short set of ideas a reader can explore one at a time, such as what is inside the book.
14.3Try one
Black statement band
LevelOrganism
15.1What it is
This black band carries one large statement, with an italic phrase in a light mocha and a very large mocha quotation mark in the top right corner.
15.2When I use it
I use it for what people say about my work, with the person's name under a short rule, and for a single pull quote from the book.
Manual carousel
LevelMolecule
16.1What it is
The carousel shows one card at a time: a drawing on the left, then an eyebrow, a serif title, a line of text, and a button. Square previous and next buttons sit under the card with the count between them.
16.2When I use it
I use it for a short run of offers, such as Work with me and the free downloads. It moves only when someone presses a button, and every card is the height of the tallest, so nothing below the carousel jumps.
Connect strip
LevelOrganism
17.1What it is
The Connect strip comes in two halves, with the words and one button on one side and a drawing panel on the other. Either side can lead, and the strip can sit on white, a warm gray, or black.
17.2When I use it
I use it near the end of a page to invite one next step, such as getting in touch.
Bio
LevelOrganism
18.1What it is
Every short bio on the site uses this part. The words sit in one column on a warm gray, with a small round portrait in the left margin beside the heading. The text opens with a large first letter and ends with my signature in italic serif and one link.
18.2When I use it
I use it wherever a page needs to say who I am in a few paragraphs.
Chips
LevelAtom
19.1What it is
A chip is a small square toggle in a row of choices. It is outlined in ink, lifts a little when a pointer rests on it, and fills with ink when it is chosen, so the choice is clear without relying on color.
19.2When I use it
I use chips to filter a page, such as the topics on the Case studies index.
Shop section head
LevelMolecule
21.1What it is
The section head is an eyebrow, a serif heading, and a short lede that runs the full width of the column.
21.2When I use it
I use it at the top of every Shop section, so each section opens the same way.
Shop hero
LevelOrganism
22.1What it is
The Shop hero is the half-and-half hero with a black drawing panel in place of the photograph. One line drawing at a time draws itself in and then gives way to the next, and a square button pauses the drawings.
22.2When I use it
I use it at the top of the Shop.
Featured product
LevelOrganism
23.1What it is
This band gives one product the whole width: a white card on beige with a flat lay on the left. The right side lists the parts the product holds, each with its format, then a bonus and a price bar with one button.
23.2When I use it
I use it for the one product I most want a visitor to see first.
Product pricing card grid
LevelOrganism
24.1What it is
These are the shop teaser's product cards with a price and a buy link added. A card can be dark, carry a number, or show a wide drawing across the card.
24.2When I use it
I use the grid for the main run of products in the Shop, two across on a computer and one across on a phone.
Carousel strip
LevelMolecule
25.1What it is
The carousel strip is the manual carousel on beige, with a section head above it and a large drawing and a button in each card.
25.2When I use it
I use it for a run of facts about one thing, such as what comes with a product.
Single product
LevelOrganism
26.1What it is
This band shows one product in two halves: the words and a ticked list on the left and a deal panel on the right. The panel holds the price or a drawing, then the button, with a line of small print under the button.
26.2When I use it
I use it for a product that needs a band of its own, such as a session.
Case study hero and quick facts
LevelOrganism
27.1What it is
Every case study opens with this band. A charcoal band carries the breadcrumb, the study's line drawing as a white icon, a headline that says what I built and why, a short summary, and a See prototype button. A beige strip under the band gives the quick facts in four equal columns: client, my role, focus, and result.
27.2When I use it
I use it at the top of every case study, so a reader knows what I built and what came of the work within the first screen.
Case study flip cards
LevelMolecule
28.1What it is
These are white flip cards on a beige band. The front shows a large serif number, the title, and Turn over, and the back shows the title small with the story under it.
28.2When I use it
I use them for the steps I took and the results that followed. Rows stay balanced, with three across for three, six, or nine cards and two across for two or four.
Prototype in a device
LevelOrganism
29.1What it is
The clickable prototype sits inside a phone or browser frame drawn in a fine light line. The frame scales the prototype to fit the column and the window, an Open full screen link sits under the device, and a numbered list of things to try sits beside the device.
29.2When I use it
I use it in every case study that has a working prototype, so a reader can try the work instead of only reading a description.
Style guide section
LevelOrganism
30.1What it is
This is a small style guide for a prototype's brand. Color swatches show each name, hex value, and use. A type scale shows each role with a live sample, the main components sit in outlined cards, and a plain list of principles closes the section.
30.2When I use it
I use it when a case study includes a brand I designed, so a reader can see the system behind the screens.
Case study close
LevelOrganism
31.1What it is
This is the last band of every case study, a strip in two halves. The charcoal half asks Still curious? and links to every case study, and the beige half invites you to get in touch.
31.2When I use it
I use it to end every case study with two clear next steps.
Case studies index
LevelOrganism
32.1What it is
This is the Case studies grid with its sort and filter bar. One button opens a panel of topic chips and sort choices, and the chosen topics show as small ink tags above the grid. Each card has a line drawing on a tile of black, light mocha, charcoal, or beige.
32.2When I use it
I use it on the Case studies page, so a reader can find the work closest to their own problem.
Changelog
33.1Versions
- 1.0This is the first public edition of my component library. It follows design language 1.8.