Skip to content
DesignMunkDesignMunk Submit a site

SuperAI

superai.com
The world’s premier AI event
AI Entertainment Webflow Homepage Manrope
Share Visit site
superai.com DESKTOP · 1440
SuperAI

AI Breakdown

Design export

---
version: alpha
name: SuperAI
description: The world’s premier AI event
colors:
  primary: "#0b131c"
  secondary: "#62656b"
  tertiary: "#7846dd"
  neutral: "#ffffff"
  border: "#9f70fc"
  brand-silver-medal: "#d5d5d6"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Manrope
    fontSize: 76.8px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.003em
  headline-md:
    fontFamily: Manrope
    fontSize: 38.4px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.007em
  headline-sm:
    fontFamily: Manrope
    fontSize: 28.8px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.009em
  headline-xs:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 400
rounded:
  sm: 18.4px
  full: 9999px
spacing:
  xs: 12px
  sm: 24px
  md: 44px
  lg: 64px
  xl: 102px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 18px 21px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 18px 21px
    height: 48px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 23.04px 25.6px 25.6px
---

# SuperAI: Monumental Manrope Headlines, Pill-Shaped CTAs

## Overview

SuperAI's UI is confident, sparse, and event-centric. It uses high-contrast type on a bright surface with restrained violet accents to signal actions and links. Spacing is generous, allowing the hero, KPIs, speakers, and video to breathe. The tone is professional and international; hierarchy is driven by one type family, bold weights, and pill-shaped CTAs.

## Colors

- **primary (#0b131c):** Deep ink for headlines, body text, and iconography.
- **secondary (#62656b):** Subdued supporting text and metadata where reduced contrast is desired.
- **tertiary (#7846dd):** Violet accent for highlights, interactive states, and occasional emphasis.
- **neutral (#ffffff):** Pure white canvas used for the global background and cards.
- **border (#9f70fc):** Iris-toned border and focus accents for delineation without heavy shadows.
- **brand-silver-medal (#d5d5d6):** Utility neutral for badges, dividers, and muted UI chrome.
- **surface (#ffffff):** Primary surface color; identical to neutral.
- **on-surface (#0b131c):** Default text on light surfaces; pairs with surface/neutral.

## Typography

Manrope is the sole family across display and body and is freely available via Google Fonts. Use it directly.
- Headline-lg (76.8px, 600, lh 1, -0.003em): Hero statements and marquee numbers.
- Headline-md (38.4px, 600, lh 1.2, -0.007em): Section titles and KPI numerals.
- Headline-sm (28.8px, 600, lh 1.2, -0.009em): Subsections and card titles.
- Headline-xs (18px, 600, lh 1.22): Compact headings and button-group titles.
- Body-md (16px, 400): Primary paragraph copy and link lists.
Substitutes when Manrope isn't available: Inter, Plus Jakarta Sans, or IBM Plex Sans (all obtainable) with similar x-height and weights. Keep semibold headings and standard body to preserve hierarchy.

## Layout

Spacing follows a generous scale: 12 / 24 / 44 / 64 / 102px. Build vertical rhythm in these increments—hero stacks use xl and lg gaps; content sections use md; lists and controls use sm or xs. A simple multi-column grid works well: wide central content with ample side gutters; three-up and five-up rows should space using md to lg between cards. Keep breathing room around the hero headline and KPI band to preserve the airy feel.

## Elevation & Depth

Shadows are disabled at all sizes. Depth is conveyed through tone, borders, and whitespace: dark #0b131c on #ffffff for primary hierarchy, #9f70fc for subtle dividers or focus, and sparse use of #7846dd for accents. Rely on spacing and weight shifts rather than dropshadows.

## Shapes

The system speaks in rounded forms. Buttons and navigation chips use full radius (9999px) to create distinctive pills. Cards and larger containers use rounded.sm at 18.4px. Square corners are reserved for links/text-only elements (button-link). Use radius to signal interactivity and containment.

## Components

Buttons
- Primary: 48px height, 18px×21px padding, pill radius (9999px), background #0b131c, text #ffffff. Use for main CTAs like Get Tickets.
- Secondary: Identical metrics to primary; reserve for secondary actions placed away from the hero to avoid competing CTAs.
- Link: Text-only, #0b131c, no radius. Use inline or beside headings.

Card
- Background #ffffff, radius 18.4px, padding 23.04px 25.6px 25.6px. Place content with headline-sm/xs and body-md.

Distinctive modules on this page
### Floating Capsule Nav
- Surface #ffffff with pill silhouette (rounded.full). Links in #0b131c; primary ticket button at 48px height. Use sm (24px) internal spacing and md (44px) gap between items.
### Hero Headline Stack
- headline-lg (76.8px) in #0b131c, followed by a compact meta row (body-md in #62656b) with separators. Primary CTA button below with lg (64px) top margin.
### KPI Counter Row
- Three columns of numerals using headline-md (38.4px) in #0b131c with short labels in secondary color. Use lg gaps and md vertical padding.
### Video Highlight Module
- Title in headline-sm, inline duration label in secondary. Container uses rounded.sm with border #d5d5d6 or clean edge; no shadow.
### Speakers Grid
- 4–5 tiles per row at desktop. Each tile is a card using rounded.sm and md gaps, names set in headline-xs, roles in body-md.
### Three-Up CTA Strip
- "Buy tickets / Become a speaker / Become a partner." Each block uses headline-xs, a short line of body-md, and a primary pill button. Use md gaps between blocks.
### Newsletter Subscribe Bar
- One input and submit aligned on a single row. Input height 48px with rounded.full if styled as a chip; messages in body-md.
### Footer Sitemap
- Multi-column link lists in body-md with sm vertical spacing; social links grouped as inline items.

## Do's and Don'ts

- Do use #0b131c on #ffffff for all primary text; reserve #7846dd for accents and actions.
- Do keep buttons at 48px height with full-radius pills; space them using sm or md gaps.
- Do structure sections with lg or xl outer padding and md inner spacing for readable rhythm.
- Don't introduce drop shadows; use #9f70fc borders or spacing to separate elements.
- Don't mix additional fonts; if Manrope is unavailable, swap to Inter or Plus Jakarta Sans consistently.
- Don't create competing CTAs in the same region; if a secondary action is required, place it away from the primary pill.

## Agent Prompt Guide

Quick color reference
- Text: #0b131c
- Background: #ffffff
- Border: #9f70fc (light accents) / #d5d5d6 (utility)
- Accent: #7846dd

1) Build the hero
- Container on #ffffff with xl (102px) top padding.
- H1 in Manrope 600 at 76.8px, line-height 1, color #0b131c.
- Meta row in Manrope 400 at 16px, color #62656b, spaced with xs (12px).
- Primary button 48px height, padding 18px 21px, pill radius 9999px, background #0b131c, text #ffffff. Place lg (64px) below the headline.

2) Floating capsule nav
- Fixed container with background #ffffff and radius 9999px.
- Inside, links in Manrope 600 16px #0b131c with sm (24px) horizontal padding between items.
- Right-aligned primary button as above.

3) KPI band
- Three columns with headline-md numbers (38.4px, 600, #0b131c) and body-md labels (16px, #62656b).
- Use md (44px) vertical padding and lg (64px) column gaps; no shadows.

4) Card grid (speakers or highlights)
- Each card: background #ffffff, radius 18.4px, padding 23.04px 25.6px 25.6px, no shadow.
- Title in Manrope 600 18px #0b131c, body in 16px #62656b. Grid gaps md (44px).

## Similar Brands

- Web Summit: similarly sparse white canvas and bold sans headlines; uses more color bands and gradients than SuperAI's restrained palette.
- Collision: strong numeric KPIs and speaker grids; denser backgrounds and photographic texture compared to SuperAI's minimal approach.
- Slush: heavy typographic hero and event focus; darker theme and bolder graphic treatments versus SuperAI's light, airy presentation.
- NVIDIA GTC: event modules and multi-track content; more enterprise styling and denser navigation, while SuperAI keeps a simpler, capsule-led UI.
- TechCrunch Disrupt: speaker-first layout with clean grids; higher use of imagery and TC green where SuperAI stays near-monochrome with a violet accent.

More like this

Browse AI →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 9 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 9 minutes ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 2 hours ago
openlayer.com
Openlayer About AI
Openlayer About
A high-contrast hero dominates with a black card, elegant serif headline, and a single purple CTA, establishing a clear hierarchy and sleek…
About · 3 hours ago