Design System
The Society’s design system: the components the website and documents are built from. The full rules live in the Brand Guidelines.
What Is a Design System?
A design system is the Society’s single source of truth for how our website and materials look and work. It collects the colors, fonts, and reusable parts that every page is built from, so the whole site stays consistent — and so anyone building a page for the Society can make it look right the first time.
Style Guide and Components
The style guide is the rulebook: the Society’s colors, typography, and standards for how things should look and read. Components are the ready-made building blocks built from those rules — buttons, cards, form fields, and the shared navigation and footer — used as they are, so every page matches.
What’s in Each Section
- Getting Started — this overview: what the design system is and how this page is organized.
- Brand Guidelines — the Society’s full brand rules in one document.
- Logos (under Brand Guidelines) — the Society seal, where it is used, and the rules for using it.
- Colors — every brand color, with its hex value and where it is used.
- Fonts — the Society’s typefaces, and the sizes and styles for headings, body text, captions, labels, and buttons.
- Style Guide — opens the full Brand Guidelines document, where the complete style rules live.
- Emails (under Templates) — the Society’s email templates and their shared layout.
- Buttons (under Components) — every button style, and the rules for using them.
- Cards and Panels (under Components) — the boxed layouts used to group content on a page.
- Form Fields (under Components) — how form labels, help text, and fields are built.
- Badges (under Components) — the small pills that mark a page members-only or a feature coming soon.
- Navigation and Footer (under Components) — the site header, menus, and footer that every page shares.
- Accordions (under Components) — the opening and closing panels that hold long or repeating sections.
- Shop (under Components) — the shop toolbar (Filter drawer and View dropdown) and the product card.
- Glossary — what the words used across the site and this system mean.
The full rules for how the Society presents itself — colors, typography, icons, voice, and components.
View the GuidelinesLogos
The Society has one logo — its seal — and it is used whole, everywhere the Society presents itself.
Society Seal
The seal is the Society’s primary logo — the Mayflower under full sail, ringed by the Society name and the words Determination · Legacy · Family.
Seal on Navy
On dark backgrounds the seal sits on navy, where its gold ring and banner carry the contrast.
Favicon
The favicon is the small seal shown in browser tabs and bookmarks.
Do
- Keep the seal whole and round — never crop it into another shape.
- Give the seal clear space on every side.
- Place the seal on navy, cream, or white.
Don’t
- Stretch, squash, or recolor the seal.
- Set the seal on a busy photo or a clashing color.
- Redraw the seal, or add words to it.
Colors
| Swatch | Color | Hex |
|---|---|---|
| Navy | #0f284e | |
| Blue | #1e3d73 | |
| Cream | #f7f1e6 | |
| Cream Alt | #f1e9d8 | |
| Ink | #201a10 | |
| Gold | #b08d2f | |
| Gold Light | #cba847 | |
| Gold on dark | #ddc06a |
Typography
H1 — Page title
H1 · Playfair Display · 30–36px
Playfair Display · 30px, and 36px on larger screens · weight 400 · line height 36px / 40px · Navy
H2 — Section heading
H2 · Playfair Display · 24px
Playfair Display · 24px · weight 400 · line height 32px · Navy
H3 — Subsection heading
H3 · Playfair Display · 20px
Playfair Display · 20px · weight 400 · line height 28px · Navy
H4 — Card heading
H4 · Playfair Display · 18px
Playfair Display · 18px · weight 400 · line height 28px · Navy
H5 — Small heading
H5 · Playfair Display · 16px
Playfair Display · 16px · weight 400 · line height 24px · Navy
H6 — Eyebrow heading
H6 · Inter · 12px
Inter · 12px · weight 600 · line height 16px · uppercase, letter spacing .12em · Navy
Body
The Society keeps the story of Edward Doty and his descendants — their genealogy, their history, and their gatherings.
Inter · 16px · weight 400 · line height 1.625 (26px) · Body gray
Body small
The Society keeps the story of Edward Doty and his descendants.
Inter · 14px · weight 400 · line height 20px · Body gray
Caption
The Mayflower at Plymouth Harbor. Photo: Desarae Veit, 2017.
Inter · 12px · weight 400 · line height 16px · Body gray · sits under every photo
Form label
Email (Required)
Inter · 14px · weight 600 · line height 20px · Navy · required spelled out in words
Button
Join the Society
Inter · 14px · weight 600 · line height 20px · Navy on Gold (primary button)
Link in text
Read more in the Society newsletter.
Inter · 16px · Blue #1e3d73 · underlined, gold on dark backgrounds
Footer heading
Resources
Playfair Display · 20px, and 24px on larger screens · weight 400 · Cream on Navy
Footer text
News and updates from the Society, three times a year.
Inter · 14px · weight 400 · line height 20px · Cream at 75% on Navy
Components
Buttons
Buttons are for actions — submitting, opening, closing, confirming — never for going to another page.
Primary button
The primary button is the gold pill for the one main action in a view, with navy text that lightens on hover.
Secondary button
The secondary button is the navy pill for supporting actions, with cream text.
Tertiary button
The tertiary button is the outline pill for quiet actions — navy on light backgrounds, white on dark ones.
Add button
The add button repeats a block — an outline pill with a leading plus, sized to its text on desktop and full width on mobile.
Move-forward button
The move-forward button carries a step to its next screen — the gold pill, ending with an arrow.
Back button
The back button returns to the step before — an outline pill that starts with a left arrow.
Close button
The close button dismisses a panel or pop-up — a small circle with an ×, like the one on the join panel.
Do
- Use a real <button> element for every action — submit, open, close, toggle.
- Give each view one primary (gold) button; other actions stay secondary or tertiary.
- Say what the button does — “Join the Society,” not “Click here.”
- Capitalize the first letter of every word in a button label — “+ Add Another Generation,” “Contact the Historian.”
- End a move-forward button with an arrow — “Continue →” — and start an add button with a plus.
Don’t
- Make a button out of a link — if it goes to another page, it is a link, styled as a link.
- Use blue buttons, or underline button text.
- Put two primary buttons next to each other.
- Repeat the same call to action twice in one view — one Contact button, not two.
- Stack buttons so they touch — leave clear space between buttons.
Cards and panels
Cards group everything about one topic into a single bordered block, padded so nothing touches the edge.
Card
A card holds one topic on a white surface with a soft border and rounded corners, its icon sitting left of the heading.
Empty-state card
An empty-state card marks content that is on its way, on Cream Alt with a dashed gold border and centered text.
Member join panel
The member join panel is a white card with a navy header band that floats over the page and closes from the top right.
Do
- Pad every card (24px) so text, images, and buttons never touch the edge.
- Keep one topic per card, and link the card’s heading to its page.
- Use the empty-state card when content is still on its way.
Don’t
- Crowd two topics into one card.
- Let text, images, or buttons run to the card’s edge.
- Invent content to fill a card — mark it Coming Soon instead.
Form fields
Form fields collect a visitor’s information, and every field carries a visible label that says what to enter.
Form field, on navy (footer newsletter)
The footer newsletter field sits on navy with a translucent white fill, a cream border, a pill shape, and cream text.
Form fields, on light
Light-background fields use a white surface and gray outline, bold navy labels, required spelled out in words, and a blue focus ring.
Date Field
The date field is a date picker for a single date, like a birth date or a death date.
Checkbox
The checkbox is a single yes-or-no choice — checking the box means yes, and leaving it empty means no.
Radio Buttons
Radio buttons offer two or more choices where exactly one is picked — picking one clears the others.
Full Name
The full name component is one field for a person’s whole name, used where the parts are not needed separately.
First and Last Name
The first and last name components split a name into two fields, used where records are sorted or filed by last name.
The email component is one field for the address the Society replies to.
Telephone
The telephone component is one field for a phone number, and it brings up the number keypad on phones.
Address
The address component is one grouped component — street, city, state, and ZIP together — so an address is always collected the same way.
Do
- Label every field in words, and spell out (Required) on required fields.
- Group long forms into sections with their own headings.
- Give every label 15px of space above it and 5px below it.
- Put short help text between the label and the field — say what to enter and why; never start with “Required” and never say “confirm.”
- Hide longer help behind a ? tooltip — a white question mark in a filled blue (#1e3d73) circle right after the label; only one tooltip is open at a time.
- Make long or repeating sections accordions that start open; adding a new block collapses the blocks before it.
- When a block carries a person’s name, use it in the related labels — “John’s mother (full name, maiden name).”
- Send each form’s submissions to the officer who owns them.
Don’t
- Use placeholder text as a field’s only label.
- Ask for information the Society will not use.
- Mark a field required without saying so in its label.
Badges
Badges are small pills that mark what a page or feature is — members-only, or coming soon.
Coming Soon badge
The Coming Soon badge is a small pill with Gold Light text and border, sitting on navy.
Members Only badge
The Members Only badge is a navy pill with cream text that links to the login page.
Do
- Put the Members Only badge on members-only pages, near the top.
- Link the Members Only badge to the login page.
Don’t
- Link the Members Only badge anywhere but the login page.
- Use the Coming Soon badge on anything that is already live.
Navigation and footer
Breadcrumbs and icons help visitors find their way and say where they are.
Breadcrumb
The breadcrumb is a Cream Alt bar that shows where the page sits — gray links, with the current page in navy.
Footer social icon buttons
Footer social buttons show the real brand icons in yellow gold on navy.
Skip-to-content link
The skip-to-content link stays hidden until a keyboard user tabs to it, then appears gold on dark.
Do
- Keep the menu order the same on every page — Home, News, About, Events, Genealogy, Shop.
- The seal always links to the home page.
- Add every new page to the sitemap and the footer.
Don’t
- Rename a menu item from page to page.
- Leave a page out of the navigation and the sitemap.
Full component guidance — what each component is, how to use it, and do / do not — is in Section 18 of the Brand Guidelines.
Accordions
Accordions hold long or repeating sections in panels that open and close, so a page or form stays one screen at a time.
Do
- Use accordions for long or repeating sections — one block per person on the lineage form.
- Start each accordion open, and collapse the earlier blocks when a new one is added.
- Name the accordion for what it holds — a person’s name, when the block carries one.
Don’t
- Hide required fields inside a closed accordion.
- Use an accordion for a short section that fits on one screen.
Shop
The shop components present the Society’s products — the toolbar that filters and arranges them, and the product card each one is shown on.
Filter drawer
The Filter button opens a drawer of product categories, and the chosen category shows as a navy chip with an × that clears it.
Books
View dropdown
The View dropdown sets how many product columns show — 1, 2, 3, or 4. Phones start at 2 columns; desktops start at 4, the only place 4 is offered.
Product card
The product card shows one product — its photo, name, price, a short description, and its buy button — the same way for every product in the shop.
Society Seal Mug
$17.99
The Society seal on a ceramic mug.
Buy in Our Store
Do
- Keep Filter and View on one line above the products.
- Show the active filter as a removable chip.
Don’t
- Leave the category buttons open all the time — they belong in the drawer.
- Let a product card skip its price or its buy button.
Glossary
What the words used across the site and this design system mean.
- Accordion
- A panel that opens and closes when its heading is clicked, so long content stays compact until it is needed.
- Badge
- A small pill that marks what a page or feature is — members-only, or coming soon.
- Brand Guidelines
- The document that records the Society’s brand — its seal, colors, fonts, and the rules for using them.
- Breadcrumb
- The trail near the top of a page that shows where the page sits, such as Home / Genealogy / Edward Doty.
- Card
- A bordered box that groups one item — a product, a person, or a sample — with its image, text, and button.
- Component
- A ready-made building block of the site — a button, card, or form field — built once and used the same way everywhere.
- Design System
- This page — the single source of truth for how the Society’s site looks and works, its style guide and its components together.
- Drawer
- A panel that stays hidden until a button opens it, like the shop’s Filter drawer.
- Filter
- A control that narrows a list to one kind of item, like the shop’s Books filter.
- Form Field
- One labeled box where a visitor types or picks an answer on a form.
- Members Only
- Content locked to signed-in members; pages that carry it show the Members Only badge and open with the member password.
- Pill
- A button or badge with fully rounded ends — the shape the site uses for its calls to action.
- Product Card
- The shop card for one product — its photo, name, price, description, and buy button.
- Style Guide
- The rulebook half of the design system — colors, fonts, spacing, and how each element is used.
- Template
- A ready-made page layout, like the email templates, that new pages start from.
- View
- The shop control that sets how many product columns are shown — 1, 2, 3, or 4.