Tally's visual system reads as 'notebook doodles on warm paper' — a quiet, editorial interface where a warm gray canvas (#e0e0df) carries white card surfaces and almost everything else steps out of the way so that one vivid magenta-pink (#f81ce5) can do the emotional work. That pink is reserved for illustration strokes, icon outlines, and the occasional decorative border on a feature card — it never fills a button. Conversion is handled by a single classic blue (#0070d7), keeping brand expression and action expression separate. Typography is Inter in a wide weight range, tracked tight at -0.031em, with a 64px display headline that feels closer to a magazine masthead than a SaaS hero. Hand-drawn squiggles, underlines, and star/confetti motifs float around the margins, turning the page edges into a sketchbook rather than leaving them as dead space. Cards are flat white on warm gray with a subtle warm-tinted shadow stack, rounded at 10px, and the overall rhythm is comfortable — generous gaps, centered hero, then 2-up feature columns.
#f81ce5Pink decorative accent for icons, marks, and small graphic details. Do not promote it to the primary CTA color; Decorative focus-ring and glow tint used to draw the eye to a highlighted feature card, applied as a soft 2–4px outer ring rather than a fill
#0070d7Primary action buttons only — the lone chromatic fill in the system, used to mark conversion moments without competing with the magenta brand mark
#f81ce0Underline and streak flourishes under display headlines — a short linear sweep from violet to magenta that replaces the traditional squiggle
#37352fPrimary text, heading fills, and the dominant dark border color across cards, body elements, and form chrome. A warm near-black rather than pure black
#e0e0dfPage canvas — the warm light-gray background that all white card surfaces sit on. The signature surface of the system
#ffffffCard surfaces, form previews, input fields, and icon fills on the canvas. Provides the only bright surface layer
#f3f3f3Subtle elevated or muted surface for secondary panels, code blocks, and hover washes — a half-step darker than pure white
#898884Secondary text, helper copy, and tertiary borders on icons and body elements
#777672Muted borders, inactive dividers, and low-emphasis strokes for icons and form elements
#45433eDark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color
#000000Heading borders, the dark header CTA button fill, and the highest-contrast button text — reserved for moments that need maximum weight
64px · 700 · 1 · -1.98px trackingThe quick brown fox jumps
36px · 700 · 1.15 · -1.12px trackingThe quick brown fox jumps
30px · 700 · 1.25 · -0.93px trackingThe quick brown fox jumps
26px · 800 · 1.25 · -0.81px trackingThe quick brown fox jumps
22px · 500 · 1.25 · -0.68px trackingThe quick brown fox jumps
18px · 800 · 1.5 · -0.56px trackingThe quick brown fox jumps
16px · 400 · 1.5 · -0.5px trackingThe quick brown fox jumps
15px · 400 · 1.8The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
The only typeface across the entire system. Used for display headlines at 64px weight 800, section headings at 30–36px weight 700, subheadings at 22–26px weight 600, body at 16–18px weight 400–500, and caption/label at 13–14px weight 500. The tight -0.031em tracking and high x-height make it read like a serif replacement at display sizes.
7px10px7px7px9999px4px5px6px7px8px10px12px14px16px20px24px30px32px64px100px113px192px195pxBlue (#0070d7) filled, white text, Inter 15px weight 500, 7px radius, 6px vertical and 14px horizontal padding. No border. Often paired with a right-pointing arrow glyph in white.
Black (#000000) filled, white text, Inter 15px weight 500, 7px radius, 6px vertical and 14px horizontal padding. Reads as a secondary action to the blue CTA but stays high-contrast against the Paper canvas.
Black (#000000) filled, white text, small size, 7px radius, paired with a white arrow glyph.
White (#ffffff) surface, 10px radius, with the four-stack warm shadow: 1px hairline + 1px border + 3px/9px blur + 2px/5px blur. Includes macOS-style window dots and an inline editable title in Inter 30px weight 700.
White surface, 10px radius, soft single-layer shadow (rgba(0,0,0,0.09) 0px 3px 12px 0px), 24px internal padding. Magenta-pink icon glyph (1.5px stroke) sits at the top-left in #f81ce5. Heading 22px weight 700 in Ink, body 16px weight 400 in Graphite.
White surface, 10px radius, wrapped in a 2px solid #f81ce5 outer ring + 4px rgba(248,28,229,0.36) glow. Heading rendered in Magenta (#f81ce5) rather than Ink to reinforce the accent.
Charcoal (#45433e) text with a 1.5–2px underline in the same color. No box, no background — pure inline text. Often wraps a phrase like 'fair usage guidelines' or 'no-code conference'.
White fill, 1px Ash (#777672) border, 7px radius, 8–10px vertical padding, placeholder text in Graphite (#898884). No focus ring color observed in the hero, suggesting a subtle 1px border darkening on focus rather than a glow.
Logos rendered in Ink (#37352f) monochrome at 20–24px height, evenly spaced with 24–32px gaps. No cards, no borders — logos float directly on the Paper canvas.
Black (#000000) filled, 7px radius, white text 13px weight 500, a small trophy icon at 14px in Magenta (#f81ce5) or yellow. Vertically centered in its own row.
1.5–2px stroke in Ink (#37352f) for faces, speech bubbles, and arrows. 1.5px stroke in Magenta (#f81ce5) for confetti, stars, sparkles, and accent marks. Never filled, never colored — line art only. Some underline flourishes use the Purple-to-Pink linear gradient sweep.
Either a 2px Magenta squiggle stroke or a Purple-to-Pink linear-gradient sweep clipped to an underline shape, 40–60% the width of the underlined word, with a slight horizontal offset.
#e0e0dfPage canvas — the warm gray background behind every section
#ffffffCard and form-preview surfaces that sit on the paper canvas
#f3f3f3Secondary elevated surfaces, code snippets, and quiet hover states
rgba(0,0,0,0.12) 0px 1px 1px 0px, rgba(61,59,53,0.16) 0px 0px 0px 1px, rgba(61,59,53,0.08) 0px 3px 9px 0px, rgba(61,59,53,0.08) 0px 2px 5px 0px
rgba(0,0,0,0.09) 0px 3px 12px 0px
0px 0px 0px 2px #f81ce5, 0px 0px 0px 4px rgba(248,28,229,0.36)
The page is centered and max-width contained at ~1200px, with a full-bleed Paper (#e0e0df) canvas behind everything. The hero is a centered stack: a 64px display headline, a 2-line subhead at 18px, a single blue CTA, a micro-helper line, then a wide white form-preview card directly beneath. Below the hero the page drops into a centered logo bar, a Product Hunt badge row, and then a left-aligned 2-column feature section. Further down, a 2-up grid of feature cards (highlighted card on the left with a pink border, standard card on the right) appears, followed by another 2-up row of standard cards. Vertical rhythm is comfortable: roughly 64px between major sections, 24px between a card heading and its body, 8px between a body line and its supporting meta. Navigation is a minimal top bar — wordmark left, text links and a dark button right — with no sticky behavior, no mega-menu, and no sidebar.
The visual language is illustration-led, not photography-led. The dominant graphics are hand-drawn line-art doodles — faces, speech bubbles, squiggles, stars, confetti, sparkles, and arrows — rendered at 1.5–2px stroke in Ink (#37352f) for the main outlines and Magenta (#f81ce5) for accent marks. Doodles float freely in the page margins around the hero and feature sections, never cropped or masked, giving the impression of a hand-sketched notebook. The only product imagery is a single in-browser form preview rendered as a chrome-windowed white card. There is no lifestyle photography, no 3D, no abstract gradients used as backgrounds. Icon style is consistent with the doodles — outlined, 1.5px stroke, mono, brand-colored in Magenta on feature cards. Imagery is decorative atmosphere first, explanatory content never — the real information is carried by typography and white card surfaces.
## Quick Color Reference - Text: #37352f (Ink) - Background (page): #e0e0df (Paper) - Background (card): #ffffff (White) - Border (default): #777672 (Ash) / #37352f (Ink) for emphasized - Accent (decorative/illustrative): #f81ce5 (Tally Magenta) - primary action: #0070d7 (filled action) ## Example Component Prompts 1. **Hero with display headline** — Centered stack on #e0e0df canvas. Headline at 64px Inter weight 800 in #37352f, letter-spacing -1.98px, with a 2px #f81ce5 hand-drawn squiggle under one keyword. Subhead at 18px Inter weight 400 in #777672. Blue primary button (#0070d7 fill, white text, 7px radius, 6px 14px padding) with a right arrow glyph. Beneath: a white 10px-radius form-preview card with the four-stack warm shadow. 2. **Standard feature card** — White surface, 10px radius, 24px padding, single-layer shadow rgba(0,0,0,0.09) 0px 3px 12px 0px. Magenta #f81ce5 outlined icon (1.5px stroke) at the top-left. Heading 22px Inter weight 700 in #37352f. Body 16px Inter weight 400 in #777672. Optional inline links in #45433e with a 1.5px underline. 3. **Highlighted feature card** — Same base as a standard card but wrapped in a 2px #f81ce5 outer ring plus a 4px rgba(248,28,229,0.36) glow. Heading rendered in #f81ce5 instead of Ink. Reserved for the one card per row that needs to pull the eye. 4. **Logo bar row** — Centered single row on the Paper canvas, no card, no border. Five monochrome logos in #37352f at 20–24px height, evenly spaced with 24–32px gaps. Optional 'Powering 500,000+ teams' label at 13px Inter weight 500 in #777672 sits above the row. 5. **Dark header button** — Black #000000 fill, white text, 15px Inter weight 500, 7px radius, 6px 14px padding. Sits in the top-right of the nav bar next to ghost text links in #37352f.
The system enforces a strict separation between brand expression and conversion: Magenta (#f81ce5) is the voice — it appears in illustrations, icon strokes, decorative borders, and the occasional highlight ring; Blue (#0070d7) is the action — it appears only on filled primary buttons. No screen should ever use Magenta as a button fill, link color, or large background. No screen should ever use Blue decoratively. This split is the core of the visual identity: the page feels playful and human because Magenta is free to be expressive, while conversion moments stay calm and unmistakably clickable because Blue is reserved and rare.
Same warm-paper canvas with a single chromatic brand color used illustratively, paired with a neutral button — though Typeform leans coral/purple rather than magenta.
Same editorial Inter-on-warm-gray approach with minimal elevation, hand-feel doodles, and feature cards built on white surfaces with soft warm shadows.
Same tight Inter tracking at display sizes, clean white-card-on-gray hierarchy, and a single chromatic accent reserved for brand expression rather than buttons.
Same form-builder-adjacent product category with a minimal chromatic palette, flat white feature cards, and a clear separation between brand color and action color.
Same magazine-masthead headline treatment with 60px+ Inter display type, centered hero rhythm, and doodle-style accent marks in the margins.
Use the design exports or connect Musterlab to your AI.
