# How ignytlabs.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/ignytlabs.com-design)

Last updated: 2026-08-10

## Captured pages

[![Process section showing numbered steps with pill-shaped gradient diagrams and wireframe mockups on a light blue-white gradient background](https://pin.fontofweb.com/7064?format=jpg)](https://design.withfudge.com/share/pin-7064)

[Process section showing numbered steps with pill-shaped gradient diagrams and wireframe mockups on a light blue-white gradient background](https://design.withfudge.com/share/pin-7064)

[![Social proof section with centered headline, three frosted stat cards with icons, and a scrolling client logo marquee below](https://pin.fontofweb.com/7063?format=jpg)](https://design.withfudge.com/share/pin-7063)

[Social proof section with centered headline, three frosted stat cards with icons, and a scrolling client logo marquee below](https://design.withfudge.com/share/pin-7063)

[![Hero area with gradient mesh background, feature pills, and navigation bar with glassmorphism treatment](https://pin.fontofweb.com/7062?format=jpg)](https://design.withfudge.com/share/pin-7062)

[Hero area with gradient mesh background, feature pills, and navigation bar with glassmorphism treatment](https://design.withfudge.com/share/pin-7062)

[![Close-up of the social proof stat cards showing subtle pattern textures and soft shadow depth](https://pin.fontofweb.com/7061?format=jpg)](https://design.withfudge.com/share/pin-7061)

[Close-up of the social proof stat cards showing subtle pattern textures and soft shadow depth](https://design.withfudge.com/share/pin-7061)

## Overview

IgnytLabs presents a contemporary SaaS landing page built around speed, clarity, and technical credibility. The visual system pairs generous whitespace with precise glassmorphism effects, creating an atmosphere that feels both lightweight and engineered. The design communicates momentum through horizontal scrolling marquees, gradient mesh backgrounds that shift between cool blues and soft greens, and a restrained typographic hierarchy that lets process diagrams and stat cards carry the visual interest. Every surface appears to float at a distinct elevation—navigation bars hover with frosted translucency, stat cards catch light through inset shadows, and process steps connect through flowing gradient pills. The overall impression is of a system designed for founders who value both aesthetic polish and functional directness.

## Colors

The palette centers on cool, atmospheric tones with strategic warm and neon accents for energy. Dark ink tones anchor typography while surfaces progress from pure white through subtle blue tints.

| token | value | use |
|---|---|---|
| ink | #031E2E | Primary headings, body text, primary button backgrounds |
| ink-secondary | #093E5E | Secondary text, shadow tints, depth layers |
| canvas | #FFFFFF | Page background, card interiors, button text on dark |
| surface | #EDF7FF | Section gradient endpoints, subtle background tints |
| surface-elevated | #F1F8FF | Lighter gradient stops, hover states |
| accent-blue | #0085D6 | Interactive highlights, link undercurrents |
| accent-cyan | #66C7FF | Gradient midpoints, glow effects |
| accent-green | #74C700 | Success states, growth indicators |
| accent-lime | #C1FF6B | Vibrant gradient starts, energy accents |
| accent-purple | #D7BAFF | Process diagram variants, creative flourishes |
| accent-warm | #F7E5BA | Warm gradient endpoints, humanizing touches |
| shadow | #093E5E | Drop shadows, depth definition |
| shadow-soft | #C5D2E3 | Inset shadow bases, subtle elevation |

The system employs multiple gradient modes for different component roles. Feature pills use a cool gray-blue linear gradient from #CCD7E3 to #D5DFE6. Process diagrams shift through blue tints from #E3F4FF to #96CDFA. Accent variants include lime-green energy gradients and warm cream transitions. Dark sections reverse the polarity, using deep ink backgrounds with light text and colored gradient overlays for depth.

## Typography

Two font families serve distinct roles. Geist, designed by Basementstudio and others, handles all display and body text with its clean, technical character. False Normal by Jonny Pinhorn at Indian Type Foundry appears in the brand mark. System sans-serif serves as a fallback for interface microcopy.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| hero-display | Geist | 4.5rem | 300 | 1.1 | -0.04em | Homepage hero headlines |
| section-display | Geist | 3.625rem | 300 | 1.15 | -0.04em | Section headlines, social proof |
| subhead | Geist | 2.5rem | 400 | 1.2 | -0.04em | Process step titles |
| body-large | Geist | 1.375rem | 400 | 1.3 | -0.02em | Lead paragraphs, descriptions |
| body | Geist | 1rem | 400 | 1.3 | -0.02em | Standard paragraphs |
| body-small | Geist | 0.875rem | 300 | 1.4 | -0.02em | Captions, metadata |
| label | Geist | 0.8125rem | 400 | 1.4 | -0.02em | Buttons, tags, microcopy |
| navigation | Geist | 0.875rem | 400 | 1 | normal | Nav links, menu items |

The type system relies on weight contrast rather than size contrast for hierarchy. Display sizes use Light (300) weight for an airy, confident presence, while body text employs Regular (400) for readability. Negative letter-spacing is applied consistently across display sizes to tighten word spacing at large scales. Verify licensing for Geist and False Normal before production use.

## Layout

The page structure follows a centered, single-column approach with generous horizontal padding. Sections stack vertically with substantial breathing room between them.

The navigation bar sits fixed at the top with a glassmorphism treatment—semi-transparent white background with backdrop blur, rounded corners, and a soft shadow that lifts it above the content. Navigation links are spaced evenly with small dot separators, and the primary call-to-action anchors the right side.

Content sections use asymmetric padding: 7.5rem vertical and 5rem horizontal on desktop. This creates a comfortable reading measure while allowing full-bleed visual elements to extend toward the edges. The hero area introduces a gradient mesh background with organic color blobs in cyan and blue that shift behind the content without overwhelming it.

Below the hero, a feature pill bar spans nearly the full width, containing three evenly distributed value propositions with small icons. Each pill has rounded ends and subtle gradient backgrounds that distinguish them from the white page ground.

The social proof section centers its headline with a small tag above it, then presents three stat cards in a horizontal row. These cards use equal widths with consistent internal padding and icon placement. Below the stats, a scrolling logo marquee extends beyond the content bounds, suggesting continuous motion.

Process sections alternate layout direction—text left with diagram right, then diagram left with text right—creating visual rhythm through the page. Each step number appears oversized and light gray, functioning as a structural element rather than mere enumeration.

## Visual language

The design language balances clinical precision with organic softness. Glassmorphism appears throughout: navigation bars, stat cards, and floating elements all use backdrop blur with semi-transparent fills to suggest depth without opacity. This creates a layered interface where elements feel physically separated by glass planes.

Gradient meshes serve as the primary decorative element, appearing behind hero content and within process diagrams. These are not flat color blocks but atmospheric color fields that bleed into one another—cool blues dominate with occasional warm accents. The gradients avoid hard edges, preferring soft radial or linear transitions that feel luminous.

Shadows are complex and multi-layered. Rather than simple drop shadows, the system uses inset highlights combined with outer depth shadows. Stat cards demonstrate this most clearly: an inner glow from the top-left suggests light catching a frosted surface, while a darker outer shadow grounds the element. This creates the impression of physical thickness and material presence.

Iconography is minimal and functional—small line icons or simple shapes within circular containers. The stat cards use this pattern: a soft circular background with a centered icon, paired with bold numerals and explanatory text.

Pattern textures add subtle interest to card surfaces. Some stat cards display fine dot grids or wave lines at low opacity, creating visual differentiation without competing with content. These patterns remain monochromatic, staying within the card's tonal range.

The overall motion implied by the design is horizontal—scrolling marquees, flowing process diagrams, and wide feature bars all suggest lateral movement and speed, reinforcing the brand's emphasis on rapid delivery.

## Components

### Navigation bar

The navigation bar combines glassmorphism with precise geometry. It spans most of the viewport width, centered, with rounded corners creating a pill-like container.

- **Anatomy**: Logo mark left, text links center, primary CTA right
- **Surface**: `rgba(255, 255, 255, 0.8)` with `backdrop-filter: blur(12px)`
- **Shape**: `border-radius: 1rem`, full width minus horizontal margins
- **Shadow**: `0 20px 30px rgba(9, 62, 94, 0.14)`
- **Spacing**: Internal padding approximately `0.625rem 1.25rem`, links spaced with dot separators
- **Typography**: Navigation token, Regular weight

### Primary button

The primary action uses a dark, solid treatment with an arrow icon.

- **Anatomy**: Text label with right-aligned arrow icon in a square container
- **Surface**: `background-color: {colors.ink}`, `color: {colors.canvas}`
- **Shape**: Small `0.25rem` radius on the button, icon container has slightly different treatment
- **Typography**: Label token
- **Spacing**: `0.75rem 1.375rem` padding
- **States**: The arrow container appears to have a subtle gradient or elevation difference

### Feature pill bar

A horizontal container with three evenly distributed value propositions.

- **Anatomy**: Icon left, text right in each pill; three pills in a connected or near-connected row
- **Surface**: Gradient backgrounds varying by position—gray-blue for first, lighter for middle, warm-tinted for third
- **Shape**: Full pill radius (`9999px`), slight internal padding
- **Typography**: Body token
- **Composition**: Flex row with equal distribution, subtle dividers between pills

### Stat card

Frosted cards displaying metrics with icon, number, and description.

- **Anatomy**: Circular icon container top-left, large metric text, description below
- **Surface**: `rgba(255, 255, 255, 0.6)` with `backdrop-filter: blur(20px)`, inset white highlight shadow, outer dark shadow
- **Shape**: `border-radius: 2.125rem`
- **Pattern**: Subtle background textures—dot grids, wave lines, or diagonal stripes at very low opacity
- **Typography**: Metric uses section-display or subhead token; description uses body-large
- **Spacing**: `1.5rem` internal padding
- **Composition**: Three cards in a row with equal gaps

### Process step

Alternating layout sections with numbered steps, text, and gradient diagrams.

- **Anatomy**: Oversized step number, title, description left; gradient diagram or mockup right (alternates)
- **Surface**: Step number in light gray, title in accent-blue, body in ink
- **Diagram**: Pill-shaped container with gradient fill, containing connected nodes labeled with process stages
- **Shape**: Diagram uses full pill radius, nodes are smaller pills with distinct gradient fills
- **Typography**: Step number uses display size at very light weight; title uses subhead; body uses body
- **Composition**: Asymmetric two-column with generous vertical spacing between steps

### Client logo marquee

Horizontal scrolling band of client logos.

- **Surface**: Transparent or very subtle background
- **Typography**: Logos in grayscale, varying weights and styles
- **Motion**: Continuous horizontal scroll, logos repeat for seamless loop
- **Composition**: Full-width, extending beyond content bounds

## Responsive behavior

The design appears optimized for desktop viewing with its generous horizontal padding and multi-column layouts. At narrower viewports, several adaptations should occur:

The navigation bar should collapse to a hamburger menu or simplify to logo and CTA only. The three feature pills should stack vertically, maintaining their pill shape but losing the horizontal connection. Stat cards should shift from three-across to a single column, preserving their internal layout and frosted treatment. Process sections should lose their alternating layout, stacking text above diagram consistently. The logo marquee should continue scrolling but with fewer visible logos at once.

Font sizes should scale down proportionally—the hero display at 4.5rem may reduce to 2.5rem on mobile, maintaining the light weight and tight letter-spacing. Section padding should compress from 5rem horizontal to 1.5rem or 2rem to maintain readability without excessive margins.

The glassmorphism effects may need adjustment on mobile devices where backdrop-filter support varies. A solid fallback background at `colors.surface` should replace the frosted treatment when blur is unavailable.

## Practical implementation guidance

### Preserve
- The precise glassmorphism values: specific blur radii, multi-layer shadows, and semi-transparent backgrounds are essential to the material quality
- The weight contrast between Light display type and Regular body text
- The alternating process section layouts and oversized step numbers
- The complex inset-plus-outset shadow system on stat cards
- The gradient mesh backgrounds with their organic, non-linear color distribution
- The horizontal motion language in marquees and wide bars

### Avoid
- Flattening the glassmorphism to solid colors—this destroys the layered depth
- Using heavy borders or outlines where shadows currently define edges
- Replacing the gradient diagrams with static illustrations
- Crowding the generous whitespace between sections
- Using bold or black weights where Light is specified for display type

### Recommended build order
1. Establish the color tokens and gradient definitions
2. Implement Geist at all specified weights and sizes
3. Build the navigation bar with exact glassmorphism treatment
4. Create the hero section with gradient mesh background
5. Develop the feature pill bar with connected layout
6. Construct stat cards with multi-layer shadows and pattern textures
7. Build alternating process sections with gradient diagrams
8. Implement the logo marquee with continuous scroll
9. Add responsive breakpoints and mobile adaptations

### Accessibility
- Ensure sufficient contrast for text over gradient mesh backgrounds; consider adding subtle dark scrims behind hero text
- Provide `prefers-reduced-motion` alternatives for the scrolling marquee and any animated gradients
- Maintain focus indicators on the glassmorphism navigation that are visible against translucent backgrounds
- Do not rely on color alone for process step differentiation; the numbered sequence provides this structurally
- Test backdrop-filter fallbacks for browsers that lack support

## Scope note

This guide covers the IgnytLabs homepage landing experience including hero, social proof, process, and navigation components. Pricing pages, project case studies, FAQ accordions, and mobile menu states are not represented in the supplied materials. Form interactions, hover states, and loading sequences were not captured and should be designed to match the established glassmorphism and gradient language.

## More website design guides

[Browse website design guides by pattern and website](/design-guides).