voiceflow.com

# Start here: voiceflow.com

Observed 2026-10-28T01:15:53.572Z; default light theme. This is a compact handoff, not the full evidence archive: everything you need to start is here, the detailed files are one step away.

## How to use this pack

1. Read `START_HERE.md` and `tokens.css` first: the priority values. Keep observed values; a value marked inferred or fallback is a suggestion to resolve against the screenshots.
2. Open `screenshots/desktop-1440-fold.png` and `screenshots/phone-390-fold.png` and match the composition, density, whitespace and image treatment; the values do not carry those. Treat the inside of an image or canvas as a visual inference, not measured DOM.
3. Read `FONTS.md` and load `fonts.css` before `tokens.css`. Keep exact weights and variable-font settings and verify the fonts that actually render. If a font is unavailable, name the substitute and compare its width and apparent weight before touching the type scale.
4. Before drawing any logo or icon, read `BRAND.md` and open `screenshots/brand-logo.png`, `screenshots/brand-icon-1.png`, `screenshots/brand-icon-2.png`: for a new product, create an original mark with the observed proportions and treatment; never guess a shape from a label.
5. Before building any control, read `COMPONENTS.md` (every variant and measured state, with a crop of each), use `components.css` for the CSS and `demos/` for a live copy of each component. A component listed as not found does not exist on the site; do not invent it.
6. Read `REGIONS.md` and inspect its context, detail and icon crops: reconstruct outer and inner surfaces, per-layer gradients and shadows and group spacing (`regions.css` has the recipes), then check the whole page again.
7. Read `BEHAVIOR.md` for hover, focus, tooltips, menus, motion, scrolling, tables, forms, text and each breakpoint, and reproduce the behaviour, not only the colours. No alternate theme was verified; use the observed theme unless another is requested.
8. `layout.html` is a generic page composed only from this pack's measured values, with placeholder copy: open it to see the colours, type, recipes and spacing working together and to check your own wiring of the fonts and tokens against it. It is not the site's composition; the screenshots are.
9. `DESIGN.md` has the whole system when a value is missing above. `evidence.json` is diagnostic data: never in the first read.
10. When done, render at desktop, 390px and 320px, compare with the screenshots, fix the biggest visible mismatch first (usually type size, whitespace or image treatment), recheck keyboard focus, overflow, navigation and forms, and repeat.
11. For another site's design, run `npx stylepack-cli <host>` in the project (it downloads that pack and records it the same way), or fetch https://stylepack.ai/packs/<host>/pack.zip; one question at a time is at https://stylepack.ai/packs/<host>/fonts, /colors and /buttons.

## Priority values and evidence

Values labeled fallback were not observed for that role; inferred-role means a visible heading was mapped to a display role. Keep observed values, but treat fallbacks as suggestions.
Keep measured sizes, tracking, radii and colors unless the new content requires an explicit adaptation. Do not enlarge the headline simply to fill a different line length.
Content width: 1312px. Inferred spacing base: 4px; sampled scale: 4, 8, 12, 16, 20, 24, 32px. Observed CSS breakpoints: 480, 540, 800, 1200, 1280px.
Colors: background=#f2f7f7; surface=#ffffff; surface-2=#f1f2f2; surface-3=#d3e5f4; foreground=#1a1e23; muted-foreground=#515a63; primary=#397dff; on-primary=#111111; secondary=#008069; border=#e2e4e5.
- primary: Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes.
Radii: button 8px, card 10px, input 0px, image 0px.
Shadows: rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px; rgba(11, 20, 26, 0.13) 0px 1px 0.5px 0px; rgba(22, 26, 30, 0.02) 0px 0px 0px 1px inset.

## Typography

Load fonts.css before applying tokens.css. FONTS.md contains the observed face/weight inventory and rendered-font checks. A CSS family name alone does not load a font.
Copy the supplied @font-face sources verbatim; do not replace a captured face with Google Fonts merely because its name looks similar. Keep fonts.css linked (or inline it verbatim for a single HTML deliverable). It includes measured semantic font defaults; tokens.css supplies scale and spacing. Use each role as a complete recipe: family, exact numeric weight, size, line height, tracking, font-feature-settings (including cv/ss stylistic sets), optical sizing and variable-font settings. A font shorthand resets feature settings; reapply the supplied longhands after it. Do not round 510 to 500/600, or turn a measured light style into a bold heading.
Use the captured family first. Self-hosted is a hosting location, not an availability verdict. An unverified probe is not evidence of failure; do not choose the optional fallback merely because it is familiar. Substitute only after an actual failed destination request or missing licensed source; record that reason and the replacement. A transient network error merits a retry before redesigning the typography.
Fallback roles are unmeasured suggestions. If a role is absent, start from the nearest observed text treatment; do not assume headings must be bold.
- Tiempos Headline-81ad1a66702885c1: observed weights 300; source loading recipe in fonts.css.
- UCity Pro-8cd2cb40d9534eaf: observed weights 400; source loading recipe in fonts.css.
- Fira Code-3bf965ca37a74b48: observed weights 400; source loading recipe in fonts.css.
- UCity Pro: observed weights 400; no exact loading recipe found; supply a font or declare a substitute.
- Tiempos Headline-81ad1a66702885c1 delivery by face: confirmed 300 normal; failed none; unverified none. Confirmation is from one isolated-origin check, not every deployment. Keep confirmed faces; attempt unverified faces. A failed unused face does not invalidate a working regular/bold face.
- UCity Pro-8cd2cb40d9534eaf delivery by face: confirmed 400 normal, 600 normal, 700 normal; failed none; unverified none. Confirmation is from one isolated-origin check, not every deployment. Keep confirmed faces; attempt unverified faces. A failed unused face does not invalidate a working regular/bold face.
- Fira Code-3bf965ca37a74b48 delivery by face: confirmed 300 700 normal; failed none; unverified none. Confirmation is from one isolated-origin check, not every deployment. Keep confirmed faces; attempt unverified faces. A failed unused face does not invalidate a working regular/bold face.
After loading, inspect the browser's Rendered Fonts for the headline, body and button. Computed font-family/font-weight and document.fonts.check() alone do not prove which face drew the glyphs.

- headline-display: Tiempos Headline-81ad1a66702885c1; 72px/76.32px; weight 300; tracking -2.16px; observed, source h1.
- headline-lg: Tiempos Headline-81ad1a66702885c1; 48px/55.68px; weight 300; tracking -0.96px; observed, source h2.
- headline-md: UCity Pro-8cd2cb40d9534eaf; 24px/28.8px; weight 400; tracking -0.48px; observed, source h3.
- body-md: UCity Pro-8cd2cb40d9534eaf; 14px/22px; weight 400; tracking normal; observed, source body.
- label-md: UCity Pro-8cd2cb40d9534eaf; 12px/1.42; weight 400; tracking normal; observed, source label.
- button: UCity Pro; 14px/20px; weight 400; tracking normal; observed, source button.
- code: Fira Code-3bf965ca37a74b48; 12px/18.6px; weight 400; tracking normal; observed, source code.
- Font Tiempos Headline-81ad1a66702885c1: self-hosted; use its captured loader first. Self-hosted does not imply unavailable or licensed for reuse; substitution is conditional, not a second design choice.
- Font UCity Pro-8cd2cb40d9534eaf: self-hosted; use its captured loader first. Self-hosted does not imply unavailable or licensed for reuse; substitution is conditional, not a second design choice.
- Font Fira Code-3bf965ca37a74b48: self-hosted; use its captured loader first. Self-hosted does not imply unavailable or licensed for reuse; substitution is conditional, not a second design choice.
- Font UCity Pro: unknown; use its captured loader first. Self-hosted does not imply unavailable or licensed for reuse; substitution is conditional, not a second design choice.

## Regional composition

Read REGIONS.md and open the referenced context, detail and icon crops before drawing complex previews. Build outer shell, inset content panel and internal groups as distinct layers where observed. Preserve which surface owns each gradient, border and shadow; do not apply one generic card treatment to every layer.
For images, canvas, video and external SVG, use the rendered crops to infer visible internal groupings. Keep those inferences separate from measured DOM facts. Do not treat an illustration as a functional app or paste the screenshot as the finished UI. Return to the whole-page screenshots to match scale and placement.
- r1: 1424×848px at page (8, 8); 24 measured layers, 8 icon samples, 6 opaque media layers. screenshots/region-r1-context.jpg, screenshots/region-r1-detail.png, screenshots/region-r1-icons.png
- r2: 1440×909.4px at page (0, 1052); 24 measured layers, 12 icon samples, 1 opaque media layers. screenshots/region-r2-context.jpg, screenshots/region-r2-detail.png, screenshots/region-r2-icons.png
- r3: 644×793.2px at page (634.2, 3860.7); 5 measured layers, 7 icon samples, 0 opaque media layers. screenshots/region-r3-context.jpg, screenshots/region-r3-detail.png, screenshots/region-r3-icons.png

## Component recipes

- primary button: bg #397dff; text #ffffff; border none; radius 8px; height 37px; padding 10px 14px; type 14px/600; shadow rgba(15, 30, 97, 0.08) 0px 6px 16px -8px, rgba(15, 30, 97, 0.06) 0px 4px 12px -6px, rgba(15, 30, 97, 0.06) 0px 3px 8px -4px, rgba(15, 30, 97, 0.04) 0px 2px 6px -3px, rgba(15, 30, 97, 0.04) 0px 1px 4px -2px, rgba(15, 30, 97, 0.02) 0px 1px 3px -1px, rgba(15, 30, 97, 0.01) 0px 1px 2px 0px, rgba(47, 104, 219, 0.32) 0px -1px 0px 1px inset, rgba(255, 255, 255, 0.32) 0px 1px 2px -1px inset.
- ghost button: bg transparent; text #515a63; border none; radius 0px; height 33px; padding 4px 12px; type 14px/400; shadow none.
- secondary button: bg #ffffff; text #1a1e23; border none; radius 9999px; height 40px; padding 0px 0px; type 16px/400; shadow rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px.
- Card: {"bg":"#ffffff","border":"none","radius":"10px","padding":"16px","shadow":"rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px","w":292,"h":252}.
- Input: {"type":"email","bg":"transparent","color":"#1a1e23","border":"0px solid #1a1e23","radius":"0px","height":32,"fontSize":14,"padding":"7px 8px","shadow":"none"}.

## Responsive and interaction evidence

- desktop 1440px: content 1312px, gutter 280px, H1 72px, 2 lines, center, header 91px, 6 links, 1 CTA, grids 3→3 col; 8→1 col; 3→1 col.
- laptop 1024px: content 928px, gutter 112px, H1 72px, 2 lines, center, header 91px, 6 links, 1 CTA, grids 3→3 col; 3→1 col; 2→2 col.
- tablet 768px: content 704px, gutter 72px, H1 56px, 2 lines, center, header 91px, 5 links, 1 CTA, grids 3→3 col; 3→1 col; 2→2 col.
- phone 390px: content 342px, gutter 24px, H1 28px, 2 lines, center, header 76px, hamburger (Menu), grids 2→1 col; 3→1 col; 2→2 col.
H1 goes 72px → 28px (39%), 2 → 2 lines.
Nav collapses to a hamburger by 390px (first seen at 390px); header 91px → 76px.
Body text is 16px at the sampled desktop and phone widths.
Phone side gutter 24px.
- Hover button-primary: background #397dff → #2f68db, shadow deepens.
- Hover button-secondary: background #397dff → #2f68db, shadow deepens.
- Hover nav-link: text #515a63 → #1a1e23, border #515a63 → #1a1e23, icon/inner colour → #1a1e23.
- Focus button-primary: outline 1px none rgb(255, 255, 255), offset 1px.
- Focus body-link: box-shadow ring rgb(57, 125, 255) 0px 0px 0px 1px.
278 elements carry transitions; typical 0.15s with ease, mostly on color, opacity, background-color. 10 running keyframe animations (psWord 0.18s 1; _1fvov9a2 1s infinite; psBars 1s infinite).
No alternate theme verified.

## Logo and icons

Logo lockup: 112×29px, filled. See BRAND.md and its crops for shape evidence.
Icon: 11×13px; outline/stroke; stroke 1.5px, caps butt.
Icon: 16×16px; filled; stroke none observed, caps not applicable.

## First images to open

- screenshots/desktop-1440-fold.png: Desktop 1440, above the fold
- screenshots/brand-logo.png: primary logo lockup
- screenshots/phone-390-fold.png: Phone 390, above the fold

## Verify the build

Render at desktop, 390px and 320px. Inspect the result, compare against the supplied references, fix the largest visible mismatch, and recheck keyboard focus, overflow, navigation and form behavior. Match the visual language while following the requested product content.