---
name: "Enrich Labs"
description: "Modern AI marketing platform visual system built on clean light surfaces, soft rounded cards, dark neutral typography, and vivid blue interactive accents."
version: "1.0"
colors:
  primary: "#1483f3"
  primary-strong: "#0f6dd0"
  on-primary: "#ffffff"
  ink: "#1d1d1f"
  ink-strong: "#111827"
  body: "#6e6e73"
  canvas: "#ffffff"
  surface-soft: "#f5f5f7"
  surface-muted: "#f0f0f2"
  hairline: "#d2d2d7"
  hairline-soft: "rgba(0, 0, 0, 0.08)"
  overlay: "rgba(0, 0, 0, 0.7)"
  success: "#34a853"
  warning: "#f97316"
  destructive: "rgb(200, 50, 50)"
  accent-blue: "#2997ff"
  accent-purple: "#7d6bff"
  accent-pink: "#e85aa6"
  accent-teal: "#00a99d"
  accent-amber: "rgb(244, 166, 42)"
  neutral-dark: "#0a0a0a"
typography:
  heading-xl:
    fontFamily: "\"Stack Sans Headline\", \"Plus Jakarta Sans\", -apple-system, sans-serif"
    fontSize: "58px"
    fontWeight: "600"
    lineHeight: "1.02"
    letterSpacing: "-2.03px"
  heading-lg:
    fontFamily: "\"Stack Sans Headline\", \"Plus Jakarta Sans\", -apple-system, sans-serif"
    fontSize: "36px"
    fontWeight: "600"
    lineHeight: "1.08"
    letterSpacing: "-1.08px"
  heading-md:
    fontFamily: "\"Stack Sans Headline\", \"Plus Jakarta Sans\", -apple-system, sans-serif"
    fontSize: "28px"
    fontWeight: "600"
    lineHeight: "1.12"
    letterSpacing: "-0.7px"
  body-lg:
    fontFamily: "\"Inter Tight\", -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "20px"
    fontWeight: "500"
    lineHeight: "1.42"
    letterSpacing: "-0.2px"
  body-md:
    fontFamily: "\"Inter Tight\", -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.45"
    letterSpacing: "normal"
  body-sm:
    fontFamily: "\"Inter Tight\", -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.4"
    letterSpacing: "normal"
  eyebrow:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "1.0"
    letterSpacing: "normal"
rounded:
  button: "999px"
  card: "22px"
  badge: "100px"
  input: "15px"
  pill: "980px"
spacing:
  section: "96px"
  container: "1200px"
  grid-gap: "24px"
  card-padding: "30px"
  element-gap: "16px"
  tight-gap: "8px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.pill}"
    padding: "15px 30px"
    fontWeight: "500"
  secondary-button:
    background: "{colors.ink-strong}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.button}"
    padding: "10px 22px"
    fontWeight: "600"
  outline-button:
    background: "transparent"
    color: "{colors.ink-strong}"
    border: "1px solid {colors.ink-strong}"
    borderRadius: "{rounded.button}"
    padding: "9px 20px"
  nav-bar:
    background: "rgba(255, 255, 255, 0.72)"
    borderRadius: "{rounded.button}"
    border: "1px solid {colors.hairline-soft}"
    padding: "14px 24px"
  hero-input:
    background: "{colors.canvas}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.input}"
    padding: "12px 16px"
  feature-card:
    background: "{colors.canvas}"
    borderRadius: "{rounded.card}"
    border: "1px solid {colors.hairline-soft}"
    padding: "{spacing.card-padding}"
  highlight-card:
    background: "{colors.surface-soft}"
    borderRadius: "{rounded.card}"
    padding: "{spacing.card-padding}"
  footer:
    background: "{colors.neutral-dark}"
    color: "{colors.on-primary}"
    padding: "80px 48px 40px"
source: "https://www.enrichlabs.ai/"
captured: "2026-09-28T14:49:26.418Z"
---

# DESIGN.md: Enrich Labs

## Source

- URL: https://www.enrichlabs.ai/
- Captured: 2026-09-28T14:49:26.418Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Enrich Labs](./screenshot.png)

## Design Summary

Enrich Labs pairs tech-forward high-density AI workflow UI with Apple-inspired soft aesthetics. High-contrast typography in Stack Sans Headline and Inter Tight is complemented by generous 22px rounded feature cards, pill-shaped action buttons, and subtle light backdrop blurs.

## Visual Language

- Pill-shaped primary and secondary interactive elements with full rounded borders (999px / 980px).
- Generous rounded card corners (22px) framed by soft low-opacity subtle borders.
- Dual-tone surface hierarchy switching cleanly between stark white canvas and soft grey background sections.
- Functional accent colors tied to agent domain roles across blue, purple, pink, green, and orange.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Fixed glassmorphic top navigation bar floating over content with high backdrop blur.
- Centered single-column hero section with inline URL input box and immediate social proof callout.
- Horizontal scrollable card carousels for highlight showcases and feature walks.
- Multi-column grid sections for AI agent showcases, industry vertical lists, and user testimonial cards.
- Deep dark footer grounding the bottom of the page with high contrast links.

## Components

- Hero CTA forms embed input fields directly beside round icon submit buttons.
- Navigation links use subtle hover state highlights and pill-shaped backgrounds.
- Testimonial cards use stark white card surfaces on light grey section backgrounds.
- Accordion FAQ items use clean line separators and expand/collapse icons.

## Content Style

- Concise headline copy emphasizing immediate automation benefits.
- Direct verb-first CTAs like 'Start free' and 'Continue with this website'.
- Metric-driven proof points showcasing quantitative ROI and active customer numbers.

## Agent Build Instructions

- Import Inter Tight for standard body text and Stack Sans Headline for section titles.
- Set CSS custom property `--blue: #1483f3` and `--ink: #1d1d1f` as primary visual foundations.
- Apply `border-radius: 999px` to main CTAs and `border-radius: 22px` to content cards.
- Ensure section padding scales consistently at 96px vertical spacing.

## Evidence And Confidence

- Observed: Header uses a fixed navigation bar with `rgba(255, 255, 255, 0.72)` background.
- Observed: Brand primary color measured at `#1483f3` across computed styles and brand custom properties.
- Observed: Card radiuses measured at 22px on testimonial articles and 28px on hero highlights.
- Inferred: Focus states on interactive buttons fall back to dark primary interactive shade `#0f6dd0`.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://www.enrichlabs.ai/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.