exa.ai website design: fonts, colors and UI patterns

8 featured captures, observed fonts including Abc Diatype, Inter, Suisse Intl, 16 prominent colors from exa.ai, with sourced design evidence from Fudge.

How is exa.ai designed? Show me the visual system I can use as a reference.

Captured pages

Overview

exa.ai presents a mixed light and dark surface treatment in the captured pages. The system is anchored by #ffffff, #000000, and #faf9f7, with typography led by Abc Diatype, Inter, Suisse Intl, Times, Abc Arizona Flare Unlicensed, Abc Arizona Flare, Applesystem, Geist Mono, Iowan Old St Bt, and Font. The guide below names reusable design roles only where the captured evidence supports them.

The reference set uses representative captured pages. It is a design reference, not a claim about the site's private source code or a complete responsive specification.

Design tokens

The token names are practical labels for the recorded values. They are not claims about the source site's variable names.

Colors

tokenvalueobserved use
color.text#fffffftext on page content
color.text#000000text on page content
color.surface#faf9f7surface on page content
color.surface#181815surface on page content
color.text#1f40edtext on page content in the nav
color.surface#f5f5f5surface on page content in the main
color.surface#fafafasurface on page content
color.border#e5e7ebborder on page content in the nav
color.text#111827text on page content
color.text#374151text on page content in the nav
color.border#e7ecf0border on page content in the nav
color.text#333333text on page content in the main

Typography

tokenfont familysizeweightline heightletter spacingobserved use
type.body-16pxAbc Diatype16px40024pxnormal<body>, <div>, <div> in the nav, <nav> in the nav, <ul> in the nav, <div> in the main, <main> in the main, <section> in the main, <img> in the main, <html>, <section>, <img>, <div> in the button, <button> in the button, <a>, <svg>, <form>, <a> in the main, and <div> in the footer
type.body-16pxInter16px40024pxnormal<div> in the nav and <nav> in the nav
type.body-16pxSuisse Intl16px40024pxnormal<div> in the footer, <li> in the footer, and <ul> in the footer
type.body-16pxTimes16px40024pxnormal<div> in the footer and <div>
type.body-14pxApplesystem14px400normalnormal<div>
type.body-18pxAbc Diatype18px40028.05px-0.18px<p> in the main
type.utility-12pxGeist Mono12px40018.6pxnormal<div>
type.body-14pxAbc Diatype14px50020pxnormal<svg> in the button, <div> in the button, <div>, <a>, and <button> in the button
type.display-41.6pxAbc Arizona Flare41.6px40045.76px-1.248px<h2>
type.body-14pxAbc Diatype14px40022.75px-0.28px<p>
type.body-16pxAbc Diatype16px40022.4px-0.32px<p>
type.body-15pxIowan Old St Bt15px40022.5px-0.3px<p>
type.display-76.8pxAbc Arizona Flare Unlicensed76.8px30076.8px-3.072px<h1> in the footer
type.display-36pxAbc Arizona Flare Unlicensed36px50040px-1.44px<h2>
type.body-15pxAbc Diatype15px40024pxnormal<div> in the nav and <a> in the nav
type.body-14pxAbc Diatype14px40020px-0.28px<span>
type.body-18pxAbc Diatype18px40027px-0.18px<p>
type.body-28pxAbc Arizona Flare28px40033.6px-0.84px<blockquote> in the main
type.body-15pxAbc Diatype15px40021px-0.3px<span> in the nav, <span>, and <p> in the main
type.display-51pxAbc Arizona Flare51px40056.1px-1.53px<h1>

Spacing

valuepropertyobserved element
24pxpadding-rightpage content
24pxpadding-leftpage content
0px 212.5pxmarginpage content
212.5pxmargin-rightpage content
212.5pxmargin-leftpage content
0px 24pxpaddingpage content
112px 0pxpaddingpage content
112pxpadding-toppage content

Shape and depth

The captured pages use 0px none 6px, 0px none 2px, 0px 0px 1px 1px solid 0px, 0px none 0px 0px 12px 12px, 0px none 8px, 0px none 4px, 1px solid 10px, and 1px solid 8px border treatments. Recorded gradients include linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)) and linear-gradient(rgba(168, 211, 240, 0.55), rgba(168, 211, 240, 0.55)). Recorded shadows include rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 4px 12px 0px, and rgba(0, 0, 0, 0.01) 0px 68px 27px 0px, rgba(0, 0, 0, 0.02) 0px 38px 23px 0px, rgba(0, 0, 0, 0.04) 0px 17px 17px 0px, rgba(0, 0, 0, 0.04) 0px 4px 9px 0px.

Colors

The visual system is mixed light and dark surface treatment. Surface colors include #faf9f7, #181815, and #f5f5f5. Text colors include #ffffff, #000000, and #1f40ed. Keep image-derived colors separate from interface colors.

Typography

The captured type system uses Abc Diatype, Inter, Suisse Intl, Times, Applesystem, Geist Mono, Abc Arizona Flare, Iowan Old St Bt, and Abc Arizona Flare Unlicensed. The table records measured size, weight, leading, and tracking where available; it does not establish licensing or a complete fallback stack.

Layout

The captured pages use values such as 24px, 24px, 0px 212.5px, 212.5px, and 212.5px for padding and margin. These are measured usages, not a resolved scale. The available evidence does not establish container widths, grid rules, or breakpoints.

Visual language

The captured visual language is mixed light and dark surface treatment. Surface treatment centers on #faf9f7, #181815, #f5f5f5, and #fafafa. Depth is supported by the returned gradients and shadows.

Components and states

The captured pages include repeated styling on <div>, <body>, <nav>, <ul>, <h3>, <a>, <li>, and <main> elements. The evidence does not identify reusable component boundaries or interaction states. Treat loading, focus, hover, pressed, error, and disabled states as implementation work to validate rather than as captured facts.

Responsive behavior

The captured token set does not establish breakpoint values or mobile behavior. Validate stacking, navigation changes, image treatment, and type scaling against the representative captures before implementing a responsive adaptation.

Practical implementation guidance

  • Preserve the mixed light/dark surface relationship and the measured type hierarchy before adding decorative treatment.
  • Start from the returned typography, spacing, color, and border values; name any new scale or semantic role as an adaptation rather than as a source fact.
  • Keep the captured font families separate from licensing decisions.
  • Use screenshots to validate component anatomy, responsive behavior, focus treatment, and motion before shipping.
  • Avoid introducing gradients or shadows beyond the captured treatment; the returned evidence includes those treatments.

Scope note

The guide uses representative captured pages. The evidence supports the values and observations above; it does not establish component semantics, interaction states, motion timing, breakpoint rules, font licensing, or a complete source stylesheet.

Colors

  • #ffffff
  • #000000
  • #faf9f7
  • #181815
  • #1f40ed
  • #f5f5f5
  • #fafafa
  • #e5e7eb
  • #111827
  • #374151
  • #e7ecf0
  • #333333
  • #4b5563
  • #fdfdfd
  • #eef8ff
  • #675e56

Typography captured from exa.ai

Related design patterns

More website design guides

Browse website design guides by pattern and website.