Neuros AI Consulting Design System

Overview

Neuros presents itself as a sophisticated AI consulting brand that occupies the intersection of corporate credibility and startup agility. The design system is built on a cool-gray canvas ({colors.canvas} — #f0f2f4) that immediately signals technical precision without the sterility of pure white. This muted backdrop allows content to breathe while maintaining a sense of engineered intentionality.

The brand's visual voltage lives almost exclusively in a single coral-red accent ({colors.primary} — #f14f44), which appears sparingly but strategically—on interactive elements, CTAs, and decorative overlays. This restraint creates a powerful focal-point effect: when red appears, it commands attention. The color is warm enough to feel human and approachable, yet saturated enough to read as confident and action-oriented.

The typography system is defined by a striking dual-face strategy. Sora carries all display and headline work at an imposing 80px ({typography.display-xl}), rendered at a modest weight of 400 with aggressively tightened letter-spacing (-2.4px). This creates headlines that feel architectural and monumental—almost typographic sculptures—while remaining perfectly legible. Body text shifts to Manrope at 15px with a surprisingly bold weight of 600 ({typography.body-md}), creating a confident, assertive voice for paragraph content. The combination of geometric Sora (headlines) and humanist Manrope (body) produces a tension between precision and approachability that mirrors the brand's AI-human collaboration positioning.

Shape language is dominated by extreme rounding. Cards and containers employ a consistent 25px radius ({rounded.md}), softening every surface into something tactile and friendly. Buttons go further, adopting a fully pill-shaped profile at 9999px ({rounded.pill}), which reads as both modern and accessible. This rounding extends to navigation items and toggle controls, creating a visual vocabulary where every interactive element feels touchable and inviting.

The system reveals at least two distinct sub-dialects: the primary "editorial" surface (light canvas, dark text, white cards) used for the hero and content areas, and a "dark interface" dialect ({colors.surface-soft} — #1f1f1f) reserved for overlays, sidebars, and mobile menu states. This dual-mode approach allows the brand to shift contextually—from open and welcoming to focused and immersive—without breaking visual consistency.

Key Characteristics:

• Cool-gray canvas ({colors.canvas}) replaces sterile white as the foundational surface
• Coral-red brand accent ({colors.primary}) deployed sparingly for maximum impact
• Monumental 80px Sora headlines ({typography.display-xl}) with -2.4px letter-spacing create architectural type moments
• Bold 600-weight Manrope body text ({typography.body-md}) at 15px conveys confidence without aggression
• Heavily rounded cards ({rounded.md} — 25px) and pill buttons ({rounded.pill} — 9999px) define the shape language
• Dual-surface system: light editorial mode and dark overlay mode ({colors.surface-soft})
• Transparent button backgrounds with colored text create lightweight CTAs
• Generous line-height (28.125px on 15px body) ensures readability despite bold weights

Colors

Brand & Accent

• Primary ({colors.primary} — #f14f44): The signature coral-red used for CTAs, interactive highlights, decorative overlays, and brand moments. Appears as solid fills on small elements and as semi-transparent overlays on imagery.
• Primary Dark ({colors.primary-dark} — #d3313d): A deeper red variant used for hover states or pressed interactions on primary-colored elements.
• Primary Hover ({colors.primary-hover} — #e34d4b): An intermediate red tone for transition states between default and active.

Surface

• Canvas ({colors.canvas} — #f0f2f4): The foundational cool-gray background that wraps the entire page. Light enough to feel open, dark enough to provide contrast against white cards.
• Surface ({colors.surface} — #ffffff): Pure white used for elevated cards, content containers, and the hero text card. Creates clear layer separation from the canvas.
• Surface Soft ({colors.surface-soft} — #1f1f1f): Near-black surface used for dark UI contexts: mobile menus, slide-out sidebars, navigation toggles, and overlay panels.
• Surface Strong ({colors.surface-strong} — #333333): Medium-dark gray used for secondary dark surfaces or input backgrounds in dark contexts.
• Near Black ({colors.surface-near-black} — #111111): Deepest surface color, used for maximum-contrast text on light backgrounds or ultra-dark UI elements.
• Surface Light ({colors.surface-light} — #f5f5f5): Very light gray used for subtle background differentiation within white cards or form areas.
• Transparent ({colors.surface-transparent} — rgba(255, 255, 255, 0)): Fully transparent background used for nav bars, buttons, and elements that should reveal the underlying surface.
• Overlay ({colors.surface-overlay} — rgba(51, 51, 51, 0.4)): Semi-transparent dark overlay used for modal backdrops and dimming effects.
• Subtle ({colors.surface-subtle} — rgba(212, 212, 212, 0.1)): Extremely faint tint for barely-visible surface variations.

Text

• Ink ({colors.ink} — #333333): Primary text color for body content, navigation links, and general UI text on light backgrounds.
• Body ({colors.body} — #ffffff): White text used on dark surfaces ({{colors.surface-soft}}), in sidebars, on dark buttons, and for high-contrast labels.
• Body Dark ({colors.body-dark} — #111111): Near-black text reserved for maximum-weight headlines (h1/h2) to ensure authoritative presence.
• Muted ({colors.muted} — #6b6b6b): Medium-gray for secondary text, captions, metadata, and less-important content.
• Muted Dark ({colors.muted-dark} — #545454): Darker gray variant for slightly more prominent secondary text.
• Muted Light ({colors.muted-light} — #9b9b9b): Lighter gray for placeholder text, disabled hints, or tertiary information.
• On Primary ({colors.on-primary} — #333333): Dark text color used when rendering text over {colors.primary} backgrounds or using primary-colored text on light surfaces.
• On Dark ({colors.on-dark} — #f5f5f5): Light text for labels and headings within dark-surface contexts.
• On Surface ({colors.on-surface} — #333333): Standard readable text color for content within white card surfaces.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(212, 212, 212, 0.1)): Extremely subtle border/divider color, nearly invisible, used for minimal separation.
• Border Gradient ({colors.border-gradient} — transparent): The "Get in touch" button employs a gradient border treatment that renders as transparent in static state but may activate on interaction.

Semantic

No explicit semantic colors (error, success, warning) were detected in the extracted CSS. These should be derived from {colors.primary} for errors/warnings and a complementary green for success states when implementing forms or notifications.

Typography

Font Family

The Neuros type system is built on two Google Fonts faces with distinct personalities. Sora (geometric sans-serif) serves as the display and headline face, responsible for all h1/h2-level text and major section titles. Its geometric construction—circles and straight lines—conveys precision, technology, and forward-thinking values. Sora appears in weights 400 (regular) for headlines, with potential access to 500 and 600 for emphasis.

Manrope (humanist/geometric hybrid sans-serif) handles all body text, UI elements, navigation, buttons, and smaller type. Manrope's slightly softer geometry and excellent readability at small sizes make it ideal for the dense information architecture of a consulting site. The extracted CSS shows Manrope deployed across weights 500, 600, and 700, with 600 being the dominant body weight—a choice that gives paragraphs unusual authority without sacrificing readability.

Fallback stacks include Arial, Helvetica, sans-serif for both faces, ensuring graceful degradation on systems where web fonts fail to load. Additionally, the site loads Font Awesome for icons, fontello for custom icon glyphs, and eicons (Elementor icons) for builder-specific iconography.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 80px | 400 | 90px | -2.4px | Hero headlines, section titles (h1) | | {typography.display-lg} | 80px | 400 | 90px | -2.4px | Major section headlines (h2) | | {typography.title-md} | 80px | 400 | 90px | -2.4px | Alternative display context | | {typography.label-md} | 16px | 700 | 21.33px | -0.8px | Section labels, dark-surface headings (h4) | | {typography.body-md} | 15px | 600 | 28.13px | normal | Paragraph text, descriptions | | {typography.body-sm} | 14px | 500 | 1.4 | 0 | Secondary body, compact text | | {typography.caption} | 13px | 500 | 1.38 | 0 | Metadata, timestamps, fine print | | {typography.button} | 16px | 600 | 1.25 | 0 | Primary button labels, CTA text | | {typography.button-sm} | 14px | 600 | 1.25 | 0 | Compact button variants | | {typography.nav-link} | 14px | 500 | 1.25 | 0 | Navigation menu items |

Principles

The most distinctive typographic decision in this system is the bold-but-not-heavy hierarchy. Rather than relying on weight contrasts (light headlines vs. heavy body), Neuros inverts expectations: headlines sit at weight 400 (regular) while body text jumps to 600 (semi-bold). This creates a system where size and letter-spacing—not weight—carry hierarchical authority. The 80px display text achieves its dominance through sheer scale and the aggressive -2.4px letter-spacing that tightens the letterforms into a cohesive visual block.

Line-height is exceptionally generous throughout. Body text at 15px enjoys 28.125px line-height (roughly 1.87x), creating airy paragraphs that feel luxurious and easy to scan. This generosity compensates for the bold weight, preventing the text from feeling dense or aggressive. Display text at 80px uses 90px line-height (1.125x), keeping multi-line headlines tightly coupled.

Letter-spacing follows a binary pattern: display text gets significant negative tracking (-2.4px) to tighten the monumental scale, while label text in dark contexts gets slight positive tracking (-0.8px, though technically negative, it's less aggressive than display) for improved legibility at small sizes on dark backgrounds. All other text uses normal (0) spacing.

Uppercase is not observed in the extracted data; the voice is consistently sentence-case or title-case, reinforcing the approachable, consultative (not dictatorial) brand personality.

Note on Font Substitutes

Both Sora and Manrope are available via Google Fonts and require no substitution for web implementation. However, if local development requires offline fallbacks:

• Sora can be approximated by Montserrat (geometric, similar proportions) or Outfit (more modern geometric alternative). Define as --font-display: 'Sora', 'Montserrat', sans-serif;
• Manrope can be substituted with Plus Jakarta Sans (similar humanist warmth) or Nunito (softer, more rounded). Define as --font-body: 'Manrope', 'Plus Jakarta Sans', sans-serif;

For the proprietary fontello custom icons, ensure the fontello CSS and font files are included in the build pipeline, or replace with equivalent Font Awesome or Lucide icons.

Layout

Spacing System

• Base unit: 5px (the smallest extracted spacing value).

• Tokens:

  • {spacing.xxs} (5px) — micro-adjustments, icon internal padding
  • {spacing.xs} (8px) — tight internal gaps, small element margins
  • {spacing.sm} (10px) — button vertical padding baseline, compact gaps
  • {spacing.md} (13px) — intermediate spacing, list item gaps
  • {spacing.lg} (15px) — standard internal padding, form gaps
  • {spacing.xl} (18px) — section vertical padding minimum, container margins
  • {spacing.xxl} (20px) — dominant spacing value, card internal margins, element spacing
  • {spacing.section-sm} (22px) — minor section breaks
  • {spacing.section-md} (25px) — moderate section spacing
  • {spacing.section-lg} (35px) — major vertical rhythm
  • {spacing.section-xl} (40px) — large section breaks, hero padding

• Section padding (vertical): Ranges from {spacing.xl} (18px) on compact sections to {spacing.section-xl} (40px) on major bands. The hero band uses approximately 80px vertical padding based on visual proportion.

• Card internal padding: The {component.hero-card} employs roughly 60px horizontal and 50px vertical internal padding, creating generous breathing room around the 80px headline.

• Gutters: Content is constrained to 1440px max-width (per container data), centered within the viewport. Internal column gutters appear to use {spacing.xxl} (20px) as the base unit.

Grid & Container

The layout operates on a 1440px max-width container, suggesting a desktop-first, widescreen-optimized design. Within this container:

• Editorial density: The hero section uses an approximate 50/50 split between the text card (left) and imagery (right), with the text card occupying roughly 45% of the width and the photograph taking the remainder plus overflow.
• Navigation: Full-width bar with logo left, centered navigation cluster, and right-aligned utilities (search + CTA). The nav items themselves use inline spacing rather than a strict grid.
• No strict column grid detected: The Elementor-based build suggests a flexbox or absolute-positioned layout rather than a traditional 12-column grid. Implementation should use CSS Grid or Flexbox with 20px/40px gutters.

Whitespace Philosophy

Neuros practices generous, intentional whitespace that aligns with premium consulting branding. The cool-gray canvas provides inherent breathing room, and the white hero card floats within this space rather than edge-to-edge. Line-heights are inflated (1.87x on body text), and the 80px headlines are given room to command attention. This is not sparse/minimalist whitespace—it's luxurious whitespace that signals confidence and lack of desperation.

Header Architecture

+------------------------------------------------------------------+
| [☰]  [LOGO]    HOME ▾  PAGES ▾  SERVICES ▾  SHOP ▾  BLOG ▾  ...  |  🔍  [ Get in touch ] |
+------------------------------------------------------------------+
               ^^^^^^^^^^^^^^^^^^^^ centered nav cluster ^^^^^^^^^^^^^^^^
                                                                  ^^^ right utilities
<--- 1440px max-width container centered --->

The header features: hamburger menu (mobile/left), logo, centered navigation with dropdown indicators, flush-right search icon and pill-shaped CTA button. Background is transparent, revealing the canvas beneath.

Hero Section

+------------------------------------------------------------------+
|                                                                  |
|   +---------------------------+     +-------------------------+   |
|   |                           |     |                         |   |
|   |  Discover                 |     |                         |   |
|   |  future                   |     |    [Photograph of       |   |
|   |  business with            |     |     consultant]         |   |
|   |  AI Neuro                 |     |                         |   |
|   |  consulting               |     |      [Red overlay]      |   |
|   |                           |     |                         |   |
|   |                           |     |              [<] [>]    |   |
|   +---------------------------+     +-------------------------+   |
|                                                                  |
+------------------------------------------------------------------+
   ^-- white card (25px radius) --^     ^-- image w/ carousel --^

The hero splits into a left-column white card containing the 80px Sora headline, and a right-column area featuring a professional portrait photograph with a red accent overlay/bar and carousel navigation controls.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} or {colors.surface} background | Base page surface, nav bar, flat buttons | | 1 (Card) | {extensions.shadows.card} — rgba(0,0,0,0.1) 0 5px 23px 4px | Elevated white cards (hero card, content cards) | | 2 (Overlay) | {colors.surface-overlay} — rgba(51,51,51,0.4) fullscreen | Modal backdrops, mobile menu dimming | | 3 (Dropdown/Floating) | Not explicitly detected; recommend {extensions.shadows.card} | Dropdown menus, tooltips (to be implemented) |

Philosophy: The system favors color-block elevation over shadow elevation. The primary depth cue is the contrast between {colors.canvas} (background) and {colors.surface} (white cards)—a flat-layer approach where cards "float" via background-color difference rather than dramatic shadows. When shadows do appear (on the hero card), they're soft, diffuse, and neutral-toned (no blue/orange tints), suggesting ambient light rather than directional sources.

Decorative Depth

The red rectangular overlay on the hero photograph represents a graphic depth layer—a flat color plane positioned between the viewer and the image content. This technique adds visual interest without resorting to gradients or complex compositing. The overlay uses {colors.primary} at partial opacity or as a solid bar, creating a "branded window" effect over the photography.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Small UI elements, badges, tags | | {rounded.DEFAULT} | 16px | Default component rounding (inputs, small cards) | | {rounded.md} | 25px | Primary card radius — hero card, content cards, panels | | {rounded.lg} | 30px | Larger containers, feature boxes | | {rounded.xl} | 50% | Circular elements (avatars, icon circles) | | {rounded.pill} | 9999px | Button radius — all CTAs, nav items, pills | | {rounded.full} | 9999px | Alias for pill, fully rounded | | {rounded.card-asymmetric} | 0px 0px 25px 25px | Special bottom-only rounding for cards attached to edges | | {rounded.badge-asymmetric} | 30px 0px 0px | Top-left-only rounding for special badge shapes |

Photography Geometry

The hero photograph displays as a rectangular, full-bleed element within its container, with no visible corner rounding (or potentially {rounded.md} matching the adjacent card). The image appears to use a portrait aspect ratio (approximately 3:4 or 4:5), focusing on upper-body professional portraiture. The red overlay bar sits as a horizontal rectangle positioned across the eye-line area of the photograph, creating a graphic intervention that partially obscures the face while adding brand color. Carousel navigation buttons (prev/next arrows) appear as rounded squares ({{rounded.md}}) overlaid on the right edge of the image area.

Components

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

Buttons

{component.button-primary} — The primary call-to-action button, seen as "Get in touch" in the header. Features transparent background with {colors.ink} text, fully pill-shaped ({rounded.pill}), using {typography.button} (16px/600 weight). Padding is generous at 15px 35px (compact variant uses 15px 18px). The button may feature a gradient border treatment that activates on hover/focus. This is the flagship conversion element and should be used sparingly—at most once per viewport.

{component.button-primary-alt} — A dark-context variant of the primary button, using {colors.body} (white) text on transparent background. Same pill shape and typography, with slightly adjusted padding (14px 22px). Used in footer or dark-surface contexts where white text provides necessary contrast.

{component.button-primary-compact} — A space-constrained version of the primary button, reducing font-size to {typography.button-sm} (14px) and tightening horizontal padding to 18px. Maintains the same vertical padding (15px) to preserve touch-target height. Useful in navigation bars or crowded toolbars.

Cards & Containers

{component.hero-card} — The signature white content card dominating the left side of the hero section. Background {colors.surface}, text {colors.ink}, rounded {rounded.md} (25px). Contains the {typography.display-lg} headline with approximately 60px 50px internal padding. Casts a soft shadow ({extensions.shadows.card}) to elevate from the {colors.canvas} background. This card establishes the primary content-container pattern for the entire site.

{component.hero-band} — The full-width section wrapper for the hero area. Background {colors.canvas} (#f0f2f4), providing the cool-gray stage upon which the hero card and image sit. Vertical padding approximately 80px (estimated from visual proportion). This band pattern repeats for major section breaks.

Navigation

{component.top-nav} — The persistent header navigation bar. Transparent background ({colors.surface-transparent}), allowing the underlying page or canvas to show through. Height approximately 80px. Contains logo (left), centered nav cluster, and right-aligned utilities. Uses {typography.nav-link} (14px/500 weight) for menu items.

{component.nav-item} — Individual navigation menu items (HOME, PAGES, SERVICES, etc.). In their active/toggled state, they render as dark pills: {colors.surface-soft} background with {colors.body} text, fully rounded ({rounded.pill}). Inactive state likely uses transparent background with {colors.ink} text. Each item includes a dropdown indicator (small arrow).

{component.mega-toggle} — The hamburger menu button for mobile/small screens. Transparent background, {colors.on-dark} text color (for visibility against potential dark backgrounds), pill-rounded. Triggers the mobile menu panel.

{component.search-icon} — The search utility button in the header. Small (20px), transparent background, {colors.ink} colored icon. Likely opens a search overlay or expands an input field.

Inputs & Forms

{component.text-input} — The search input field detected in the DOM. Transparent background, {colors.ink} text color, no visible border (border: 0px), no rounding (0px radius). Unusual left-padding of 95px suggests a prefixed icon or label within the field. Height approximately 48px. Uses {typography.button} styling (16px). This minimalist input treatment suggests the brand prefers unobtrusive form elements that don't compete with content.

Overlays & Panels

{component.mobile-menu-container} — The mobile navigation panel. Transparent base with child elements handling background. Uses {typography.body-sm} for menu items. Contains nested structures for contacts, social links, and the CTA button.

{component.sidebar-panel} — Slide-out sidebar (likely triggered by hamburger or dedicated trigger). Dark surface ({colors.surface-soft} — #1f1f1f) with white ({colors.body}) text. Uses {typography.body-md} for content. This panel represents the "dark dialect" of the design system.

{component.sidebar-close} — Close button for the sidebar/overlay. Transparent background, white text, caption-sized ({typography.caption}).

{component.overlay} — Full-screen dimming overlay. Semi-transparent dark ({colors.surface-overlay} — 40% opacity black). Used behind modals, sidebars, and expanded search to de-emphasize background content.

{component.page-loader} — Initial page load spinner/indicator. Transparent background with {colors.primary}-colored animation. Uses a custom keyframe animation (swiper-preloader-spin).

Navigation Aids

{component.scroll-top-button} — Fixed-position "scroll to top" button (bottom-right of viewport). White background ({colors.surface}), dark text ({colors.ink}), rounded {rounded.md} (25px), 48px size. Contains an upward-pointing arrow icon.

{component.carousel-nav} — Previous/Next navigation buttons for the hero image carousel. White background, dark text, 48px size, {rounded.md} rounding. Positioned overlaid on the right edge of the image area.

{component.icon-button-nav} — Small icon-only buttons in the header area (possibly social links or utility triggers). 24px size, transparent background, {colors.ink} color.

Dark-Surface Components

{component.contact-title} — Section heading within dark surfaces (mobile menu, sidebar). Uses {typography.label-md} (16px/700 weight) in {colors.on-dark} color (#f5f5f5) with negative letter-spacing (-0.8px) for tight, impactful appearance.

{component.social-icon} — Social media link icons within dark contexts. 20px size, {colors.body} (white) color, transparent background. Likely uses Font Awesome or fontello glyph icons.

Do's and Don'ts

Do

• Do use {colors.canvas} (#f0f2f4) as your page background instead of pure white—the cool-gray tone is essential to the brand's technical aesthetic.
• Do reserve {colors.primary} (#f14f44) for CTAs, interactive highlights, and one branded moment per section—overuse dilutes its impact.
• Do set display headlines (h1/h2) to exactly 80px with {typography.display-xl}'s -2.4px letter-spacing—this aggressive tightening is what makes the type feel "designed" rather than "default."
• Do apply {rounded.md} (25px) to all content cards—this consistent heaviness creates the friendly, tactile quality that distinguishes the brand.
• Do make all buttons fully pill-shaped ({rounded.pill} — 9999px)—even small icon buttons should trend toward extreme rounding.
• Do use 600 weight for body text ({typography.body-md}) with 28.125px line-height—the bold weight needs extra vertical space to breathe.
• Do implement dark-surface panels ({colors.surface-soft}) with white text ({colors.body}) for overlays, sidebars, and mobile menus—this dual-mode behavior is core to the system.
• Do keep button backgrounds transparent with colored text for the primary CTA style—the "ghost button" aesthetic feels more modern and less heavy than filled buttons.
• Do constrain content to 1440px max-width and center it—the widescreen layout is intentional, not accidental.
• Do use {extensions.shadows.card} (soft, neutral diffuse shadow) for elevated cards—avoid hard shadows or colored drop shadows.

Don't

• Don't substitute {colors.ink} (#333333) for {colors.body-dark} (#111111) on headlines—the near-black is specifically reserved for maximum-contrast display text.
• Don't round corners less than {rounded.sm} (8px) on any visible element—even subtle UI bits should feel soft.
• Don't use font weights below 500 for any user-facing text—the brand voice is inherently bold and confident; thin type feels wrong here.
• Don't add gradient backgrounds to the hero section or major bands—the canvas is a flat, honest {colors.canvas} color without atmospheric effects.
• Don't let body text line-height drop below 1.8x the font size—the 28.125px line-height on 15px text is non-negotiable for readability at 600 weight.
• Don't use {colors.primary} as a text color on light backgrounds for long passages—it's meant for short labels, accents, and interactive elements, not reading content.
• Don't mix Sora into body text or Manrope into headlines—the two-face system is strict and purposeful.
• Don't add visible borders to inputs or buttons unless absolutely necessary—the extracted styles favor borderless, background-driven separation.
• Don't crowd the hero card with content—the 80px headline needs the 60px 50px padding to feel monumental; stuffing it with subheads or body copy undermines the effect.
• Don't implement hover states as background-color fills on ghost buttons—consider border reveals, underline animations, or subtle color shifts that maintain the lightweight aesthetic.

Motion & Animation

Transition Tokens

--transition-opacity: opacity 0.3s ease;
--transition-color: color 0.3s ease;
--transition-all: all 0.3s ease;
--transition-color-opacity: color 0.3s ease, opacity 0.3s ease;
--button-transitions: background 0.2s linear, color 0.2s linear, border 0.2s linear;
--complex-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
--sidebar-slide: left 0.6s cubic-bezier(0.77, 0, 0.175, 1);

Keyframe Animations

• swiper-preloader-spin — Rotational loading spinner animation used during initial page load or content transitions. Likely a continuous 360-degree rotation applied to a circular SVG or icon element.

Interaction Patterns

• Sidebar slide-in/out: The slide-out panel animates using left property transition with a custom cubic-bezier timing function (cubic-bezier(0.77, 0, 0.175, 1)) over 600ms—this is a slightly bouncy, deceleration-heavy curve that makes the panel feel weighted and physical.
• Color transitions on hover: All interactive elements (buttons, links, nav items) transition their color property over 300ms with ease timing—standard, predictable, non-distracting.
• Background/color/border coupled transitions: Buttons specifically transition background, color, and border simultaneously over 200ms with linear timing—faster than text transitions to feel responsive.
• Opacity fades: Overlay appearances, loader fade-outs, and tooltip-style reveals use 300ms opacity transitions.
• Carousel navigation: The prev/next controls on the hero image likely trigger slide or crossfade transitions (implied by the swiper-preloader-spin dependency suggesting Swiper.js carousel library).

No explicit scroll-triggered animations (fade-up, parallax) were detected in the CSS, though the Elementor framework commonly includes these. Recommended addition: subtle fade-up on scroll for content cards entering the viewport, using 400ms duration with ease-out timing to match the brand's "subtle" motion level.

Imagery Style

• Photography style: Professional business portraiture with shallow depth-of-field, featuring a male subject in smart-casual attire (blazer, open collar). Lighting is soft and even, suggesting studio or controlled-environment shooting.
• Subject matter: Human-centric—focuses on the consultants/experts behind the AI service, humanizing the technology. Faces are partially obscured by graphic overlays (the red bar), creating a "human + machine" visual metaphor.
• Color treatment: Photography appears to be full-color (not desaturated or duotoned), allowing the natural skin tones and clothing colors to provide warmth against the cool-gray UI.
• Composition: Portrait orientation (vertical) for the hero image, cropped to show head-and-shoulders or upper-torso. Subject is positioned slightly off-center following rule-of-thirds.
• Graphic intervention: The solid red ({colors.primary}) rectangular overlay across the eyes/bridge of nose is a signature motif—turning the portrait into a semi-abstract composition that reinforces brand color while adding mystery/sophistication.
• Role of imagery: Supportive but substantial—the photograph occupies ~50% of the hero width, making it equal partner to the headline text, not a background afterthought.
• Image tech: Likely optimized WebP or JPEG with responsive srcset. No filters, gradients, or blend modes detected on the image element itself.
• Future imagery expectation: Consistent portrait style for team pages, potentially shifting to abstract AI/neural-network visualization or office environment shots for secondary sections.

Icon System

• Library: Font Awesome (primary), with fontello custom icons and eicons (Elementor) as secondary sources. The site loads Font Awesome Brands, Solid, and Free bundles.
• Specific icons observed:
  • Search/magnifying glass (header utility)
  • Chevron/down-arrow (navigation dropdown indicators)
  • Hamburger/menu (mobile nav toggle)
  • Arrow-up (scroll-to-top button)
  • Left/right chevrons or arrows (carousel navigation)
  • Close/X (sidebar/search dismiss)
  • Social media icons (in mobile menu: likely Facebook, Twitter/X, LinkedIn, Instagram based on standard patterns)
• Treatment: Icons use currentColor inheritance, matching the text color of their parent container. Stroke-based appearance (Font Awesome Solid style). Sizes range from 14px (inline with text) to 20px (standalone buttons) to 24px (larger navigational icons).
• Alignment: Icons are vertically centered with adjacent text using flexbox alignment. In buttons, icons typically precede text with 8-10px gap.
• Custom fontello icons: The theme includes a custom fontello font file, suggesting bespoke iconography for unique brand moments (possibly the logo mark itself is a fontello glyph).

Recommended Frontend Stack

- Framework:      Next.js 14 (App Router) or Astro for static/markdown-content sites
                  (Current site runs WordPress + Elementor; rebuild recommendation assumes modern stack)
- Styling:        Tailwind CSS v3.4+ with custom design tokens mapped to config
                  (Extracted CSS suggests vanilla/custom CSS; Tailwind ideal for token consistency)
- Fonts:          Google Fonts CDN: Sora (weights 400,500,600) + Manrope (weights 500,600,700)
                  CSS variables: --font-display: 'Sora', sans-serif; --font-body: 'Manrope', sans-serif;
- Animation:      Framer Motion (React) or GSAP for complex sequences;
                  Vanilla CSS transitions sufficient for hover/focus states per extracted tokens
- Icons:          Font Awesome 6 (free tier) via @fortawesome/react-fontawesome or CDN;
                  Replace fontello custom icons with Lucide or custom SVG components
- Component lib:  Radix UI Primitives for accessible overlays/dropdowns;
                  shadcn/ui (Tailwind-compatible) as base component starter kit

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column layout; hamburger menu replaces horizontal nav; hero stacks vertically (card above or below image); sidebar becomes full-screen overlay | | Tablet | 768px – 1024px | Two-column hero maintains but with reduced padding; nav may condense or hide low-priority items; font sizes may scale down 10-15% | | Desktop | 1025px – 1440px | Full layout as designed; 1440px max-width container; all spacing tokens at specified values | | Wide | > 1440px | Container centers with auto margins; background canvas may extend edge-to-edge while content remains at 1440px |

Touch Targets

• {component.button-primary}: Padding 15px 35px yields approximate height of 48-52px (15px × 2 + 16px font + browser defaults)—exceeds WCAG AAA 44×44 minimum ✅
• {component.button-primary-compact}: Padding 15px 18px with 14px font yields ~48px height—meets AAA minimum ✅
• {component.text-input}: Explicit height 48px—meets AAA minimum ✅
• {component.nav-item}: Padding 10px 20px with 14px font yields ~42px height—slightly under AAA; recommend increasing to 12px vertical padding for mobile ⚠️
• {component.scroll-top-button}: 48px × 48px—meets AAA minimum ✅
• {component.carousel-nav}: 48px × 48px—meets AAA minimum ✅

Collapsing Strategy

• Navigation: Horizontal nav collapses to hamburger menu ({component.mega-toggle}) triggering {component.mobile-menu-container} — a full-screen or off-canvas panel containing vertical nav links, contact info, social icons, and the CTA button.
• Hero section: Two-column layout (text card + image) stacks to single column. Based on typical patterns, the text card likely moves above the image on mobile, or the image becomes a background/full-bleed element with the card overlaid. The 80px headline must scale down significantly (likely to 40-48px) to fit mobile viewports.
• Search: Header search icon likely expands into a full-width search bar or modal on mobile, utilizing the {component.text-input} styling.
• Sidebar: Any slide-out sidebar (desktop edge panel) converts to full-screen overlay on mobile, using {component.sidebar-panel} dark-surface styling.
• Spacing compression: Vertical padding on {component.hero-band} and {component.hero-card} reduces by ~40-50% on mobile (from 80px/60px to 40-48px/30-36px) to conserve screen real estate.

Image Behavior

• Hero photograph: On mobile, likely crops from portrait (3:4) to square or landscape (4:3) using object-fit: cover with object-position: center-top to keep the face visible. The red overlay bar scales proportionally or converts to a full-width accent strip.
• Carousel: Touch-swipe enabled on mobile; prev/next buttons may hide or convert to dot indicators.
• Avatars/team photos (if present on inner pages): Circle-crop ({rounded.xl} — 50%) at 80-120px on mobile, scaling up on desktop.

Iteration Guide

1. Initialize with tokens: Create a design-tokens.css or Tailwind theme.extend object containing every value from the YAML frontmatter. Map {colors.*} to CSS custom properties like --color-primary: #f14f44;. Never hard-code a hex or pixel value that has a token equivalent.

2. Build the surface layers first: Implement {colors.canvas} as the body background, then add the 1440px centered container, then the {component.top-nav} with transparent background. Verify the cool-gray foundation renders correctly before adding content.

3. Implement the dual-type system: Set up CSS classes for .font-display (Sora) and .font-body (Manrope). Build the {typography.display-xl} class with exact 80px/90px/-2.4px specs. Test the headline in the {component.hero-card} before adding other content.

4. Construct the hero section: Build the white card ({component.hero-card}) with 25px radius and shadow. Add the 80px headline. Then build the image column with photograph and red overlay. Verify the 50/50 (or 45/55) split at 1440px viewport.

5. Implement button variants: Create .btn, .btn-primary, .btn-primary-compact classes mapping to the three button component specs. Ensure all use border-radius: 9999px and transparent backgrounds. Add :hover and :focus states using {colors.primary-dark} for color shifts.

6. Build the dark-surface dialect: Implement {component.sidebar-panel} or {component.mobile-menu-container} with {colors.surface-soft} background. Populate with white-text content, social icons ({component.social-icon}), and the alt-style CTA button ({component.button-primary-alt}). Test the overlay backdrop ({component.overlay}) at 40% opacity.

7. Add motion progressively: Apply the transition tokens from the Motion section. Start with color 0.3s ease on all interactive elements. Implement the sidebar slide with cubic-bezier(0.77, 0, 0.175, 1) timing. Add scroll-triggered fade-ups only after static layout is complete.

8. Responsive pass: Test at 375px (mobile), 768px (tablet), 1024px (small desktop), and 1440px (full). Verify the nav collapses to hamburger, hero stacks, and touch targets meet 44×44px. Adjust {typography.display-xl} down to 40-48px on mobile.

9. Icon audit: Replace Font Awesome CDN references with tree-shaken imports or SVG components. Map each icon in the Icon System section to its specific FA name (e.g., fa-search, fa-bars, fa-chevron-down). Ensure custom fontello icons are converted to inline SVGs or replaced with FA/Lucide equivalents.

10. Lint and validate: Run contrast ratio checks on all text/background combinations—especially {colors.primary} (#f14f44) against {colors.on-primary} (#333333) which should exceed 4.5:1 for AA compliance. Verify every {token.reference} in code resolves to a defined token. Test keyboard navigation on all interactive components.

Font Setup for Development:

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Sora:wght@400;500;600&display=swap');

:root {
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

If Sora or Manrope are unavailable (offline dev, network restrictions), substitute with:

• Sora → Montserrat (closest geometric match) or Outfit (modern alternative)
• Manrope → Plus Jakarta Sans (humanist warmth) or Nunito (softer, more rounded)

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover colors, transforms, and border changes are not documented. The frontmatter provides {colors.primary-dark} and {colors.primary-hover} as suggested hover targets, but specific which-component-gets-which-hover mapping requires implementation decisions.
• Focus ring specifications: No explicit outline or box-shadow focus indicators were detected in the CSS. Recommend implementing a 2px solid {colors.primary} offset outline or 0 0 0 3px {colors.primary} box-shadow for keyboard accessibility.
• Loading/skeleton states: Beyond the swiper-preloader-spin animation, no skeleton loaders, shimmer effects, or pending-state placeholders were found. These should be designed to match the 25px card radius and cool-gray palette.
• Form validation states: Only the default {component.text-input} was extracted. Error, success, disabled, and readonly input variants (with red/green borders, background tints) are not defined.
• Dark mode: The system has a "dark dialect" for overlays ({colors.surface-soft}) but no full dark-mode theme (inverted canvas, adjusted text colors, etc.). A true dark mode would require inverting {colors.canvas} to ~#1a1a1e and {colors.ink} to #e5e5e5.
• Inner page components: Pricing tables, team grids, blog cards, testimonial carousels, contact forms, and footer columns are referenced in the nav but not visible in the screenshot. Their specific component specs (pricing tier cards, blog post metadata layouts) are unknown.
• Pixel-exact red overlay dimensions: The red rectangular bar on the hero photograph has no extracted CSS dimensions. Its exact height, position (y-offset), and opacity are visual estimates only.
• Gradient border implementation: The "Get in touch" button references a neuros-button-border-style-gradient class suggesting a gradient border effect, but the actual gradient colors/stops are not present in the extracted data. Implementation will require reverse-engineering from the live site or designing a complementary gradient (likely red-to-coral or red-to-transparent).
• Elementor-specific classes: Many components use WordPress Elementor-generated class names (neuros-button, wp-block-button__link, mega-menu-toggle). These are framework artifacts, not semantic design tokens, and should be replaced with meaningful BEM or utility-class names in a rebuild.
• Carousel/Swiper configuration: The presence of swiper-preloader-spin implies Swiper.js powers the hero image carousel, but slide count, autoplay settings, pagination style, and touch behavior parameters are unknown.