Unify GTM Design System

Overview

Unify's visual identity occupies a distinctive space in the B2B sales-tech landscape: it rejects the clinical blues and purples of its competitors in favor of a warm, editorial palette rooted in cream-toned surfaces and near-black ink. The canvas ({colors.canvas} — #f8f7f3) reads as aged paper or premium stationery—a deliberate warmth that signals trust and approachability rather than cold enterprise efficiency. Against this ground, brand voltage lives almost entirely in the ink-black color ({colors.primary} — #241e20), which functions simultaneously as the primary text color, the CTA fill, and the navigation anchor. This monochromatic bravery creates a stark, confident impression: the site doesn't need a neon accent to feel alive.

The typography system is defined by the dramatic scale of "Feature Text," an elegant sans-serif that commands attention at {typography.display-lg} (90px bold) for the hero headline while softening to a refined regular weight at {typography.title-md} (40px) for sectional openers. Body copy delegates to "Saans," a clean geometric sans that feels contemporary without competing for attention. The interplay between these two faces—one theatrical, one utilitarian—creates a clear hierarchy where size and family do the heavy lifting, allowing weights to remain restrained (body never exceeds 500; displays hit 700 only at the largest scales).

Shape language trends toward the generous: {rounded.pill} (400px effectively) dominates buttons and the submit circle within the hero search field, while cards and inputs settle into the softer {rounded.lg} (12px). This rounded vocabulary signals approachability and modernity without veering into playfulness. The overall mood is one of sophisticated energy—editorial precision meets startup velocity, with marquee animations and smooth transitions adding kinetic interest beneath the composed surface.

Sub-systems observable from this viewport include: the hero dialect (massive type over atmospheric photography with an embedded search interaction), the navigation dialect (warm-white navbar with bold dropdown triggers), and the privacy/compliance dialect (modal overlay with dual-action button pair). Each maintains the core palette while adapting density and emphasis for its specific context.

Key Characteristics:

• Warm cream canvas ({colors.canvas}) replaces sterile white, creating an editorial, paper-like atmosphere
• Near-black ink ({colors.primary}) serves triple duty as text, brand color, and CTA fill—monochromatic confidence
• Display type ("Feature Text") scales dramatically to 90px ({typography.display-lg}) with aggressive -3.6px tracking
• Pill-shaped buttons ({rounded.pill}) at 400px radius create soft, approachable interactive elements
• Hero search input ({component.hero-input}) uses elevated white surface ({colors.surface-soft}) with 12px rounding
• Motion level is expressive: marquees, fades, and 300ms transitions suggest a dynamic, alive interface
• Two-font system: "Feature Text" for all display/heading roles, "Saans" for UI and body text
• Section vertical rhythm uses 64px top / 40px bottom padding in the hero, expanding to 100px in deeper sections

Colors

Brand & Accent

• Primary ({colors.primary} — #241e20): The dominant brand color—deep warm black used for all CTAs ({component.button-primary}), navigation text, headings, and primary interactive elements. Functions as both ink and identity.
• Primary Hover ({colors.primary-hover} — #3d3537): Lightened variant for hover states on dark-filled buttons and links, providing subtle feedback without abandoning the monochrome commitment.
• Active/Pressed ({colors.active} — #1a1617): Deepened primary for pressed/active states on buttons, creating tactile depth.
• Accent ({colors.accent} — #241e20): Aligned with primary in this monochromatic system; reserved for signature moments where brand presence needs maximum weight.

Surface

• Canvas ({colors.canvas} — #f8f7f3): The primary page background—a warm cream with slight yellow undertones that gives the entire site its editorial, paper-like quality. Used on {component.hero-band} and body background.
• Surface Soft ({colors.surface-soft} — #fffff9): A brighter, cooler white used for card backgrounds, the navigation bar ({component.top-nav}), and input fields ({component.hero-input}). Creates subtle elevation against canvas.
• Surface Warm ({colors.surface-warm} — #f5f3ee): Slightly deeper cream for alternating bands or secondary content areas, providing gentle zoning without hard divisions.
• Surface Elevated ({colors.surface-elevated} — #ededed): Light gray for hover states on ghost/secondary buttons ({component.button-secondary-hover}) and subtle dividers.
• Surface Dark ({colors.surface-dark} — #241e20): The ink-black surface used for the top banner bar ({component.banner-bar}), primary button fills, and any inverted sections.
• Surface Overlay ({colors.surface-overlay} — rgba(36, 30, 32, 0.6)): Semi-transparent dark scrim for modal backdrops like the privacy consent layer.

Text

• Ink ({colors.ink} — #241e20): Primary text color for headlines, body copy, and UI labels—identical to the brand primary, reinforcing the monochromatic strategy.
• Body ({colors.body} — #241e20): Synonym for ink in this system; used for paragraph text throughout.
• Body Light ({colors.body-light} — #fffff9): Creamy white text reserved for rendering on dark surfaces (buttons, banners, dark cards).
• Muted ({colors.muted} — rgba(36, 30, 32, 0.8)): 80% opacity ink for secondary text—supporting descriptions, metadata, placeholder text in inputs.
• Muted Medium ({colors.muted-medium} — rgba(36, 30, 32, 0.5)): 50% opacity ink for truly tertiary information—timestamps, hints, disabled-label text.
• Muted Soft ({colors.muted-soft} — #a3a3a3): Solid gray for disabled states, decorative elements, or text that needs to recede completely.
• Disabled ({colors.disabled} — #dcdcdc): Light gray for non-interactive elements and the close button icon on the top banner ({component.banner-close-btn}).
• On Primary ({colors.on-primary} — #ffffff): Pure white text for contrast against dark-filled buttons and banner bars.
• On Dark ({colors.on-dark} — #fffff9): Slightly warm white for dark-surface text, maintaining the creamy tonal consistency.
• On Surface ({colors.on-surface} — #241e20): Default readable text on light surfaces.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(222, 222, 218, 0.5)): Subtle 50%-opacity warm-gray border for input fields ({component.hero-input}) and dividers that should barely register consciously.
• Hairline Solid ({colors.hairline-solid} — #dededa): Opaque version of the hairline for borders needing slightly more visibility—card edges, separator lines.
• Border Subtle ({colors.border-subtle} — #e8e6e1): Light warm gray for container outlines and focus rings that need gentle definition.
• Border Strong ({colors.border-strong} — #d4d2cd): Medium warm gray for emphasized boundaries—active input states, card borders on hover.

Semantic

• Link ({colors.link} — #241e20): Inline links inherit the primary ink color, relying on underline decoration rather than color differentiation.
• Link Hover ({colors.link-hover} — #3d3537): Slight lightening on hover for interactive text links.
• Error ({colors.error} — #c13515): Warm red for form validation errors and destructive action feedback (inferred from standard patterns).
• Success ({colors.success} — #1a6b35): Forest green for confirmation states and positive indicators.
• Warning ({colors.warning} — #b8860b): Golden amber for cautionary messages and attention-required states.
• Info ({colors.info} — #1b61c9): Blue for informational tooltips and external-link indicators.

Typography

Font Family

The Unify type system is built on two proprietary font families, each serving a distinct rhetorical role. "Feature Text" is the display face—an elegant, high-contrast sans-serif (resembling a customized humanist grotesk) that carries all heading and titling duties. It loads in two weights: Bold (700) for the heroic scales (90px, 72px) and Regular (400) for sectional titles (40px). Its character set includes distinctive letterforms that give the brand editorial distinction—the "O" is slightly condensed, terminals are cut horizontally, and the "g" has a closed-loop structure. Fallback is to "Trebuchet MS", sans-serif for environments where the custom font fails to load.

"Saans" handles everything else: body copy, navigation items, buttons, captions, labels, and UI chrome. It's a clean geometric sans-serif (similar in spirit to Futura or Avenir but with more open counters) available in Regular (400) and Medium (500). Saans never exceeds 500 weight in the system—even buttons use 700 only when they're using the nav-item style, which technically falls under the Saans family stack in some contexts. The fallback chain is Verdana, sans-serif, ensuring graceful degradation to widely-available system fonts.

The pairing strategy is deliberately contrasting: Feature Text brings personality and editorial authority at large sizes, while Saans provides neutral, highly-readable infrastructure at smaller sizes. They never compete because their usage domains don't overlap—Feature Text never drops below 28px, and Saans never rises above 16px except in navigation contexts.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 700 | 1.0 (-2.88px) | -2.88px | Sub-hero headlines, feature section titles | | {typography.display-lg} | 90px | 700 | 1.0 (-3.6px) | -3.6px | Hero headline ("Outbound agents for every rep") | | {typography.title-md} | 40px | 400 | 1.2 (-0.8px) | -0.8px | Section headings (H2 equivalent) | | {typography.title-sm} | 28px | 700 | 1.15 (-0.56px) | -0.56px | Card titles, modal headers, subsection heads | | {typography.body-md} | 16px | 400 | 1.4 (-0.16px) | -0.16px | Paragraph text, descriptions, standard body | | {typography.body-sm} | 14px | 400 | 1.43 (-0.14px) | -0.14px | Supporting text, metadata, privacy disclaimers | | {typography.caption} | 13px | 400 | 1.38 | 0 | Labels, timestamps, fine print | | {typography.button} | 16px | 700 | 1.25 | 0 | Primary/secondary button labels, nav items | | {typography.button-sm} | 14px | 500 | 1.25 | 0 | Small button text (privacy modal actions) | | {typography.label-md} | 14px | 500 | 4 | 0 | Form field labels | | {typography.nav-item} | 16px | 700 | 1.25 | 0 | Navigation dropdown triggers, top-level menu |

Principles

The typography system trusts scale and family to establish hierarchy far more than weight variation. Notice that {typography.title-md} sits at 40px in Regular (400)—the same weight as body text—but reads as a clear heading because of its 2.5x size differential and the switch to Feature Text. Only at the very largest scales (72px+, the display roles) does the system engage Bold (700), and even then it's the font's intrinsic bold rather than a faux-heavy treatment. This restraint prevents visual shouting: the page feels confident because it doesn't need to bold everything to be heard.

Letter-spacing is consistently negative across all display and title roles, tightening the characters to create denser, more impactful word-shapes. The -3.6px tracking on {typography.display-lg} at 90px is particularly aggressive—roughly -4% of the em—and produces that tight, editorial headline look where words read as singular graphic objects. Body text uses a subtle -0.16px (1% negative) just to optically correct for how geometric sans-serifs tend to look slightly loose at small sizes.

Line heights are notably tight for a web layout: 1.0 exact on displays (where each line is a single word or short phrase anyway), 1.2 on titles, and 1.4 on body. This compact vertical rhythm contributes to the dense, information-rich feeling of the page without sacrificing readability—Saans has a tall x-height and open counters that remain legible even at tighter leading.

There are no italic or uppercase transformations in the core system. Emphasis is achieved through size jumps, family switches, or color shifts (muted vs. ink). This creates a remarkably calm reading experience where nothing feels like it's straining for attention.

Note on Font Substitutes

Both "Feature Text" and "Saans" are proprietary fonts served from Unify's Webflow CDN—they are not available via Google Fonts or Adobe Fonts publicly. For implementation without access to these files:

• Feature Text substitutes well to DM Serif Display (Google Fonts) for the bold display roles, or Playfair Display if more contrast is desired. For the Regular-weight title role ({typography.title-md}), Source Serif 4 or Lora at 400 weight provides similar editorial character. Define CSS variables: --font-display: 'DM Serif Display', serif;

• Saans substitutes cleanly to Inter (Google Fonts) for the geometric-neutral feel, or Plus Jakarta Sans if you want slightly more personality while staying geometric. For the Medium (500) weight specifically, both alternatives have excellent coverage. Define: --font-body: 'Inter', system-ui, sans-serif;

If you cannot load custom fonts at all, the existing fallback stacks ("Trebuchet MS", sans-serif for Feature Text and Verdana, sans-serif for Saans) will render acceptably, though they lose the brand's distinctive typographic voice.

Layout

Spacing System

• Base unit: 4px (the {spacing.xxs} token), with most meaningful increments deriving from multiples of 4.

• Tokens:

  • {spacing.xxs} (4px): Micro-adjustments, icon gaps, inner button padding compression
  • {spacing.xs} (8px): Tight internal spacing—between icon and text in buttons, small element gaps
  • {spacing.sm} (10px): Standard compact padding for small components
  • {spacing.md} (12px): Common internal spacing—nav item padding, form gaps
  • {spacing.base} (16px): Baseline comfortable spacing—card padding contributor, grid gaps
  • {spacing.lg} (20px): Generous internal padding—button vertical padding, input padding contributor
  • {spacing.xl} (24px): Section-internal component spacing, card padding
  • {spacing.xxl} (29px): Asymmetric hero-specific spacing, derived from the screenshot's precise measurements
  • {spacing.section} (32px): Minor section vertical rhythm
  • {spacing.hero-top} (64px): Top padding for the hero band—creates breathing room above the massive headline
  • {spacing.hero-bottom} (40px): Bottom padding for the hero band—slightly less than top, anchoring content downward
  • {spacing.section-xl} (100px): Major section spacing for deep-page content areas

• Section padding (vertical): {spacing.section-xl} (100px) used between major content blocks below the hero; the hero itself uses the asymmetric {spacing.hero-top} / {spacing.hero-bottom} pair.

• Card internal padding: {spacing.xl} (24px) for standard {component.card} and {component.card-elevated}, providing room for body text and child elements.

• Gutters: The main container maxes at 1440px width with implicit gutters handled by the grid system; mobile gutters collapse to {spacing.base} (16px).

Grid & Container

The layout uses a 1440px max-width container centered on screen, which is wider than the typical 1280px marketing-site standard—this extra breathing room accommodates the 90px headline and the wide hero photograph without cramping. Content within the container appears to follow a 12-column implicit grid, though the hero specifically uses an asymmetric split: roughly 60% width for the headline column and full-width (or near-full-width) for the image/search area below it.

The editorial density choice here is "expansive but information-dense"—the large type and photography suggest a brand-awareness landing page, but the embedded search input and multiple CTAs indicate conversion focus. This isn't a sparse luxury-brand layout; it's a tool-selling page that happens to use premium proportions.

At desktop widths, the hero column split places the headline ("Outbound agents for every rep") in a left-aligned column occupying approximately 8-9 grid columns, with the atmospheric image and overlaid search input spanning the remaining width (or full-width beneath). The navigation uses a classic flush-left logo / center-spreading menu / flush-right utilities pattern within the same 1440px constraint.

Whitespace Philosophy

Unify employs a generous-but-purposeful whitespace strategy. The canvas color itself ({colors.f8f7f3}) provides warm negative space that frames content without the harshness of pure #fff. Vertical rhythm is asymmetrical by design: 64px above the hero headline versus 40px below creates forward momentum, pulling the eye down toward the conversion point (the search input). This is not the airy, "one-sentence-per-screen" approach of luxury fashion sites—it's an editorial-density approach where whitespace separates sections generously but packs within-section content efficiently.

Header Architecture

|--------------------------------------------------------------------------------|
| [unify logo]   Product v  Solutions v  Customers  Resources v  Pricing  |Sign in| [Book a Demo] [Try for free] |
|--------------------------------------------------------------------------------|
  ^1440px max-width container, centered
  Background: {colors.surface-soft} (#fffff9)
  Height: ~72px
  Logo: Wordmark "unify" in {colors.ink}
  Nav items: {typography.nav-item} (16px/700), {colors.ink}, 8px 15px padding
  CTAs: Ghost "Sign in", Secondary "Book a Demo", Primary "Try for free" (pill, dark fill)

Above the header sits the thin banner bar ({component.banner-bar}) — a 40px-tall dark strip containing the "Read the report: The Path to AE →" link and close button, spanning full viewport width.

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|  Outbound agents for every rep                                                 |
|  [{typography.display-lg} -- 90px, Feature Text Bold, -3.6px tracking]        |
|                                                                                |
|  +--------------------------------------------------+  <-- {component.hero-input}     |
|  | Find the best ways for me to use my network...  |  <-- {typography.body-md}       |
|  |                                                  |                               |
|  |                                          [↑]    |  <-- {component.submit-circle}  |
|  +--------------------------------------------------+                                |
|         (overlaid on atmospheric motion-blur photo)                                 |
|                                                                                |
|--------------------------------------------------------------------------------|
  Background: {colors.canvas} (#f8f7f3)
  Padding: 64px top, 40px bottom
  Input: 12px radius, {colors.surface-soft} bg, {colors.hairline} border
  Submit: 44px circle, {colors.primary} bg, up-arrow icon

The hero photograph shows motion-blurred crowd/business people in warm tones, creating energy and suggesting "movement" and "outbound activity" without being literally about sales. The search input floats over the lower portion of the image, creating a layered, app-like feel within the marketing page.

Privacy Modal (Overlay)

+------------------------------------------+
|  Your privacy choices                     |  <- {typography.title-sm} (28px/700)
|                                          |
|  We use optional cookies and similar     |  <- {typography.body-sm} (14px/400)
|  technologies for analytics and          |     {colors.muted}
|  advertising...                          |
|                                          |
|  [Reject optional]  [Accept all]         |  <- {privacy-button_secondary/primary}
|                                          |
|           Customize                      |  <- {privacy_link}
+------------------------------------------+
  Background: {colors.surface-soft}
  Rounded: {rounded.md} (8px)
  Padding: {spacing.xl} (24px)
  Shadow: modal elevation

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} or {colors.surface-soft} background | Page body, banner bar, nav bar | | 1 (Hairline) | 1px {colors.hairline} border, no shadow | Input fields ({component.hero-input}), dividers | | 2 (Soft) | {extensions.shadows.sm} (0 1px 3px rgba) | Cards at rest, button containers | | 3 (Medium) | {extensions.shadows.md} (0 4px 12px rgba) | Cards on hover, dropdown menus | | 4 (Modal) | {extensions.shadows.modal} (0 24px 60px rgba) | Privacy consent modal, any dialog | | 5 (Focus ring) | 2px {colors.border-strong} outline offset 2px | Keyboard focus states on interactive elements |

Depth Philosophy: Unify favors a layered-flat approach where elevation is communicated through background color shifts (canvas → surface-soft → white) before shadows are introduced. When shadows do appear, they're warm-toned (tinted toward {colors.primary} rather than neutral black), maintaining the cohesive warm palette. The privacy modal is the deepest element observable, using the modal-level shadow combined with the semi-transparent {colors.surface-overlay} backdrop to fully detach from the page context.

Decorative Depth: The hero photograph provides significant decorative depth through its motion-blur aesthetic—this isn't flat vector illustration but atmospheric photography with intentional camera movement, creating a sense of dynamism that contrasts with the static, structured UI elements floating atop it. No gradient washes or abstract shapes are visible; the depth is purely photographic.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 3px | Subtle rounding on small elements, tags | | {rounded.DEFAULT} | 5px | Default radius for general containers, privacy modal buttons | | {rounded.md} | 8px | Modal containers, secondary card types | | {rounded.lg} | 12px | Input fields, primary cards, content containers | | {rounded.xl} | 16px | Large feature cards, image containers | | {rounded.pill} | 400px (effectively ∞) | Buttons (all variants), submit circle, badge shapes | | {rounded.top-rounded} | 4px 4px 0 0 | Specialized top-only rounding for specific container patterns | | {rounded.none} | 0px | Banner bar, banner close button, ghost buttons, text links |

Photography Geometry

The hero image uses full-bleed positioning within its container (spanning the width below the headline column) with no corner rounding—it extends edge-to-edge, creating a continuous visual band. Aspect ratio appears to be approximately 16:9 or 2:1 (wide cinematic). The photograph features motion blur as a stylistic treatment (not a technical artifact), suggesting movement, speed, and the "outbound" concept. Color grading is warm—ambers, creams, and soft browns dominate, harmonizing with the {colors.canvas} palette. No visible border, shadow, or frame around the image; it bleeds naturally into the page flow.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary call-to-action button seen as "Try for free" in the navigation. Features {colors.primary} (deep ink-black) background with {colors.on-primary} (white) text, using {typography.button} (16px/700 Saans) and {rounded.pill} (fully rounded) shape. Padding is 12px 28px—generous horizontal space for the bold weight. On active/pressed state, see {component.button-primary-active} which deepens to {colors.active}. Disabled state ({component.button-primary-disabled}) swaps to {colors.disabled} background with muted text. No visible border or shadow; the flat filled treatment relies entirely on color contrast.

{component.button-secondary} — The "Book a Demo" button in the nav. Transparent background with {colors.ink} text, same {typography.button} and {rounded.pill} geometry as primary. On hover ({component.button-secondary-hover}), it gains a {colors.surface-elevated} (light gray) background fill, revealing its interactive nature. This ghost-to-filled transition is the standard secondary pattern across the system.

{component.button-ghost} — The "Sign in" utility link styled as a minimal button. Transparent background, {colors.ink} text, no border-radius ({rounded.none}), and tighter padding (8px 16px). Reads as a text link with button-like click target. Typically does not change background on hover—may underline or shift color subtly.

{component.privacy-button-primary} — "Accept all" action in the consent modal. Smaller than nav buttons: uses {typography.button-sm} (14px/500), {rounded.DEFAULT} (5px—noticeably less round than nav buttons, fitting the modal's more utilitarian context), and 12px 24px padding. Black fill with white text, matching the primary button language but scaled for the compact modal environment.

{component.privacy-button-secondary} — "Reject optional" sibling in the modal. Identical dimensions to the primary modal button but uses {colors.disabled} (light gray #dcdcdc) for text color instead of white, signaling it's the less-promoted action while maintaining visual parity.

{component.banner-close-btn} — The × button in the top notification bar. Uniquely styled: {colors.primary} background (so it's a dark square/dot), {colors.disabled} (light gray) text for the × glyph, {rounded.none} (sharp corners), and minimal padding (1px 6px). At approximately 28px × 28px, it's the smallest interactive element, appropriate for a dismiss control.

{component.submit-circle} — The circular arrow button inside the right side of {component.hero-input}. Perfect circle ({rounded.pill}, 44px × 44px), {colors.primary} fill, {colors.on-primary} arrow icon centered. Acts as the search submission trigger. Hover state ({component.submit-circle-hover}) lightens to {colors.primary-hover}. This is a signature component—the integration of a submit control inside the input field creates an app-like "command bar" feel.

Cards & Containers

{component.card} — Standard content card. {colors.surface-soft} (warm white) background with {colors.ink} text, {typography.body-md} for content, {rounded.lg} (12px) corners, and {spacing.xl} (24px) internal padding. Likely used for feature descriptions, testimonial blocks, or pricing tier containers below the fold. No visible border at rest—elevation comes from the background color step up from {colors.canvas}.

{component.card-elevated} — Variant with {colors.canvas} (cream) background instead of white, creating a subtler lift from the page. Uses {rounded.md} (8px)—slightly sharper than the standard card—which may indicate it's used in contexts where cards sit closer together and need more definition through shape rather than color.

{component.privacy-modal} — The cookie/consent dialog visible in the lower left. {colors.surface-soft} background, {rounded.md} (8px) corners (more rectangular than the pill-buttons, appropriate for a content container), {spacing.xl} (24px) padding, and {extensions.shadows.modal} elevation (though shadow details aren't in YAML, the markdown describes them). Contains {component.privacy-modal-title}, {component.privacy-modal-body}, two buttons, and a customize link. Fixed or absolutely positioned over the page content with a backdrop.

{component.hero-band} — The full-width section containing the headline and hero image. {colors.canvas} background (the warm cream), {spacing.hero-top} (64px) top padding and {spacing.hero-bottom} (40px) bottom padding. Houses the {component.hero-headline} and the image/input composite. No border, no radius—it's a flat band filling the viewport width within the 1440px container.

Inputs & Forms

{component.hero-input} — The prominent search/query textarea in the hero. {colors.surface-soft} (white) background creating contrast against the photo beneath, {colors.ink} text, {typography.body-md} (16px/400), {rounded.lg} (12px) generously rounded corners, and 16px 18px padding (asymmetric: more horizontal than vertical for comfortable text entry). Border is the subtle {colors.hairline} (50% opacity warm gray at 1px). Placeholder text ("Find the best ways for me to use my network to sell to Stripe") renders in {colors.muted}. The input contains the {component.submit-circle} positioned absolutely on the right side. Focus state ({component.hero-input-focus}) likely intensifies the border color to {colors.border-strong} or adds a subtle shadow; implement per your stack's conventions.

{component.text-input} — Generalized input/token matching the hero input's specs. Reusable for any text entry context: search bars, email captures, name fields. Same white background, 12px radius, 16px/18px padding, hairline border.

Navigation

{component.top-nav} — The main navigation bar spanning the full viewport width (within the 1440px container). {colors.surface-soft} background (making it slightly lighter than the page body—another elevation-through-color move), {colors.ink} text, approximately 72px height (inferred from standard nav proportions plus padding). Contains the Unify wordmark logo, dropdown triggers, and CTA buttons. Fixed or sticky behavior is likely but not confirmable from static screenshot.

{component.nav-link} — Navigation menu items: "Product", "Solutions", "Customers", "Resources", "Pricing". Transparent background, {colors.ink} text, {typography.nav-item} (16px/700—bold for navigation is a notable choice that makes the menu feel like a set of actions rather than passive links), 8px 15px padding. Some items have dropdown arrows (indicated by the v suffix in the screenshot). Hover state ({component.nav-link-hover}) likely lightens text to {colors.primary-hover} or adds an underline indicator.

{component.burger-menu-btn} — Hamburger menu icon for mobile (visible in the DOM though likely hidden at desktop viewport). Transparent background, {colors.ink} icon color, {rounded.sm} (3px) slight rounding, 44px × 44px touch target. Appears to use an SVG icon (hamburger三条-lines).

{component.banner-bar} — The slim notification strip at the very top of the viewport ("Read the report: The Path to AE →"). {colors.surface-dark} (ink-black) background, {colors.disabled} (light gray) text, {typography.body-sm} (14px), 40px height. Contains a link and the {component.banner-close-btn}. Full-viewport-width, outside the 1440px container constraint.

Signature Components

{component.hero-headline} — The "Outbound agents for every rep" text block. Transparent background (inherits canvas), {colors.ink} text, {typography.display-lg} (90px/700 Feature Text with -3.6px letter-spacing). This is the most visually dominant element on the page—its scale alone (90px is roughly 2-3× typical hero heading size) establishes the brand's confidence and the "big idea" positioning of the product. Left-aligned within its column.

Do's and Don'ts

Do

• Do use {colors.canvas} (#f8f7f3) as your page background—not pure white. The warm cream tone is foundational to the brand's editorial feel and differentiates Unify from every blue-gradient SaaS competitor.
• Do reserve {typography.display-lg} (90px) exclusively for the hero headline (or one other "moment of maximum emphasis" per page). At this scale, the type becomes environmental graphics, not just text.
• Do apply {rounded.pill} (400px) to all primary and secondary CTAs. The fully-round button shape is a consistent signature that signals "actionable" vs. "informational."
• Do use {colors.hairline} (50% opacity border) for input fields and subtle dividers. The near-invisible line keeps the element bounded without drawing attention to the boundary itself.
• Do maintain the 64px/40px asymmetric padding in the hero section ({spacing.hero-top} / {spacing.hero-bottom}). The extra top space gives the 90px headline room to breathe; the reduced bottom space creates forward momentum.
• Do keep navigation items at {typography.nav-item} (16px/700). The bold weight in the nav makes menu items feel actionable and scannable without requiring larger sizes.
• Do use Feature Text for anything 28px or larger, and Saans for anything 16px and smaller. Never cross the streams—each font has its domain.
• Do apply {colors.primary} (#241e20) as both your text color AND your button-fill color. The monochromatic strategy is intentional: the brand IS the ink color.
• Do use {colors.surface-soft} (#fffff9) for card and input backgrounds to create a subtle step up from the canvas. This 1-step color elevation is often enough—don't add shadows unless the element is floating (modals, dropdowns).
• Do include the submit circle ({component.submit-circle}) inside any "command bar" or search input pattern. The embedded circular trigger is a signature interaction motif.

Don'ts

• Don't substitute #000000 or #111111 for {colors.primary} (#241e20). The hex value has perceptible warm brown undertones (check the RGB: 36/30/32—red and green channels nearly equal, slightly more blue) that pure black lacks. This warmth is essential.
• Don't use {typography.display-lg} (90px) at a weight below 700. The bold weight is structural at that size—regular weight would look fragile and unintentional.
• Don't add drop shadows to cards that are resting on the canvas. The system uses background-color steps for resting elevation (canvas → surface-soft); reserve {extensions.shadows.md} and above for hover states, modals, and truly floating elements.
• Don't introduce a bright accent color (blue, purple, green) for links or highlights. The entire brand operates in the ink/warm-gray spectrum. If you need a semantic color (error, success), use the predefined {colors.error} / {colors.success} tokens sparingly.
• Don't round the hero headline container or add a background to it. The headline sits directly on {colors.canvas} with transparency—any box around it would undermine the "environmental type" effect.
• Don't use {rounded.pill} on modal containers or content cards. Pills are for actions (buttons, badges, tags); containers use {rounded.lg} (12px) or {rounded.md} (8px) to feel grounded and rectangular.
• Don't set body text (paragraphs, descriptions) above 16px or below 14px. The {typography.body-md} (16px) / {typography.body-sm} (14px) pair covers all prose needs; larger sizes break the hierarchy where Feature Text should take over.
• Don't forget the negative letter-spacing on display and title roles. The -3.6px on {typography.display-lg} and -0.8px on {typography.title-md} are not optional styling—they're integral to the tight, editorial word-shapes that define the brand's typographic voice.
• Don't make the privacy modal ({component.privacy-modal}) full-viewport or remove its shadow/backdrop. It's designed as a contained, dismissible overlay—not a page-state replacement.
• Don't use {colors.disabled} (#dcdcdc) for body text in normal contexts. That gray is reserved for truly inactive elements (close button icons, disabled button text). Body text always uses {colors.ink} or {colors.muted} at minimum.

Motion & Animation

Transition Tokens

--transition-colors: background-color 0.2s ease, color 0.2s ease;
--transition-bg-size: background-size 0.3s ease;
--transform-base: transform 0.3s ease;
--opacity-transform: opacity 0.3s ease, transform 0.3s ease;
--opacity-easing: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

The extracted CSS reveals five distinct transition patterns, suggesting a layered animation strategy: simple color changes (buttons, links) get fast 200ms transitions; transforms (hover lifts, scroll-triggered movements) get 300ms; and special opacity effects (fade-ins, overlays) use a custom cubic-bezier easing (0.165, 0.84, 0.44, 1) that produces a slight overshoot/bounce for organic feel.

Keyframe Animations

• spin — Continuous rotation animation, likely for loading indicators or the submit button icon on active state.
• fadeOut / fadeIn — Opacity-based entrance/exit for modals, tooltips, or content sections appearing on scroll.
• marquee-scroll-left / right / up / down — Four-directional marquee scrolling for logo strips, testimonial carousels, or ticker-style content bands. This indicates the site likely features auto-scrolling partner logos or customer quotes below the fold.
• fadein — Alternative fade-in (possibly with slight Y-offset) for scroll-triggered reveals.
• tabsFadeIn — Tab content transition, suggesting tabbed interfaces exist on the page (possibly in a product demo or features section).
• autoplayProgress / autoplayProgressVertical — Progress bar animations for auto-advancing carousels or slideshows, indicating timed content rotation.
• scroll — Generic scroll-linked animation hook, likely driving parallax or scroll-progress effects.

Interaction Patterns

• Hover lifts: Cards and buttons likely gain {extensions.shadows.md} elevation and subtle Y-translate (-2px to -4px) on hover, using the --transform-base transition.
• Scroll-triggered reveals: Content sections probably fade in and slide up (~20-40px) as they enter the viewport, driven by the fadein/fadeIn keyframes with the bounce easing.
• Marquee auto-scroll: Infinite horizontal or vertical scrolling areas (partner logos, testimonials, stats) run continuously using the four directional marquee keyframes—no user interaction required, pure ambient motion.
• Tab content cross-fade: When users switch tabs (in pricing, features, or demo sections), content fades using tabsFadeIn rather than hard cuts.
• Input focus expansion: The hero search input may animate its border color or add a soft glow on focus, transitioning via --transition-colors.
• Modal backdrop fade: The privacy modal (and any future modals) fades in its backdrop using --opacity-easing while the modal itself scales/fades independently.
• Carousel progress indication: Auto-advancing slideshow sections show a progress bar filling via autoplayProgress, giving users temporal awareness of the rotation.
• Button press feedback: Primary and secondary buttons likely scale down slightly (0.97-0.98) on active/pressed state using the --transform-base timing.

Imagery Style

• Photographic, not illustrative: The hero uses a motion-blurred photograph of people (business crowd, urban setting), indicating a preference for authentic (or authentically-styled) photography over illustration, 3D render, or abstract shapes.
• Motion blur as technique: The deliberate camera-movement blur on the hero image creates dynamism and suggests speed/movement/outbound activity without showing literal sales imagery. It's atmospheric and conceptual.
• Warm color grading: The photograph is toned in ambers, warm browns, and soft creams that harmonize exactly with {colors.canvas} and {colors.surface-warm}. No cool blues or stark blacks in the imagery palette.
• Full-bleed application: Images span edge-to-edge within their containers without frames, borders, or rounded corners. They function as environmental backgrounds for overlaid UI.
• Image supports text, doesn't compete: The hero photograph is placed below the headline (or behind the input area), ensuring the 90px type remains the focal point. Imagery is supportive, not primary.
• Likely lifestyle/professional photography: The crowd scene suggests B2B "team in motion" or "busy professional environment" stock or custom photography—relatable but aspirational.
• No visible product screenshots in hero: The above-the-fold area sells the concept (outbound agents) through type and atmosphere, not through UI demonstration. Product imagery likely appears lower on the page.
• Consistent treatment expected: All photography on the site probably shares the warm grade, shallow-depth or blur treatment, and full-bleed presentation to maintain visual cohesion.

Icon System

• Library: Custom SVG icons (no detected third-party library like Lucide or Heroicons in the CSS class names; Webflow-native SVG embedding is evident from the font-face for webflow-icons).
• Specific icons observed:
  • Arrow up/right (→) — In the top banner "Read the report" link and possibly as the submit icon in the search circle
  • Close (×) — On the banner dismiss button (banner_close_btn)
  • Dropdown chevron (v) — On "Product", "Solutions", and "Resources" nav items indicating expandable menus
  • Hamburger menu (≡) — On mega-nav__burger for mobile navigation toggle
  • External link arrow — Potentially on the report link (the → may serve this double duty)
  • Up-arrow (↑) — Inside the {component.submit-circle} search submission button
• Treatment: Icons appear to use stroke-based rendering (consistent with the clean, lightweight aesthetic) with currentColor for color inheritance. Sizes range from 16px (inline with text, like nav chevrons) to 20-24px (standalone buttons like the submit circle). Alignment is vertically centered with adjacent text using flexbox.
• Weight: Icons match the stroke weight of the typography they accompany—thinner (1.5-2px) next to body text, potentially slightly bolder (2-2.5px) inside solid-filled buttons like the submit circle.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro for static/marketing optimization
- Styling:        Tailwind CSS v3.4+ (utility-first matches the atomic token structure)
- Fonts:          Self-host "Feature Text" and "Saans" from provided WOFF2 URLs; 
                  declare @font-face with font-display: swap for performance
- Animation:      Framer Motion (React) or GSAP for scroll-triggered reveals and 
                  marquee implementations; CSS transitions for hover states
- Icons:          Custom SVG components (extract from site or recreate in Figma); 
                  Lucide React as fallback for standard UI icons (arrows, chevrons, X)
- Component lib:  Radix Primitives for accessible modal/dropdown foundations; 
                  shadcn/ui patterns adapted to Unify's tokens
- Deployment:     Vercel (if Next.js) or Netlify (if static)

Rationale: The extracted CSS strongly suggests a Webflow origin (evidenced by w-dropdown-toggle, w-inline-block, w-embed classes, and the webflow-icons font-face). For a reimplementation, a React/Next.js + Tailwind stack offers the closest paradigm match: utility classes map 1:1 to design tokens, and the component model supports the state-variant architecture (button-primary, button-primary-active) natively. The animation complexity (marquees, scroll-reveals, carousel progress) benefits from a dedicated motion library rather than pure CSS.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; hamburger menu replaces horizontal nav; hero headline scales down (likely to {typography.display-xl} 72px or smaller); search input spans full width; privacy modal becomes full-width with bottom sheet behavior | | Tablet | 640px – 1024px | Two-column grid emerges; nav may condense or use hamburger; hero headline maintains large size but with reduced letter-spacing magnitude; image/input area narrows | | Desktop | 1024px – 1440px | Full layout as shown: 1440px container, asymmetric hero, horizontal nav with dropdowns, modal as centered overlay | | Wide | > 1440px | Container stops expanding at 1440px; extra viewport becomes horizontal padding (centered); hero photograph may extend slightly beyond container for ultra-wide bleed effect |

Touch Targets

• {component.button-primary}: ~56px height × (112px+ width) — comfortably exceeds WCAG AAA 44×44 minimum
• {component.button-secondary}: Same dimensions as primary — excellent tap area
• **{component.hero-input}: Minimum 48-52px height with 16px+ padding — thumb-friendly text entry
• {component.submit-circle}: 44px × 44px — meets WCAG AA (barely); consider enlarging to 48px on mobile for AAA compliance
• {component.nav-link}: ~40px height (8px padding × 2 + 24px text) — acceptable but tight; mobile hamburger eliminates this concern
• {component.burger-menu-btn}: 44px × 44px — meets standards, good for thumb activation
• {component.privacy-button-primary/secondary}: ~44px height — adequate for modal actions

Collapsing Strategy

• Navigation: Horizontal nav with dropdowns collapses to a hamburger menu ({component.burger-menu-btn}) below ~1024px, triggering a slide-out drawer or fullscreen overlay menu. The "Sign in", "Book a Demo", and "Try for free" CTAs move inside this drawer.
• Hero headline: The 90px {typography.display-lg} scales down proportionally—likely to 56-64px on tablet, 40-48px on mobile—with corresponding reductions in negative letter-spacing (perhaps -2px on tablet, -1px on mobile) to prevent character collision at small sizes.
• Hero layout: The headline-above-image stack (headline in its own row, then full-width image with overlaid input) is likely already the mobile-default; desktop may add a side-by-side option that collapses to stacked on smaller viewports.
• Search input: Maintains full-width presentation at all breakpoints; the {component.submit-circle} remains right-positioned but may increase touch target size to 48px on mobile.
• Privacy modal: Transforms from a centered floating card (desktop) to a bottom-sheet style panel (mobile) that slides up from the viewport bottom, occupying 80-90% of screen height with scrollable internal content.
• Grid systems: Any multi-column feature grids or pricing tables below the fold collapse from 3-column to 2-column (tablet) to 1-column (mobile) with cards stacking vertically.

Image Behavior

• Hero photograph: Maintains aspect ratio (approximately 16:9) while scaling width to container. On mobile, height may reduce to prevent the image from consuming too much vertical space (pushing content below the fold). Consider object-fit: cover with a focused crop point (center or slightly upper-third where the blur is most uniform).
• No visible avatars or thumbnails in the screenshot, but if present elsewhere: avatar circles would maintain {rounded.pill} geometry at all sizes (32px desktop → 40px mobile for touch), and thumbnail grids would shift from 4-column to 2-column to 1-column.
• Banner bar image/icon: The top notification strip is text-only in the current view; if icons appear in other banner states, they would hide on mobile to preserve horizontal space for the message text.

Iteration Guide

1. Initialize with tokens, not guesses. Build your landing page by extracting every color, font-size, border-radius, and spacing value from the YAML frontmatter via {section.token} paths. Define CSS custom properties (e.g., --color-primary: #241e20;) that map to these tokens, then reference only the variables in your components. Never hard-code a hex or pixel value that has a corresponding token.

2. Implement the font-loading strategy first. Before writing layout code, set up @font-face declarations for "Feature Text" (Bold 700, Regular 400) and "Saans" (Regular 400, Medium 500) using the WOFF2 URLs found in the extracted CSS. Set font-display: swap to prevent invisible text during load. Define --font-display and --font-body CSS variables pointing to these families with their fallback stacks intact.

3. Build the component library in isolation. Create each component from the components: frontmatter as an independent, styled primitive: {component.button-primary}, {component.button-secondary}, {component.hero-input}, {component.card}, {component.privacy-modal}, etc. Include their state variants (active, disabled, focus) as CSS classes or variant props. Test them against a neutral background before integrating into layouts.

4. Respect the two-font domain rule. When adding a new text element, decide immediately: is it ≥28px and a heading/title? Use "Feature Text." Is it ≤16px and body/UI? Use "Saans." Never use Saans for a 40px heading, and never use Feature Text for a 16px button label (except the nav-item edge case, which is documented). This binary decision prevents font-family drift.

5. Layer elevation through color before shadows. When stacking elements (page → card → input), apply the surface color steps first: {colors.canvas} → {colors.surface-soft} → {colors.surface-soft} (input). Only add {extensions.shadows.sm} or above when the element is genuinely floating (dropdowns, modals, tooltips). This matches the site's layered-flat philosophy.

6. Implement state variants as separate entries. Follow the frontmatter pattern: button-primary, button-primary-active, button-primary-disabled are three distinct component definitions, not nested pseudo-classes. This makes variants explicit, testable, and themeable. Add :hover styles at the CSS level mapping to your _hover variants.

7. Add motion incrementally, with intent. Start with zero animation (still layout). Then add the 200ms color transitions on buttons/links (--transition-colors). Then add the 300ms transform transitions for hover lifts. Finally, implement scroll-triggered fades and marquee animations using the keyframe names extracted from the CSS (fadeIn, marquee-scroll-left, etc.). Each layer should be removable without breaking the design.

8. Test the hero section at actual 90px scale. The {typography.display-lg} (90px) headline is the riskiest element to implement correctly—it will break on narrow viewports if you don't add responsive clamp() statements or media queries. Plan for: Desktop (90px, -3.6px tracking) → Tablet (64px, -2px tracking) → Mobile (40px, -0.8px tracking, switching to {typography.title-md}).

9. Run the linter after significant edits. Execute npx @google/design.md lint DESIGN.md (or equivalent validation) to catch broken token references ({colors.nonexistent}), orphaned tokens (defined but never referenced in body prose), and contrast-ratio warnings (especially {colors.primary} on {colors.primary} scenarios).

10. When in doubt, favor the warm palette. If you encounter a gray-value decision (border color, disabled text, subtle background), skew toward the warm-brown end of the gray spectrum (higher red channel, e.g., #d4d2cd rather than #d4d4d4). The entire brand's warmth lives in these micro-decisions; a single cool-gray border can break the illusion.

Font Setup (CSS Variables):

:root {
  --font-display: 'Feature Text', 'Trebuchet MS', sans-serif;
  --font-body: 'Saans', Verdana, sans-serif;
  --color-canvas: #f8f7f3;
  --color-surface-soft: #fffff9;
  --color-ink: #241e20;
  --color-primary: #241e20;
  --radius-pill: 400px;
  --radius-lg: 12px;
  /* ... remaining tokens mapped from frontmatter */
}

Known Gaps

• Hover state specifics: Per the no-hover policy, exact hover background colors, shadow elevations, and transform values for buttons, cards, and nav links are inferred from patterns but not extractable from a static screenshot. Implement hover states using the _hover component variants as guides.
• Loading/skeleton states: No loading skeletons, spinners (beyond the spin keyframe name), or pending-state treatments were visible. Design a skeleton using {colors.surface-elevated} for the shimmer base and {colors.hairline-solid} for line separators.
• Form validation beyond focus: Error states ({colors.error}), success checkmarks, helper text positioning, and inline validation messaging are not present in the visible viewport. Extend {component.text-input-focus} with -error and -success variants using semantic colors.
• Authenticated/dashboard surfaces: The screenshot shows only the marketing landing page. Dashboard UI, settings panels, data tables, and authenticated-user chrome are entirely unknown and may follow different (potentially denser, more utilitarian) conventions.
• Dark mode: The system is explicitly light-mode (extensions.mode: "light"). No dark-mode token mappings (dark canvas, light ink, inverted surfaces) are provided. If dark mode is required, derive by inverting luminance while preserving the warm undertones (e.g., dark canvas ≈ #1a1816 rather than pure #000000).
• Mobile navigation drawer: The hamburger menu's expanded state (slide-out panel, link list, CTA placement) is not visible. Design a fullscreen or 320px-wide drawer with {colors.surface-soft} background, {typography.title-sm} for section headers, and {typography.body-md} for links.
• Carousels/slideshow details: While autoplayProgress and marquee keyframes suggest rotating content (testimonials, logos, features), the exact carousel UI (dots, arrows, pause button, card count) is not captured. Design carousel controls using {colors.muted-soft} for inactive dots and {colors.primary} for the active dot.
• Exact shadow values: The shadows: extensions block contains recommended values, but the source CSS showed shadows: [] (empty array), meaning no box-shadow was definitively extracted from computed styles. The recommended shadows are synthesized from the elevation table's intent and the color palette's warm tint.
• Dropdown menu contents: Navigation items "Product," "Solutions," and "Resources" show dropdown chevrons, but the expanded mega-menu panels (columns of links, featured content, illustrations) are not visible. These likely use {colors.surface-soft} backgrounds, {rounded.lg} or {rounded.none} corners, and {extensions.shadows.lg} elevation.
• Footer content and structure: The footer ({component.footer}) is inferred from standard page architecture but not visible in the screenshot. Expect a multi-column link directory, legal text in {typography.caption}, and social icons, all on {colors.surface-soft} background.