Mechanim Design System

Overview

Mechanim presents itself as an industrial engineering visualization studio with a distinctly modern, dark-mode-first digital presence. The design language balances technical authority with visual approachability—anchored by a near-black canvas ({colors.canvas}) that creates a cinematic backdrop for the brand's electric blue voltage ({colors.primary}). This isn't merely aesthetic darkness; it's a deliberate choice that mirrors the precision of CAD environments and the immersive quality of 3D animation workspaces.

The brand's visual personality lives in its controlled use of color. The primary blue (#205cd4) appears strategically: as the active navigation state in that signature pill-shaped {component.nav-link-active}, as the top information bar's solid field, and as the dominant color for primary headings. Everything else recedes into a sophisticated grayscale hierarchy—white body text ({colors.body}) for maximum legibility against dark surfaces, mid-tone gray ({colors.ink}) for secondary information, and deeper charcoal tones for structural backgrounds.

Typography defines the system's character through a clear division of labor. Poppins carries all headline and display work, deployed at weights that skew lighter than typical tech branding—the h1 sits at a confident but not aggressive 600 weight, while h4 drops to a refined 300. This creates a "engineered elegance" voice: precise without being cold. Inter handles the bulk reading text, bringing its exceptional screen readability to body copy, captions, and UI microcopy. The result is a type system where hierarchy comes from size and color contrast rather than weight escalation.

Shape language reinforces the brand's technical-meets-approachable positioning. The default radius ({rounded.DEFAULT}) of 10px softens every container just enough to feel modern without drifting into playfulness. The navigation active state pushes further to a full pill shape ({rounded.pill}), creating that distinctive rounded button that anchors the main menu. Popup close buttons use an even more generous 24px radius ({rounded.lg}), while cards maintain the standard 10px for consistency.

The site architecture reveals multiple sub-systems at work: the marketing landing page with its alternating band sections, a modal/popup system for detailed service explanations (engineering expertise, learning visualization, project preview, maintenance simplification, product demonstration, manufacturing process optimization, and product development support), and what appears to be an Elementor-powered WordPress foundation that enables rapid content iteration.

Key Characteristics:

• Dark-mode-first canvas ({colors.canvas} — #323437) with electric blue brand voltage ({colors.primary} — #205cd4)
• Dual-typeface system: Poppins for headlines at weights 300–600, Inter for body text
• Pill-shaped active navigation ({component.nav-link-active}) with inverted color treatment
• Generous 80px section padding ({spacing.section}) creating breathing room between content bands
• 10px default border radius ({rounded.DEFAULT}) applied consistently across cards and buttons
• High-contrast white-on-dark body text ({colors.body}) ensuring WCAG-compliant readability
• Modal overlay system ({component.popup-overlay}) with semi-transparent dark backdrop for service deep-dives
• Font Awesome icon library for consistent iconographic treatment across social links and UI elements
• Transition-rich interactions with 300ms base timing and multi-property easing

Colors

Brand & Accent

• Primary ({colors.primary} — #205cd4): The signature electric blue that powers the top info bar, active navigation states, primary headings ({component.heading-primary}), and all CTAs. It's the single source of brand color voltage in an otherwise monochromatic environment.
• Primary Hover ({colors.primary-hover} — #1a4db8): Darkened blue variant for interactive hover states on buttons and links.
• Primary Active ({colors.primary-active} — #1647a8): Further darkened for pressed/active states, providing clear tactile feedback.
• Accent ({colors.accent} — #ffffff): Pure white used as an accent color against dark surfaces—notably in the main navigation background ({component.main-nav}) and body text.

Surface

• Canvas ({colors.canvas} — #323437): The foundational near-black background that dominates the page. Used for the hero section ({component.hero-section}), content bands ({component.section-band}), and input fields.
• Surface Soft ({colors.surface-soft} — #205cd4): Blue-tinted surface used exclusively for the active navigation pill background, merging brand color with surface function.
• Surface Strong ({colors.surface-strong} — #525252): Medium-gray surface for subtle separation zones and borders.
• Surface Dark ({colors.surface-dark} — #1c1c1c): Deep charcoal for card backgrounds ({component.card}), creating slight elevation from the canvas.
• Surface Darker ({colors.surface-darker} — #121111): Near-black for footer regions ({component.footer}) and deepest structural layers.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White surface for the main navigation bar ({component.main-nav}), popup content areas ({component.popup-content}), and elevated cards ({component.card-elevated}).
• Surface Overlay ({colors.surface-overlay} — rgba(28, 28, 28, 0.8)): Semi-transparent dark overlay for modal backdrops ({component.popup-overlay}).

Text

• Ink ({colors.ink} — #b4b4b4): Mid-light gray for secondary text, captions, and de-emphasized information on light surfaces.
• Body ({colors.body} — #ffffff): Pure white for primary body text on dark surfaces, ensuring maximum contrast and readability.
• Muted ({colors.muted} — #f8f8f8): Near-white for subtle text on medium backgrounds.
• Muted Soft ({colors.muted-soft} — #f7faff): Cool-tinted off-white for specialized text applications.
• On Primary ({colors.on-primary} — #ffffff): White text specifically optimized for rendering atop the primary blue background.
• On Dark ({colors.on-dark} — #ffffff): White text for any dark background context.
• On Surface ({colors.on-surface} — #34363a): Dark gray text for body content on white/light surfaces.
• Deep Ink ({colors.deep-ink} — #0c0707): Near-black for highest-emphasis text on light backgrounds.
• Dark Ink ({colors.dark-ink} — #110d0d): Very dark gray for secondary emphasis on light surfaces.
• Near Black ({colors.near-black} — #070606): Absolute darkest text color for rare maximum-contrast needs.

Hairlines & Borders

• Hairline ({colors.hairline} — #525252): Medium-gray border color for subtle dividers and card outlines.
• Border Soft ({colors.border-soft} — rgba(2, 1, 1, 0)): Fully transparent border, used where border space is reserved but no visible line is desired.

Semantic

• Link ({colors.link} — #205cd4): Blue link color matching primary brand, used for clickable text elements.
• Link Active ({colors.link-active} — #2048ce): Slightly shifted blue for visited or active link states.
• Error ({colors.error} — #c13515): Warm red for validation errors and destructive actions.
• Success ({colors.success} — #006400): Dark green for confirmation states and positive feedback.

Typography

Font Family

The system employs a carefully paired typeface strategy. Poppins (served via Google Fonts CDN from the site's Elementor installation) serves as the primary brand face, handling all display, heading, and navigational typography. Its geometric yet humanist skeleton conveys both technical precision and approachability—ideal for an engineering visualization studio that needs to feel authoritative but not austere. Poppins appears across weights 100 (thin, for decorative elements), 300 (light, for h4 and body-large), and 600 (semibold, for h1–h3 and navigation). The font supports extensive Unicode ranges including Latin and Devanagari scripts.

Inter functions as the workhorse UI face, managing body text, captions, form labels, and any extended reading content. With 524 detected uses in the DOM (versus Poppins' 53), Inter clearly handles the bulk volume of text on the site. Its excellent screen readability at small sizes, OpenType feature set (including tabular figures and stylistic alternates), and x-height-optimized letterforms make it ideal for the technical documentation and detailed service descriptions that populate Mechanim's content.

Montserrat appears in limited contexts (10 detected uses), likely for specific callout components or alternative heading treatments not visible in the above-fold screenshot. It provides a slightly wider, more geometric counterpoint to Poppins when needed.

Font Awesome 5 (both Brands and Free variants) supplies all iconographic elements—from social media icons in the top bar to any UI icons throughout the interface. The font is loaded via Elementor's asset pipeline alongside the primary typefaces.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 600 | 1.2 | -0.02em | Hero-level display headlines (inferred max size) | | {typography.display-lg} | 39px | 600 | 1.2 | -1px | H1 primary page titles | | {typography.title-md} | 31.25px | 600 | 1.2 | -1px | H2 section headings | | {typography.title-sm} | 25px | 600 | 1.3 | 0 | H3 sub-section headings | | {typography.body-lg} | 20px | 300 | 1.3 | 0 | H4 minor headings, lead paragraphs | | {typography.body-md} | 20px | 300 | 1.3 | 0 | Primary body text | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Secondary body text, card content | | {typography.caption} | 14px | 400 | 1.4 | 0 | Captions, metadata, legal text | | {typography.button} | 14px | 500 | 1.25 | 0 | Button labels, CTAs | | {typography.nav-link} | 13px | 600 | 1.4 | 0.05em | Navigation menu items (uppercase implied) | | {typography.overline} | 12px | 600 | 1.3 | 0.08em | Labels, category tags, timestamps |

Principles

The typography system trusts size and color to carry hierarchy far more than weight. Notice how {typography.display-lg} (39px, weight 600) and {typography.body-lg} (20px, weight 300) differ by nearly 2x in size but the heavier weight stays anchored at the top of the hierarchy. This prevents the visual noise that comes from bolding everything. The light weight (300) on body text gives extended reading passages an airy, uncluttered feel—even at the relatively large 20px size, Poppins Light remains elegant rather than sparse.

Letter-spacing manipulation provides another hierarchical lever. The display sizes ({typography.display-lg}, {typography.title-md}) use -1px tracking to tighten the letterforms for a more compact, headline-worthy appearance. Meanwhile, navigation links ({typography.nav-link}) and overline labels ({typography.overline}) employ positive letter-spacing (0.05em and 0.08em respectively) to create that spacious, uppercase label aesthetic common in technical branding.

Color-as-hierarchy is perhaps the most striking principle here. The h1 element renders in {colors.primary} (electric blue) while h2 through h4 render in {colors.body} (white). This means the primary heading gets dual emphasis—size and color—while secondary headings rely on size alone. Body text on dark surfaces flips to {colors.on-surface} (dark gray) when appearing on white cards, maintaining consistent contrast ratios regardless of surface polarity.

The system shows restraint with text transformation: navigation items appear to use uppercase (suggested by the tight letter-spacing and 600 weight), but body text remains sentence case. No italic variants are prominently featured in the extracted data, suggesting italics are reserved for inline emphasis within content rather than structural roles.

Note on Font Substitutions

Both Poppins and Inter are available via Google Fonts, requiring no proprietary substitution. For implementations that cannot load Google Fonts:

• Poppins → Substitute with Montserrat (similar geometric skeleton, widely available) or Nunito (more humanist but similarly round). Define CSS variable --font-headings: 'Montserrat', sans-serif.
• Inter → Substitute with Source Sans Pro (similar x-height and readability) or IBM Plex Sans (technical character matching the brand voice). Define CSS variable --font-body: 'Source Sans Pro', sans-serif.

If using a self-hosted strategy, ensure Poppins includes weights 300, 600 and Inter includes 400 at minimum. The site's current CDN endpoints serve WOFF2 format with appropriate Unicode range splitting for performance.

Layout

Spacing System

• Base unit: 4px (inferred from the xxs value), with most tokens being multiples or derived increments.
• Tokens: {spacing.xxs} (4px — icon internal padding, micro-gaps), {spacing.xs} (10px — button padding vertical, compact gaps), {spacing.sm} (12px — form label gaps), {spacing.md} (16px — standard internal padding), {spacing.lg} (20px — card padding, component margins), {spacing.xl} (24px — section-internal spacing), {spacing.xxl} (28px — popup content padding, generous gaps), {spacing.section} (80px — vertical rhythm between major sections), {spacing.wide} (21px — asymmetric layout gap), {spacing.component-gap} (17px — inter-component spacing).
• Section padding (vertical): {spacing.section} (80px) — used between each major content band (hero, features, services, CTA, footer).
• Card internal padding: {spacing.lg} (20px) for standard cards ({component.card}), {spacing.xl} (24px) for elevated cards ({component.card-elevated}).
• Gutters: Container-level gutters appear to use {spacing.xl} (24px) based on nav bar padding patterns; grid gaps likely use {spacing.component-gap} (17px) or {spacing.wide} (21px).

Grid & Container

• Max content width: 1440px (detected from section and header container widths). This is a wide-format layout optimized for desktop-first viewing, appropriate for showcasing engineering visualizations that benefit from horizontal real estate.
• Density choice: Editorial-to-marketplace hybrid. The dark canvas with generous 80px section breaks creates editorial breathing room, while the multi-column service grid (implied by the seven distinct popup content areas) suggests marketplace-like density for scannable offerings.
• Desktop grid behavior: The nav container constrains to 988px width within the 1440px section wrapper, suggesting a nested grid system where navigation has its own readable line-length constraint while hero/content sections utilize the full width. The seven service categories (Engineering Expertise, Learning Visualization, Project Preview, Maintenance Simplification, Product Demonstration, Manufacturing Process, Product Development) would likely render in a 3–4 column grid on desktop.
• Hero column split: Based on the screenshot showing logo-left/nav-right architecture, the hero likely uses an asymmetric split (roughly 45%/55% or 40%/60%) with text on the left and visual/animation preview on the right—a pattern common in industrial B2B sites where the "show" matters as much as the "tell."

Whitespace Philosophy

The system embraces generous vertical whitespace as a luxury signal. The 80px section padding ({spacing.section}) is substantially larger than typical SaaS defaults (usually 60–64px), creating a cinematic, gallery-like pace that lets the dark canvas breathe. Horizontally, the 1440px max-width with 24px side gutters keeps content edges away from viewport extremes without wasting space. Within cards, the 20–24px padding maintains readability density while preventing cramped feeling. This is not minimalist whitespace (which would imply absence); it's curated whitespace that frames content like a museum display.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [✉ email]          [☎ phone]                    [in] [▶] [📷]  │  ← top-info-bar (primary bg, 40px height)
├─────────────────────────────────────────────────────────────────┤
│ [🐙 Mechanim]   [HOME] WHAT WE OFFER INDUSTRIES ...  CONTACT US │  ← main-nav (white bg, 80px height)
│                 ↑                                              │
│            (pill-shaped, active)                               │
└─────────────────────────────────────────────────────────────────┘
                                ↓
                  Max-width: 1440px (section)
                  Nav inner: 988px (constrained)

Hero Section

┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   ENGINEERING ANIMATION CAN HELP IN                            │  ← display-lg, primary color
│                                                                 │
│   [Subheadline / description text area]                        │  ← body-md, on-surface or body
│                                                                 │
│   [CTA Button Primary]  [CTA Button Secondary]                 │  ← button pair
│                                                                 │
│                          ┌──────────────┐                       │
│                          │              │                       │
│                          │  3D Visual /  │                       │  ← Hero illustration/column
│                          │  Animation    │                       │
│                          │  Preview      │                       │
│                          │              │                       │
│                          └──────────────┘                       │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
   canvas bg (#323437)        80px vertical padding

Modal/Popup System

The site implements an extensive popup architecture (seven distinct popup instances detected) for service deep-dives. Each follows this pattern:

┌─────────────────────────────────────────────────────────────────┐
│  [×]                            ← popup-close-button (white circle, 24px radius) │
│                                                                 │
│  [H3 Heading]                   ← title-sm, white               │
│                                                                 │
│  [Description paragraph]        ← body-sm, ink/on-surface       │
│                                                                 │
│  [Secondary detail]             ← caption, muted                │
│                                                                 │
│  [How It Helps / CTA area]                                      │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
   popup-content (white bg)       28px internal padding
   popup-overlay (dark transparent backdrop)

Popups slide in from right (direction-right class detected on most instances, one from left), suggesting a drawer-style reveal animation.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} or {colors.surface-elevated} background | Base surfaces: hero, sections, nav bar | | 1 (Hairline) | 1px {colors.hairline} border or subtle background shift | Card edges, input fields, dividers | | 2 (Soft drop) | {extensions.shadows.sm} — 0 1px 3px rgba(0,0,0,0.2) | Floating elements, dropdowns | | 3 (Modal) | {extensions.shadows.md} + {colors.surface-overlay} backdrop | Popup/modal containers | | 4 (Button float) | {extensions.shadows.button-float} — 0 3px 20px -8px rgba(0,0,0,0.4) | Popup close buttons, elevated CTAs |

The depth philosophy here is layered-darkness rather than traditional light-mode shadow stacking. Because the base canvas is already dark (#323437), elevation is communicated through: (1) brightness shifts (white nav bar floats above darker canvas), (2) overlay transparency (the 0.8-alpha dark backdrop for modals), and (3) shadow darkness rather than blur diffusion. Shadows detected in the CSS lean cool/black (rgba(0,0,0,...)) rather than the warm tints common in light-mode designs.

The system avoids gradient washes or colored depth effects—this is a flat-color-depth architecture where z-index is shown through luminance, not hue. The exception is {colors.primary} blue surfaces (active nav, top bar) which provide color-block elevation as a special case.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xs} | 3px | Subtle rounding on small inputs, badges | | {rounded.sm} | 5px | Input fields, toggle switches | | {rounded.DEFAULT} / {rounded.md} | 10px | Default system radius — cards, buttons, containers | | {rounded.lg} | 24px | Popup close buttons, featured image corners | | {rounded.pill} | 9999px | Active navigation state, tag pills | | {rounded.circle} | 50% | Avatar placeholders, circular icons | | {rounded.top-rounded} | 10px 10px 0 0 | Cards with bottom-edge continuity (image cards) |

The shape vocabulary is intentionally restrained—three functional radii (small/default/large) plus two semantic shapes (pill/circle) cover all observed cases. The 10px default hits a sweet spot between "clearly rounded" and "not a bubble," appropriate for a technical/industrial brand that wants modernity without playfulness. The pill radius on the active nav item is the single most distinctive shape moment in the system—it transforms a standard menu into a segmented-control metaphor.

Photography Geometry

While the above-fold screenshot doesn't reveal photography, the meta data references an OG image ("TSA-Render-1024x576.png") suggesting 16:9 aspect ratio renders of 3D industrial animations. Based on the card radius system and industry conventions for engineering visualization portfolios:

• Hero/feature imagery: Likely 16:9 or 4:3 aspect ratio, contained within {rounded.DEFAULT} (10px) corners when inside cards, potentially full-bleed at hero scale.
• Service thumbnail images: Probably square or 4:3, using {rounded.top-rounded} for cards that integrate image+content vertically.
• Team/avatar imagery: Would use {rounded.circle} (50%) if present, consistent with the circular shape token detected in the radii data.

Image treatment likely favors sharp, high-contrast renders with the brand blue ({colors.primary}) as an accent color within the imagery itself—common in industrial animation portfolios where the visualization style matches the brand identity.

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.input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.button-primary} — The primary call-to-action button used throughout the site for conversion-focused actions ("Get Started," "Contact Us," "Learn More"). Background {colors.primary} with white text ({colors.on-primary}), using {typography.button} (14px, weight 500) for clear labeling. Rounded to {rounded.DEFAULT} (10px) with generous padding of 12px vertical × 28px horizontal. On interaction, transitions to {component.button-primary-hover} (darkened blue) and {component.button-primary-active} (deepest blue). These buttons anchor hero sections, terminate feature descriptions, and drive modal triggers.

{component.button-secondary} — Ghost/outline-style alternative for secondary actions. Transparent background with {colors.body} (white) text, identical typography and dimensions to primary. Used alongside {component.button-primary} in CTA pairs where the user needs a low-commitment option ("Learn More" next to "Request Demo").

{component.nav-link-active} — The distinctive pill-shaped active navigation indicator. Fills with {colors.surface-soft} (the primary blue) and inverts text to white ({colors.on-primary}). Uses {rounded.pill} (9999px) for fully rounded ends, with expanded horizontal padding (24px) compared to inactive links. This is the single most recognizable interactive element in the system—the blue pill immediately communicates "you are here" in the navigation architecture.

{component.nav-link-default} — Inactive navigation menu items. Transparent background with {colors.primary} (blue) text, using {typography.nav-link} (13px, weight 600, slightly expanded letter-spacing). Rounded to {rounded.pill} shape even when inactive, maintaining the pill metaphor so the active state feels like a "fill" operation rather than a shape change. Padding of 16px horizontal keeps items compact.

{component.nav-link-contact} — Specialized navigation link for "CONTACT US" positioned at the far right of the menu. Same styling as {component.nav-link-default} but semantically isolated as the terminal conversion point in the navigation flow.

{component.popup-close-button} — Circular dismiss control for modal/popup overlays. White background ({colors.surface-elevated}) with {colors.ink} (gray) "×" glyph at {typography.display-lg} scale (appears as 25px in extracted CSS with weight 100 for the thin crosshair aesthetic). Rounded to {rounded.lg} (24px) creating a perfect circle at 48×48px size. Features the distinctive {extensions.shadows.button-float} shadow (0 3px 20px -8px rgba(0,0,0,0.4)) making it float visibly above the popup content.

Cards & Containers

{component.card} — Standard content card with {colors.surface-dark} (#1c1c1c) background, providing subtle elevation from the canvas. White text ({colors.body}) with {typography.body-sm} for readable content. Rounded {rounded.md} (10px) with {spacing.lg} (20px) internal padding. Used for service summaries, feature highlights, and testimonial blocks within grid layouts.

{component.card-elevated} — High-priority card variant with white ({colors.surface-elevated}) background for maximum contrast. Inverts text to {colors.ink} (gray) since the surface is now light. Same radius and padding as standard card. Reserved for featured content, pricing tiers, or highlighted case studies that need to "pop" from the dark canvas.

{component.card-top-rounded} — Specialized card with only top corners rounded ({rounded.top-rounded} — 10px 10px 0 0), designed for image-card hybrids where a visual fills the top portion and content occupies the bottom with square edge continuity. Background {colors.surface-dark}, text {colors.body}.

{component.section-band} — Full-width content section with {colors.canvas} background. Carries {typography.body-md} (20px, weight 300) for section-level text. Vertical padding of {spacing.section} (80px) creates the rhythmic breathing room between major content zones. This is the workhorse container for features, about content, and informational sections.

{component.section-band-alt} — Alternating section variant with {colors.primary} (blue) background for visual rhythm. Inverts text to {colors.on-primary} (white) and bumps typography to {typography.title-md} (31.25px) since these bands often carry section headers rather than body text. Used for CTA sections, statistics displays, or brand-reinforcing content blocks.

{component.popup-content} — Inner content area for modal/popup dialogs. White ({colors.surface-elevated}) background with dark text ({colors.ink}), using {typography.body-sm} for the detailed service descriptions. Generous {spacing.xxxl} (28px) padding accommodates headings, paragraphs, and CTAs. Rounded {rounded.DEFAULT} (10px). This is where the seven service deep-dives (Engineering Expertise, Learning Visualization, Project Preview, Maintenance Simplification, Product Demonstration, Manufacturing Optimization, Product Development Support) render their content.

{component.popup-overlay} — Full-viewport backdrop behind modal content. Uses {colors.surface-overlay} (rgba(28,28,28,0.8)) for semi-transparent darkening that dims the underlying page without obscuring it entirely. No rounded corners (full-viewport coverage). Clicking this area presumably dismisses the popup.

{component.hero-section} — The prime real estate above-fold container. {colors.canvas} background with {typography.display-xl} capacity (though actual heading uses {typography.display-lg}). Padding {spacing.section} (80px) vertical. Houses the primary value proposition, headline pair, CTA buttons, and hero visualization. This component sets the tonal expectation for the entire site.

Navigation & Header

{component.top-info-bar} — The thin uppermost strip running full viewport width. Solid {colors.primary} (blue) background with white ({colors.body}) text at {typography.caption} scale (14px). Height approximately 40px. Contains email address (marketing@mechanim.co.in), phone number (+9198679 08607), and social media icons (LinkedIn, YouTube, Instagram) aligned right. Padding {spacing.xl} (24px) horizontal keeps content away from viewport edges. This bar establishes immediate credibility and provides multiple contact pathways before the user even scrolls.

{component.main-nav} — The primary navigation container below the info bar. White ({colors.surface-elevated}) background creating strong visual separation from both the blue bar above and dark canvas below. Height 80px accommodating the Mechanim logo (left) and navigation menu (center/right). Horizontal padding {spacing.xl} matches the info bar. Contains {component.nav-logo}, {component.nav-link-active}, {component.nav-link-default} instances, and {component.nav-link-contact}. The white nav against dark content creates a "floating header" effect that aids wayfinding.

{component.nav-logo} — The Mechanim brand mark (gear/fish hybrid icon + wordmark) positioned at the left of the main nav. Transparent background with {colors.primary} text/color. Typography scales to {typography.display-lg} (39px) for the wordmark portion, ensuring brand prominence. Vertical padding {spacing.sm} (8px) centers it within the 80px nav height.

{component.social-icon} — Individual social media link icons in the top info bar. Transparent background with {colors.body} (white) glyphs at 16px size. Minimal {spacing.xs} (10px) padding creates touch targets. Icons detected include LinkedIn, YouTube, and Instagram via Font Awesome Brands.

{component.footer} — Page termination zone with {colors.surface-darker} (#121111)—the deepest background in the system. Text renders in {colors.ink} (mid-gray) at {typography.caption} scale for legal/secondary information. Padding {spacing.xl} (24px) vertical keeps it compact relative to content sections. Likely contains copyright, sitemap links, and contact redundancy.

Inputs & Forms

{component.input-field} — Text/email/form input baseline state. {colors.canvas} (dark gray) background blending with the surrounding surface, {colors.body} (white) text for visibility, {typography.body-sm} (16px) for comfortable entry. Rounded {rounded.sm} (5px)—slightly tighter than cards to differentiate interactive inputs. Padding 12px vertical × 16px horizontal, fixed height 48px meeting touch-target minimums. Border likely uses {colors.hairline} or {colors.border-soft} (transparent with potential focus reveal).

{component.input-focus} — Focused input state. Maintains canvas background and rounded corners. Would typically reveal a {colors.primary} border or glow ring on focus (implementation-dependent, not explicitly extracted). Ensures the user knows which field is active without disrupting the dark-aesthetic cohesion.

Display Text Components

{component.heading-primary} — H1-level page title. Transparent background with {colors.primary} (blue) text—the only heading color that uses brand color instead of white/black. {typography.display-lg} (39px, weight 600, -1px tracking) creates the dominant typographic moment on any page. Used once per page as the SEO-critical <h1>.

{component.heading-secondary} — H2 section title. White ({colors.body}) text on dark backgrounds, {typography.title-md} (31.25px, weight 600, -1px tracking). Marks major content divisions (Features, Services, About). Appears in both {colors.canvas} and {colors.primary} section bands.

{component.heading-tertiary} — H3 sub-section title. White text, {typography.title-sm} (25px, weight 600). Used for feature names within grids, popup titles, or card headings.

{component.quaternary} — H4 minor heading or lead paragraph. White text, {typography.body-lg} (20px, weight 300)—notably lighter than H3 despite similar size, creating subtle hierarchy through weight alone. Used for introductory text below H2, or card titles that shouldn't compete with section headings.

{component.body-text} — Standard paragraph content on dark surfaces. Dark text ({colors.on-surface} — #34363a) suggesting this may be used on light/card surfaces, or represents the extracted body color from form contexts. {typography.body-md} (20px, weight 300) with comfortable 1.3 line-height for reading.

{component.body-text-light} — Paragraph content optimized for dark surfaces. White ({colors.body}) text, {typography.body-sm} (16px, weight 400 from Inter). The smaller size and slightly heavier weight (400 vs 300) compensate for reduced contrast sensitivity on dark backgrounds.

Do's and Don'ts

Do

• Do reserve {colors.primary} (#205cd4) for intentional brand moments: the active nav pill ({component.nav-link-active}), the top info bar ({component.top-info-bar}), H1 headings ({component.heading-primary}), and primary CTAs ({component.button-primary}). Overuse dilutes its voltage.
• Do maintain the 80px section rhythm ({spacing.section}) between major content bands. This vertical breathing room is essential to the cinematic, gallery-like quality of the dark canvas.
• Do use Poppins for all display and heading text, keeping weights at 300 (light body/headings) or 600 (strong headings/navigation). Avoid weight 700+—the system's elegance comes from restraint.
• Do apply {rounded.DEFAULT} (10px) as your default corner radius for cards, buttons, and containers. Reserve {rounded.pill} exclusively for the active navigation state and tag-like elements.
• Do ensure white text ({colors.body}) always sits on {colors.canvas} or darker surfaces, and flip to dark text ({colors.on-surface} or {colors.ink}) when using white/elevated surfaces ({component.card-elevated}, {component.main-nav}).
• Do keep body text at 20px ({typography.body-md}) or 16px ({typography.body-sm}) depending on context—never below 16px for readability on dark backgrounds.
• Do use the 300ms transition timing ({extensions.motion.duration}) with ease ({extensions.motion.easing}) for all interactive state changes (buttons, nav items, popups). This matches the extracted CSS transition patterns.
• Do implement popup modals with the semi-transparent dark overlay ({component.popup-overlay} at rgba(28,28,28,0.8)) to maintain depth perception and focus on the {component.popup-content} (white card).
• Do pair {component.button-primary} with {component.button-secondary} in CTA groups, offering users a high-commitment and low-commitment path simultaneously.
• Do leverage the letter-spacing difference: use negative tracking (-1px) for display headings ({typography.display-lg}, {typography.title-md}) and positive tracking (0.05em+) for navigation and labels ({typography.nav-link}, {typography.overline}).

Don't

• Don't substitute {colors.link} (blue) for {colors.primary} in non-link contexts—they happen to share the same hex value but serve different semantic roles. If you need to diverge them later, you can't if they're aliased.
• Don't bold body text beyond weight 400. The system explicitly uses weight 300 for 20px body copy ({typography.body-md}); increasing weight destroys the airy, engineered elegance.
• Don't add gradients or colorful washes to the {colors.canvas} background. The pure #323437 dark surface is a deliberate choice—gradient interference would undermine the technical precision vibe.
• Don't expand the radius vocabulary beyond the defined tokens ({rounded.xs}, {rounded.sm}, {rounded.DEFAULT}, {rounded.lg}, {rounded.pill}, {rounded.circle}). Arbitrary radius values (8px, 15px, 20px) break the systematic feel.
• Don't place white {colors.body} text directly on {colors.primary} blue without verifying contrast ratio. While {colors.on-primary} (white) passes AA on this specific blue, lighter tints or hover variants might not.
• Don't use Inter for headings or navigation. The font-pairing contract assigns Poppins to display roles and Inter to body text—crossing them blurs the typographic hierarchy.
• Don't omit the top info bar ({component.top-info-bar}) on interior pages. The contact information and social proof it provides is part of the brand's trust architecture, not optional chrome.
• Don't make popups full-viewport width. The {component.popup-content} should be a constrained card (likely 600–800px max-width) floating within the {component.overlay} backdrop, not edge-to-edge.
• Don't apply shadows to elements on the dark canvas unless they're floating (popups, dropdowns). The {extensions.shadows.sm/md/lg} tokens exist but should be used sparingly—dark-mode depth comes from brightness layers, not shadow stacks.
• Don't convert the navigation to a hamburger menu on desktop. The horizontal menu with pill-shaped active state ({component.nav-link-active}) is a signature brand moment; mobile collapse should preserve the ability to show this full menu in a drawer/off-canvas panel.

Motion & Animation

Transition Tokens

--transition-base: all 0.3s ease;
--transition-background: background 0.3s ease, border 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
--transition-interactive: background 0.3s ease, border 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;
--transition-color: color 0.3s ease;
--transition-transform: transform 0.5s ease;
--transition-opacity: opacity 1s ease;
--transition-quick: 0.3s ease;
--transition-medium: 0.4s ease;

Keyframe Animations

• pt-plus-cd-rotate-3-in/out — 3D perspective rotation entrance/exit for popup content (likely a "card flip" or "rotate-in" reveal).
• pt-plus-cd-rotate-2-in/out — Alternative 2D rotation animation for secondary popup variants.
• pt-plus-cd-rotate-1-in/out — Base rotation animation, probably the simplest axis rotation.
• slide-in / slide-out — Horizontal translation for drawer-style popup reveals (matches the direction-right and direction-left classes detected).
• cd-pulse — Subtle pulsing effect, possibly for attention-drawing elements or loading states.
• fadeOut / fadeOutDown / fadeOutDownBig / fadeOutLeft / fadeOutLeftBig / fadeOutRight / fadeOutRightBig / fadeOutUp / fadeOutUpBig / fadeOutTopLeft / fadeOutTopRight — Comprehensive suite of directional fade-out animations (from Animate.css library), indicating the site uses rich exit animations for dismissed content, scrolled-out elements, or state transitions.

Interaction Patterns

• Popup drawer reveal: Modals slide in from right (or left for the singular left-direction instance) using slide-in keyframe combined with transform 0.5s ease transition. The overlay fades in with opacity 1s ease for a gentler backdrop appearance.
• Button state transitions: All buttons use the --transition-background token set (background, border, border-radius, box-shadow at 0.3s), ensuring color shifts feel smooth but responsive.
• Nav link activation: The pill-shape fill on {component.nav-link-active} likely animates its background expansion or color shift using --transition-background timing.
• Scroll-triggered exits: The extensive fadeOut* keyframe library suggests content animates out when scrolling past (elements fading down/left/right as they exit viewport), creating a dynamic, "living" page feel.
• Close button float: The {component.popup-close-button} shadow ({extensions.shadows.button-float}) likely animates in or lifts on hover of the button area.
• Card hover lift: Implied by the transform 0.4s ease inclusion in --transition-interactive—cards may translateY(-4px) on hover for elevation feedback.
• Focus ring expansion: Input fields ({component.input-field} → {component.input-focus}) likely animate a border-color or box-shadow change using --transition-background timing.

Imagery Style

• Primary visual format: 3D industrial animation stills and renders, evidenced by the OG image filename ("TSA-Render-1024x576.png") and the site's core value proposition around engineering visualization.
• Aspect ratio: 16:9 for hero/featured visuals (1024×576), optimized for widescreen display and video-like presentation of animated content.
• Color treatment: Renders likely incorporate {colors.primary} (blue) as an accent within the 3D scenes—common in industrial animation where brand colors appear on machinery highlights, UI elements within the animation, or environmental lighting.
• Subject matter: Mechanical systems, industrial equipment, architectural pre-visualization, manufacturing processes, and technical cutaway views that reveal internal mechanisms.
• Style position: Photorealistic or highly-detailed 3D rendering (not illustrative or abstract), matching the "engineering precision" brand promise. Clean lighting, neutral-to-cool color palettes with strategic blue accents.
• Role in layout: Imagery supports rather than dominates—the dark canvas and generous whitespace give renders room to breathe without overwhelming the textual content. Hero images likely occupy 40–50% of the above-fold horizontal space.
• Card thumbnails: Service/category cards likely use square or 4:3 cropped details from larger renders, showing specific aspects (a gear mechanism, a building exterior, a manufacturing line).
• Background imagery: Possible subtle dark textures or faint technical line-work overlaid on {colors.canvas} to add depth without competing with foreground content (speculative based on common patterns in this design space).
• Animation integration: The site likely embeds video or animated GIF showcases of the 3D work—these would sit in dedicated containers with {rounded DEFAULT} corners and possibly a subtle playback control overlay.

Icon System

• Library: Font Awesome 5 (both Free and Brands subsets), loaded via Elementor's bundled asset pipeline (font-awesome.min.css, brands.min.css, solid.min.css, v4-shims.min.css).
• Specific icons observed:
  • envelope (✉) — Email icon in top info bar
  • phone (☎) — Phone icon in top info bar
  • linkedin-in (in) — LinkedIn social icon
  • youtube (▶) — YouTube social icon
  • instagram (📷) — Instagram social icon
  • times (×) — Close/dismiss icon on popup modals (rendered at large scale, thin weight)
• Treatment: Icons use currentColor inheritance, adopting the text color of their parent container (white in the blue top bar, gray on white surfaces). Stroke-based rendering for Brand icons (social), filled rendering for Free icons (UI controls).
• Size variation: Social icons in top bar render at ~16px; the popup close icon scales dramatically to ~25px (approaching {typography.display-lg} proportions) with weight 100 (thin) for the delicate crosshair aesthetic.
• Alignment: Icons center vertically with adjacent text (email label, phone number) using flexbox alignment; social icons space evenly with consistent horizontal gap.
• Custom icons: The Mechanim logo (gear-fish hybrid) is a custom SVG/raster asset, not a font icon—treated as an image or inline SVG in the markup.

Recommended Frontend Stack

- Framework:      Next.js 14+ (React) or Astro (for static/marketing focus)
- Styling:        Tailwind CSS v3.4+ with custom theme extension (or CSS Modules if avoiding utility churn)
- Fonts:          Google Fonts (Poppins: 300,600 | Inter: 400 | Montserrat: 600 fallback)
- Animation:      Framer Motion (React) or GSAP (vanilla JS) for the slide/fade/rotate keyframe library parity
- Icons:          Font Awesome 5 (via @fortawesome/react-fontawesome or SVG sprite)
- Component lib:  Radix UI primitives for accessible popup/dialog patterns + custom styled components
- CMS:           WordPress + Elementor (current stack) or headless WP + Next.js for modernization

Rationale: The current Elementor/WordPress stack explains the heavy DOM footprint, inline styles, and class-naming patterns (elementor-element-xxxxxxx, plus-offcanvas-xxxx). For a rebuild preserving this design language, Tailwind CSS maps naturally to the token system (colors, spacing, radii as theme values), while Radix UI's Dialog component provides the accessible foundation for the popup system. Framer Motion's AnimatePresence handles the enter/exit animation library detected in the keyframes.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column layout; hamburger nav triggering off-canvas menu; stacked hero (text above image); 40px section padding; full-width cards | | Tablet | 768px – 1024px | Two-column service grid; condensed nav (icons + text or icons-only); 60px section padding; side-by-side hero possible | | Desktop | 1024px – 1440px | Full horizontal nav visible; 3–4 column service grid; 80px section padding; asymmetric hero split | | Wide | > 1440px | Content constrains to 1440px max-width; nav may expand further; extra whitespace distribution |

Touch Targets

• {component.button-primary}: ~52px height (12px padding × 2 + ~28px text) × ~120px+ width — exceeds WCAG AAA 44×44 minimum comfortably.
• {component.button-secondary}: Identical dimensions to primary — exceeds minimum.
• {component.nav-link-active}: ~40px height (10px padding × 2 + ~20px text) × ~100px+ width — near minimum, adequate for finger tap.
• **{component.nav-link-default}}: Similar to active state — adequate.
• {component.input-field}: 48px height (explicit) × flexible width — exceeds minimum, excellent for mobile forms.
• {component.social-icon}: 16px icon + 10px padding = ~36px effective — below 44px ideal, consider increasing padding to 14px on mobile.
• {component.popup-close-button}: 48×48px (explicit size) — exceeds minimum, easy dismissal target.

Collapsing Strategy

• Navigation: The horizontal menu (HOME, WHAT WE OFFER, INDUSTRIES, PROJECTS, LEARNING, BLOGS, CASE STUDIES, CONTACT US) collapses into a hamburger-triggered off-canvas drawer on mobile (supported by the existing plus-offcanvas-container and direction-based popup classes). The drawer slides in from right (matching the direction-right class prevalence), displaying the full menu vertically with the same pill-shaped active state.
• Top info bar: May collapse to hide email/phone behind a "Contact" expandable, or stack vertically (info row 1, social row 2). Alternatively, condense to icon-only (envelope, phone) with tap-to-call/mailto links.
• Hero section: Asymmetric split collapses to single column—headline and CTAs stack above the hero image/render. Image becomes full-width within mobile padding constraints.
• Service grid: 3–4 column desktop grid becomes 2-column on tablet, single-column on mobile. Each card ({component.card}) expands to full width with maintained internal padding.
• Popup modals: On mobile, popups may switch from side-drawer to full-screen overlay (bottom-sheet style) or centered modal with 90% viewport width. The {component.popup-close-button} remains fixed positioned for thumb access.
• Section padding: Reduces from {spacing.section} (80px) to ~40–48px on mobile, maintaining proportionality without excessive scroll length.
• Typography scaling: {typography.display-lg} (39px) may reduce to ~32px on mobile; {typography.title-md} (31.25px) to ~24px; body text stays at 16–18px minimum.

Image Behavior

• Hero illustration/render: Scales from ~50% viewport width on desktop to ~90% on mobile (with 16px gutter). Maintains 16:9 aspect ratio using object-fit: cover or contain. May shift from right-column to full-width-below-text layout.
• Service card thumbnails: Grid images scale from ~200px wide (3-col) to full card width on mobile. Aspect ratio locks to 4:3 or 1:1. {rounded.top-rounded} corners remain consistent.
• Logo: Mechanim wordmark may simplify to icon-only on very narrow viewports (< 380px), hiding "Mechanim" text to prevent nav compression artifacts.
• OG/social images: Static 1024×576 regardless of viewport—these are share metadata, not rendered in-page.

Iteration Guide

1. Initialize the theme object in your styling layer (Tailwind config, CSS custom properties, or design-token JS object) with every value from the YAML frontmatter. Map {colors.primary} to --color-primary: #205cd4, {spacing.section} to --space-section: 80px, etc. Never hard-code a hex or pixel value that has a token definition.

2. Build the global layout shell first: top-info-bar → main-nav (with logo + nav links) → hero-section → alternating section-band / section-band-alt → footer. Validate the 80px vertical rhythm by toggling a debug overlay showing section boundaries.

3. Implement the typography scale by creating utility classes or CSS classes for each {typography.*} token. Ensure Poppins loads at weights 300 and 600 (minimum), Inter at 400. Verify the -1px letter-spacing on {typography.display-lg} and {typography.title-md}—this is easy to miss but critical to the headline character.

4. Construct the component library in this order: Buttons (primary + secondary + states) → Cards (standard + elevated) → Navigation (bar + links + active pill) → Popups (overlay + content + close button) → Inputs. Each component should reference only token paths, never raw values.

5. Wire up the popup system using the detected animation patterns: slide-in from right for desktop drawer-style, fadeIn for overlay, pt-plus-cd-rotate-* for content entrance. Ensure the seven service-specific popup content areas exist as data-driven templates (Engineering Expertise, Learning Visualization, Project Preview, Maintenance Simplification, Product Demonstration, Manufacturing Process Optimization, Product Development Support).

6. Apply the dark-mode foundation by setting background-color: {colors.canvas} on body and color: {colors.body} as defaults. Build "elevated" surfaces (nav, popups, some cards) as explicit exceptions with {colors.surface-elevated} and inverted text colors.

7. Test contrast ratios using a11y tools: {colors.body} (#fff) on {colors.canvas} (#323437) should pass AAA; {colors.on-primary} (#fff) on {colors.primary} (#205cd4) should pass AA; {colors.ink} (#b4b4b4) on {colors.surface-elevated} (#fff) requires verification (may fall below 4.5:1 for small text).

8. Implement responsive breakpoints starting from mobile (single column, collapsed nav) up to desktop (full nav, multi-column grids). Ensure {component.nav-link-active} pill shape persists in the mobile drawer menu—it's too central to the brand identity to flatten into a simple highlight.

9. Add motion last, after static layout is pixel-matched. Apply the transition tokens (--transition-base, --transition-interactive) to interactive elements. Implement the fadeOut* keyframes for scroll-exit animations using Intersection Observer or a scroll library.

10. Run the linter (npx @google/design.md lint DESIGN.md) to catch broken token references, orphaned components (defined in frontmatter but missing from prose), or contrast-ratio warnings. Fix all errors before considering the implementation complete.

Font Setup: Add these <link> tags in <head>:

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

Define CSS variables:

:root {
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover treatments (background darkening percentages, shadow elevation changes, transform translates) are inferred from state variant names but not visually confirmed. Implement hover as intermediate between default and active.
• Loading/skeleton states: No loading indicators, shimmer skeletons, or pending states were detectable in the static screenshot. Recommend implementing dark-mode-compatible skeleton pulses (subtle opacity oscillation on {colors.surface-strong} rectangles).
• Form validation states: Beyond {component.input-focus}, error ({colors.error}), warning, disabled, and success states for form inputs are not represented in the extracted data. Design these using the semantic color tokens.
• Authenticated/dashboard surfaces: The screenshot shows only the public marketing site. Client portal, dashboard, or authenticated admin surfaces (if they exist) may use different density, navigation, or component variants not captured here.
• Sub-brand palettes: If Mechanim serves distinct verticals (e.g., "Luxe" for high-end architectural viz, "Plus" for enterprise training), those sub-brands may have palette variations on separate pages or domains not visible in this capture.
• Video player chrome: Given the 3D animation focus, embedded video players likely exist with custom controls (play button, progress bar, fullscreen). These UI chrome components weren't in the above-fold extraction.
• Cookie consent / GDPR banner: Common on European-serving B2B sites, such overlays may appear on initial load but weren't captured in this particular screenshot state.
• Print stylesheet: No print-optimized styles were evident. Dark-mode sites often require print overrides (invert to white paper, adjust text colors).
• Accessibility annotations: ARIA landmarks, focus management for popups, skip-link behavior (one detected: .skip-link.screen-reader-text), and screen-reader-only text are partially present but not fully auditable from CSS alone.
• CSS variable naming mismatches: The Elementor-generated CSS uses proprietary variable naming (--e-global-color-*, theme-specific tokens) that don't map cleanly to semantic tokens. Implementation should use the semantic names from this spec, not the obfuscated Elementor originals.