# How exa.ai is designed ## 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 | token | value | observed use | | --- | --- | --- | | color.text | `#ffffff` | text on page content | | color.text | `#000000` | text on page content | | color.surface | `#faf9f7` | surface on page content | | color.surface | `#181815` | surface on page content | | color.text | `#1f40ed` | text on page content in the nav | | color.surface | `#f5f5f5` | surface on page content in the main | | color.surface | `#fafafa` | surface on page content | | color.border | `#e5e7eb` | border on page content in the nav | | color.text | `#111827` | text on page content | | color.text | `#374151` | text on page content in the nav | | color.border | `#e7ecf0` | border on page content in the nav | | color.text | `#333333` | text on page content in the main | ### Typography | token | font family | size | weight | line height | letter spacing | observed use | | --- | --- | --- | --- | --- | --- | --- | | type.body-16px | **Abc Diatype** | 16px | 400 | 24px | normal | ``, `
`, `
` in the nav, `