(dot)connect Design System

Overview

(dot)connect presents itself as an engineering-driven venture creator with a visual language that is simultaneously brutalist and refined. The design lives in the tension between near-black ink ({colors.ink} — #001011) and a warm off-white canvas ({colors.canvas} — #fcfbf8), punctuated by electric orange voltage ({colors.accent} — #fd5321) that appears exclusively on CTAs and signature interaction surfaces. This is not a shy palette—the contrast ratios are extreme, the headlines are enormous, and the brand refuses to blend into the sea of pastel SaaS landing pages.

The typographic personality is defined by Aeonik Pro, a geometric sans-serif with humanist warmth that carries both the 72px hero headline and the 16px navigation links. The single move that defines the system is aggressive negative letter-spacing on display text ({typography.display-lg} uses -1.8px at 72px), creating a dense, architectural quality that signals technical competence. Body copy remains at weight 400—never bold—trusting size and color alone to establish hierarchy. The custom wordmark face {typography.label} uses DotConnect, a proprietary geometric mark reserved solely for the (dot)connect lockup in the navigation.

Shape language is dominated by pill geometry: every button, icon container, and CTA surface uses {rounded.lg} (44px) or {rounded.xl} (48px) radius, creating a vocabulary of soft, approachable action zones against the sharp-edged editorial containers. An interesting asymmetry token ({rounded.asymmetric-left}) applies left-only rounding (24px) to certain card elements, suggesting directional flow within grid layouts.

Sub-systems observed include: a hero dialect (massive type + 3D particle imagery + stacked CTA pair), a content/article dialect (grey-surface cards at {colors.surface-strong}), and a modal dialect (semi-transparent overlay with centered cards). The site appears built in Webflow, which explains the class-naming conventions and the presence of multiple transition states in the extracted CSS.

Key Characteristics

• Canvas is warm off-white {colors.canvas} (#fcfbf8) — never pure white, never cool grey.
• Brand voltage lives in electric orange {colors.accent} (#fd5321) applied only to primary CTAs and accent surfaces.
• Display headlines use {typography.display-lg} at 72px/weight 500 with -1.8px tracking — aggressively tight.
• All interactive buttons are pill-shaped at {rounded.lg} (44px radius).
• Navigation uses the proprietary {typography.label} face (DotConnect) for the wordmark only.
• Dark surfaces ({colors.surface-dark} — #001011) appear on icon-button backgrounds and the top-level brand identity layer.
• Article cards sit on {colors.surface-strong} (#edede6), a medium-warm grey that recedes behind content.
• No drop shadows detected — elevation is achieved through color blocking and semi-transparent overlays only.
• Transitions are subtle: opacity at 300ms, color at 150ms, transform un-timed.

Colors

Brand & Accent

• Primary ({colors.primary} — `#0f1e1f): Near-black brand color used for primary ink on light surfaces and dark elevated surfaces. Appears in navigation text, headline text, and icon-button backgrounds.
• Primary Active ({colors.primary-active} — `#001011): Deepest black shade used for the darkest surface elements (top nav bar background, modal close contexts) and maximum-contrast text states.
• Accent ({colors.accent} — #fd5321): Electric orange — the sole voltage color. Applied to {component.button-primary}` backgrounds, the "let's connect" CTA wrapper, and any surface requiring immediate attention. Never used for text on light backgrounds.
• Accent Hover ({colors.accent-hover} — `#e54a1c): Darkened orange state for hover/active transitions on accent-colored buttons.

Surface

• Canvas ({colors.canvas} — `#fcfbf8): Warm off-white base. The primary page background, hero band fill, modal card interior, and default surface for all content areas. Carries a subtle cream/warmth compared to neutral white.
• Surface Soft ({colors.surface-soft} — `#fd5321): Mapped to the accent orange in the pre-assigned values — functions as a colored surface treatment for CTAs rather than a neutral surface tier.
• Surface Strong ({colors.surface-strong} — `#edede6): Medium-warm grey used for article cards, content containers, and elevated panel backgrounds. Provides clear separation from canvas without harshness.
• Surface Elevated ({colors.surface-elevated} — `#f0f0ee): Light warm grey for subtle elevation above canvas — used sparingly, likely for nested containers or secondary card surfaces.
• Surface Dark ({colors.surface-dark} — `#001011): Deep black surface for inverted contexts — icon-button backgrounds (the arrow-circle in "more" button), dark mode-adjacent elements, and high-contrast brand blocks.
• Surface Dark Elevated ({colors.surface-dark-elevated} — #0f1e1f): Slightly lighter black for dark elevated surfaces — used where {colors.surface-dark}` would be too severe.

Text / Ink

• Ink ({colors.ink} — `#001011): Maximum-contrast near-black for headlines, navigation labels, and primary UI text on light surfaces. The dominant text color across the entire experience.
• Body ({colors.body} — #fcfbf8): Off-white text color — used specifically for text rendered on dark/black surfaces (button text on {component.button-primary-with-icon}`, text on dark modals).
• Muted ({colors.muted} — #333333): Mid-grey for secondary text, captions, placeholder text, and de-emphasized UI labels. Provides clear hierarchy below {colors.ink}` without disappearing.
• Muted Soft ({colors.muted-soft} — #0f1e1f): Very dark grey-black for body paragraph text under hero headlines — slightly lighter than {colors.ink}` for comfortable reading at smaller sizes.
• On Primary ({colors.on-primary} — #ffffff): Pure white for text and icons rendered on {colors.primary}and{colors.surface-dark}` backgrounds.
• On Accent ({colors.on-accent} — #ffffff): White text on orange accent buttons — satisfies AA contrast against {colors.accent}`.
• On Dark ({colors.on-dark} — #fcfbf8): Warm off-white text for dark-surface contexts — matches {colors.body}` semantically but named for dark-background usage.
• On Surface ({colors.on-surface} — #001011): Default readable text on any light surface — aliases {colors.ink}`.

Hairlines & Borders

• Hairline ({colors.hairline} — #edede6): Subtle border color matching {colors.surface-strong}` — used for dividers, input underlines, and card borders where separation is needed without visual weight.
• Border Strong ({colors.border-strong} — `#d9d9d4): Slightly darker warm grey for emphasized borders — focus rings, active states, or structural borders requiring more visibility than hairline.

Semantic

• Link ({colors.link} — `#007aff): Standard iOS-blue link color detected in text content — used for inline hyperlinks outside of button components.
• Link Active ({colors.link-active} — `#0056b3): Darkened blue for visited/hover/active link states.

Typography

Font Family

The system is built entirely on Aeonik Pro (weights 400 and 500), a contemporary geometric sans-serif designed for digital interfaces. The font's characteristics — slightly squared apertures, open counters, and a tall x-height — support excellent readability at both the 72px display scale and 16px UI scale. The fallback stack is AeonikPro, Arial, sans-serif, ensuring graceful degradation to system sans-serifs if the webfont fails to load.

A second typeface, DotConnect (weight 500 only), exists as a bespoke wordmark font used exclusively for the (dot)connect logotype in the navigation. This is a custom-drawn geometric mark with distinctive bracketing on the parentheses and unique dot treatment — it must never be used for body text, headlines, or UI elements beyond the brand lockup.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 88px | 500 | 92px | -2.2px | Reserved for future mega-headlines; extends the display-lg pattern | | {typography.display-lg} | 72px | 500 | 72px | -1.8px | Hero headline — the single largest text element, sets the brand voice | | {typography.title-md} | 36px | 500 | 39.6px | -0.45px | Section headings, card titles, modal titles | | {typography.title-sm} | 28px | 500 | 34px | -0.35px | Subsection headings, feature titles | | {typography.body-lg} | 21px | 400 | 31.5px | normal | Hero subhead paragraph, lead body copy | | {typography.body-md} | 18px | 400 | 27px | normal | Standard body text, form labels | | {typography.body-sm} | 16px | 400 | 24px | normal | Navigation items, button labels, captions | | {typography.caption} | 14px | 400 | 20px | normal | Metadata, timestamps, fine print | | {typography.button} | 16px | 400 | 24px | normal | Button and CTA text — matches body-sm but isolated for component control | | {typography.nav-link} | 16px | 400 | 24px | normal | Top navigation menu items | | {typography.label} | 20px | 500 | 28px | normal | Brand wordmark (DotConnect face) — logo lockup only |

Principles

The typography system trusts size and color to establish hierarchy almost exclusively. Notice that body copy never exceeds weight 400, and even display headlines stop at weight 500 — there is no bold (700) anywhere in the system. This restraint creates a sophisticated, editorial tone that avoids the aggressive shouting common in startup landing pages. Instead, hierarchy is achieved through the dramatic size jumps (72px → 36px → 21px → 16px) and the strategic use of negative letter-spacing on display text, which optically condenses large words into dense, architectural blocks.

Color also plays a typographic role: the hero headline uses {colors.ink} (pure near-black) while the subhead paragraph drops to {colors.muted-soft} (a slightly warmer, softer black), creating a two-tone headline block without any size change. This mixed-ink technique is a signature moment of the system.

Uppercase is absent except in the brand name itself ("(dot)connect" uses lowercase with parenthetical branding). Italics are not observed in the extracted styles. The system prefers sentence case for all UI labels and buttons ("let's connect", "more" — never "LET'S CONNECT" or "MORE").

Note on Font Substitutes

Aeonik Pro is a commercial font from Aeonik Foundry (aeonik.co). It is not available on Google Fonts. For open-source reimplementation, the closest Google Fonts equivalent is DM Sans (which shares similar geometric proportions, open counters, and a tall x-height) or Plus Jakarta Sans (slightly rounder, but captures the friendly-geometric spirit). Define these as CSS variable fallbacks:

:root {
  --font-body: 'AeonikPro', 'DM Sans', 'Plus Jakarta Sans', Arial, sans-serif;
  --font-brand: 'DotConnect', 'DM Sans', Arial, sans-serif;
}

DotConnect has no public equivalent — it is a fully custom wordmark. For development without the licensed font, use 'DM Sans', sans-serif at weight 500 and approximately 1.05 letter-spacing to approximate the branded lockup appearance.

Layout

Spacing System

• Base unit: 4px (inferred from the {spacing.xxs} token).

• Tokens:

  • {spacing.xxs} (4px): Icon internal padding, micro-gaps inside button-icon groups.
  • {spacing.xs} (6px): Tight spacing between inline elements, checkbox gaps.
  • {spacing.sm} (8px): Small internal component gaps.
  • {spacing.md} (13px): Navigation item horizontal padding, form field gap.
  • {spacing.lg} (16px): Standard internal component padding, card padding supplement.
  • {spacing.xl} (24px): Section-internal vertical rhythm, major element spacing.
  • {spacing.xx}l (32px): Card internal padding ({component.article-card}), section subsection gaps.
  • {spacing.section} (72px): Section-to-section vertical padding, post-hero content start.
  • {spacing.hero-vertical} (272px): Massive hero top-padding creating the "breathing room" above the headline.
  • {spacing.container-wide} (276px): Horizontal container max-width context (matches the 1440px viewport with gutters).

• Section padding (vertical): {spacing.section} (72px) — used between the hero band and subsequent content sections.

• Card internal padding: {component.article-card} uses {spacing.xx}l (32px) on all sides.

• Gutters: Navigation uses ~16-24px implicit gutters between menu items. Grid layouts (not fully visible in screenshot) likely use 24px or 32px column gaps based on the {spacing.xl} and {spacing.xx}l tokens.

Grid & Container

• Max content width: 1440px (detected from section container width in extracted data).
• Editorial density: The hero uses a single-column text layout (~646px inferred from article width) centered within the 1440px viewport, creating generous margins on ultra-wide screens.
• Grid behavior: The hero appears to use a two-column layout at desktop: left column for text (headline + subhead + CTA), right column for the 3D particle sphere image. The text column is constrained to roughly 700-800px for optimal line length on the 72px headline.
• Hero column split: Approximately 55% text / 45% imagery based on visual proportions, though exact ratios require full-width screenshot confirmation.

Whitespace Philosophy

The system practices aggressive whitespace in the hero zone — 272px of top padding before the headline even begins. This is not empty space; it's a compositional device that forces the eye downward to the massive 72px text. Below the hero, density increases moderately with article cards sitting on grey surfaces, but the overall feeling remains editorial and breathable rather than marketplace-dense. The philosophy is: give the headline room to land, then allow content sections to breathe with consistent 72px section breaks.

Header Architecture

|<------------------ 1440px max ----------------->|
| [LOGO]           about offer brainpower stories team philosophy   [CTA] |
| (dot)connect                                                    [let's connect] |
|                                                                 (orange pill)|
|<--logo pad-->|<-------- nav center ---------->|<--- utilities --->|

The navigation bar is fixed/sticky (class site_nav-fixed), full-width, with the canvas color background. Logo flush-left, navigation items center-distributed, CTA button flush-right. Height approximately 80px (inferred from standard nav patterns + padding).

Hero Section

|<------------------ 1440px max ----------------->|
|                                                    |
|     (272px top padding)                            |
|                                                    |
|  We are an engineering-driven                      |
|  company that effectively                          |  <--- 72px display-lg
|  delivers deep tech products.                      |
|                                                    |
|  We have years of experience, a                    |  <--- 21px body-lg
|  multitalented diverse team...                     |
|                                                    |
|        [→ more]                                    |  <--- button-primary-with-icon
|                                                    |
|              ○○○○○○○                                |  <--- 3D particle sphere
|            ○○●●●●○○                                 |       (image col)
|           ●●●████●●●                                |
|          ●●████████●●                               |
|           ●●●███●●●○                                |
|             ○○●○○○                                  |
|                                                    |
|<---- text col ---->|<------ image col ------------>|

The hero stacks vertically: massive headline → descriptive paragraph → CTA button → large 3D particle sphere image below/at right. The sphere appears to break out of its container or sit in a dedicated lower-right zone, creating a layered composition where text floats above imagery.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat baseline | {colors.canvas}, no shadow, no border | Page background, hero band, footer | | 1 — Surface raise | {colors.surface-solid} background, no shadow | Article cards, content panels | | 2 — Overlay | {colors.modal-overlay} (80% opaque white) | Modal backdrop, dropdown covers | | 3 — Dark inversion | {colors.surface-dark} background | Icon button fills, brand blocks |

Philosophy: This is a flat-first, color-blocking system. Zero drop shadows were detected in the extracted CSS. Elevation is communicated purely through background color changes (canvas → grey-surface → dark-surface) and the single semi-transparent overlay for modals. This choice aligns with the brutalist-meets-refined aesthetic — shadows would introduce unwanted softness that contradicts the sharp, confident geometry of the rest of the system.

Decorative Depth

The 3D particle sphere in the hero is the sole decorative depth element. It appears to be a WebGL/Spline-rendered object (confirmed by spline-scene class in DOM) showing a reddish-orange particle cluster with depth, lighting, and possibly physics simulation. This imagery provides the "deep tech" visual metaphor that the copy promises — it is photographic/3D in nature, not flat illustration. The sphere sits on a subtle circular platform (likely {colors.surface-strong} or a very light grey) that grounds it visually.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Small inner elements, subtle corner softening | | {rounded.DEFAULT} | 12px | Default card radius, article containers ({component.article-card}) | | {rounded.md} | 20px | Modal cards, larger content panels ({component.modal-card}) | | {rounded.lg} | 44px | All primary buttons, pill-shaped actions | | {rounded.xl} | 48px | Maximum pill radius, hero image container, CTA wrappers | | {rounded.asymmetric-left} | 0px 24px 24px 0px | Directional card corners — rounds only right-side, suggesting flow direction |

Photography Geometry

The hero 3D sphere image is contained within a large circular or super-elliptical container with {rounded.xl} (48px) or greater radius, effectively creating a circle/squircle mask. The image itself is a rendered 3D object (not photography), featuring clustered particles in red/orange tones against a darker core. Aspect ratio appears roughly 1:1 (square/circular crop). No other significant imagery is visible in the screenshot, but the OG image reference suggests additional 3D or photographic assets may exist elsewhere on the site.

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 & CTAs

{component.button-primary} — The primary call-to-action button with electric orange {colors.accent} background and white text. Uses {typography.button} (16px/400), {rounded.lg} (44px full pill shape), and 14px 28px padding. Appears as the standalone "more" button in the hero and the "let's connect" CTA in the navigation. State variant: {component.button-primary-active} darkens to {colors.accent-hover} on press. Disabled state: {component.button-primary-disabled} falls back to {colors.surface-strong} background with {colors.muted} text.

{component.button-primary-with-icon} — A variant of the primary button that pairs a dark circular icon background ({colors.surface-dark}) with an adjacent orange pill extension containing text. The icon area is a 44×44px circle (matching {rounded.lg}) filled with near-black, containing a white arrow/chevron SVG pointing upper-right. The text portion continues the {colors.accent} background. This composite component is seen in both the nav CTA and the hero "more" button. Text uses {typography.button} at {colors.body} (white-on-dark).

{component.button-secondary} — Transparent-background button with {colors.ink} text and no visible border in default state (border may appear on hover/focus). Uses {rounded.lg} and identical padding to {component.button-primary}. Reserved for tertiary actions where orange would be too visually heavy.

{component.nav-menu-item} — Inline navigation link with transparent background, {colors.ink} text at {typography.nav-link} (16px/400). Horizontal padding of 13px 16px creates comfortable click targets. No rounding — these are rectangular text links within the nav flow.

Cards & Containers

{component.article-card} — Content card with {colors.surface-strong} (#edede6) background, providing subtle elevation from the canvas. Uses {rounded.DEFAULT} (12px), {spacing.xx}l (32px) internal padding, and {typography.body-lg} for text content. Width constrained to ~646px in extracted data. Contains {component.card-title} (using {typography.title-md}) and body copy. These cards appear in content sections below the hero.

{component.hero-band} — The full-width hero section container. Background {colors.canvas}, padding 272px 276px 72px (massive top padding for breathing room, wide horizontal gutters). Contains {component.hero-headline}, {component.hero-subhead}, and {component.hero-cta-container} in a vertical stack.

{component.content-section} — Standard content section wrapper. Background {colors.canvas}, top padding {spacing.section} (72px). Used for all post-hero content areas.

{component.hero-image-container} — Container for the 3D particle sphere imagery. Rounded {rounded.xl} (48px+) creating a circular/squircular mask. Background transparent — the sphere itself provides the visual content. Likely positioned absolutely or in a grid column to the right/below the hero text.

Modals & Overlays

{component.modal-overlay} — Semi-transparent backdrop at rgba(252, 251, 248, 0.8) — 80% opaque off-white that dims underlying content when a modal is open. Covers full viewport.

{component.modal-card} — Centered modal dialog with {colors.canvas} background, {rounded.md} (20px) radius, and {spacing.xx}l} (32px) padding. Title uses {typography.title-md} in {colors.ink}. Contains {component.modal-close-button}, form elements, and body text. Two modal variants observed: "contact-form" and "chat-form" (the latter includes a Spline scene).

{component.modal-close-button} — Square 44×44px close trigger (size {spacing.xxxl}-adjacent), transparent background, {colors.ink} text/icon (likely an × glyph).

Inputs & Forms

{component.form-input} — Text input field with transparent background, {colors.ink} text at {typography.body-md}. Padding 16px 0 suggests underline-style inputs (border-bottom only) rather than full bordered boxes. No visible border in default state; {colors.hairline} likely used for inactive underline, {colors.border-strong} or {colors.ink} for focus state.

{component.form-label} — Input label in {typography.caption} (14px), {colors.ink} color, positioned above its associated input.

{component.checkbox-input} — Custom checkbox at 20×20px, transparent background. Styling details (checkmark color, border) not fully extractable from checkbox-native rendering.

Navigation

{component.top-nav} — Fixed/sticky header bar spanning full viewport width. Background {colors.canvas}, height ~80px. Contains {component.top-nav-logo} (left), navigation items (center), and {component.button-primary-with-icon} (right). No visible border-bottom or shadow — relies on z-index stacking for layering.

{component.top-nav-logo} — Brand wordmark using {typography.label} (DotConnect font, 20px/500) in {colors.ink}. Small padding ({spacing.xxs}) around the lockup. Reads "(dot)connect" with distinctive parenthetical styling.

Do's and Don'ts

Do

• Do use {colors.accent} (#fd5321) exclusively for primary CTAs — this is your single voltage color and loses impact if overused.
• Do apply {rounded.lg} (44px) to every button and pill-shaped interactive element — consistency here defines the shape language.
• Do maintain the 272px hero top padding ({spacing.hero-vertical}) — the breathing room is intentional and non-negotiable for the brand's confident posture.
• Do keep body copy at weight 400 even for emphasis — the system uses size and color, never bolder weights, to create hierarchy.
• Do apply -1.8px letter-spacing ({typography.display-lg}.letterSpacing) to your 72px headlines — this tight tracking is a signature typographic detail.
• Do place the 3D particle sphere imagery in a circular container ({rounded.xl} or greater) — the squircle frame is part of the visual identity.
• Do use {colors.surface-strong} (#edede6) for article and content card backgrounds — it provides necessary elevation without introducing shadows.
• Do set modal overlay opacity to 0.8 with {colors.canvas} as base (rgba(252, 251, 248, 0.8)) — this specific warmth prevents the overlay from feeling cold or harsh.
• Do reserve DotConnect font ({typography.label}) for the navigation wordmark only — never use it for headlines, body, or UI text.
• Do maintain the two-tone headline pattern: {colors.ink} for the display text, {colors.muted-soft} for the subhead paragraph beneath it.

Don'ts

• Don't add drop shadows to any component — the system is intentionally flat; elevation comes from color changes and overlays only.
• Don't use {colors.accent} for text on light backgrounds — it's a surface/background color only; text on {colors.accent} must be {colors.on-accent} (white).
• Don't exceed weight 500 for any typographic element — there is no "bold" in this system; {typography.display-lg} at 500 is your heaviest weight.
• Don't round card corners below {rounded.DEFAULT} (12px) — anything sharper breaks the softened geometry of the design language.
• Don't use pure white (#ffffff) for canvas or body backgrounds — always use {colors.canvas} (#fcfbf8) to maintain the warm, slightly creamy base tone.
• Don't collapse the hero headline below 72px on desktop — the scale is foundational to the brand's engineering-confidence voice.
• Don't mix fonts beyond Aeonik Pro (all UI) and DotConnect (logo only) — introducing a third typeface fractures the cohesive geometric sensibility.
• Don't add gradients to button backgrounds — {component.button-primary} is solid {colors.accent}, flat and confident.
• Don't use {colors.link} blue (#007aff) for primary navigation or CTA text — reserve it for inline content links only.
• Don't reduce the letter-spacing on display text to zero or positive values — the negative tracking (-1.8px to -2.2px) is essential to the dense, architectural headline look.

Motion & Animation

Transition Tokens

--transition-opacity: opacity 0.3s ease;
--transition-color: color 0.15s ease;
--transition-all: all ease;
--transition-transform: transform (duration unspecified);

The extracted CSS reveals three distinct transition patterns: opacity fades at 300ms (used for modal show/hide, loader fade-out), color changes at 150ms (text/link state changes), and an un-timed transform transition (likely for hover scales or position shifts). All transitions use the ease timing function (equivalent to ease-in-out or a gentle cubic-bezier), producing smooth but unhurried motion that respects the brand's serious tone.

Keyframe Animations

• spin — Rotational animation, likely for loading indicators or the close-button icon rotation.
• dot-animation-1 through dot-animation-5 — Sequential dot pulsing/visibility for a multi-dot loading indicator (the loader visible during form submission states).
• fade-out-loader — Opacity fade from 1 to 0 for removing loader UI after initialization completes.
• fade-in-out — Generic crossfade utility for content transitions.
• slide-up-loader — Vertical translation + fade for entrance animations, likely moving content from below viewport into position.

Interaction Patterns

• Modal reveal: Contact form and chat modals open with a fade-in of the {component.modal-overlay} combined with a slide-up or scale-in of {component.modal-card}. Duration approximately 300ms matching --transition-opacity.
• Loader sequence: On page load and form submission, a multi-dot animated indicator appears (the five dot-animation-* keyframes suggest a staggered pulse pattern across 5 dots). This fades out via fade-out-loader once content or server response arrives.
• Button interactions: Primary buttons likely implement a subtle scale-down on active press (transform transition detected) and possible background-color shift to {colors.accent-hover} on hover (per {component.button-primary-active}).
• Navigation menu: The Webflow w-nav structure implies a mobile slide-down menu with hamburger toggle (detected {component.hamburger-button} at 24px icon size). Desktop nav items may have underline-reveal hover states (not explicitly extracted).
• Spline/3D scene: The chat modal contains a spline-scene element suggesting an embedded interactive 3D viewer (Spline is a browser-based 3D tool). This scene likely responds to mouse/touch movement with parallax or rotation, adding spatial interactivity beyond CSS-animated elements.

Note: If implementing from scratch without the Webflow runtime, recommended defaults for any added motion: 200-300ms duration, cubic-bezier(0.4, 0, 0.2, 1) easing (Material-standard ease-out), and prefer opacity/transform changes over layout-affecting properties.

Imagery Style

• Primary visual: 3D-rendered particle cluster (WebGL/Spline) showing a sphere-like formation of reddish-orange metallic particles against a darker core. This is not illustration or photography — it's real-time 3D graphics suggesting depth, physics, and materiality.
• Subject matter: Abstract/scientific visualization evoking molecular structures, neural networks, or particle physics — directly supporting the "deep tech" and "engineering-driven" brand narrative.
• Color treatment: Particles range from bright orange-red ({colors.accent}-adjacent) to deep crimson/brown, with specular highlights suggesting metallic or glossy material properties. The overall palette harmonizes with the brand orange without matching it exactly.
• Role in composition: The sphere is a supporting visual anchor, not a background wallpaper. It occupies roughly 40% of the hero composition (right/lower zone), balancing the 72px text block. It has enough visual weight to prevent the hero from feeling text-heavy, but doesn't compete with the headline.
• Container treatment: Framed in a circular/squircular mask ({rounded.xl}), sitting on a subtle {colors.surface-strong} circular platform that grounds it. This framing prevents the 3D object from bleeding chaotically into the whitespace.
• Lighting: The particle cluster has directional lighting (highlights on upper-right particles, shadows on lower-left), suggesting a studio-lighting setup that gives the abstract form tangible three-dimensionality.
• Animation potential: As a Spline scene, the sphere likely supports continuous slow rotation or mouse-responsive tilting, adding kinetic energy to the static hero layout.

Icon System

• Library: Custom SVG icons (no standard library detected in framework analysis — iconLibs array empty).
• Specific icons observed:
  • Arrow-diagonal-upper-right (↗) — Inside the dark circle of {component.button-primary-with-icon}, indicating "external link" or "go further" semantics. Used in both nav CTA and hero "more" button.
  • Close/times (×) — Inferred for {component.modal-close-button} (standard X glyph at 44px square).
  • Hamburger menu (☰) — Three-line menu icon for mobile nav toggle (hamburger w-nav-button class detected, 24px icon size, 18px padding).
• Treatment: Stroke-based icons (inferred from arrow style), rendered in currentColor. On dark backgrounds (the icon-circle), they appear in {colors.on-primary} (white). On light backgrounds, {colors.ink} (near-black).
• Size alignment: Icons within buttons match the button's optical center — the arrow icon in the 44px circle is approximately 18-20px, leaving comfortable padding. Standalone icons (close button, hamburger) are sized to their container (24px for hamburger within 18px-padded button).
• Stroke weight: Appears to be 1.5px–2px stroke width — delicate enough to feel refined, thick enough to remain legible at small sizes.

Recommended Frontend Stack

Framework:      Next.js 14+ (App Router) or Astro (for marketing-site performance)
Styling:        Tailwind CSS v4 (utility-first mapping of tokens to arbitrary values)
                or CSS Modules (if preferring explicit scoping)
Fonts:           Self-host Aeonik Pro (.woff2 from CDN or licensed files)
                Define --font-body and --font-brand CSS variables
                Fallback chain: 'AeonikPro', 'DM Sans', 'Plus Jakarta Sans', sans-serif
Animation:      Framer Motion (for React/Next.js) handling enter/exit transitions
                or vanilla CSS keyframes (the existing @keyframes can be ported directly)
Icons:          Custom SVG components (inline React components for ↗, ×, ☰)
                No icon library needed — only 3 distinct icons observed
Component lib:  Radix UI Primitives (for accessible Dialog/Modal, Checkbox)
                Custom-built Button, Card, Nav primitives on top

Rationale: The site was originally built in Webflow (confirmed by w-inline-block, w-nav, w-container, w-form classes throughout the DOM). For a rebuild or extension, a modern React meta-framework (Next.js or Astro) would provide better developer ergonomics, performance optimization, and component reusability while preserving the exact visual output. Tailwind CSS maps naturally to the token system defined in this spec — each {colors.x}, {spacing.y}, and {rounded.z} becomes a Tailwind arbitrary value or design token extension.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column hero (text above image), hamburger nav, stacked CTAs, reduced type scale (display-lg → ~42px) | | Tablet | 768px – 1024px | Two-column hero emerges, horizontal nav may persist or become slide-down, article cards go 2-col grid | | Desktop | 1025px – 1440px | Full layout: side-by-side hero columns, horizontal nav, 1440px max container | | Wide | > 1440px | Container centers with auto margins, hero padding scales proportionally, type may cap at 72px |

Note: Exact breakpoint values are inferred from standard responsive patterns — the source does not include explicit @media queries in the extracted CSS snippet.

Touch Targets

• {component.button-primary}: ~56px height (14px top + 16px font + 14px bottom ≈ 44px minimum; actual clickable area likely larger due to padding) — meets WCAG AAA.
• {component.button-primary-with-icon}: Icon circle is 44×44px (explicitly meets AAA); total button height similar to primary at ~44-48px.
• {component.top-nav}: 80px height provides ample touch surface for mobile nav interaction.
• {component.nav-menu-item}: 13px vertical + 16px font + 13px vertical ≈ 42px — borderline; recommend increasing to 44px minimum for mobile by boosting {spacing.md} to 14px.
• {component.modal-close-button}: 44×44px (meets AAA comfortably).
• {component.checkbox-input}: Native 20×20px render is below AAA recommendation (44px); should be wrapped in a larger hit area (44px min) with visual feedback.

Collapsing Strategy

• Navigation: At mobile widths, the horizontal nav menu collapses behind the hamburger button ({component.hamburger-button}). The w-nav-overlay class suggests a full-screen or slide-down overlay panel containing stacked nav links. The "let's connect" CTA likely moves inside this menu or becomes a standalone sticky bottom-bar element.
• Hero columns: The two-column hero (text left, 3D sphere right) stacks vertically on mobile: headline → subhead → CTA → image. The 3D sphere likely reduces to 70-80% viewport width and centers, maintaining its circular mask.
• Type scale: {typography.display-lg} (72px) likely steps down to 42-48px on mobile to prevent overflow and maintain readability. {typography.body-lg} (21px) may reduce to 18px. Letter-spacing proportions should scale relatively (e.g., -1.8px → -0.8px at 42px).
• Article cards: Single-column stack on mobile (full width minus gutters); 2-column on tablet; 3-column on desktop if a grid exists.
• Modals: Become full-screen sheets on mobile (bottom-sheet pattern or centered full-bleed card) rather than centered floating dialogs, maximizing usable space.
• Spacing compression: {spacing.hero-vertical} (272px) compresses significantly on mobile (likely 80-120px) to avoid pushing content below the fold. {spacing.section} (72px) may reduce to 48px.

Image Behavior

• Hero 3D sphere: Maintains circular aspect ratio at all breakpoints. Reduces from ~50% viewport width on desktop to ~70-80% width on mobile, centering horizontally. The Spline embed should have max-width: 100% and height: auto (or controlled via aspect-ratio container) to prevent overflow.
• OG image / social share image: The og:image references a homepage.webp file (1200×630 standard OG dimension) — this is a static raster capture, not a responsive asset.
• Future imagery: Any additional product screenshots, headshots, or illustrations should follow the same circular/squircular masking convention ({rounded.xl}) and maintain warm color temperature harmony with the {colors.accent} / {colors.canvas} palette.

Iteration Guide

1. Set up the token foundation first. Create a design tokens file (CSS custom properties, Tailwind config theme.extend, or JS object) containing every value from the YAML frontmatter: all {colors.*}, {typography.*}, {rounded.*}, and {spacing.*} tokens. Reference these tokens everywhere — never hard-code a hex code, pixel value, or font size that has a token definition.

2. Implement the global type system. Load Aeonik Pro (weights 400 and 500) via @font-face from the WOFF2 URLs found in the extracted CSS, or substitute DM Sans from Google Fonts for development. Define --font-body and --font-brand CSS variables. Set font-family: var(--font-body) on <html> so all text inherits correctly.

3. Build the layout shell. Implement {component.top-nav} (fixed, 80px height, {colors.canvas} bg, logo left, nav center, CTA right) and the hero band ({component.hero-band} with 272px top padding). Get the container max-width (1440px) and centering working before adding internal components.

4. Compose the hero content. Build the headline at {typography.display-lg} (72px/500/-1.8px tracking) in {colors.ink}, followed by the subhead at {typography.body-lg} (21px/400) in {colors.muted-soft}, then {component.hero-cta-container} holding the {component.button-primary-with-icon}. Place the 3D sphere image container to the right/below with {rounded.xl} masking.

5. Implement the button system. Create {component.button-primary} (solid orange pill), {component.button-primary-with-icon} (dark circle + orange extension composite — this requires careful flexbox/grid: icon in rounded-square, text in pill), and {component.button-secondary} (ghost). Add active/disabled state variants as separate style objects or modifier classes.

6. Build content sections. Below the hero, implement {component.content-section} wrapping {component.article-card} instances (grey surface, 12px radius, 32px padding). Use {typography.title-md} for card titles, {typography.body-lg} for body text. Ensure section-to-section spacing hits {spacing.section} (72px).

7. Add modal infrastructure. Implement {component.modal-overlay} (fixed full-viewport, 80% white opacity, z-index high) and {component.modal-card} (centered, 20px radius, canvas background, 32px padding). Wire up the contact-form and chat-form variants, including the Spline scene embed for the chat modal (use @splinetool/react-spline or iframe embed).

8. Port animation keyframes. Copy the eight @keyframes definitions (spin, dot-animation-*, fade-*, slide-up-loader) into your stylesheet. Apply fade-in-out to modal entrances, slide-up-loader to hero content on page load, and the dot sequence to form submission loading states. Keep durations at 200-300ms with ease timing.

9. Responsive pass. Implement the collapsing strategy: hamburger nav below 768px, single-column hero stack, scaled-down type (72px → 42px display, compressed hero padding), full-width article cards. Test touch targets meet 44×44px minimum. Verify the 3D sphere resizes gracefully.

10. Lint and validate. Run accessibility checks (WCAG AA contrast for {colors.ink} on {colors.canvas}, {colors.on-accent} on {colors.accent}). Verify every {token.path} reference in code resolves to an actual token. Check that no hardcoded values slipped in during implementation. Test in Safari (WebKit) and Firefox — the Aeonik Pro font rendering should be consistent across browsers given the WOFF2 format.

Font Setup for Development (without Aeonik Pro license):

<!-- Google Fonts: DM Sans as substitute for Aeonik Pro -->
<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=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">

<style>
  :root {
    --font-body: 'DM Sans', 'AeonikPro', Arial, sans-serif;
    /* For the DotConnect wordmark, approximate with DM Sans + wider tracking */
    --font-brand: 'DM Sans', Arial, sans-serif;
  }
  
  .wordmark {
    font-family: var(--font-brand);
    font-weight: 500;
    letter-spacing: 0.03em; /* slightly wider to mimic DotConnect */
  }
</style>

When the licensed Aeonik Pro font files are available, replace the Google Fonts import with self-hosted @font-face declarations pointing to your .woff2 files, keeping the same --font-body variable name so all components update automatically.

Known Gaps

• Hover states on all interactive elements — per the no-hover policy, only default and active/pressed states are documented. Hover styling (background tints, slight scale transforms, underline reveals on nav items) must be designed at implementation time following the brand's subtle-motion philosophy.
• Focus ring / keyboard navigation styling — No explicit focus outlines were detected in the CSS. Recommend implementing a 2px solid {colors.border-strong} or {colors.ink} outline with 2px offset on all focusable elements (buttons, inputs, links) for accessibility compliance.
• Loading skeleton / pending states — While dot-animation-* keyframes suggest a loading indicator pattern, the full skeleton screen structure (card placeholders, shimmer effects) for async content areas is not present in the screenshot.
• Form validation states (error, success, warning) — Only default and focus-ish states for {component.form-input} are documented. Error message styling (red text? icon? border color change?) and success confirmation patterns are unknown.
• Footer component — Referenced in frontmatter but not visible in the screenshot. Footer structure (columns, links, copyright line, newsletter signup) and exact styling are speculative based on typical patterns.
• Additional page templates — The screenshot shows only the home/hero view. Inner pages (About, Offer, Brainpower, Stories, Team, Philosophy — all listed in nav) may have different layouts, content densities, or component variations not captured here.
• Dark mode — The extensions.mode is set to "light" based on the {colors.canvas} being off-white. No dark mode token set or toggle mechanism was detected, but the existence of {colors.surface-dark} and {colors.on-dark} tokens suggests either (a) inverted UI elements within the light theme or (b) preparation for a dark theme that isn't deployed yet.
• Exact 3D sphere implementation details — The Spline scene URL, model complexity, interaction parameters (auto-rotate speed, mouse parallax sensitivity), and fallback static image for non-WebGL browsers are not included in the extracted data.
• Mobile navigation panel contents — The hamburger menu's internal structure (which nav items appear, whether the CTA is duplicated inside, close button placement) is inferred from standard patterns but not visible in the desktop-focused screenshot.