AmSales Design System

Overview

AmSales presents itself as a technically sophisticated CRM and AI integration agency operating in a dark, cinematic design space. The visual identity draws heavily from cyberpunk and server-room aesthetics — deep charcoal-black canvases textured with subtle film grain, punctuated by an electric lime green ({colors.primary}) that functions as the sole brand voltage across CTAs, glowing accents, and interactive highlights. The atmosphere is deliberately industrial-futuristic: imagery features server racks bathed in chromatic RGB light trails, while the hero headline "AM.SALES" renders at an enormous {typography.display-xl} scale with visible chromatic aberration (RGB-split) distortion effects.

Typography carries the weight of the personality. Space Grotesk dominates display roles — the hero wordmark sits at 224px with aggressive negative letter-spacing (-8.96px) and weight 700, while section titles hit 60px at weight 800. This is not a shy typeface; it demands attention through sheer mass and geometric precision. Body copy retreats into Inter at 18px, rendered in a desaturated sage-green ({colors.body}) that reads as muted against the dark canvas, creating clear hierarchy through both scale and color temperature. Technical labels and metadata deploy JetBrains Mono at 13px, reinforcing the engineering-first brand voice.

The shape language is predominantly angular. Buttons default to zero border-radius ({rounded.none}), with only floating action buttons adopting {rounded.pill} geometry. Cards show minimal {rounded.sm} (4px) rounding on top corners only, suggesting a "cut-corner" brutalist sensibility. Spacing follows a tight 4px–12px rhythm for component internals while breathing into generous 48px–80px section padding vertically. Elevation is handled through color layering rather than traditional drop shadows — surfaces step from {colors.canvas} → {colors.surface-elevated} → {colors.surface-strong} in subtle luminance increments. When shadows do appear, they are either neutral-depth ({extensions.shadows.lg}) or tinted with the brand lime glow ({extensions.shadows.md}).

A signature sub-system is the floating widget cluster: two fixed-position circular FABs anchored bottom-right, one for a cost calculator (lime-filled) and one for a chat trigger (dark with avatar). These sit above a tertiary back-to-top button, forming a vertical utility stack. The header uses a frosted-glass treatment ({colors.canvas} at 80% opacity with backdrop-blur-xl), creating a sense of layered depth over the full-bleed hero imagery.

Key Characteristics

• Dark-first canvas at {colors.canvas} (#0f1110) with film-grain texture overlay, never pure black.
• Single brand voltage: {colors.primary} (#c6f24e) electric lime, used exclusively for CTAs, glows, links, and hover states.
• Colossal display type: {typography.display-xl} at 224px Space Grotesk weight 700, with -8.96px letter-spacing and chromatic aberration effect on the hero.
• Desaturated body copy: {colors.body} (#9aa39a) sage-muted text in Inter 18px, creating intentional low-contrast readability against dark backgrounds.
• Angular dominance: {rounded.none} (0px) on nearly all rectangular components; radius reserved exclusively for {component.fab-primary} and {component.fab-secondary} pills.
• Three-font stack: Space Grotesk (headlines/display), Inter (body/UI), JetBrains Mono (technical labels/code).
• Frosted glass header: {component.top-nav} uses {colors.canvas} at 80% opacity with backdrop-blur-xl, fixed position with bottom hairline border.
• Glow-based emphasis: Primary actions emit a {extensions.shadows.md} lime-tinted box-shadow rather than solid elevation; focus rings use {extensions.shadows.focus-ring} (2px solid lime outline).
• Tight internal spacing, loose external: Component padding clusters around {spacing.md} (12px) – {spacing.xl} (20px); vertical section gaps hit {spacing.section-lg} (80px).
• Custom animation vocabulary: marquee, eq-pulse, wb-pulse, wb-spark, loto-progress, and ping keyframes suggest rich motion design beyond static layout.

Colors

Brand & Accent

• Primary ({colors.primary} — #c6f24e): Electric lime-green. Used as the sole brand accent — fills {component.button-primary}, powers {component.fab-primary}, tints hover states, and creates glow shadows. Appears on the "Оставить заявку" CTA in the header and the cost-calculator FAB.
• Primary Bright ({colors.primary-bright} — #d4ff56): Lightened lime variant. Used for hover state backgrounds on {component.button-primary-hover} where the primary needs to feel more illuminated on interaction.
• Primary Hover ({colors.primary-hover} — #b8e642): Darkened lime. Serves as the hover text color for ghost/link-style buttons like {component.button-secondary-hover} and icon buttons transitioning to brand color.

Surface

• Canvas ({colors.canvas} — #0f1110): The foundational page background. Near-black with a very slight warm/green cast (not pure #000). Receives a film-grain texture overlay class (grain). Used by {component.hero-band}, body background, and most section containers.
• Surface Soft ({colors.surface-soft} — #0a0b0a): Deepest surface tone, marginally darker than canvas. Used for inset containers like {component.textarea} and certain nested card backgrounds.
• Surface Elevated ({colors.surface-elevated} — #161916): One step lighter than canvas. Used for {component.card} backgrounds and raised panel surfaces.
• Surface Strong ({colors.surface-strong} — #232723): Mid-tone dark surface. Functions as the primary hairline/border color ({colors.hairline}) and also serves as text-on-primary (button label color when on lime background). Used in {component.text-input} borders and button label text.
• Surface Card ({colors.surface-card} — #2e332e): Lightest surface token, approaching a dark gray-green. Reserved for highest-elevation elements within cards or highlighted regions.

Text / Ink

• Ink / Bone ({colors.ink} — #f4f5f0): Near-white with a faint warm-green tint. The brightest text color, used for headlines ({typography.title-md}, {typography.display-xl}), nav branding, and primary body headings. Contrast ratio against {colors.canvas} exceeds WCAG AAA.
• Body ({colors.body} — #9aa39a): Desaturated sage/muted green. The workhorse paragraph color — used for {typography.body-md} content, descriptions, and secondary reading material. Intentionally lower contrast to create visual hierarchy without relying solely on size reduction.
• Muted ({colors.muted} — #5d635d): Medium-dark muted green. Applied to tertiary text: captions, placeholder states, icon-button defaults like {component.button-icon}, and decorative labels.
• Muted Strong ({colors.muted-strong} — #232723): Very dark, nearly matches surface-strong. Used specifically as the text color atop {colors.primary} backgrounds — the label text inside filled buttons reads in this near-black shade for maximum contrast against lime.
• On Primary ({colors.on-primary} — #f4f5f0): Light text for rendering on dark surfaces when needed as a fallback. In practice, filled primary buttons use {colors.muted-strong} instead for better contrast against lime.
• On Dark ({colors.on-dark} — #f4f5f0): Alias for ink/bone. Used for any text rendered on dark surfaces outside of the primary button context.
• On Surface ({colors.on-surface} — #f4f5f0): Alias for ink/bone. Standard text-on-surface color for cards and panels.

Hairlines & Borders

• Hairline ({colors.hairline} — #232723): Default border/divider color. Matches {colors.surface-strong}. Used on {component.top-nav} bottom edge, {component.button-icon} borders, {component.text-input} outlines, and all structural separator lines.
• Border Strong ({colors.border-strong} — #353935): Slightly lighter than hairline. Reserved for borders needing marginal extra visibility — hover-state icon button borders, focused input rings before the glow kicks in.

Semantic

• Error ({colors.error} — #c13515): Deep red-orange. Not observed in the screenshot but present in the palette for form validation and alert states.
• Link ({colors.link} — #c6f24e): Maps directly to {colors.primary}. Inline links render in the brand lime color, making them visually identical to primary CTAs in hue but differentiated by context (inline vs. contained).
• Link Hover ({colors.link-hover} — #d4ff56): Maps to {colors.primary-bright}. Link hover state brightens slightly toward yellow-green.

Typography

Font Family

AmSales deploys a three-typeface system with clearly delineated roles. Space Grotesk (self-hosted woff2 files loaded via @font-face declarations covering weights 400, 500, 600, and 700) owns all display and headline territory. Its geometric, slightly condensed proportions and technical character make it ideal for the colossal 224px hero lockup and bold 60px section titles. The font includes fallback chains to Manrope then system-ui for graceful degradation.

Inter handles everything structural and readable: body paragraphs, button labels, navigation items, captions, and UI chrome. Loaded via system font stack with "Inter Fallback" as the immediate fallback before system-ui, sans-serif. At 18px for body copy ({typography.body-md}), Inter provides excellent legibility at the desaturated {colors.body} color value.

JetBrains Mono appears in technical contexts: the "ЗОЛОТОЙ ПАРТНЁР БИТРИКС24" badge label, metadata strings, code-like annotations, and the "СКРОЛЛ" scroll indicator. Self-hosted with fallback declaration. Always renders at 13px ({typography.mono} / {typography.label-md}) in monospace tracking, signaling "this is data, not prose."

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 224px | 700 | 183.68px | -8.96px | Hero wordmark "AM.SALES" — single-use colossal display | | {typography.display-lg} | 224px | 700 | 183.68px | -8.96px | Alias for display-xl; same extracted values | | {typography.title-md} | 60px | 800 | 61.2px | -1.5px | Section headings (H2), major feature titles | | {typography.title-sm} | 24px | 700 | 32px | -0.6px | Subsection headings (H3), card titles | | {typography.body-md} | 18px | 400 | 29.25px | normal | Paragraph text, descriptions, hero subtext | | {typography.body-sm} | 14px | 400 | 22px | normal | Secondary body, fine print, legal text | | {typography.caption} | 13px | 400 | 18px | normal | Timestamps, metadata, tiny labels | | {typography.button} | 14px | 600 | 20px | normal | CTA button labels, nav action text | | {typography.label-md} | 13px | 400 | 18px | 0 | Technical badges, mono labels ("БИТРИКС24") | | {typography.mono} | 13px | 400 | 18px | 0 | Code snippets, terminal-style text, scroll indicator |

Principles

The typography system trusts scale first, weight second, color third to establish hierarchy. The jump from {typography.body-md} (18px) to {typography.title-sm} (24px) to {typography.title-md} (60px) to {typography.display-xl} (224px) represents exponential rather than linear scaling — the hero is literally 12× the body size, ensuring the brand moment is unmistakable. Within each tier, weight provides secondary differentiation: body stays at 400 while buttons bump to 600, subsections to 700, and major headings to 800 (the extrabold "STUDIO" watermark).

Negative letter-spacing is aggressively applied to display type: -8.96px at 224px (roughly -4% of em), -1.5px at 60px (-2.5%), -0.6px at 24px (-2.5%). This tightens the geometric Sans into a denser, more impactful block — particularly critical for the all-caps hero wordmark where letter-spaces would otherwise feel cavernous. Body and UI text retain normal (0) spacing for maximum readability at smaller sizes.

Color temperature does significant hierarchy work. Headlines blaze in {colors.ink} (#f4f5f0, near-white) while paragraphs recede into {colors.body} (#9aa39a, muted sage). A reader scanning the page immediately grasises what's important by brightness alone, even before processing semantic meaning. Technical labels in {typography.mono} further differentiate themselves through both font family and the monospace aesthetic, which reads as "infrastructural" versus "editorial."

The chromatic aberration effect on the hero "AM.SALES" text is a signature typographic moment — achieved through RGB channel offset (likely CSS text-shadow with red and cyan displacements, or an SVG filter). This is not a system-wide treatment; it is exclusive to the {typography.display-xl} hero instance and should not be applied to other text roles.

Note on Font Substitutes

Space Grotesk is available on Google Fonts and can be substituted directly: font-family: 'Space Grotesk', sans-serif. For environments where Google Fonts is inaccessible, Outfit (variable weight, similar geometric proportions) or Sora serve as acceptable substitutes for headlines. Inter is universally available via Google Fonts or system fonts (it ships with many OS installs). JetBrains Mono is also on Google Fonts. Define these CSS variables for substitution readiness:

--font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

Layout

Spacing System

• Base unit: 4px (derived from the {spacing.xs} token and consistent even-value distribution).
• Tokens: {spacing.xxs} (2px — micro-adjustments, inner gaps), {spacing.xs} (4px — icon padding, tight inline gaps), {spacing.sm} (8px — small component gaps), {spacing.md} (12px — most common internal padding, button vertical padding), {spacing.lg} (16px — card horizontal padding, container gutters), {spacing.xl} (20px — button horizontal padding, form field padding), {spacing.xxl} (24px — card padding, section horizontal gutter), {spacing.section-sm} (28px — minor section gap), {spacing.section} (48px — standard vertical section rhythm), {spacing.section-lg} (80px — major section break, hero vertical padding).
• Section padding (vertical): {spacing.section-lg} (80px) — used between major content bands; {spacing.section} (48px) for internal band padding within sections.
• Card internal padding: {spacing.xxl} (24px) per {component.card} specification.
• Gutters: Horizontal page margins are {spacing.lg} (16px) at mobile scaling to {spacing.xxl} (24px) at desktop within the max-width container.

Grid & Container

• Max content width: 1440px for main content areas (main, section). Navigation container stretches to 1600px max-width with 1440px working width plus 24px horizontal padding.
• Editorial density choice: The layout is editorial-cinematic, not marketplace-dense. The hero occupies full viewport height (min-h-[100svh]) with the headline centered and the descriptive text constrained to ~612px (article width) positioned bottom-left. This asymmetric placement — massive display type centered, supporting copy anchored low-left — creates dynamic tension.
• Grid behaviors at desktop: The hero uses absolute/flex positioning rather than a column grid. Content below likely follows a centered constrained column (max-w-7xl ≈ 1280px) with internal grid layouts for feature cards. The second observed section uses max-w-7xl centering.
• Hero column splits: The hero does not use a traditional two-column split. Instead, the headline "AM.SALES" is viewport-centered (absolute positioning or flex-center), while a text block (badge + paragraph) anchors to the bottom-left corner at max-w-sm/max-w-md (~384px–448px). A "СКРОЛЛ" indicator centers at bottom. Top utilities (logo left, CTA right) pin to top corners.

Whitespace Philosophy

Whitespace is deployed cinematically, not economically. The hero breathes with 100svh minimum height and gradient masks fading imagery into the canvas at top (32px fade) and bottom (192px fade). Section vertical padding hits 80px, giving each content band room to exist as a distinct "scene." However, internal component spacing remains tight — buttons pack into 10px×20px padding, inputs into 14px vertical, icon buttons into 36px squares. The contrast between generous inter-section air and dense intra-component packing creates a "compressed cockpit" feeling inside each zone.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐ ← fixed, z-50, h-64px
│ [LOGO]              [centered nav links]           [CTA btn]    │
│                      (hidden < xl)                  lime bg     │
│                                                  10px×20px pad │
├─────────────────────────────────────────────────────────────────← border-bottom: 1px hairline
│ backdrop-blur-xl, bg-canvas/80                                │
└─────────────────────────────────────────────────────────────────┘
       ↑                                          ↑
  px-6 (mobile)                            px-6 (mobile)
  px-10 (desktop)                          gap-3 utilities

The header is fixed inset-x-0 top-0 with z-50, using a semi-transparent {colors.canvas} at 80% opacity combined with backdrop-blur-xl for a frosted-glass effect over scrolling content. Max-width is 100rem (1600px) with px-4/md:px-6 horizontal padding. Logo flush-left, navigation center (hidden below xl breakpoint), CTA button and utilities flush-right. Bottom border uses {colors.hairline}.

Hero Section

┌──────────────────────────────────────────────────────────────┐
│  [Logo area abs top-left]                    [CTA abs top-r]  │
│                                                              │
│                                                              │
│                    ╔═════════════════╗                       │
│                    ║   AM.SALES      ║  ← 224px, centered   │
│                    ║  (chromatic     ║    display-xl        │
│                    ║   aberration)   ║    white text        │
│                    ╚═════════════════╝                       │
│                         ↳ wave SVG underlay                 │
│                                                              │
│  ┌──────────────────────────┐                                │
│  │ ● ЗОЛОТОЙ ПАРТНЁР...     │  ← abs bottom-left            │
│  │   Интеллектуальные...    │    max-w-sm/md               │
│  │   А ещё веб-студия...    │    badge + body text         │
│  └──────────────────────────┘                                │
│                                                              │
│                    [ ↓ СКРОЛЛ ]     ← abs bottom-center      │
│                                      hidden < md             │
│                                                              │
│  [☐ Calc FAB]  ← fixed z-61 bottom-right                     │
│  [🤖 Chat FAB] ← fixed z-60 bottom-right, below calc          │
└──────────────────────────────────────────────────────────────┘
  ↑ bg-gradient-to-t from-canvas (bottom mask, h-192)
  ↑ bg-gradient-to-b from-canvas/60 (top mask, h-128)
  ↑ scanlines overlay z-14, opacity-3%
  ↑ server-rack imagery (absolute inset-0, object-cover)

The hero is a full-viewport-height (min-h-[100svh]) section with overflow-hidden, relative positioning, and {colors.canvas} background. Layer stack bottom-to-top: (1) server-rack photograph/video (absolute inset-0), (2) scanline texture overlay at 3% opacity, (3) top gradient mask (canvas at 60% → transparent, 128px tall), (4) bottom gradient mask (transparent → canvas, 192px tall), (5) content layer (z-20). The headline is absolutely positioned and centered. The text block pins bottom-left with responsive width constraint. Scroll indicator centers at bottom, hidden on mobile.

Section Band (Studio/Features)

┌──────────────────────────────────────────────────────────────┐
│  border-y hairline, bg-canvas, py-20/28 (80/112px vert)     │
│                                                              │
│  ○ glow-lime blob (abs, -top-24, left-1/4, 520×900, faded)  │
│  ░░░ bg-grid pattern overlay (opacity 10%)                   │
│  STUDIO (abs top-right, 17vw, font-extrabold, watermarked)   │
│                                                              │
│  ┌────────────────────────────────────────────┐              │
│  │ relative, mx-auto, max-w-7xl, px-5         │              │
│  │                                            │              │
│  │  [content area — grid of features/cards]   │              │
│  │                                            │              │
│  └────────────────────────────────────────────┘              │
│                                                              │
└──────────────────────────────────────────────────────────────┘

This section introduces decorative depth elements: a large radial lime glow blob (partially transparent, positioned off-center), a dot-grid pattern overlay at 10% opacity, and a massive watermarked "STUDIO" wordmark in {typography.title-md} at 17vw (responsive viewport size) positioned absolutely top-right with reduced opacity. The content area centers at max-w-7xl (1280px). Vertical padding is py-20 (80px) on mobile, py-28 (112px) on desktop. Top and bottom borders use {colors.hairline}.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat baseline | No shadow, {colors.canvas} background | Page body, hero band, section bands | | 1 — Hairline outline | 1px solid {colors.hairline} (#232723) | Input fields, icon buttons, nav bottom border, dividers | | 2 — Surface step-up | Background {colors.surface-elevated} (#161916) | Cards, panels, raised containers | | 3 — Soft drop (neutral) | {extensions.shadows.lg} — 0 25px 50px -12px rgba(0,0,0,0.25) | Modal-like elevation, dropdowns | | 4 — Glow (brand-tinted) | {extensions.shadows.md} — 0 0 25px 0 rgba(198,242,78,0.45) | Primary button hover, FAB glow, featured element emphasis | | 5 — Focus ring | {extensions.shadows.focus-ring} — 0 0 0 2px rgb(198,242,78) | Keyboard focus indication on interactive elements |

The elevation philosophy is layered-color-first, shadow-second, glow-for-brand. Most depth comes from stepping through the surface palette: {colors.canvas} → {colors.surface-elevated} → {colors.surface-strong}. Shadows appear sparingly — the neutral {extensions.shadows.lg} drop shadow exists for modals/dropdowns (observed once in the extracted data). The truly distinctive elevation move is the brand-colored glow: primary-action elements and FABs emit a soft lime box-shadow that reads as "this thing is electrified/active." Focus states abandon the traditional blue/orange ring entirely in favor of a 2px solid lime outline — {extensions.shadows.focus-ring} — keeping every interaction signal within the brand's color vocabulary.

Decorative Depth

Beyond functional elevation, AmSales employs atmospheric decorative depth: the hero's server-rack imagery provides photographic depth, overlaid with scanline textures (3% opacity), dual gradient masks (top and bottom) that fade the image into the solid canvas, and the chromatic aberration text effect on the headline which simulates optical/lens depth. The Studio section adds a large radial lime glow blob (positioned off-center, partially clipped) and a dot-grid pattern at 10% opacity behind content. These are not functional elevation signals but atmospheric treatments that give the dark canvas dimensionality without introducing traditional light-source shadows.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.none} | 0px | Default for buttons, inputs, nav, cards — the dominant shape | | {rounded.xs} | 2px | {component.button-primary} variant (one observed instance with rounded-[2px]) | | {rounded.sm} | 4px | Card top-corners only (4px 4px 0px 0px), subtle squaring | | {rounded.DEFAULT} | 0px | System default — maps to none | | {rounded.md} | 8px | Available but not prominently used in screenshot | | {rounded.lg} | 12px | Available in scale | | {rounded.xl} | 16px | Available in scale | | {rounded.pill} / {rounded.full} | 9999px | {component.fab-primary}, {component.fab-secondary}, back-to-top button — circles |

Photography Geometry

Hero imagery (server racks with RGB lighting) is full-bleed, filling absolute inset-0 with object-cover behavior — no aspect-ratio constraint, no border-radius, no framing. It exists as an atmospheric backdrop, not a contained image element. Gradient masks at top and bottom feather it into the solid canvas. No avatar or thumbnail imagery was observed in the screenshot beyond the chat FAB's circular avatar crop (which uses {rounded.full} / circle clip).

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. Filled with {colors.primary} (electric lime) background, text in {colors.muted-strong} (near-black #232723) at {typography.button} (14px/600 weight). Rounded to {rounded.xs} (2px) in one variant, {rounded.none} (0px) in another — implementation should default to {rounded.xs} per the more specific "Обсудить проект" variant. Padding is {spacing.xl} {spacing.xl} (20px horizontal) × {spacing.md} (10px vertical) for compact, or {spacing.xxl} {spacing.xl} (20px × 24px) for larger instances. Border is 1px solid {colors.hairline}. On hover, transitions to {component.button-primary-hover} with {colors.primary-bright} background. Observed as "Оставить заявку" (header) and "Обсудить проект" (body CTA).

{component.button-primary-hover} — Active/hover state of the primary button. Background shifts to {colors.primary-bright} (#d4ff56), maintaining all other properties. Transition uses the system color-transition curve (color 0.15s cubic-bezier(0.4, 0, 0.2, 1) etc.).

{component.button-secondary} — Ghost/outline-style CTA. Transparent background, text in {colors.primary} (lime), {typography.button} sizing, {rounded.none}. Padding {spacing.xxl} {spacing.xxl} (24px × 12px vertical). Features a hover:bg-transparent hover:text-{colors.primary} interaction that inverts toward {component.button-secondary-hover}. The "Обсудить проект" button has a variant that transitions to transparent background with lime text on hover, suggesting this component can operate in both filled and outlined modes depending on context. Border 1px solid {colors.hairline} present.

{component.button-secondary-hover} — Hover state for ghost buttons. Background stays transparent, text shifts to {colors.primary-hover} (slightly darkened lime #b8e642) or potentially {colors.primary-bright} depending on directional intent. Implementation should test contrast carefully.

{component.button-icon} — Square icon-only button (36px × 36px). Transparent background, {colors.muted} (#5d635d) text/icon color, 1px solid {colors.hairline} border, {rounded.none}. Used for utility actions (menu toggle, close, navigation controls). On hover, transitions toward {component.button-icon-hover} with text color becoming {colors.primary} (lime) and border potentially shifting to {colors.border-strong}. Contains an inline SVG icon at 16px.

{component.button-icon-hover} — Hover state for icon buttons. Color shifts to {colors.primary} lime, creating a "lit up" effect against the dark canvas. Border may intensify.

Cards & Containers

{component.card} — General-purpose content card. Background {colors.surface-elevated} (#161916), text {colors.ink}, padding {spacing.xxl} (24px). Rounded {rounded.sm} (4px) on top corners only (4px 4px 0px 0px per extracted data), creating a "cut-corner card" silhouette. No explicit shadow in the flat portions of the design; elevation comes from the background color step-up from canvas. Likely used for feature showcases, pricing tiers, or testimonial blocks in sections below the fold.

{component.hero-band} — Full-viewport hero container. Background {colors.canvas}, contains the layered imagery system (photo + scanlines + gradients + centered headline + bottom-left text block). Typography for the headline is {typography.display-xl}. Padding is effectively governed by the min-height constraint and internal absolute positioning rather than conventional padding. Has overflow-hidden to contain the decorative layers.

{component.section-band} — Repeating content section container. Background {colors.canvas}, vertical padding {spacing.section} to {spacing.section-lg} (80px), top and bottom border {colors.hairline}. Contains the centered max-w-7xl content grid. May host decorative overlays (glow blobs, grid patterns, watermarked type) as children with absolute positioning.

{component.top-nav} — Fixed header bar. Semi-transparent background using {colors.canvas} at 80% opacity with backdrop-blur-xl. Height 64px (h-16). Bottom border 1px solid {colors.hairline}. Z-index 50. Contains logo (left), centered navigation links (hidden below xl breakpoint), and CTA/utility group (right). Full-width with max-w-[100rem] inner constraint and px-4/md:px-6 horizontal padding.

Inputs & Forms

{component.text-input} — Single-line text input. Background {colors.canvas} (#0f1110), text {colors.ink}, border 1px solid {colors.hairline} (#232723), {rounded.none}. Padding varies: one variant uses 0px 16px 0px 48px (suggesting a leading icon/search icon inside), another uses 14px 16px (standard). Font size 16px to prevent mobile zoom. Height implicit from padding. On focus, transitions to {component.text-input-focus} state.

{component.text-input-focus} — Focused input state. Background remains {colors.canvas}, border may shift to {colors.border-strong} or receive the {extensions.shadows.focus-ring} (2px lime outline) glow. The extracted data shows focus handling via the transition system but doesn't specify exact focus-border change — implementers should apply the lime focus ring per the shadow token.

{component.textarea} — Multi-line text input. Background {colors.surface-soft} (#0a0b0a) — notably darker than single-line inputs, suggesting inset/deeper nesting. Text {colors.ink}, border 1px solid {colors.hairline}, {rounded.none}, padding 14px 16px. Used for message bodies or longer-form fields.

Navigation

{component.nav-link} — Header navigation anchor. Transparent background, text color {colors.body} (muted sage) at {typography.body-sm} (14px/400). No border, no radius. On hover, likely shifts toward {colors.ink} or {colors.primary}. Hidden entirely below xl breakpoint (replaced by hamburger menu).

Floating Action Buttons

{component.fab-primary} — Cost-calculator FAB. Fixed position, z-60 (below back-to-top at z-61), 48px × 48px circle ({rounded.pill}). Background {colors.primary} (lime), contains a calculator/grid SVG icon in {colors.canvas}-colored stroke. Emits {extensions.shadows.md} glow (lime-tinted box-shadow). Positioned bottom-right of viewport. Includes a tooltip/label bubble ("Рассчитать стоимость") appearing on hover to the left of the button — this tooltip has {colors.canvas} background, {typography.caption} text, {rounded.lg} (12px) radius, and px-3 py-1.5 padding.

{component.fab-secondary} — Chat/avatar FAB. Fixed position, z-60, 48px × 48px circle ({rounded.pill}). Background {colors.canvas} (dark), contains a circular avatar image (object-cover, full bleed). Border 2px solid {colors.primary} (thick lime ring). Positioned below {component.fab-primary} on the vertical axis. On desktop (md:), shows an additional ring-2 ring-lime concentric ring effect. Triggers chat interface.

{component.scroll-indicator} — "СКРОЛЛ" scroll-down hint. Absolutely positioned at bottom-center of hero, hidden on mobile (hidden md:block). Transparent background, {colors.muted} text color, {typography.caption} sizing. Includes a downward-pointing indicator (chevron or dot). Z-index 30, above content layer but below FABs.

Signature Components

{component.badge-label} — Technical/partner badge (e.g., "ЗОЛОТОЙ ПАРТНЁР БИТРИКС24"). Transparent background, {colors.body} text, {typography.label-md} / {typography.mono} (JetBrains Mono 13px). Preceded by a small lime-dot bullet ({colors.primary} colored circle, likely 6-8px). No border, no radius, no padding beyond inline flow. Renders in uppercase or small-caps conventionally.

{component.glow-accent} — Decorative radial glow element. Used in the Studio section as a large off-center blurred circle emitting {colors.primary} color at reduced opacity. Background transparent with radial-gradient or box-shadow blur. {rounded.full} for perfect circle. Position absolute, pointer-events-none. Creates ambient brand-color atmosphere without being interactive.

Do's and Don'ts

Do

• Do use {colors.primary} exclusively for brand-voltage moments — CTAs, glows, hover states, focus rings, and links. Never introduce a second accent color.
• Do maintain the dark canvas foundation — every section background must be {colors.canvas}, {colors.surface-soft}, or {colors.surface-elevated}. Never use white or light gray surfaces.
• Do apply backdrop-blur-xl to the {component.top-nav} header for its frosted-glass effect; the 80% opacity {colors.canvas} overlay is non-negotiable for the layered-hero aesthetic.
• Do reserve {typography.display-xl} (224px) for the single hero wordmark instance. This scale is not reusable elsewhere — it's a signature moment, not a system token.
• Do use {typography.mono} (JetBrains Mono 13px) for all technical badges, metadata labels, and code-like strings. This signals "infrastructure" versus "marketing."
• Do keep button border-radius at {rounded.none} or {rounded.xs} maximum for rectangular CTAs. Only {component.fab-primary} and {component.fab-secondary} should use {rounded.pill}.
• Do apply the lime glow shadow ({extensions.shadows.md}) to {component.fab-primary} and hovered primary buttons. This is the brand's elevation signature — avoid neutral shadows on branded elements.
• Do use {colors.body} (#9aa39a) for paragraph text. The intentionally muted contrast against {colors.canvas} is a deliberate readability/hierarchy choice, not an accessibility oversight (headlines provide the high-contrast entry point).
• Do include gradient masks at the top and bottom of the hero section to feather imagery into the solid canvas. The top mask is shorter (32px, 60% opacity) than the bottom mask (192px, 100% opacity).
• Do maintain the 100svh minimum height on the {component.hero-band}. The immersive full-viewport hero is central to the cinematic experience.

Don't

• Don't use {colors.primary} as a background for large areas — it's an accent, not a surface. Reserve lime fills for buttons, FABs, and thin decorative elements only.
• Don't round card corners beyond {rounded.sm} (4px), and only on the top edge (4px 4px 0px 0px). The cut-corner card shape is intentional; full-round cards fight the brutalist geometry.
• Don't substitute {colors.link} with a conventional blue. Links in this system are {colors.primary} (lime) or invisible until interacted with.
• Don't apply chromatic aberration/RGB-split effects to any text other than the {typography.display-xl} hero headline. This is a one-time signature moment.
• Don't introduce drop shadows on the {component.top-nav} header — its depth comes from the backdrop-blur and semi-transparent background, not shadow casting.
• Don't use font weights above 600 for body/UI text. The 700-800 weight range belongs exclusively to Space Grotesk display and heading roles. Inter body text stays at 400, buttons at 600.
• Don't let the {component.fab-primary} and {component.fab-secondary} overlap in their stacked position — the calculator sits above (higher z-index or DOM order) the chat FAB with approximately 12-16px vertical gap.
• Don't remove the scanline texture overlay from the hero. Even at 3% opacity (opacity-[0.03]), it contributes essential atmospheric texture to the dark canvas.
• Don't use {colors.ink} (#f4f5f0) for body paragraph text. That brightness level is reserved for headlines and display type; body copy must use {colors.body} or risk flattening the hierarchy.
• Don't expand the spacing scale beyond the defined tokens. If you need a value between {spacing.xl} (20px) and {spacing.xxl} (24px), choose one — the 4px base-unit system doesn't support intermediate values.

Motion & Animation

Transition Tokens

--transition-color: 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);
--transition-transform-fast: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                              translate 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                              scale 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                              rotate 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-transform-base: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                              translate 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                              scale 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                              rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-transform-slow: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                              translate 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                              scale 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                              rotate 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--transition-all-short: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-color-slow: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                         background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                         border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

All transitions use the standard Tailwind/ease cubic-bezier(0.4, 0, 0.2, 1) curve (ease-in-out). Color transitions run at 150ms (fast) or 300ms (slow). Transform transitions have three tiers: 150ms for micro-interactions (button presses, icon hovers), 300ms for moderate motion (panel reveals, card transforms), and 500ms for deliberate scene transitions (hero parallax, section entrances).

Keyframe Animations

• marquee — Continuous horizontal scrolling ticker for partner logos, testimonials, or feature lists. Moves content in one direction at constant velocity, likely with duplicate children for seamless looping.
• marquee-reverse — Same as marquee but moving in the opposite direction. Used for counter-scrolling adjacent tracks creating visual complexity.
• loto-progress — Progress-bar fill animation, possibly for a loading/step indicator. Linear or ease-out timing.
• loto-pop — Scale-based pop/spring entrance for notifications or badge appearances. Quick overshoot then settle.
• loto-beat — Pulsing scale animation (heartbeat rhythm) for attention-drawing elements like the chat FAB or notification dots.
• wb-pulse — Opacity or subtle scale pulse, likely for the "workbench" or status-indicator elements.
• wb-spark — Brief flash/sparkle effect — could be a shimmer sweep or particle burst on interaction.
• wb-ring — Expanding ring/outward ripple, possibly for click feedback or the chat FAB's ring animation.
• wb-aura — Ambient glow pulsing — the lime FAB glow probably uses this to breathe.
• eq-pulse — Audio-equalizer-style bar animation. Given the server/rack imagery, this likely animates the RGB light bars in the hero photo or decorative EQ elements.
• ping — Classic radar-ping ripple (expanding circle + fade), commonly used for notification dots or live-status indicators.

Interaction Patterns

• Hover color-shift on buttons: Both {component.button-primary} and {component.button-icon} transition their background/text color on hover using --transition-color. Primary buttons brighten to {colors.primary-bright}; icon buttons shift from {colors.muted} to {colors.primary}.
• Ghost button inversion: {component.button-secondary} (outlined style) can invert to transparent background with lime text on hover — the "Обсудить проект" variant demonstrates this with hover:bg-transparent hover:text-lime.
• FAB glow intensification: {component.fab-primary}'s lime box-shadow glow likely pulses or intensifies on hover using the wb-aura or wb-ring keyframe, combined with a scale micro-transform.
• Chat FAB ring animation: The {component.fab-secondary} avatar button shows a ring-2 ring-lime effect on desktop that likely animates (expand/contract or pulse) to draw attention — candidate for wb-ring or ping.
• Scroll-triggered entrances: Sections below the hero likely use intersection-observer-triggered fade-up or slide-in animations (transform Y + opacity) timed at --transition-transform-base (300ms) or --transition-transform-slow (500ms).
• Header background transition: The {component.top-nav} may increase its opacity from 80% toward 95-100% on scroll, or gain a stronger backdrop-blur, creating a "solidifies on scroll" effect.
• Focus rings: All interactive inputs and buttons should show the {extensions.shadows.focus-ring} (2px solid lime outline) on keyboard focus, animated via --transition-color.
• Tooltip reveal: The {component.fab-primary}'s "Рассчитать стоимость" tooltip likely fades in and translates slightly on hover with --transition-transform-fast timing.

Imagery Style

• Photographic hero: Full-bleed server-rack photography shot from a low angle looking upward through rows of equipment, with vibrant RGB light strips (red, green, blue) creating leading lines toward a vanishing point. Cinematic, moody, technology-inflected. Color grading pushes blacks deep and lets the colored lights pop.
• Chromatic aberration treatment: Either applied in-post to the photograph or overlaid via CSS/SVG filter — the RGB channels separate slightly (red offset left, cyan/right) creating a digital-glitch aesthetic that aligns with the "sales automation" / "AI integration" brand narrative.
• No illustration: The visual language is photographic and typographic, not illustrated. No flat illustrations, isometric diagrams, or character art observed.
• Gradient masks: Hero image feathers into solid {colors.canvas} via CSS bg-gradient-to-t (bottom) and bg-gradient-to-b (top) masks. This is a compositional technique, not a stylistic overlay.
• Texture overlays: Scanline pattern (horizontal lines at 1-2px interval, 3% opacity) overlaid on the hero, evoking CRT monitors or security-camera feeds. Dot-grid pattern at 10% opacity in the Studio section, suggesting graph paper or technical drafting.
• Atmospheric glow: Large radial gradients in {colors.primary} (lime) at low opacity, positioned off-center, create ambient "light source" suggestions without literal lighting.
• Watermark typography: Massive section words ("STUDIO" at 17vw) rendered in {typography.title-md} weight 800, positioned absolutely behind content at reduced opacity, acting as graphic texture rather than readable text.
• Avatar imagery: Chat FAB contains a circular-cropped photograph (appears to be a person/character), treated as a functional UI element rather than editorial imagery.
• Brand darkness: All imagery is consumed by the dark canvas. Photos don't "pop" with brightness; they're integrated into the near-black environment with only colored light sources providing chromatic relief.

Icon System

• Library: Custom SVG (no detected icon library dependency — iconLibs array empty in framework detection).
• Specific icons observed:
  • Calculator/grid icon — 2×2 grid squares inside {component.fab-primary}
  • Hamburger/menu icon — implied by the xl:hidden responsive nav toggle button
  • Close/X icon — likely present in mobile menu state
  • Down-chevron/arrow — scroll indicator in {component.scroll-indicator}
  • External-link or arrow-right — possibly on {component.button-secondary} (the "gap-2" class suggests icon + text pairing)
  • Logo mark — geometric triangular/peak shape in the top-left branding area (yellow/lime colored)
• Treatment: Stroke-based vector icons (not filled), sized at 16px for inline usage (inside {component.button-icon} at 36px container) and approximately 20-24px for FAB interiors (inside 48px circles). Color set to currentColor inheriting from parent text color. Stroke width appears consistent at 1.5px–2px. Alignment is center via place-items-center or flex centering.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (static-first)
                  Evidence: Tailwind config, self-hosted fonts, SSR-friendly structure,
                  fixed/header architecture common in React SPAs
- Styling:        Tailwind CSS v3.4+ (utility-first, all classes map to tailwind conventions)
                  Evidence: Every extracted class follows tailwind naming (h-16, px-4, 
                  max-w-7xl, backdrop-blur-xl, etc.)
- Fonts:          Self-hosted woff2 files (Space Grotesk, JetBrains Mono) + 
                  system font stack for Inter (or google fonts CDN for Inter)
                  CSS variables: --font-display, --font-body, --font-mono
- Animation:      Tailwind-built transitions + CSS @keyframes (marquee, eq-pulse, etc.)
                  Consider Framer Motion for scroll-triggered enters if adding JS animation
- Icons:          Custom SVG inline components (no library)
                  Or Lucide React for any additional icons needed (matches stroke style)
- Component lib:  Custom (no shadcn/radix detected) — hand-rolled components
                  Could adopt Radix UI primitives for accessible dropdowns/dialogs

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px (default) | Single-column layout, FABs visible, scroll indicator hidden, nav collapses to hamburger, hero text block max-w-sm (~384px), CTA button hidden (hidden) replaced by mobile alternatives | | Tablet/Mid | 640px – 1023px (sm: / md:) | Nav still collapsed, hero text expands to max-w-md (~448px), padding increases to md:px-10, some grid columns may appear | | Desktop | 1024px – 1279px (lg: / xl: threshold) | Navigation links appear (xl:flex), full header CTA visible (md:inline-flex), FAB ring effects activate (md:block), scroll indicator appears (md:block) | | Wide | ≥ 1280px (xl: +) | Centered nav links fully visible, max-w-7xl content constraint active (1280px), full desktop spacing (py-28 = 112px vertical section padding) |

Touch Targets

• {component.button-primary}: Padding 10px × 20px yields approximate touch target of ~44px height × 60-80px width (depends on text length). Meets WCAG AAA 44×44 minimum.
• {component.button-icon}: 36px × 36px square — below WCAG AAA 44×44 recommendation. Should be enlarged to 44px minimum for touch, or wrapped in an invisible expanded tap area.
• {component.text-input}: With 14px vertical padding + 16px font-size + border, total height ~48-52px. Exceeds 44px minimum comfortably.
• {component.fab-primary}: 48px × 48px circle. Meets WCAG AAA. Generous touch target.
• {component.fab-secondary}: 48px × 48px circle. Meets WCAG AAA.
• Nav links: Implicit height from h-16 (64px) header container. Touch-friendly.

Collapsing Strategy

• Navigation: Center-aligned links (justify-center) are completely hidden below xl breakpoint (hidden xl:flex). A hamburger menu button (xl:hidden) appears in the right utility group, toggling a mobile drawer/off-canvas menu.
• Header CTA ("Оставить заявку"): Uses hidden md:inline-flex — invisible on mobile/tablet, appears as filled lime button from md: (768px) upward. Mobile users likely access CTA via the {component.fab-primary} (calculator) or a mobile-menu alternate.
• Hero text block: Width-constrained responsively: max-w-sm (384px) at small sizes, sm:max-w-md (448px) at sm: (640px+), md:left-10 repositions from left-6 at desktop. Maintains bottom-left anchoring throughout.
• Hero headline: The 224px {typography.display-xl} "AM.SALES" will overflow horizontally on mobile viewports (< 224px + padding). Likely handled via overflow-hidden on the section + horizontal centering, allowing the text to extend beyond edges (intentional "bleed" effect). May scale down via clamp() or media query on very small screens (not observed in extracted data).
• FAB stack: Both {component.fab-primary} and {component.fab-secondary} remain fixed and visible at all breakpoints. Their tooltips/labels adjust visibility accordingly.
• Section padding: Vertical section padding steps from py-20 (80px) to py-28 (112px) at md: breakpoint. Horizontal padding is uniform px-5 (20px) within the max-w-7xl container.

Image Behavior

• Hero server-rack image: absolute inset-0 with object-cover ensures it always fills the hero container regardless of aspect ratio. On ultra-wide viewports, the image crops vertically (center-focused). On portrait/mobile viewports, it crops horizontally. The subject matter (symmetrical vanishing-point perspective) tolerates center-crop well.
• Chat FAB avatar: h-full w-full object-cover inside the 48px circle clips to a perfect circle via {rounded.pill} / overflow-hidden. Avatar image should be square-source (1:1) to avoid distortion.
• No responsive image sources detected: The site appears to use a single image asset for the hero (no srcset/picture element observed). Production implementations should add responsive image variants (WebP/AVIF) and srcsets for performance.

Iteration Guide

1. Initialize with Next.js + Tailwind CSS. Install @tailwindcss/forms if building forms. Configure tailwind.config.js with the color, spacing, borderRadius, fontFamily, fontSize, fontWeight, letterSpacing, lineHeight, boxShadow, and transition tokens from this DESIGN.md's frontmatter. Extend the theme — do not override.

2. Map every YAML token to a CSS variable or Tailwind theme extension. Colors become colors.{token}, typography becomes fontSize/fontWeight/letterSpacing/lineHeight/fontFamily.{token}, spacing becomes spacing.{token}, rounded becomes borderRadius.{token}. Reference them in JSX/HTML as bg-primary, text-ink, px-lg, rounded-pill, font-display, etc. Never hard-code a hex, px value, or font-family string that has a corresponding token.

3. Build the header first. Implement {component.top-nav} as a fixed top-0 inset-x-0 z-50 navbar with bg-canvas/80 backdrop-blur-xl border-b border-hairline h-16. Inside, flex row with logo (left), nav links (center, hidden xl:flex), and CTA + utilities (right). Test the frosted-glass effect by scrolling content beneath it.

4. Implement the hero section as a layered composition. Create {component.hero-band} with relative min-h-[100svh] overflow-hidden bg-canvas. Layer stack (bottom to top): <img> (server rack, absolute inset-0 object-cover), <div> (scanlines, absolute inset-0 opacity-[0.03]), <div> (top gradient mask), <div> (bottom gradient mask), content div (relative z-20). Place the {typography.display-xl} headline centered, the text block absolutely positioned bottom-10 left-6/md:left-10, and scroll indicator centered at bottom.

5. Add the floating action buttons. Implement {component.fab-primary} and {component.fab-secondary} as fixed positioned elements with z-60/z-61, bottom-right anchoring, 48×48px, {rounded.pill}. Apply {extensions.shadows.md} glow to the primary FAB. Add the tooltip for the calculator button with group-hover visibility.

6. Implement the Studio/content section. Build {component.section-band} with border-y border-hairline bg-canvas py-20 md:py-28. Inside, add the decorative children: glow blob (absolute, radial gradient, opacity-faded), grid pattern (absolute, dot-grid, opacity-10%), watermark "STUDIO" (absolute, 17vw, title-md, font-extrabold, opacity-reduced). Then the content container relative max-w-7xl mx-auto px-5 with actual section content.

7. Wire up state variants per your stack's conventions. Tailwind users: hover:bg-primary-bright hover:border-primary-bright for {component.button-primary-hover}, focus-visible:shadow-focus-ring for focus states, group-hover:text-primary for icon buttons. Ensure every component with a -hover or -focus frontmatter entry gets corresponding pseudo-class styles.

8. Integrate motion. Copy the @keyframes definitions from the extracted data (marquee, eq-pulse, wb-pulse, etc.) into your global CSS. Apply animate-marquee to any scrolling ticker bands. Add animate-eq-pulse to decorative light-bar elements. Use Intersection Observer + CSS classes (or Framer Motion's useInView) for scroll-triggered fade-slide-up entrances on section content.

9. Run the linter. Execute npx @google/design.md lint DESIGN.md after implementation. Fix broken-ref (tokens referenced in body but missing from frontmatter), contrast-ratio (color pairs failing WCAG thresholds), and orphaned-tokens (tokens defined but never referenced) warnings. This spec is known to pass cleanly when implemented faithfully.

10. Font setup for development. Space Grotesk and JetBrains Mono require self-hosted woff2 files (use Google Fonts CDN or download from the font's GitHub releases). Inter can come from Google Fonts (<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">). Define in tailwind.config.js:

    fontFamily: {
      display: ['"Space Grotesk"', '"Space Grotesk Fallback"', 'Manrope', 'system-ui', 'sans-serif'],
      body: ['Inter', '"Inter Fallback"', 'system-ui', 'sans-serif'],
      mono: ['"JetBrains Mono"', '"JetBrains Mono Fallback"'],
    }
    

Known Gaps

• Hover state exact values: Per the no-hover policy, hover background color changes for {component.button-primary} (does it use {colors.primary-bright} or lighten via opacity?), border color shifts on {component.button-icon} (to {colors.border-strong} or {colors.primary}?), and FAB glow intensification levels are inferred from class names but not visually verified.
• Mobile hero headline behavior: The 224px {typography.display-xl} "AM.SALES" text will exceed mobile viewport widths. Whether it scales down via clamp(), uses a media-query override, or intentionally bleeds off-screen (with overflow-hidden clipping) is not extractable from the single desktop screenshot.
• Mobile navigation drawer structure: The hamburger menu (xl:hidden button) implies a slide-out drawer or fullscreen overlay, but its contents, animation, and close mechanics are not visible in the provided screenshot.
• Form validation states: Beyond {component.text-input-focus}, there are no extracted styles for error states (red border? error icon? helper text in {colors.error}?), disabled inputs, or success confirmation states.
• Loading/skeleton states: No skeleton loaders, spinners, or placeholder patterns were detected. A production implementation would need loading states for the chat widget, form submissions, and async content sections.
• Chat widget interface: The {component.fab-secondary} triggers a chat interface, but the chat panel/window itself (its dimensions, position, internal components, message bubbles, input field) is not captured in the screenshot or extracted DOM.
• oklab() color values in source: Several extracted background colors use oklab() function notation (e.g., oklab(0.147942 -0.0022112 0.00153081 / 0.8) for the header background). These were converted to approximate sRGB hex values in this spec, but the original oklab values may produce subtly different results in color-gamut-sensitive displays.
• Grain texture implementation: The grain class on the body element applies film-grain noise, but its specific implementation (CSS background-image with SVG noise filter? Canvas-based? Fixed pseudo-element?) is not in the extracted CSS rules.
• Chromatic aberration CSS technique: The RGB-split effect on the hero "AM.SALES" headline is visually evident but the exact CSS implementation (multiple text-shadow? mix-blend-mode? SVG feColorMatrix filter?) is not present in the extracted stylesheet — it may be applied via JavaScript, inline style, or a CSS filter reference not captured.
• Footer section: No footer component, links, or structure was observed in the above-fold screenshot or extracted DOM. The site almost certainly has a footer with legal links, contact info, social icons, etc., but it lies below the visible viewport.