Holded Design System

Overview

Holded presents itself as a confident, modern SaaS platform for SME business management—invoicing, accounting, CRM, and operations unified under one roof. The visual language is deliberately restrained: a near-white {colors.canvas} background carries almost all content, allowing the product preview imagery and strategic brand moments to command attention without visual competition. The dominant mood is professional clarity—this is software that positions itself as the "no headaches" alternative to fragmented tooling.

Brand voltage lives in two precise locations: the electric {colors.active} blue (#1963ef) that powers the primary CTA button ({component.button-accent}) and the headline accent on "No headaches," and the deep {colors.primary} charcoal (#121926) that anchors the top navigation CTA ({component.button-primary}) and all display typography. This dual-brand approach—dark authority plus electric action—creates a visual rhythm where the eye moves from trustworthy dark headlines to urgent blue conversion points.

The typography move that defines the system is unapologetic boldness at scale: {typography.display-lg} lands at 48px with font-weight: 700, a choice that signals confidence without ornament. Body text breathes at a generous 18px ({typography.body-lg}) in a softer {colors.body} gray, creating comfortable reading distances from the heavy headlines above. The single typeface—Inter, served as a variable-weight web font—carries every role from invoice monospace figures to pill-button labels, creating typographic unity across the marketing surface and the embedded product preview.

Shape language splits cleanly: interactive elements (buttons, tabs, badges) default to {rounded.pill} infinity radius or {rounded.DEFAULT} 8px moderate rounding, while container surfaces use {rounded.xl} 16–20px for the product preview card, signaling a polished application chrome distinct from marketing UI. The overall effect is approachable professionalism—softened corners everywhere, but never so much that the interface feels toy-like.

A single sub-system is visible: the product preview dialect that renders an invoice detail view inside a floating card. This embedded UI uses its own surface palette ({component.preview-sidebar}, {component.preview-main}, {component.preview-detail-panel}), tab componentry ({component.tab-bar} / {component.tab-active}), and status badging ({component.status-badge-success})—all contained within the marketing-page card shell.

Key Characteristics

• Canvas-first layout: {colors.canvas} white dominates, with {colors.surface-soft} blue-tint reserved for product preview containers
• Dual brand voltage: {colors.primary} dark charcoal for authority (nav CTA, headlines); {colors.active} electric blue for conversion (hero CTA, links, accents)
• Bold Inter display type at {typography.display-lg} (48px/700 weight) with -0.02em letter-spacing for tight, confident headlines
• Pill-shaped interactive elements: {rounded.pill} on buttons, tabs, and badges; {rounded.xl} on container cards
• Generous 18px body copy in {colors.body} mid-gray, creating comfortable hierarchy beneath heavy headlines
• Product preview as signature moment: multi-panel invoice card with sidebar navigation, tabbed detail view, and status indicators
• Subtle shadow elevation ({extensions.shadows.sm}) on the preview card; flat marketing surfaces elsewhere
• Top banner in {colors.surface-darkest} with {colors.on-dark} white text for promotional urgency

Colors

Brand & Accent

• Primary ({colors.primary} — #121926): Deep near-black charcoal used for the main navigation CTA button ({component.button-primary}), all display headlines ({typography.display-lg}, {typography.title-md}), and the top announcement banner ({component.top-banner}) background. This is the authority color.
• Primary Hover ({colors.primary-hover} — #0d1420): Slightly deepened primary for hover/active states on dark buttons.
• Active / Accent Blue ({colors.active} — #1963ef): Electric blue—the conversion color. Powers the hero's primary CTA ({component.button-accent}), the "No headaches" headline accent ({component.hero-accent-text}), all links ({colors.link}), and the client avatar icon tint ({component.client-avatar}). This is where eyes go to act.
• Active Dark ({colors.active-dark} — #1657d1): Pressed/hover state for blue buttons and links, providing tactile feedback on interaction.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white base layer. Used for the hero band ({component.hero-band}), main background, and the interior of the product preview card ({component.preview-main}).
• Surface Soft ({colors.surface-soft} — #eef4fe): Very light blue tint. Applied to the product preview sidebar ({component.preview-sidebar}) and the tab bar background ({component.tab-bar}), creating a subtle "application chrome" feel inside the marketing context.
• Surface Neutral ({colors.surface-neutral} — #eef2f6): Cool light gray. Used for the right-hand detail panel in the invoice preview ({component.preview-detail-panel}), distinguishing it from the main content area.
• Surface Skeleton ({colors.surface-skeleton} — #f8fafc): Near-white gray, likely used for loading states or very subtle section alternation.
• Surface Strong ({colors.surface-strong} — #e3e8ef): Medium-light gray. Functions as the primary hairline/divider color ({colors.hairline}) and border tone.
• Surface Dark ({colors.surface-dark} — #202939): Deep charcoal-gray. Appears in certain UI elements within the product preview and potentially dark-mode-adjacent components.
• Surface Darkest ({colors.surface-darkest} — #121926): The darkest surface, identical to {colors.primary}. Used exclusively for the top promotional banner ({component.top-banner}) background, creating maximum contrast for the limited-time offer messaging.

Text / Ink

• Ink ({colors.ink} — #121926): The darkest text color, matching primary. Used for headlines ({component.hero-headline}), invoice field values ({component.invoice-field-value}), and any text requiring maximum weight.
• Body ({colors.body} — #5d6878): Mid-tone gray, the workhorse paragraph color. Hero subheadline ({component.hero-subheadline}), social proof row text ({component.social-proof-row}), and general descriptive copy.
• Muted ({colors.muted} — #4b5565): Darker than body gray. Navigation links ({component.top-nav-link}), tab inactive states ({component.tab-inactive}), and secondary labels.
• Muted Soft ({colors.muted-soft} — #364152): Navigation-level gray, slightly lighter than muted. Used for top nav items ({component.top-nav} text color), login link ({component.nav-login-link}), and language selector ({component.nav-language-btn}).
• On Primary ({colors.on-primary} — #ffffff): Pure white text for rendering on dark backgrounds—{component.top-banner} text, {component.button-primary} label, {component.tab-active} label.
• On Dark ({colors.on-dark} — #ffffff): Identical to on-primary; used specifically for the top banner's white-on-darkest treatment.
• On Surface Dark ({colors.on-surface-dark} — #ffffff): White text for any elements rendered on {colors.surface-dark} backgrounds.

Hairlines & Borders

• Hairline ({colors.hairline} — #e3e8ef): Default divider and border color. Matches {colors.surface-strong}; used for the nav bottom border, mobile sticky CTA top border, and internal panel separators.
• Border Subtle ({colors.border-subtle} — #f0f0f0): Very light gray for delicate borders where even less emphasis is needed.
• Border Strong ({colors.border-strong} — #d0d5dc): Medium gray for borders requiring more visibility—input focus rings, card outlines in certain states.

Semantic

• Success ({colors.success} — #16a34a): Green for positive status indication. Powers the "Verifuctu ready" checkmark and the "Reviewed by your advisor" status badge ({component.status-badge-success}).
• Link ({colors.link} — #1963ef): Identical to {colors.active}. All clickable text links inherit this blue, including the "50% discount for 3 months" offer link and "From 15 €/month" pricing link.
• Link Hover ({colors.link-hover} — #1657d1): Darker blue on link hover, matching {colors.active-dark}.

Signature / Brand-Specific

• Signature Blue Tint ({colors.signature-blue-tint} — #eef4fe): The distinctive pale blue that identifies Holded's product surfaces. Used for {component.client-avatar} background and {colors.surface-soft}—this tint is the visual shorthand for "you're looking at the app now."
• Pricing Highlight ({colors.pricing-highlight} — #eef4fe): Reserved for pricing-related callout surfaces; currently maps to the same blue tint as signature.

Typography

Font Family

The entire system runs on Inter, served as a self-hosted variable font (weights 100–900 in a single file with font-display: swap). This is the same Inter familiar from modern SaaS landings—geometric sans-serif with excellent screen legibility, a tall x-height, and distinctive open apertures. The fallback stack degrades gracefully: "inter", -apple-system, Helvetica, Arial, sans-serif.

One exception: monospace data ({typography.mono}) uses the system stack ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace at 13px for invoice numbers, document IDs, and any financial figures requiring tabular alignment.

Inter plays every role: the 48px bold headlines, the 18px body paragraphs, the 14px button labels, and the 12px overline captions. There is no second typeface for headlines versus body—hierarchy comes from size, weight, and color alone.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 700 | 1.08 | -0.03em | Reserved for larger contexts (not visible in this viewport, but part of the scale) | | {typography.display-lg} | 48px | 700 | 1.08 | -0.02em | Hero headline ("Invoice, get paid...") | | {typography.title-md} | 36px | 700 | 1.375 | -0.02em | Section headings below hero | | {typography.title-sm} | 24px | 600 | 1.35 | -0.01em | Card titles, subsection headers | | {typography.body-lg} | 18px | 400 | 1.625 | 0 | Hero subheadline, lead paragraphs | | {typography.body-md} | 16px | 400 | 1.5 | 0 | Body copy, invoice field values | | {typography.body-sm} | 14px | 400 | 1.5 | 0 | Navigation links, secondary text | | {typography.caption} | 13px | 400 | 1.38 | 0 | Status badges, timestamps, fine print | | {typography.button} | 14px | 500 | 1.25 | 0 | Primary & secondary button labels | | {typography.button-sm} | 12px | 500 | 1.25 | 0 | Top banner text, small CTAs | | {typography.label-md} | 16px | 600 | 1.5 | 0 | Form labels, table headers | | {typography.label-sm} | 12px | 600 | 1.4 | 0.02em | Overline labels ("CLIENT", "TOTAL"), tab labels | | {typography.mono} | 13px | 400 | 1.5 | 0 | Invoice numbers, document IDs, monetary figures |

Principles

Holded's typography trusts weight and size as its primary hierarchy carriers, with color as the secondary signal. The hero headline at {typography.display-lg} (48px/700) in {colors.ink} commands immediate attention; the subheadline drops to {typography.body-lg} (18px/400) in the significantly lighter {colors.body} gray, creating a ~30px size delta and a weight-to-regular transition and a dark-to-mid-gray shift. This triple-redundancy ensures the hierarchy reads clearly even at a glance.

The bold 700 weight on all display and title roles is a deliberate choice: this is not a shy brand. Headlines are meant to be heard, and Inter at 700 weight delivers that presence without needing decorative italics or uppercase transforms. Letter-spacing is slightly negative (-0.02em to -0.03em) on display sizes to tighten the bold forms and increase perceived density.

Label text ({typography.label-sm}) breaks pattern with positive letter-spacing (+0.02em) and uppercase (implied by the "CLIENT"/"TOTAL" usage), creating a formal, structural voice distinct from sentence-case body copy. This is the only role where tracking opens up.

Monospace is reserved strictly for data that benefits from fixed-width alignment: the "F260001" document number, the "1.991,66 €" total, dates formatted as "02/10/2026". These render at 13px—smaller than body text—signaling "this is machine-readable information."

Note on Font Substitutes

Inter is available via Google Fonts (https://fonts.google.com/specimen/Inter) under the SIL Open Font License. For implementations that cannot self-host the variable font, the Google Fonts CDN version supports weights 100–900 and includes the same glyph coverage. Define the CSS variables:

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

No substitution is needed if self-hosting the .woff2 files referenced in the extracted @font-face declarations.

Layout

Spacing System

• Base unit: 4px (with 2px as the atomic minimum for hairline-thick adjustments).
• Tokens: {spacing.xxs} (2px — hairline offsets, focus ring insets), {spacing.xs} (4px — icon gaps, tight internal padding), {spacing.sm} (6px — common internal gap), {spacing.md} (8px — standard compact padding), {spacing.lg} (10px — button vertical padding), {spacing.xl} (12px — nav link horizontal padding, card internal gaps), {spacing.2xl} (16px — standard padding), {spacing.3xl} (20px — button horizontal padding), {spacing.4xl} (24px — section-internal spacing), {spacing.5xl} (28px — larger gaps), {spacing.6xl} (32px — grid gutters, major element spacing), {spacing.section} (80px — vertical section padding).
• Section padding (vertical): {spacing.section} (80px) — used on the hero band ({component.hero-band}) to create generous breathing room above and below the headline/CTA block.
• Card internal padding: The product preview card ({component.product-preview-card}) uses {spacing.md} (8px) as its outer wrapper padding, with child panels receiving {spacing.xl} (12px) to {spacing.xl}+ (16–24px) depending on density.
• Gutters: Desktop horizontal gutter is approximately 16–24px ({spacing.2xl} to {spacing.4xl}) via px-4 sm:px-6 lg:px-8 responsive classes, constraining content within a max-width container.

Grid & Container

• Max content width: 1440px (max-w-container-xl), centered with auto margins. This is wider than typical 1280px containers, giving the hero and product preview room to breathe.
• Density choice: Marketing-airy in the hero (single column, centered text, massive whitespace); application-dense inside the product preview card (multi-column invoice layout with sidebar, main content area, and detail panel).
• Desktop grid behavior: The hero uses a single centered column (~680px max for text) with the product preview card positioned below as a full-width (within container) element. Inside the preview card, a three-zone layout emerges: 64px icon sidebar ({component.preview-sidebar}), fluid main content ({component.preview-main}), and fixed-width detail rail ({component.preview-detail-panel}).
• Hero column split: Text is center-aligned in a single column; the CTA pair ({component.button-accent} + {component.button-secondary}) sits centered below the subheadline, with social proof row further below.

Whitespace Philosophy

The system practices editorial-airy spacing in marketing contexts and efficient-dense spacing within the embedded product preview. The hero band's 80px vertical padding and 18px body text with 1.625 line-height signal "this is content you should read comfortably." The invoice preview, by contrast, packs labels, values, tables, and status indicators into a compact multi-panel layout that mimics real application UI density. This duality—generous marketing, dense app—signals that Holded is both approachable and functionally serious.

Header Architecture

┌──────────────────────────────────────────────────────────────────────┐
│ [TOP BANNER - full-width, {colors.surface-darkest}]                 │
│ "14-day free trial. Start now..."                    Sales phone →  │
├──────────────────────────────────────────────────────────────────────┤
│ [TOP NAV - sticky, backdrop-blur, h-56px]                           │
│ ┌─ holded logo ─┐  Features ▾  Companies ▾  ...  🌐 Log in  [CTA] │
│ └───────────────┘                                      Start free →│
└──────────────────────────────────────────────────────────────────────┘
  ←—— px-4 sm:px-6 lg:px-8 ——→  (within max-w-container-xl = 1440px)

The nav uses a sticky positioning with backdrop blur (the transition-[background-color,border-color,backdrop-filter] class indicates frosted-glass behavior on scroll). Height is 56px (h-14) scaling to 64px at 1600px+ breakpoints. Logo is flush-left; navigation menu items (Features, Companies, Freelancers, etc.) follow with dropdown carets; utilities (language globe icon, Login link, Start free CTA) are flush-right.

Hero Section

┌──────────────────────────────────────────────────────────────────────┐
│                        [HERO BAND - bg-white]                        │
│                                                                      │
│          "Invoice, get paid and close the month.                     │
│                    No headaches."                                    │
│                                                                      │
│     The invoicing and accounting software for freelancers            │
│              and SMBs that automates how you run...                  │
│                                                                      │
│              [ Start free → ]    [ Book a demo ]                     │
│                                                                      │
│   ⭐⭐⭐⭐⭐ 4.6/5 on Capterra  │  Over 900,000 users  │  ✓ Veri...  │
│                                                                      │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │                    [PRODUCT PREVIEW CARD]                     │   │
│  │  ┌────┬─────────────────────────────────┬─────────────────┐  │   │
│  │  │side│        INVOICE PREVIEW          │  DETAIL PANEL   │  │   │
│  │  │bar│                                 │                 │  │   │
│  │  │    │  Demo Client Ltd.               │  Total 1.991,66€│  │   │
│  │  │icons│  [Invoice table]               │  Document no.   │  │   │
│  │  │    │                                 │  Client         │  │   │
│  │  └────┴─────────────────────────────────┴─────────────────┘  │   │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

The hero centers text content in a column roughly 700–800px wide. The headline uses {typography.display-lg} with the phrase "No headaches." rendered in {colors.active} blue. Two CTAs sit side-by-side: the primary {component.button-accent} (blue, solid) and secondary {component.button-secondary} (white with border). Below, a social proof row displays star rating, user count, certification badge, and starting price—all in {typography.body-sm} with appropriate color coding.

The product preview card is the visual anchor: a large {rounded.xl} container showing a realistic invoice detail view with left icon sidebar, central invoice content (client info, line items table, total), and right metadata panel with General/Messages/History tabs.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat | No shadow, {colors.canvas} background | Hero band, nav bar, footer areas | | 1 – Hairline | {extensions.shadows.ring} (1px rgba border) | Input focus states, outlined buttons | | 2 – Soft raise | {extensions.shadows.xs} (0 1px 2px rgba) | Subtle lift on cards, dropdown menus | | 3 – Card float | {extensions.shadows.sm} (layered 4px + 12px) | Product preview card ({component.product-preview-card}) | | 4 – Modal/dropdown | {extensions.shadows.lg} (25px/50px spread) | Modals, large popover panels | | 5 – Brand glow | {extensions.shadows.md} (blue-tinted 8px + 20px) | Special accent elevation (CTAs on dark bg) |

The system is predominantly flat—marketing surfaces live at Level 0 with no shadow, relying on background color changes ({colors.canvas} vs. {colors.surface-soft}) to define boundaries. The one elevated element is the product preview card, which floats at Level 3 with a layered neutral shadow, signaling "this is a discrete object you could pick up."

Shadows are neutral-cool (rgba blacks with slight transparency). No warm-toned or colored shadows appear in the extracted data. The special blue-tinted shadow ({extensions.shadows.md}) uses {colors.active} blue at low opacity for brand-signature elevation moments.

Decorative Depth

While the static screenshot shows a flat card, the extracted keyframes list reveals rich decorative animation: hero-glow-pulse, hero-email-breathe, erp-aurora-drift, erp-orbit-halo. These suggest the live site features animated gradient washes, glowing orbs, and orbital particle effects around the hero and ERP explanation sections—depth created through motion and luminosity rather than static shadows.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small inner elements, tag corners | | {rounded.DEFAULT} | 8px | Standard button radius ({component.button-primary}, {component.button-accent}), nav link hit areas, input fields | | {rounded.md} | 12px | Medium panels, dropdown containers | | {rounded.lg} | 16px | Product preview card sub-panels (sidebar, detail rail), avatar containers | | {rounded.xl} | 20px | Product preview card outer container ({component.product-preview-card}) | | {rounded.pill} | 9999px | Tab bar ({component.tab-bar}), status badges ({component.status-badge-success}), nav utility buttons, pill-shaped links | | {rounded.full} | 9999px | Circular elements (avatar alternatives, icon circles) |

The shape vocabulary is intentionally narrow: most things are either 8px (slightly soft) or infinity (fully round). The 16–20px range is reserved for the signature product preview card, giving it a "mobile-app-window" feel distinct from the sharper marketing UI around it.

Photography Geometry

No photography is present in this viewport—the visual weight is carried by the product preview illustration (a crafted UI mockup of the invoice screen). This rendered illustration uses {rounded.xl} on its outer container with internal panels at {rounded.lg}. The client avatar within the preview is a 40×40px square with {rounded.DEFAULT} (8px) corners, containing a purple/blue asterisk icon.

If real photography exists elsewhere on the site (team photos, office imagery), it would likely follow the {rounded.lg} to {rounded.xl} convention established by the card system, avoiding sharp rectangular crops.

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.top-banner} — The full-width promotional strip at the very top of the page. Background {colors.surface-darkest}, text {colors.on-dark} in {typography.button-sm} (12px), height constrained to 32px. Contains the "14-day free trial" offer text with an underlined "50% discount for 3 months" link in {colors.link}, followed by a "LIMITED-TIME OFFER" badge and a phone number link on the right. No border; sits above the nav with no gap.

{component.top-nav} — The sticky navigation bar. Background is semi-transparent white (rgba(255, 255, 255, 0.90)) with backdrop-filter blur on scroll. Text color {colors.muted-soft}, height 56px (64px at wide breakpoints). Contains logo (flush-left), navigation menu items (center-left), and utility actions (flush-right). Has a {colors.hairline} bottom border that persists.

{component.top-nav-link} — Individual navigation menu items (Features, Companies, Freelancers, etc.). Transparent background, text {colors.muted-soft} in {typography.button} (14px/500), {rounded.DEFAULT} (8px) hit area with {spacing.md} {spacing.xl} (8px 12px–16px) padding. Includes a dropdown chevron icon (1px gap via gap-1). Hover darkens text toward {colors.ink}.

{component.nav-link-active} — Active state for nav links. Same structure as {component.top-nav-link} but text color shifts to {colors.ink}, indicating the current section.

{component.nav-language-btn} — The globe icon + "language" selector in the nav's right utility group. Transparent background, {colors.muted-soft} text in {typography.body-sm}, {rounded.pill} shape, {spacing.sm} {spacing.md} padding. Clickable, likely opens a dropdown.

{component.nav-login-link} — "Log in" text link in the nav. Transparent background, {colors.muted-soft} text in {typography.button}, {rounded.pill} shape. Minimal padding; functions as a text-style CTA.

{component.button-primary} — The dark "Start free" button in the top nav. Background {colors.surface-darkest}, text {colors.on-primary} in {typography.button}, {rounded.DEFAULT} (8px), padding 10px 20px. Includes a right-arrow icon (→) after the label with gap-1 (4px) spacing. This is the high-contrast nav CTA. Its active variant is {component.button-primary-active} with {colors.primary-hover} background.

{component.button-primary-active} — Pressed/hover state for {component.button-primary}. Background shifts to {colors.primary-hover} (#0d1420), maintaining all other properties. Provides tactile feedback on the nav CTA.

{component.button-accent} — The primary hero CTA: "Start free →". Background {colors.active} (electric blue #1963ef), text {colors.on-primary} (white) in {typography.button}, {rounded.DEFAULT} (8px), padding 12px 24px. Includes arrow icon. This is the most visually prominent conversion point on the page. Active state is {component.button-accent-active} using {colors.active-dark}.

{component.button-accent-active} — Pressed/hover state for the blue hero CTA. Background deepens to {colors.active-dark} (#1657d1). Maintains white text and rounding.

{component.button-secondary} — The "Book a demo" button beside the primary CTA. Transparent background with a subtle border (likely {colors.border-strong}), text {colors.ink} in {typography.button}, {rounded.DEFAULT} (8px), padding 12px 24px. This is the lower-emphasis alternative action. Active variant {component.button-secondary-active} adds {colors.surface-soft} background fill.

{component.button-secondary-active} — Hover/pressed state for the secondary button. Gains {colors.surface-soft} background fill while keeping the border and ink text color.

Cards & Containers

{component.hero-band} — The full-width hero section container. Background {colors.canvas}, text defaults to {colors.ink}. Padding {spacing.section} (80px) vertically with responsive horizontal padding. Centers its children horizontally. Contains the headline, subheadline, CTAs, social proof, and product preview card.

{component.hero-headline} — The H1 "Invoice, get paid and close the month." Transparent background, text {colors.ink} in {typography.display-lg} (48px/700). Center-aligned. Tight line-height (1.08) with -0.02em letter-spacing for dense, impactful presentation.

{component.hero-subheadline} — The descriptive paragraph below the headline. Transparent background, text {colors.body} (#5d6878) in {typography.body-lg} (18px/400). Center-aligned with generous 1.625 line-height. Maximum width constrains it to readable measure (~700px).

{component.hero-accent-text} — The "No headaches." fragment of the headline, rendered in {colors.active} blue instead of ink. Same typography as {component.hero-headline} but with the brand blue color creating a visual "pop" within the otherwise monochrome headline.

{component.social-proof-row} — The horizontal bar below the CTAs displaying star rating, user count, verification badge, and price. Transparent background, text {colors.body} in {typography.body-sm} (14px). Items separated by vertical dividers or whitespace. Contains {component.star-rating}, text metrics, and {component.pricing-badge}.

{component.star-rating} — Five filled stars (★) in gold/amber (#f59e0b), followed by "4.6/5 on Capterra" text. Transparent background; the star color is the only non-token color in this component (brand accent for ratings).

{component.social-proof-link} — Clickable text within the social proof row (e.g., "From 15 €/month"). Text color {colors.link}, {typography.body-sm}. Underlined or styled as link.

{component.pricing-badge} — The "From 15 €/month" pricing callout. Text {colors.link} in {typography.body-sm}, transparent background. Positioned at the right end of the social proof row.

{component.product-preview-card} — The signature component: a large, elevated card showcasing the Holded invoice UI. Background {colors.canvas}, text {colors.ink}, {rounded.xl} (20px) corners, {extensions.shadows.sm} elevation. Padding {spacing.md} (8px) outer wrapper. Contains three child panels: sidebar, main content, detail rail. This is the visual "proof" that the software is real and usable.

{component.preview-sidebar} — The leftmost 64px-wide column inside the product preview card. Background {colors.surface-soft} (pale blue tint), text {colors.muted} in {typography.body-sm}. Rounded {rounded.lg} on its inner corners (left-top, left-bottom). Contains a vertical stack of icon buttons (diamond/tag/document/chart/money/user/cube icons) representing different app sections.

{component.preview-main} — The central, fluid-width panel of the preview card. Background {colors.canvas}, text {colors.ink} in {typography.body-md}. Rounded {rounded.xl} on its right-side corners. Contains the invoice header (client avatar + name/address + QR code), invoice metadata (CLIENT/TOTAL labels), and a line-items table (DESCRIPTION/QUANTITY/PRICE/TOTAL columns).

{component.preview-detail-panel} — The right-hand metadata panel. Background {colors.surface-neutral} (cool gray), text {colors.ink} in {typography.body-sm}. Rounded {rounded.lg}. Contains a tab bar ({component.tab-bar}) with General/Messages/History tabs, followed by key-value pairs (Total, Document no., Client, Date) and a {component.status-badge-success} for advisor review.

Inputs & Forms

No traditional form inputs (text fields, textareas, selects) are visible in this viewport. The page is a landing/marketing surface, not an interactive form. If inputs exist in other sections (signup flow, contact form), they would likely follow the {rounded.DEFAULT} (8px) convention with {colors.canvas} background, {colors.ink} text, {colors.border-strong} border, and {extensions.shadows.ring} focus state.

Navigation (In-Preview)

{component.tab-bar} — The pill-shaped tab switcher inside the preview's detail panel. Background {colors.surface-soft}, {rounded.pill} (infinity), padding 4px internal. Contains {component.tab-inactive} and {component.tab-active} children. Uses {typography.label-sm} (12px/600) for tab labels.

{component.tab-inactive} — Unselected tab (Messages, History). Transparent background, text {colors.muted}, {rounded.pill}, padding {spacing.sm} {spacing.xl} (6px 12px+). Blends into the tab bar background.

{component.tab-active} — Selected tab ("General"). Background {colors.surface-darkest}, text {colors.on-primary} (white), {rounded.pill}, same padding as inactive. Creates strong contrast against the pale tab bar—this is a "filled" tab pattern.

Status & Badge Components

{component.status-badge-success} — The "Reviewed by your advisor" indicator. Background rgba(22, 163, 74, 0.08) (very faint green), text {colors.success} (green #16a34a) in {typography.caption} (13px). {rounded.pill} shape, padding ~4px 12px. Includes a checkmark icon (✓) before the text. Signals completed/compliant status.

{component.client-avatar} — The 40×40px square avatar for "Demo Client Ltd." Background {colors.signature-blue-tint} (pale blue), contains a purple/blue asterisk/sparkle icon ({colors.active}-tinted). {rounded.DEFAULT} (8px) corners. Positioned at the top-left of the invoice content area.

{component.label-overline} — Small uppercase labels like "CLIENT", "TOTAL", "DESCRIPTION" above data fields. Transparent background, text {colors.muted}, {typography.label-sm} (12px/600) with +0.02em letter-spacing. Creates structural hierarchy within dense data displays.

{component.invoice-total} — The large "1.991,66 €" figure. Transparent background, text {colors.ink} in {typography.title-sm} (24px/600). Right-aligned in its context. The monetary value is the most important number on the invoice.

{component.invoice-field-label} — Labels for individual fields (Document no., Client, Date). Text {colors.muted} in {typography.label-sm} or {typography.body-sm}. Left-aligned, paired with {component.invoice-field-value}.

{component.invoice-field-value} — Data values for invoice fields. Text {colors.ink} in {typography.body-md} (16px/400). Right-aligned opposite their labels. Monospace ({typography.mono}) may be applied to the document number "F260001".

Mobile & Responsive Components

{component.mobile-sticky-cta-band} — A fixed-position bar at the viewport bottom on mobile devices. Background rgba(255, 255, 255, 0.95) (nearly opaque white with blur), text {colors.ink}. Padding {spacing.lg} (24px) vertical with horizontal gutter. Has a {colors.hairline} top border. Contains a full-width {component.button-accent} clone for thumb-friendly mobile conversion. Only visible at narrow breakpoints (mobile-sticky-cta class with fixed inset-x-0 bottom-0 z-40).

{component.divider} — A 1px horizontal rule. Background {colors.hairline} (#e3e8ef), height 1px. Used between the social proof row and the product preview card, and as the nav's bottom border.

Do's and Don'ts

Do

• Do use {colors.active} (#1963ef) for all primary CTAs in the hero and body—this blue is the conversion color and should be reserved for actions that drive signups or demos.
• Do apply {typography.display-lg} (48px/700) with {colors.ink} for the H1 headline, and reserve {colors.active} for a single emphasized phrase within that headline (as seen with "No headaches.").
• Do use {rounded.pill} (9999px) for tab bars, status badges, and nav utility buttons—these fully-rounded shapes signal "interactive control" vs. the {rounded.DEFAULT} (8px) of primary action buttons.
• Do set body paragraphs to {typography.body-lg} (18px/400) in {colors.body} (#5d6878) for comfortable reading; never drop below 16px for marketing copy.
• Do apply {colors.surface-soft} (#eef4fe) as the background for any "app-like" container (preview cards, dashboard snippets) to create visual separation from the marketing canvas.
• Do use {extensions.shadows.sm} (layered 4px + 12px neutral shadow) when elevating the product preview card or any "floating window" element above the canvas.
• Do render monetary figures and document IDs in {typography.mono} (13px) for tabular alignment, even though the rest of the UI uses Inter.
• Do include the social proof row (stars, user count, verification badge, price) below the hero CTAs—it's a critical trust signal positioned at the "moment of hesitation."
• Do use {typography.label-sm} (12px/600, +0.02em tracking, implied uppercase) for structural overline labels like "CLIENT" and "TOTAL" inside data-dense panels.
• Do maintain the top banner ({component.top-banner}) in {colors.surface-darkest} with {colors.on-dark} text—it creates urgency through maximum contrast before the user even scrolls.

Don't

• Don't substitute {colors.primary} (#121926, dark charcoal) for {colors.active} (#1963ef, blue) on the hero CTA—the nav uses dark, the hero uses blue; this split is intentional.
• Don't reduce the headline weight below 700—the brand voice is confident and bold; a 400 or 500 weight headline would read as tentative.
• Don't add gradient backgrounds or colorful washes to the hero band—the {colors.canvas} white is deliberate; let the blue headline accent and product preview card carry visual interest.
• Don't use {rounded.xl} (16–20px) for buttons or tabs—that radius is reserved for the product preview card container; buttons stay at {rounded.DEFAULT} (8px) or {rounded.pill}.
• Don't render body copy in {colors.ink} (#121926)—that shade is reserved for headlines and data values; body text must be {colors.body} (#5d6878) or lighter to establish hierarchy.
• Don't invent new color tokens for the product preview's internal surfaces—use the existing {colors.surface-soft}, {colors.surface-neutral}, and {colors.canvas} triad that defines the "app-within-marketing" dialect.
• Don't remove the arrow icon (→) from CTA buttons—"Start free →" and "Start free →" both include directional indicators that imply forward momentum.
• Don't collapse the product preview card's three-panel layout (sidebar + main + detail) into a single column on desktop—the spatial arrangement is part of the "real software" credibility signal.
• Don't use {colors.success} green for anything except verified/completed status indicators—its sole job is the checkmark badge.
• Don't add drop shadows to marketing text blocks or the nav bar—only the product preview card and potential modals receive elevation; flatness is the default.

Motion & Animation

Transition Tokens

--transition-colors: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     outline-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-backdrop: background-color 0.3s cubic-bezier(0, 0, 0.2, 1),
                       border-color 0.3s cubic-bezier(0, 0, 0.2, 1),
                       -webkit-backdrop-filter 0.3s cubic-bezier(0, 0, 0.2, 1),
                       backdrop-filter 0.3s cubic-bezier(0, 0, 0.2, 1);
--transform-base: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                  translate 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                  scale 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                  rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--opacity-fade: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--opacity-slow: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--dropdown-slide: top 0.5s cubic-bezier(0.4, 0, 0.2, 1);

The system uses cubic-bezier(0.4, 0, 0.2, 1) (CSS ease-out-adjacent) as the universal easing curve—a smooth deceleration that feels "material" without being sluggish. Color transitions are fast (150ms) to feel instant; transform/opacity transitions are slightly longer (200–300ms) for perceptible motion; dropdown slides are slowest (500ms) for graceful reveals.

Keyframe Animations

The extracted CSS lists 21 named keyframe animations, revealing a highly animated experience beyond the static screenshot:

• fadeIn — Standard opacity 0→1 entrance for elements appearing on scroll.
• dialogIn — Modal/dialog entrance (likely scale + fade).
• qr-scan — Animation on the QR code in the invoice preview (scanning line effect).
• card-float-back / card-float-front — Subtle Y-axis oscillation on the product preview card's layers, creating a "floating" parallax depth effect.
• hero-glow-pulse — Breathing luminosity behind the hero headline or CTA area (likely a radial gradient opacity cycle).
• hero-email-breathe — Pulsing scale/opacity on an email input or illustration element in the hero (suggests an email capture variant exists).
• why-spectrum-sweep — Color gradient sweep across the "Why Holded?" feature section (rainbow/gradient animation).
• why-tool-drift — Gentle translation on tool icons in the feature grid.
• why-hub-glow — Pulsing glow effect on a central "hub" icon or diagram.
• erp-explain-loose / erp-explain-row / erp-explain-arrow — Coordinated animations for the ERP explanation section: container fade, row stagger, and arrow flow.
• erp-aurora-drift — Northern-lights-like gradient drift in the ERP section background (color-wash motion).
• erp-orbit-halo / erp-orbit-pulse / erp-orbit-node — Orbital system animations: a halo ring, pulsing center, and orbiting nodes (suggests a diagram with revolving elements).
• shimmer — Loading skeleton shimmer effect (gradient sweep).
• pulse-hint — Attention-drawing pulse on hint/tooltips.
• arrow-flow — Animated dashed/solid arrow path drawing.

Interaction Patterns

• Scroll-triggered entrances: Elements fade and slide up as they enter the viewport (fadeIn + likely translateY via IntersectionObserver). The hero content, social proof row, and product preview card each likely have staggered entrance timings.
• Nav backdrop blur: On scroll, the top nav transitions from transparent to rgba(255, 255, 255, 0.90) with backdrop-filter: blur() enabled over ~300ms (--transition-backdrop).
• Dropdown reveals: Nav menu items (Features ▾, Companies ▾) trigger dropdown panels that slide down from the top (--dropdown-slide at 500ms).
• Button hover lifts: While hover states aren't documented per policy, the --transform-base token suggests buttons may translateY(-1px) or scale(1.02) on hover.
• Tab switching: The preview detail panel's tabs (General/Messages/History) likely swap content with a fade or slide transition.
• QR code scan line: The QR code in the invoice preview has an animated scanning line (qr-scan) that moves vertically, suggesting "live document" realism.
• Card parallax: The product preview card likely has subtle mouse-tracking or scroll-linked parallax on its back and front layers (card-float-back / card-float-front).
• Orbital diagram animation: The ERP section features a complex orbital system with halos, pulses, and node movement—this is the most elaborate animation in the system.

Imagery Style

• Primary visual: A crafted UI mockup/illustration of the Holded invoice detail screen, rendered as a "window" within the marketing page. Not a screenshot—an idealized, art-directed representation with perfect spacing, sample data ("Demo Client Ltd.", "Example Co."), and a QR code.
• Style: Flat-vector-application-chrome aesthetic. Clean lines, consistent 8px/16px rounding, Inter typography throughout the mockup (matching the marketing page's font), and a three-panel layout (sidebar + content + detail) that mirrors real dashboard UI.
• Color treatment: The mockup uses the same design token colors as the marketing page ({colors.surface-soft} sidebar, {colors.canvas} main area, {colors.surface-neutral} detail panel), creating visual cohesion between "the ad" and "the app."
• Depth technique: The preview card floats on {extensions.shadows.sm} elevation with {rounded.xl} corners, creating a "lifted window" effect against the flat white hero background.
• Iconography within preview: Thin-stroke icons (outline style) in the sidebar—diamond, document, chart, currency, user, cube. These match the external icon system described below.
• Status indicators: The green checkmark badge uses {colors.success} with a faint green background tint—minimal, trustworthy, unobtrusive.
• QR code: Rendered as a crisp black-and-white matrix in the upper-right of the invoice header, adding "real document" authenticity.
• Imagery role: Supportive, not dominant. The preview card validates the product's existence and usability; it does not attempt to be artistic or emotional. It says "this is what you'll actually use."
• No photography detected: The above-fold content relies entirely on typography and the product illustration. Team photos, office shots, or lifestyle imagery may exist below the fold but are not in scope here.
• Mobile overlay: A small phone mockup peeks from the bottom-right corner of the preview card, showing a mobile view of the same invoice—suggesting responsive design is a selling point.

Icon System

• Library: Custom SVG icons (no detection of Lucide, Heroicons, Material, or Bootstrap icon class names in the extracted classes). The icons appear to be Holded's own designed set.
• Specific icons observed:
  • Holded logo — Wordmark "holded" with a red/pink geometric mark (heart-like or diamond-like shape) to its left.
  • Chevron/down arrow — Next to nav menu items (Features ▾, Companies ▾) indicating dropdown availability.
  • Globe/world icon — Language selector in the nav utility area.
  • Arrow right (→) — Appended to "Start free" CTA buttons indicating forward progression.
  • Sidebar navigation icons (inside product preview): Diamond/tag shape, document/page, bar chart, currency symbol (€ or $), user/person, cube/box — representing different Holded modules.
  • Checkmark (✓) — In "Verifuctu ready" social proof and "Reviewed by your advisor" status badge.
  • Star (★) — Five filled stars in the Capterra rating (gold/amber color).
  • Sparkle/asterisk — Inside the client avatar circle (purple/blue tinted).
• Treatment: Predominantly stroke/outline style with 1.5–2px stroke width. Color is typically currentColor inheriting from the parent text color, except the logo mark (red/pink brand color) and stars (gold #f59e0b).
• Size: Nav icons (chevron, globe, arrow) appear to be 16×16px. Sidebar icons in the product preview are 20×20px or 24×24px for finger-friendly touch targets within the 64px-wide sidebar.
• Alignment: Icons are inline-flex with text, using gap-1 (4px) or gap-2 (8px) spacing from adjacent text. Vertically centered via items-center.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Astro — the site shows SSR-friendly patterns,
                   static optimization hints, and Tailwind-centric architecture common
                   in modern SaaS landings.
- Styling:        Tailwind CSS v3.4+ (utility-first, confirmed by extracted class names
                   like `rounded-control`, `max-w-container-xl`, `neutral-900`,
                   `dark:text-neutral-300` — these are Tailwind utility patterns).
- Fonts:          Self-hosted Inter variable font (.woff2) via @font-face declarations
                   with `font-display: swap`. Fallback: Google Fonts CDN as backup.
- Animation:      CSS keyframes (21 custom animations detected) + Framer Motion or
                   GSAP for scroll-triggered orchestrations (IntersectionObserver-based).
- Icons:          Custom SVG icon set (inline SVG or SVG sprite). Consider Lucide
                   for any missing icons needing quick addition — stroke style matches.
- Component lib:  Custom components (no Radix/shadcn detection). The tab bar, button
                   variants, and preview card are hand-crafted to Holded's spec.
- State:          React useState/useReducer for tab switching, dropdown open/close,
                   and mobile sticky CTA visibility toggle.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column everything; nav collapses to hamburger (implied); hero text shrinks; product preview card stacks vertically (sidebar → hidden or top bar, main content full width, detail panel below); mobile sticky CTA band appears ({component.mobile-sticky-cta-band}); social proof row wraps to 2 lines. | | Tablet (sm) | 640px–1023px | Hero text remains centered but narrower; product preview card may show 2-column layout (sidebar + main, detail panel below or hidden); nav items may truncate or use icons-only mode. | | Desktop (lg) | 1024px–1599px | Full layout as shown in screenshot: 3-panel preview card, horizontal nav with all items visible, hero text at full 48px, CTAs side-by-side. | | Wide (xl/min-1600) | ≥ 1600px | Nav height increases from 56px to 64px (min-[1600px]:h-16); nav link padding increases (xl:px-3 xl:text-sm); container may breathe with extra horizontal padding. |

Touch Targets

• {component.button-accent} (hero CTA): ~160px × 44px (padding 12px 24px + text) — exceeds WCAG AAA 44×44 minimum ✅
• {component.button-primary} (nav CTA): ~120px × 40px (padding 10px 20px) — exceeds minimum ✅
• {component.top-nav-link} (nav menu item): ~80px × 36px (padding 8px 12–16px) — exceeds minimum ✅
• {component.tab-active} / {component.tab-inactive}: Variable width × ~32px (padding 6px 12px+) — meets minimum ✅
• {component.preview-sidebar} icons: 64px × ~48px (full sidebar width, icon centered) — exceeds minimum ✅
• {component.mobile-sticky-cta-band} button: Full-width (minus gutters) × ~44px — exceeds minimum ✅

All measured interactive surfaces meet or exceed the 44×44px WCAG AAA touch target recommendation.

Collapsing Strategy

• Navigation: At mobile widths, the horizontal nav menu (Features, Companies, etc.) almost certainly collapses into a hamburger menu (☰) triggering a slide-out drawer or fullscreen overlay. The logo, language selector, login link, and primary CTA remain visible in the sticky header bar.
• Hero columns: The hero is already single-column (centered text), so no column collapse needed. Text size may reduce from 48px to 32–36px at mobile ({typography.title-md} or scaled-down {typography.display-lg}).
• CTA pair: The two buttons ({component.button-accent} + {component.button-secondary}) stack vertically on mobile (full-width each) or the secondary CTA may hide entirely, replaced by the mobile sticky CTA band at the bottom.
• Product preview card: The 3-panel layout (sidebar 64px + fluid main + detail panel) reflows dramatically:
  • Option A: Sidebar becomes a horizontal scroll/icon bar at the top of the card; main content fills width; detail panel drops below.
  • Option B: Sidebar hides entirely (accessible via a toggle); main content shows simplified invoice; detail panel becomes an expandable accordion.
  • The phone mockup peeking from the corner may become a full-width "mobile preview" section below the desktop card.
• Social proof row: Wraps from a single horizontal line to 2–3 lines, maintaining all four elements (stars, users, verification, price) but stacking them.
• Top banner: Remains full-width; text truncates with ellipsis or wraps to two lines at very narrow widths (<375px).

Image Behavior

• Product preview card: Scales down proportionally on tablet; may switch to a simplified "mobile-first" illustration on small screens (showing the phone view instead of the desktop invoice). Max-width constrained to 100% of container with overflow-hidden clipping.
• Client avatar: Maintains 40×40px or scales slightly smaller (32px) on mobile; always square with {rounded.DEFAULT} corners.
• QR code: May hide on mobile (screen too small to read) or scale down to ~64×64px.
• Logo: SVG wordmark scales fluidly; the geometric mark remains proportional.

Iteration Guide

1. Build the landing page foundation using Next.js (App Router) with Tailwind CSS v3.4+. Initialize with npx create-next-app@latest and configure Tailwind's content paths to include your components directory.

2. Define all CSS custom properties from the YAML frontmatter in a globals.css file under :root. Every color, spacing, radius, shadow, and transition token becomes a --token-name variable. Example: --color-primary: #121926; --color-active: #1963ef; --radius-pill: 9999px; --shadow-sm: 0 4px 6px -2px rgba(18, 25, 38, 0.06), 0 12px 16px -4px rgba(18, 25, 38, 0.06);

3. Set up the Inter font via the self-hosted @font-face declarations found in the extracted data. Place the .woff2 files in public/fonts/ and reference them in your CSS. Define --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; and apply it to body.

4. Implement components in this order: (a) Top banner → (b) Sticky nav with backdrop blur → (c) Hero band (headline + subheadline + CTAs + social proof) → (d) Product preview card with 3-panel layout → (e) Mobile sticky CTA band. Each component pulls its tokens from the CSS variables defined in step 2.

5. Add state variants for every interactive component: {component.button-accent-active}, {component.button-secondary-active}, {component.tab-active}, {component.nav-link-active}. Use Tailwind's hover: and focus: prefixes or CSS :hover/:focus: pseudo-classes. Timing follows the --transition-colors (150ms) and --transform-base (200ms) tokens.

6. Implement scroll-triggered animations using Framer Motion's useInView or a lightweight IntersectionObserver wrapper. Wire up fadeIn for the hero sections, card-float-back/front for the preview card parallax, and shimmer for any loading skeletons. Stagger delays by 100ms per element for orchestrated entrance.

7. Build the product preview card as the visual centerpiece. Use CSS Grid: grid-template-columns: 64px 1fr 280px for desktop (sidebar + main + detail). Apply {colors.surface-soft}, {colors.canvas}, {colors.surface-neutral} backgrounds respectively. Add {rounded.lg} / {rounded.xl} corners per the token assignments. Include the tab bar, status badge, and invoice table.

8. Test responsive breakpoints at 375px (iPhone SE), 768px (iPad portrait), 1024px (small laptop), and 1440px (desktop). Verify: nav collapse, hero text sizing, CTA stacking, preview card reflow, mobile sticky CTA appearance, and touch target sizes (all ≥44px).

9. Run accessibility audits with axe DevTools or Lighthouse. Verify: color contrast ratios (white on {colors.active} = 4.6:1 AA compliant; {colors.body} on white = 4.5:1 AA compliant), focus-visible outlines on all interactive elements, semantic HTML (h1 for headline, button for CTAs, nav for menu), and alt text for the product preview image/illustration.

10. Validate the DESIGN.md by running npx @google/design.md lint DESIGN.md (if available) or manually checking: every {token.path} reference resolves to a defined token, no orphaned components exist in the prose without a frontmatter entry, and all pre-assigned values remain unchanged from the input specification.

Font Setup for Implementation:

/* globals.css */
@font-face {
  font-family: 'inter';
  src: url('/fonts/inter_latin_wght_normal.p.0rpdhg_4ubdtf.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'inter';
  src: url('/fonts/inter_latin_wght_italic.p.0xt9vn2smuhza.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
  font-style: italic;
}

:root {
  --font-sans: 'inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  
  /* Colors, spacing, radii, shadows, transitions follow... */
}

If unable to self-host, use Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover colors, transforms, and shadows for buttons, links, and nav items are not documented. Implementers should derive these from the active/pressed states and the --transition-colors / --transform-base tokens.
• Loading/skeleton states: While a shimmer keyframe exists, the exact skeleton component structure (placeholder rectangles, pulse animation timing, which elements show skeletons) is not visible in the static screenshot.
• Form validation states: No error, warning, or success states for text inputs, selects, or textareas are extractable from this marketing page. The {colors.error} red token is defined in the palette but unused in the visible UI—implementers must design error states following the {rounded.DEFAULT} + red border + error message convention.
• Dark mode: The extracted CSS references dark:text-neutral-300 and dark:hover:text-... classes, indicating a dark mode exists. However, no dark mode surface colors, dark-specific component variants, or dark mode toggle UI are visible in this screenshot. The full dark token set (surface-dark values, on-dark text, inverted borders) would need separate extraction from a dark-mode-rendered page.
• Dropdown menu internals: The nav dropdown panels (triggered by "Features ▾", "Companies ▾") are closed in the screenshot. Their structure, animation (--dropdown-slide at 500ms), background color (likely {colors.canvas} with {extensions.shadows.lg} elevation), and item list contents are inferred, not observed.
• Below-the-fold sections: The screenshot captures only the above-the-fold hero area. Sections like "Why Holded?", feature grid, testimonials, pricing table, FAQ, and footer are not in scope. Their component tokens (pricing tier cards, testimonial cards, FAQ accordions) would require additional screenshots.
• Exact oklab() color conversions: Several shadows and one background use oklab() color function (e.g., oklab(0.999994 0.0000455678 0.0000200868 / 0.1) for a 10% white). These have been approximated as rgba() equivalents in the extensions, but pixel-perfect reproduction requires the original oklab values.
• Mobile nav hamburger implementation: The collapsed mobile navigation (hamburger icon, slide-out drawer, animation) is inferred from responsive class patterns (sm:px-6, xl:px-3) and industry conventions, not directly observed.
• JavaScript interactivity specifics: Scroll-triggered animation triggers, intersection observer thresholds, dropdown open/close state management, tab content swapping logic, and the mobile sticky CTA's show/hide scroll threshold are architectural decisions not extractable from CSS alone.