Entries tagged not in tools/tokens yet are 10 colours and 1 radius the design system adds that the repo does not define. They are the list to promote into tools/tokens/; until then each is an unreviewed decision.

Wordmark · AMOLEO · Product

The Amoleo · Product mark, built from three classes that always appear together: .brand-wordmark (the whole mark), .brand-dot (separator, aria-hidden) and .brand-suffix (the product name).

Consumer provides: the product name as the suffix, and data-product (or a --wordmark-accent) so the dot and suffix take that product's accent.

• AMOLEO is always brand-amoleo, never text-strong and never a product accent.
• Dot and suffix take the product's brand-* colour, at 0.79em of the name.
• Set the size per context, never on the base class: 36px pre-auth header, 28px post-auth header, 24px footer.
• Align items by centre, not baseline. Where the pair sits visibly off in a browser, correct both glyphs by the same measured pixel value, not an independent em.
• Cross-links underline .brand-suffix on hover, never the whole anchor or the dot. The current site's own name is plain text, not a link.
• In running prose use .inline-mark (0.95em, inline-flex, line-height 1, vertical-align: middle). The dot and suffix are centred with the name and need no per-glyph offset. This differs from family-css's wordmark.css (0.85em with a -0.132em nudge, which rendered the suffix tiny and high); fold it back there before relying on it in a repo.

Amoleo Dark

Amoleo Light

Button · Hero and quiet pills

Pill buttons: .btn plus .btn-hero (accent fill) or .btn-quiet (outline).

Consumer provides: the label and, for .btn-hero, an --accent / --on-accent pair through data-product.

• One .btn-hero per view for the primary action; everything else is .btn-quiet.
• Height is at least touch-target (44px); labels are 15px semibold, 16px at 780px and below.
• Do not hard-code an accent hex. A product whose white-on-accent pair misses 4.5:1 (Pets, Upnext, Games) redefines on-accent rather than re-tinting the brand.
• Pills are for compact controls only. Containers use radius-card or radius-lg.

Amoleo Dark

Amoleo Light

Visibility Globe · Blue is public, grey is off

The public-sharing toggle. A blue globe means sharing is on; a grey globe means it is off. The meaning is the same in every product.

Consumer provides: the item's state, an accessible name that states the state and the action, and whether a change saves immediately or needs Save.

• Never colour the globe with the product accent. Blue is globe-on (#1976d2 light, #64b5f6 dark, chosen by the rendered surface, not the OS preference); grey is globe-off.
• An interactive globe is at least 44px, shows a visible focus ring and sets aria-pressed. A decorative status globe beside a labelled action is aria-hidden.
• Explain it once: "Press a globe to change what is shared. A blue globe means sharing is on; a grey globe means it is off."
• Keep permission, moderation and consent gates; if sharing is blocked by another gate, say why beside the control.
• Turning a profile off belongs with visibility settings, not a danger zone: say what stops being public and what saved data is kept.

Amoleo Dark

Amoleo Light

Auth Card · Sign in and create account

The shared sign-in and create-account box, copied into every repo that has one; Connections' .auth-card is the reference. Colour comes from the product's own --accent and --on-accent, never a literal hex.

Consumer provides: data-product, the wordmark suffix, the field set, and the validation state (aria-invalid="true" plus a .field-problem line).

• Class contract: .auth-card, .auth-tabs / .auth-tab / .active, .password-field / .password-toggle, .field-hint / .field-problem, .auth-error, .auth-submit, .auth-switch.
• Active tab and submit button take accent / on-accent. Everything else is neutral base theme.
• Errors always carry words: the danger edge on .auth-error is never the only cue.
• Two variants share this shell: the redirect card (heading, tagline, one .auth-submit link, a "Powered by Amoleo · Accounts" caption) and the terminal card (tabs and fields, Accounts' own sign-in only).
• At 780px and below every line is 16px and tabs and the password toggle are 44px high, so iOS does not zoom on focus.
• Known gap: input borders use border, which is below 3:1 against bg; the real source ships it that way.

Amoleo Dark

Amoleo Light

Header Logged In · Post-auth, desktop (.family-header-postauth)

The logged-in header on a wide screen: the Post-Auth Header, .family-header-postauth. This is the compact 28px bar: wordmark left, session actions right.

Consumer provides: an optional .tagline, the actions (a "Signed in as…" label plus button-styled actions), and the sticky decision, which is per repo.

• AMOLEO at 28px with a 22px suffix, left-aligned. Smaller than the logged-out header's 36px, never equal to it.
• 1px border underneath, a minimum height of 64px, actions at least 44px high.
• The actions row is .wide-only: below 768px a duplicate copy lives in the drawer instead (see Header Logged In Mobile).
• Actions here are session actions. A logged-in header carries no navigation. A repo with real in-app navigation to collapse would need a third pattern that no product has needed yet.
• A lighter public, read-only variant of the same shape drops the session actions and keeps the 28px wordmark.

Amoleo Dark

Amoleo Light

Header Logged In Mobile · Post-auth, mobile: closed and burger open

The logged-in header at 768px and below: the same .family-header-postauth bar, with its session actions moved into a drawer behind a burger.

Consumer provides: the session actions, which appear twice in the markup: an inline .wide-only row for wide screens and a copy inside the drawer. The copy is duplicated, not moved by script.

• The burger sits at the right edge, 44px, and opens the same right-hand drawer the logged-out header uses.
• With a burger, the wordmark steps down from 28px to 22px with a 17px suffix, because the full size overflows a 375px phone beside a 44px burger ("AMOLEO · CONNECTIONS" needs 348px of the 293px left). A header with no burger keeps 28px.
• The .tagline is hidden on a phone.
• In the drawer the actions stack full-width and the "Signed in as…" label shows as a line of its own, since a username beside the wordmark would compete for room.
• The drawer holds session actions only, never navigation.

Amoleo Dark

Amoleo Light

Header Logged Out · Pre-auth, desktop (.family-header)

The logged-out header on a wide screen: the Pre-Auth Header, .family-header. Everything before sign-in is one state: the hero wordmark plus, on pages that have one, the in-page sign-in card below the pitch. Not a separate login screen and not a modal.

Consumer provides: the nav links (or none) and the product's --accent. Website and Rissbrook show this header permanently, since neither ever signs anyone in.

• Centred, not sticky, 36px AMOLEO with a 22px suffix: the base 24px wordmark plus a 12px offset. Always larger than the logged-in header's 28px.
• The nav row is muted, going text-strong on hover. Nav items are links.
• A repo with no nav and no login renders neither element, just the wordmark.
• At 768px and below this header is replaced, not resized: see Header Logged Out Mobile. Only one of the two is ever in the accessibility tree.
• No variant is named "compact header" in the family docs. The compact one is the mobile bar and the logged-in bar, both 28px.

Amoleo Dark

Amoleo Light

Header Logged Out Mobile · Pre-auth, mobile: burger drawer and sign-in panel

The logged-out header at 768px and below (768 itself is still mobile): a compact sticky bar, .family-header-bar, that replaces the wide hero. Two shapes, chosen by what there is to reveal.

Consumer provides: either nav links (burger and drawer) or a sign-in form (login control and panel). A repo with both shows both triggers side by side.

• Wordmark at 28px with a 22px suffix, centred when stacked. Shows the same name as the wide header, never a smaller one.
• Burger and drawer: a 44px burger at the right edge opens an off-canvas drawer sliding in from the right, about 280px wide, with a backdrop. The drawer holds secondary nav links only. The burger never hides the login control.
• Login control and panel: a full-width outlined control in the accent colour sits on its own row under the wordmark, with a caret that flips when open. It drops down a sticky panel directly under the bar (no backdrop), holding the auth card without its own frame.
• Only a site with real nav content gets a burger. Rissbrook, with only a wordmark, gets neither control.
• Move focus into the drawer or panel on open and back to the trigger on close.
• In these previews the drawer is positioned inside its frame. Live, it is fixed to the viewport.

Amoleo Dark

Amoleo Light

Footer Compact · Compact, desktop (1025px and above)

The compact footer on a wide screen, .site-footer.compact: for a page that cannot spare the full footer's height (a map, a canvas, an editor). At 1025px and above the lockup, any notice and the copyright fold onto one wrapping row.

Consumer provides: the compact modifier on its own .site-footer, with the notice (optional), .family-mark-wrap and the copyright as direct children.

• Compact may drop optional supplementary prose only: a data-sources sentence, say. It never drops the lockup, a required third-party notice or the copyright line.
• The lockup moves first by order: -1 for display only. Document order stays notice, lockup, copyright, so wrapping always breaks between the lockup and its neighbours, never mid-row.
• Padding falls to 8px; prose rows tighten to a 1.35 line height. At 1024px and below only this tightening applies and the lockup keeps the standard stacking, so a tablet is not a separate shape.
• Nested one flex level deeper, the lockup needs its own -2px correction (the standard footer's -1.2px leaves a 0.81px residual).

Amoleo Dark

Amoleo Light

Footer Compact Mobile · Compact, mobile: swipeable strip

The compact footer at 560px and below. Yes, it exists: a fifth of a phone screen taken by five stacked rows is the cost compact is for, so the lockup becomes a single horizontally swipeable strip instead.

Consumer provides: the same .site-footer.compact markup as the wide compact footer.

• The row scrolls sideways with proximity snap. There is no width constraint beyond its own content, so the next name always peeks in; the peek is what signals "swipe", not an arrow.
• The edges fade with a 24px mask rather than hard-cropping a word. Padding is 0 28px.
• Name size and the 40px tap height are unchanged from the standard footer. Only the layout around them changes.
• A tap-to-collapse caret was tried first and reverted the same session: a toggle read as one more thing to work out, where a swipeable row invites the gesture on its own.
• The lockup is still complete, in order, with the copyright line below it.

Amoleo Dark

Amoleo Light

Footer Mobile · Standard, mobile (560px and below)

The standard footer at 560px and below: the lockup stacks into centred rows you can hit with a thumb.

Consumer provides: the same markup as the standard footer. The layout changes by CSS alone.

• .family-mark-wrap becomes a block so the rows span the footer. Without it they are only as wide as their words.
• Each name is a 40px-high row. That is what every adopted repo ships; WCAG 2.2 AA's floor is 44px, a recorded gap rather than a fix made here.
• The dot and suffix pair shifts 1em left within its row. This is an approved visual correction, not a token: the leading dot would otherwise make the centred string read as off-centre.
• The copyright stays a separate line below.

Amoleo Dark

Amoleo Light

Footer Standard · Standard, desktop

The standard family footer on a wide screen: the lockup Amoleo · Pets · Connections · Rissbrook · Accounts on one centred line, then a separate copyright line.

Consumer provides: the live product list in the fixed order from tools/lockup.json (oldest first, Accounts last), with the current site's own name as plain text, not a link.

• Wrap the lockup in .family-mark-wrap. Every .brand-dot is aria-hidden.
• The copyright names Amoleo and no product, in its own element.
• Accounts carries no status label.
• Wordmark at 24px, suffix and dot pinned to 19px with a measured 1.2px correction. Re-measure if the sizes change.
• Cross-links underline .brand-suffix on hover.
• Products in pendingApps stay out until promoted.
• Related: Footer Compact, Footer Mobile and Footer Compact Mobile are the other three shapes.

Amoleo Dark

Amoleo Light

AIBadge · AI Generated and AI Assisted

The AI transparency pill: shown wherever an AI generated or polished content. Two states, AI Generated (the model wrote it) and AI Assisted (a person wrote it, the model refined it). Fully human content gets no badge.

Consumer provides: which state applies, the product's edit threshold for flipping Generated to Assisted, and its disclaimer text.

• Subtle, like a watermark: pill outline, sparkle icon in inline SVG (never an image), label text.
• Generated uses ai-generated (cooler); Assisted uses ai-assisted (warmer). Both are PROPOSED values: the family spec leaves exact colours open until a product ships, so confirm them on first adoption.
• Both states carry the words as well as the colour.
• Visible to all users by default; editors and admins may hide it after review, per product.
• Pair with a plain disclaimer, e.g. "This article was AI-generated. Always consult a veterinarian for medical advice."

Amoleo Dark

Amoleo Light

Cookie Banner · Consent before loading

The cookie consent banner. Nothing optional loads until the visitor chooses; the choice is stored under cookieConsent.

Consumer provides: the copy, the two handlers, and a --wrap width (or a literal one). Only repos that actually set optional cookies need one.

• Decline and Accept carry equal weight: Decline is .btn-quiet, Accept .btn-hero. Never make declining harder than accepting.
• In production the banner is fixed 16px from the left, right and bottom at z-index: 50; check it against the repo's modal stack so it never floats over a privacy modal it opened.
• Below 560px the two buttons share the row equally.

Amoleo Dark

Amoleo Light

Page Logged Out Root · Logged-out root page, wide

The logged-out root page on a wide screen: a product page first and a sign-in surface second, composed from the family header, hero, three short sections and the footer. This is the default public-page language from docs/family-page-design.md, not a fixed template: products arrange the same ideas differently.

Consumer provides: the product's data-product, one concrete h1, the lead sentence, honest example data and three true sections. Every word here is placeholder copy.

• One h1 that says what the product is useful for in concrete terms, a specific user problem or outcome rather than brand language.
• One strong hero. On wide screens the auth card sits inside the hero beside the copy, not as the whole page. The reading order stays copy, action, example, then sign-in.
• Show the product with real components or honest static examples. Dummy data is allowed only when labelled ("Example data, not your account").
• Follow the hero with a few explanatory sections (three here), not a long catalogue. Claims match shipped behaviour, including opt-ins and caveats.
• Modules are panel on bg with a 1px border and radius-card (16px), padded 24px on mobile and 32px wider. Pills are for buttons and tabs only.
• Accent goes on the primary action, the sign-in tab, links and the step rings. It stays off body-size text: it fails 4.5:1 for several products in one theme or the other, so the eyebrow is muted with an accent rule.
• Width is about 1120 to 1200px with 20 to 24px gutters. Keep long copy to roughly 46 to 60 characters a line. Prose never goes below 16px.
• Hero imagery, where used, is decorative with empty alt and sits behind a local scrim. This preview uses none.
• Skip link, a focusable main and one h1 are part of the page, not optional extras.

Amoleo Dark

Amoleo Light

Page Logged Out Root Mobile · Logged-out root page, mobile

The logged-out root page at 768px and below. The pitch is not removed: it is rearranged. The hero's auth card leaves the page and moves into the family bar's sign-in control and panel, so sign-in stays reachable without interrupting the pitch.

Consumer provides: the same content as the wide page. Only the layout changes.

• The wide hero and in-page form give way to the compact sticky .family-header-bar with a full-width sign-in control. Tapping it drops the same auth card down as a panel (see Header Logged Out Mobile).
• Never hide the main pitch just because the sign-in box would fill the first screen.
• The hero stacks to one column, the three sections stack, and the h1 drops to about 30px.
• The footer is the standard mobile footer: stacked 40px rows.
• Touch controls stay at least 44px. Move focus into the panel on open and back to the control on close.
• Check the page at phone width, 768px, tablet and wide desktop, and measure contrast on the rendered page rather than the tokens.

Amoleo Dark

Amoleo Light