# Dovetail homepage design spec (free) - Site: dovetail.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Dovetail. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Dovetail's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero — oversized type over a dark textured field **Evidence provenance:** Desktop capture at 1440×900, scrollY 0, and phone capture at 390×844, scrollY 0. Section and text boxes are from computed measurements; texture and customer-mark placement are visual observations. The phone capture includes the beginning of the next media section. **CRAFT ARCHETYPE:** type-led ## The big idea Compose a dark opening around a short explanatory paragraph, a bright action, and a dramatically oversized two-line headline. Contrast a heavy sans-serif line with a pixel-distressed serif emphasis; keep a sparse digital texture behind the words and a low-profile customer-mark band below. Preserve the same content order on phone, where the marks remain within the hero rather than disappearing. ## Layers On desktop, the section starts at y=182 and measures 1440×654px, with 124px horizontal insets. Place the intro at x=124, y=182 in a 508×85px box and the 119×42px action at x=124, y=291. The headline starts at x=124, y=472 and occupies 904×260px. The texture sits behind the heading; observed customer marks form a horizontal band beneath it. Rating marks sit high and right of the introduction, around x=938–1316 and y=182. Do not turn these into fabricated endorsements or add claims. The section field and surrounding page are near-black. ## Type Use a clean sans for body and headline, with a contrasting display serif for selected emphasis. Desktop headline: 160px, weight 600, 130px line-height, −2.3px tracking; serif emphasis: 196px. Intro: 20px/28px, −0.25px tracking; its serif phrase is 25px. The blue action uses 14px semibold text. Phone headline is 60px/50px with −1px tracking and 74px serif emphasis; body is 16px/24px. ## Colour Use near-black, near-white headline text, muted body text at about 64% opacity, and a saturated blue action. Keep texture and marks subdued against the high-contrast text. ## States and motion The heading has a 0.15s ease-out animation delayed 0.3s; the action opacity transition is 0.15s. Other motion is unknown. ## Do NOT copy or add Do not reproduce wording, brand or customer marks, ratings, claims, or source-specific imagery. Do not invent animated texture. ## Checks you can run At 1440px, check 654px section height, 124px inset, 508×85px intro, 119×42px action, and 904×260px headline. At 390px, check 445px section height beginning y=150, 16px inset, action at y=247, headline at y=383, and next media at y=643. ## Phone at 390px The announcement occupies the top 38px; navigation ends at y=126. Hero content begins at y=150, 24px below nav. Intro spans x=16–374 and is 358×73px; the 119×40px blue action is at x=16, y=247. The two-line headline is at x=16, y=383, 342×100px, with 60px/50px sans and 74px serif emphasis. Marks move below the headline, around y=515–593, rather than alongside the intro as desktop ratings do. The section ends at y=595; the following image begins at y=643, leaving 48px. The texture continues behind the heading and marks. Desktop navigation links and right-side rating row are not in the phone hero composition. --- # Navigation — announcement strip and responsive link bar **Evidence provenance:** Computed boxes and pixels from desktop 1440×900, scrollY 0, and phone 390×844, scrollY 0. Both captures show the initial state only; the menu-open state and announcement dismissal result are not shown. **CRAFT ARCHETYPE:** type-led ## The big idea Stack a slim announcement band above a separate navigation bar. The desktop bar distributes a compact symbol, a run of text links, and right-aligned account and action links. At phone width, preserve the symbol and replace the wide link set with a single contrasting menu action. Treat the announcement and navigation as distinct horizontal layers. ## Layers On desktop, the announcement occupies y=0–30; the nav box is 1440×88px at y=30, with 24px padding. The symbol link measures 46×46px at x=24, y=51. Desktop links are 40px high and begin at x=78; the right action is 121×40px at x=1295, y=54. On phone, the announcement is 38px high and the nav is 390×88px at y=38, with 16px side padding. The symbol link is 46×46px at x=16, y=59; the menu action is 72×38px at x=302, y=63. The announcement text is centered; a close control sits at the right. The nav is positioned relative in the measured initial state; do not infer sticky behavior from top-of-page captures. ## Type Use a sans-serif for navigation, 14px semibold, with 18px desktop line-height and 16px phone line-height. Announcement text uses a monospaced face at 12px/12px with 1px tracking. Keep labels concise and independent of source wording. ## Colour The page and nav are near-black with white links. The menu action is white with near-black text and an 8px radius. The announcement band is a distinct dark gray surface in the captures; retain separation without copying its copy or imagery. ## States and motion Computed nav transition is 0.3s. The announcement close control has a 0.2s color/background/opacity transition. Menu-open and dismissal outcomes are unknown; do not prescribe their appearance. ## Do NOT copy or add Do not reproduce source logo, labels, announcement copy, destinations, or exact artwork. Do not claim the nav is fixed or add unseen mobile links. ## Checks you can run At 1440px, verify announcement height 30px, nav height 88px, 24px padding, 46×46px symbol, and 121×40px action. At 390px, verify 38px announcement, nav y=38–126, 16px side inset, 46×46px symbol, and 72×38px menu action. Confirm the desktop link row is replaced by the compact action on phone. --- # Signature component — layered product-interface showcase **Evidence provenance:** Desktop capture at 1440×900, scrollY 900, provides the interface image and visible overlaid conversation panel; its section and image boxes are computed measurements. Phone capture at 390×844, scrollY 0, shows the beginning of this media and a clipped overlay. The full mobile component is not captured, so its complete phone layout is unknown. **CRAFT ARCHETYPE:** product-UI-led ## The big idea Show a product interface as a dark, layered scene rather than a plain screenshot. A broad application surface recedes behind a more prominent floating conversation panel. Use subtle outlines and restrained interface detail to create depth; keep the panel legible without implying that it is an operational control or a real conversation. ## Layers At desktop scrollY 900, the media section starts at viewport x=0, y=32 and measures 1440×538px; the image itself is inset to x=124 and measures 1192×538px. Within the artwork, a broad application view occupies the left, secondary information sits nearer the center, and the conversation panel overlays at right. The screenshot shows panel text around x=1083, y=222, in 206×23px lines; its full outer dimensions are not supplied as a computed box, so treat its appearance as pixel evidence, not a measured component size. A separate editorial section begins at y=690 with 124px side insets. On phone, the media section begins at y=643; its image is x=16, y=643, 358×347px. The overlay is visible near the bottom of the 844px viewport and clipped there; do not extrapolate its full layout. ## Type Use compact sans-serif interface text, with slightly stronger weight for panel headings. Measured desktop conversation text is approximately 13.2px/22.6px at weight 500; the accent-colored panel label is approximately 15.1px/22.6px. Treat these as artwork measurements, not a universal UI scale. No complete mobile type system is evidenced. ## Colour Use a near-black ground, layered charcoal panels, fine low-contrast borders, off-white interface text, and a restrained violet accent. Keep secondary interface content dimmer than the foreground panel. ## States and motion The desktop image shows one rendered scene. Extracted word spans have 0.14s animations with staggered delays, but the captures do not establish playback or user-triggered behavior. Hover and control behavior are unknown. ## Do NOT copy or add Do not reuse source interface wording, logos, names, customer details, claims, or data. Do not invent functional chat, draggable panels, or control behavior. ## Checks you can run At desktop scrollY 900, verify the 1192×538px image begins at x=124, y=32 and the next section begins at y=690. At phone scrollY 0, verify media begins at y=643 with a 16px inset and 358×347px image; the overlay is only partly visible at the viewport bottom. Do not assert unobserved mobile behavior.