---
name: "Nex"
description: "Clean modern GTM AI platform visual system featuring ultra-crisp monochrome typography, pill-shaped interaction controls, soft light surface cards, and vibrant cyan-to-violet accent dots and graphics."
version: "1.0"
colors:
  canvas: "#ffffff"
  surface-soft: "#f8f8f9"
  surface-muted: "#f1f2f2"
  surface-tint: "#f7f7f8"
  ink: "#1d1e1f"
  ink-strong: "#000000"
  body: "#434547"
  body-muted: "#686c6e"
  body-soft: "#85898b"
  hairline: "rgba(0, 0, 0, 0.05)"
  hairline-soft: "#e9eaeb"
  hairline-strong: "#cfd1d2"
  primary: "#1e6df6"
  primary-strong: "#0a3792"
  primary-deep: "#0b2965"
  on-primary: "#ffffff"
  accent-cyan: "#46f7fd"
  accent-cyan-light: "#e5feff"
  accent-blue-soft: "#bcddff"
  accent-blue-light: "#e5f6ff"
  accent-magenta: "#cf72d9"
  accent-magenta-deep: "#9f4dbf"
  accent-magenta-light: "#ffebfc"
  accent-violet: "#612a92"
  accent-lime: "#d4db18"
  accent-lime-light: "#f8ffdb"
  accent-olive: "#969640"
  accent-olive-deep: "#3f4224"
  accent-yellow: "#eef679"
typography:
  heading-xl:
    fontFamily: "\"Cosplay Variable Regular\", sans-serif"
    fontSize: "95px"
    fontWeight: "400"
    lineHeight: "85.5px"
    letterSpacing: "-1.9px"
    textTransform: "uppercase"
  heading-lg:
    fontFamily: "\"Inter Variable\", sans-serif"
    fontSize: "40px"
    fontWeight: "400"
    lineHeight: "44px"
    letterSpacing: "-0.8px"
    textTransform: "none"
  heading-md:
    fontFamily: "\"Inter Variable\", sans-serif"
    fontSize: "30px"
    fontWeight: "400"
    lineHeight: "36px"
    letterSpacing: "-0.6px"
    textTransform: "none"
  body-lg:
    fontFamily: "\"Inter Variable\", sans-serif"
    fontSize: "17px"
    fontWeight: "400"
    lineHeight: "25.5px"
    letterSpacing: "-0.34px"
    textTransform: "none"
  body:
    fontFamily: "\"Inter Variable\", sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "19.6px"
    letterSpacing: "-0.28px"
    textTransform: "none"
  body-sm:
    fontFamily: "\"Inter Variable\", sans-serif"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "18.2px"
    letterSpacing: "-0.26px"
    textTransform: "none"
  caption:
    fontFamily: "Inter, sans-serif"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16.8px"
    letterSpacing: "-0.14px"
    textTransform: "none"
rounded:
  pill: "50px"
  button: "32px"
  card: "16px"
  badge: "10px"
  floating: "48px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  grid-gap: "24px"
  xl: "32px"
  section: "80px"
  container: "1200px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.button}"
    padding: "12px 16px"
    fontSize: "14px"
    boxShadow: "rgba(217, 254, 255, 0.2) 0px 0px 0px 0px inset"
  secondary-button:
    background: "{colors.ink}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.pill}"
    padding: "8px 12px"
    fontSize: "12px"
  soft-button:
    background: "rgba(0, 0, 0, 0.05)"
    color: "{colors.ink}"
    borderRadius: "{rounded.button}"
    padding: "12px 16px"
    fontSize: "12px"
  navbar:
    background: "rgba(255, 255, 255, 0)"
    height: "60px"
    padding: "0px 24px"
    display: "flex"
    alignItems: "center"
    justifyContent: "space-between"
  floating-dock:
    background: "rgba(255, 255, 255, 0.85)"
    backdropFilter: "blur(8px)"
    borderRadius: "{rounded.floating}"
    boxShadow: "0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 16px 20px -12px rgba(0, 0, 0, 0.1)"
    padding: "8px 16px"
  card:
    background: "{colors.canvas}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.card}"
    padding: "24px"
    boxShadow: "rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 4px 6px -4px"
  badge:
    background: "{colors.surface-soft}"
    borderRadius: "{rounded.badge}"
    padding: "4px 8px"
    fontSize: "12px"
    color: "{colors.body}"
  footer:
    background: "{colors.canvas}"
    borderTop: "1px solid {colors.hairline}"
    padding: "64px 0px 32px"
    color: "{colors.body-soft}"
source: "https://nex.ai/"
captured: "2026-09-03T14:08:00.910Z"
---

# DESIGN.md: Nex

## Source

- URL: https://nex.ai/
- Captured: 2026-09-03T14:08:00.910Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

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

## Design Summary

Nex features an open, modern SaaS look with stark black display typography ('AI GTM ENGINEER' in Cosplay Variable Regular) contrasting against body copy in Inter Variable. Primary CTA controls utilize bright blue (#1e6df6) or dark pill buttons with generous border-radius values (32px to 50px). Surfaces are light white/off-white with fine 1px subtle borders, accompanied by playful chromatic node graphics spanning cyan, magenta, lime, and violet shades.

## Visual Language

- High contrast sans-serif display typography with tight character spacing for impact headlines
- Fully rounded pill geometry for navigation links, secondary badges, and main call-to-action buttons
- Frosted floating header dock with backdrop blur and delicate drop shadows
- Soft light gray content cards with hairline borders and multi-layered inset/elevation shadows
- Decorative dot graphics in vibrant spectrum hues (cyan, magenta, yellow, violet) representing connected nodes

## Design Tokens

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

## Spacing And Layout

- Centered top-heavy hero layout with uppercase stacked display titles and dual pill CTA buttons
- Horizontal partner/tool icon carousel band underneath main hero copy
- Three-column benefit card grid with 24px gap and padded white containers
- Step-by-step workflow pipeline with diagrammatic graphic connectors
- Multi-column footer layout separating primary sitemap links from terms and cookie controls

## Components

- Use 32px or 50px border-radius on all interactive buttons to maintain the pill aesthetic
- Enforce high-contrast dark text (#1d1e1f) over pure white (#ffffff) or soft gray backgrounds (#f8f8f9)
- Apply subtle 1px translucent black borders (rgba(0,0,0,0.05)) to light surface cards
- Keep typography crisp with explicit letter-spacing reductions (-0.28px to -1.9px) on variable fonts
- Utilize Cosplay Variable Regular uppercase for key display headings and Inter Variable for body copy

## Content Style

- Concise action-focused headline copy: 'Build your own AI GTM ENGINEER'
- Direct value propositions emphasizing automation, context, and integration
- Short, punchy primary calls-to-action: 'Start Trial', 'Download for macOS', 'Install CLI'
- Clean metric callouts (e.g. 'Saves: Est. $300-$400/mo')

## Agent Build Instructions

- Import Inter and Cosplay Variable fonts with fallback to system sans-serif
- Set default body font-family to 'Inter Variable', sans-serif with color #1d1e1f
- Define CSS color variables using exact hex and rgba values captured from stylesheet palette
- Implement pill navigation bar with backdrop-filter: blur(8px) and background rgba(255,255,255,0.85)
- Configure card utility components with background #ffffff, border 1px solid rgba(0,0,0,0.05), and border-radius 16px

## Evidence And Confidence

- Observed: Heading font Cosplay Variable Regular measured at 95px font-size and letter-spacing -1.9px.
- Observed: Primary blue color #1e6df6 used on primary CTA 'Start Trial' button with 32px border-radius.
- Observed: Dark neutral #1d1e1f used for text headers and secondary dark pill buttons with 50px border-radius.
- Observed: Extracted palette includes extended chromatic tokens (#46f7fd, #cf72d9, #612a92, #d4db18, #9f4dbf) from stylesheet variables used in diagram graphics.
- Inferred: Hover states on links transition to subtle opacity adjustments or darker neutral shades based on standard Framer preset behaviors.

## Rerun Inputs

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

---

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