Self-host OFL fonts; add Newsreader Italic editorial accent

- Bundle Doto, Geist, Geist Mono, Newsreader (all SIL OFL 1.1) in fonts/open/;
  drop the Google Fonts CDN link so the system is fully self-contained and offline-reproducible.
- Add --f-editorial (Newsreader Italic) as a page-level-only editorial accent.
  Reusable components stay strictly sans-serif (Geist); the italic only appears
  in showcase / marketing / page-level HTML, never inside a component.
- SPEC.md & DESIGN.md: codify the page-level-vs-component rule for the editorial italic.
- CI (quality.yml): switch the font guard to an OFL allowlist + require license files,
  so proprietary fonts are still rejected while the audited open set is permitted.
This commit is contained in:
秉寒 2026-06-11 01:11:57 +08:00
parent 2c0e85aad1
commit 1c0ee27bc9
21 changed files with 465 additions and 84 deletions

View File

@ -23,12 +23,24 @@ jobs:
test -f css/nothing-ui.css
test -f js/nothing-ui.js
test -f docs/preview.png
- name: Reject proprietary font files
- name: Verify bundled open fonts
run: |
if find . -type f \( -iname '*.otf' -o -iname '*.ttf' -o -iname '*.woff' -o -iname '*.woff2' \) | grep -q .; then
echo "Proprietary or bundled font files must not be committed."
expected_fonts='
./fonts/open/Doto-ROND-wght.ttf
./fonts/open/Geist-Regular.ttf
./fonts/open/Geist-SemiBold.ttf
./fonts/open/GeistMono-Regular.ttf
./fonts/open/GeistMono-Medium.ttf
./fonts/open/Newsreader-Italic.ttf'
actual_fonts="$(find . -type f \( -iname '*.otf' -o -iname '*.ttf' -o -iname '*.woff' -o -iname '*.woff2' \) | sort)"
if [ "$actual_fonts" != "$(printf '%s\n' "$expected_fonts" | sed '/^$/d' | sort)" ]; then
echo "Font files must match the audited SIL OFL allowlist."
exit 1
fi
test -f fonts/open/OFL-Doto.txt
test -f fonts/open/OFL-Geist.txt
test -f fonts/open/OFL-GeistMono.txt
test -f fonts/open/OFL-Newsreader.txt
- name: Reject local-only links in public pages
run: |
if grep -R -n -E 'localhost:[0-9]+|file:///Users/' README.md index.html demo.html SPEC.md; then

3
.gitignore vendored
View File

@ -1,4 +1,5 @@
# Nothing's fonts are PROPRIETARY — never commit them to a public repo.
# Proprietary font files placed directly in fonts/ must never be committed.
# Audited SIL OFL files live in fonts/open/ and are intentionally tracked.
fonts/*.otf
fonts/*.ttf
fonts/*.woff

View File

@ -4,6 +4,10 @@ All notable changes to this project will be documented here.
## [Unreleased]
- Bundled Doto, Geist, Geist Mono, and Newsreader Italic for consistent offline rendering.
- Restored a restrained editorial italic role for brand lines and pull quotes.
- Updated typography documentation and CI font licensing checks.
## [1.0.0] - 2026-06-10
- Added 40+ zero-dependency UI components.

View File

@ -5,7 +5,7 @@
> **如何使用本文档**
> - 给 AIClaude / Gemini 等)生成或修改界面前,请**完整读本文件**;所有视觉数值取自下方 token不要手写裸值产出后用文末 Checklist 自检。
> - 本文件刻意写得自洽、可移植:可作为蓝本交给设计型模型(如 Gemini去**重新设计/扩展规范**,再把结果交给实现型模型(如 Claude落地为代码。改 token 即可全局改皮。
> - 参考来源:官网 `us.nothing.tech`、创意社区 `playground.nothing.tech`、社区 skill `dominikmartn/nothing-design`Nothing 的专有字体Ndot / NType82 / LatteraMono无法商用加载下文给出等价的开源替代
> - 参考来源:官网 `us.nothing.tech`、创意社区 `playground.nothing.tech`、社区 skill `dominikmartn/nothing-design`公开版本内置经过 SIL OFL 1.1 授权的开源字体,不依赖 Nothing 的专有字体文件
---
@ -15,7 +15,7 @@
这是开发者工具 / Agent 系列的设计语言。界面应当**克制、工业、可信赖**——不是消费玩具。它的气质来自三处张力Swiss/grotesque 排版的秩序、点阵dot-matrix的科技复古、以及大量负空间带来的从容。
调性关键词:**单色 monochrome · 圆点点阵 round-dot · 无衬线工业排版 grotesque · 工业极简 · 大量留白 · 机械式精确**。
调性关键词:**单色 monochrome · 圆点点阵 round-dot · 无衬线工业排版 grotesque · 克制的编辑性斜体 · 工业极简 · 大量留白 · 机械式精确**。
当某个细节没被本规范覆盖时,按这句话裁决:**安静、精确、信息优先。**
@ -66,34 +66,34 @@
## 3 · 字体 / Typography
四种角色,各司其职。**两条字体路线**(A) **真字体**——最正统,本地/自用;(B) **开源 fallback**——公开发布用。CSS 用 `@font-face` 先声明真字体、再在 token 里把开源字体放进 fallback于是 `fonts/` 里有真字体就用真字体、没有就自动降级到开源(同一套代码两用)
五种角色,各司其职。公开版本把字体与许可证一起放在 `fonts/open/`,克隆后无需联网即可保持一致呈现
| 角色 | (A) 真字体(专有·本地)| (B) 开源 fallback公开发布| 用途 |
|---|---|---|---|
| **点阵 Display** | **NDot57 / NDot55** | **Doto**`ROND` 轴=100 → 圆点非方块)| 英雄数字、品牌字、glyph、计时器、独立数字 |
| **UI / 正文** | **NType82-Regular/Headline** | **Helvetica Neue / Arial**(中性 grotesque勿用 Geist| 正文、副文、UI 文案 |
| **Mono / Data** | **NType82 Mono / LetteraMonoLL** | **Geist Mono** | 标签(大写)、数据、代码、导航、时间戳 |
| **Headline 标题** | **NType82-Headline** | **Helvetica Neue / Arial**600 字重)| 卡片标题、弹窗标题、营销/编辑标题 |
| 角色 | 开源字体 | 用途 |
|---|---|---|
| **点阵 Display** | **Doto**`ROND` 轴=100 → 圆点非方块)| 英雄数字、品牌字、glyph、计时器、独立数字 |
| **UI / 正文** | **Geist** | 正文、副文、UI 文案 |
| **Mono / Data** | **Geist Mono** | 标签(大写)、数据、代码、导航、时间戳 |
| **Headline 标题** | **Geist SemiBold** | 卡片标题、弹窗标题、功能标题 |
| **Editorial Accent** | **Newsreader Italic** | 品牌短句、pull quote、少量表达性时刻 |
> **不要用衬线(重要)**Nothing 的真实系统**没有任何衬线字体**——只有 NDot点阵 NType82grotesque Lettera Mono。"编辑性衬线标题"是社区仿品最常见的破绽,已从本规范移除。标题统一走 NType82-HeadlinefallbackHelvetica Neue 600。`--f-head` 即此角色 token
> **斜体的边界(重要)**Newsreader Italic 是表达性口音,不是 UI 基础字体。判定轴 = **页面级 vs 组件级**:它**只允许出现在展示 / 营销 / 页面级 HTML**hero 句、版块引言、pull quote每屏至多一句**任何可复用组件内部绝不出现**——按钮、输入、卡片、表格、导航、弹窗、chip、列表、仪表盘 tile 等一律无衬线。换言之,用本库搭出来的组件默认就是无衬线的;斜体是页面作者在组件**之外**点缀的口音,不进组件内部。长正文仍用 Geist / Geist Mono
> **真字体与版权**NDot、NType82 与 LetteraMonoLL 属于专有字体资产。公开版只使用开源 fallback如需真字体必须从权利方取得适当授权。不要从非官方镜像获取、提交或再分发这些字体
> **字体与版权**Doto、Geist、Geist Mono、Newsreader 均以 SIL OFL 1.1 发布许可证副本随仓库提供。NDot、NType 与 Lettera 等专有资产不包含在项目中,也不得从非官方镜像获取、提交或再分发
**字体加载**
```css
/* (A) 真字体:本地放 fonts/@font-face 声明 */
@font-face{font-family:'NDot';src:url('fonts/Ndot57-Regular.otf')}
@font-face{font-family:'NType82';src:url('fonts/NType82-Regular.otf')}
@font-face{font-family:'NType82 Mono';src:url('fonts/NType82Mono-Regular.otf')}
/* (B) 开源 fallbackGoogle Fonts */
@import url('https://fonts.googleapis.com/css2?family=Doto:ROND,wght@100,400;100,500;100,700;100,900&family=Geist+Mono:wght@400;500&display=swap');
/* token 把两者串成 fallback 链 */
--f-display:'NDot','Doto',monospace;
--f-ui:'NType82','Helvetica Neue',Arial,sans-serif;
--f-mono:'NType82 Mono','Geist Mono',ui-monospace,monospace;
--f-head:'NType82','Helvetica Neue',Arial,sans-serif; /* 标题:配 font-weight:600 取 NType82-Headline */
@font-face{font-family:'Doto';src:url('../fonts/open/Doto-ROND-wght.ttf')}
@font-face{font-family:'Geist';src:url('../fonts/open/Geist-Regular.ttf');font-weight:400}
@font-face{font-family:'Geist';src:url('../fonts/open/Geist-SemiBold.ttf');font-weight:600}
@font-face{font-family:'Geist Mono';src:url('../fonts/open/GeistMono-Regular.ttf')}
@font-face{font-family:'Newsreader';src:url('../fonts/open/Newsreader-Italic.ttf');font-style:italic}
--f-display:'Doto',monospace;
--f-ui:'Geist','Helvetica Neue',Arial,sans-serif;
--f-mono:'Geist Mono',ui-monospace,monospace;
--f-head:'Geist','Helvetica Neue',Arial,sans-serif;
--f-editorial:'Newsreader',Georgia,serif;
```
真 NDot 本身就是圆点,无需 ROND 轴;仅当降级到 Doto fallback 时需 `body{font-variation-settings:'ROND' 100}`(只设 ROND、不动字重,无副作用)。
`body{font-variation-settings:'ROND' 100}` 固定 Doto 的圆点形态(只设 ROND、不动字重
**Doto 字重铁律**:点阵大字用 **~400500 字重**,相邻圆点才会**分离且圆**;用 700/900 会把圆点糊成一团、在曲线顶端挤出尖角("0" 变尖头)。要"很多小圆点"的点阵感就**别加粗**。
@ -157,7 +157,7 @@ Nothing 的标志性背景:一层**极稀疏的圆点网格**。它的层级
- **滑块 Slider**:细轨 + 圆钮;填充与钮用 `display`(白),不用强调色。
- **分段进度条 Segmented Bar**(招牌):离散方块 + 2px 间隙、方头无圆角;常态填充 `display`**超限**用 `accent`(信号),空槽 `line`;永远配数字读数。
- **仪表盘 Gauge**:细描边圆 + 刻度环tick+ **居中** Doto 数字,`%` 紧跟其后(不换行)。常态弧用 `display`;仅当表达告警时用 accent。
- **卡片 Card**磨砂玻璃、8px 圆角、24px 内边距、**无边框无阴影**,悬停 `translateY(-2px)`。标题用 NType82-Headline`--f-head` + 600
- **卡片 Card**磨砂玻璃、8px 圆角、24px 内边距、**无边框无阴影**,悬停 `translateY(-2px)`。标题用 Geist SemiBold`--f-head` + 600
- **数据表 Table**Geist Mono数字右对齐、文字左对齐**无斑马纹**;活动行 `raised` 底 + 左侧 2px accent 指示条。
- **导航 / Tabs / 分页**:标签 Geist Mono 大写;当前态 = `display`(白)下划线 / 反色,不用强调色。
- **日历 Calendar**:日期为 Doto 点阵数字;今日 = 反色填充;选中 = `display` 描边。
@ -171,13 +171,13 @@ Nothing 的标志性背景:一层**极稀疏的圆点网格**。它的层级
## 8 · 反模式 / Don'ts绝不
**衬线字体Nothing 无衬线,是仿品最大破绽)** · 渐变 · 阴影 / 模糊投影 · 骨架屏(用 `[LOADING…]` 或分段 spinner· toast 弹窗(用内联状态)· 吉祥物 / 哭脸插画 / 多段空状态文案 · 表格斑马纹 · 填充图标 / 多色图标 / emoji 当 UI · 视差 / 滚动劫持 · 弹簧回弹缓动 · 多种字重堆层级 · 把强调色当装饰、或用强调色铺满控件 · 把波点叠到前景内容上 · 卡片描边 + 圆角 >8px · 在浅底上用高明度色作文字/边框。
**在功能 UI 中使用衬线、或滥用编辑性斜体** · 渐变 · 阴影 / 模糊投影 · 骨架屏(用 `[LOADING…]` 或分段 spinner· toast 弹窗(用内联状态)· 吉祥物 / 哭脸插画 / 多段空状态文案 · 表格斑马纹 · 填充图标 / 多色图标 / emoji 当 UI · 视差 / 滚动劫持 · 弹簧回弹缓动 · 多种字重堆层级 · 把强调色当装饰、或用强调色铺满控件 · 把波点叠到前景内容上 · 卡片描边 + 圆角 >8px · 在浅底上用高明度色作文字/边框。
---
## 9 · 平台映射 / Platform
- **Web**Google Fonts + CSS 变量type 用 `rem`、间距/边框用 `px``prefers-color-scheme` 或 class 切换明暗。
- **Web**本地 `@font-face` + CSS 变量type 用 `rem`、间距/边框用 `px``prefers-color-scheme` 或 class 切换明暗。
- **原生桌面SwiftUI**bundle 字体;`Color` 扩展按 token`@Environment(\.colorScheme)` 切模式。
- **Markdown 产物**:无 CSS——克制标题层级、用表格 + 水平线分隔、emoji 极度克制、等宽呈现数据。
@ -189,7 +189,7 @@ Nothing 的标志性背景:一层**极稀疏的圆点网格**。它的层级
- [ ] 黑灰白为主;强调色一屏屈指可数,只在"信号"处
- [ ] 控件激活态用黑白反色,不用强调色(开关 ON = 白轨)
- [ ] 结构用 hairline + 留白,零阴影 / 零渐变
- [ ] 独立数字 + 其 `%`像素 Doto英雄字 Doto/NDot、标题 NType82-Headline无衬线**禁衬线**)、正文 Helvetica、标签数据 Geist Mono
- [ ] 独立数字 + 其 `%` Doto标题与正文用 Geist、标签数据用 Geist MonoNewsreader Italic 仅用于一句式品牌文案或引语
- [ ] Doto 字重 ≤500、`ROND=100`(圆点分离且圆,"0" 不尖头)
- [ ] 图标为 9×9 完整圆点(非 mask 裁切)、比例可缩放(`--gs`);标点为圆点单元
- [ ] 背景波点:稀疏 ~120px、**局部反差取色**`mix-blend-mode:difference`、`z-index:-1` 在卡片之下)、卡片遮蔽(不叠前景)

View File

@ -24,10 +24,6 @@ A zero-dependency, Nothing-inspired UI system for the web. It combines monochrom
## Quick Start
```html
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Doto:ROND,wght@100,400;100,500;100,700;100,900&family=Geist+Mono:wght@400;500&display=swap"
>
<link rel="stylesheet" href="css/nothing-ui.css">
<body data-theme="dark">
@ -52,6 +48,7 @@ Switch themes on any ancestor:
│ └── nothing-ui.css Components and layout primitives
├── js/
│ └── nothing-ui.js Theme, controls, and dot-icon rendering
├── fonts/open/ Bundled SIL OFL typefaces and licenses
├── docs/ Repository screenshots
├── index.html Visual component reference
├── demo.html Interactive comparison experience
@ -79,9 +76,9 @@ The 25x25 display uses a circular mask with inactive LED texture, white active c
## Fonts
The public project uses open fallbacks: Doto, Geist Mono, and Helvetica/Arial. Licensed NDot or NType82 files may be added locally as described in [`fonts/README.md`](fonts/README.md).
The repository bundles a self-contained, open-source type system: **Doto** for round-dot display type, **Geist** for UI and headlines, **Geist Mono** for labels and data, and **Newsreader Italic** for restrained editorial accents.
Proprietary font files are intentionally excluded by `.gitignore` and must never be committed or redistributed with this project.
All bundled font files are licensed under the SIL Open Font License 1.1. Sources and license copies are listed in [`fonts/README.md`](fonts/README.md). Proprietary Nothing font files remain excluded and must not be committed or redistributed.
## Contributing

26
SPEC.md
View File

@ -13,7 +13,6 @@ The keywords **MUST**, **MUST NOT**, **NEVER**, **ALWAYS** are normative. Violat
<!doctype html>
<html lang="en" data-theme="dark"> <!-- or "light"; dark is the default -->
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Doto:ROND,wght@100,400;100,500;100,700;100,900&family=Geist+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="css/nothing-ui.css">
</head>
<body>
@ -24,7 +23,7 @@ The keywords **MUST**, **MUST NOT**, **NEVER**, **ALWAYS** are normative. Violat
```
- **MUST** load `css/nothing-ui.css` (it imports `css/tokens.css`). **MUST NOT** copy token values into inline styles or a second stylesheet.
- **MUST** keep the Google Fonts `<link>` exactly as above — Doto requires the `ROND` axis in the request URL or its dots render square.
- **MUST** keep the bundled `fonts/open/` directory beside the CSS. `tokens.css` loads every typeface locally, including Doto's round-dot variable font.
- Theme switching is **only** `data-theme="dark" | "light"` on `<html>` (or a region). **MUST NOT** invent a third theme or override token values per-page.
- **MUST NOT** add any other CSS framework, reset, or font (no Tailwind, no Bootstrap, no Inter/Roboto/Instrument Serif).
@ -35,7 +34,7 @@ The keywords **MUST**, **MUST NOT**, **NEVER**, **ALWAYS** are normative. Violat
1. **Monochrome first.** Black / grey / white carry the entire interface. ≤4 greys per screen, all from tokens.
2. **The accent is a signal, never decoration.** `--accent` (Nothing red `#D71921`) appears **only** for: needs-decision counts, `NEEDS INPUT` states, over-limit values, live/recording dots, notification badges, and the accent swatch itself. A typical screen shows **02** red elements. If you are about to use red on a button, tab, link, slider, or hover — stop; that is wrong.
3. **Active states invert black↔white, they do not colorize.** Primary buttons, switches ON, selected chips/tabs/pagination/calendar-today, stepper current, progress fills, gauges: all use `--display` on `--bg` (or inverted). NEVER the accent.
4. **No serif typeface, anywhere.** Nothing's system has none. Headlines use `--f-head` (grotesque, weight 600). Newsreader/Instrument Serif/Georgia are all forbidden.
4. **Functional UI stays sans-serif; the editorial italic is a page-level accent, never a component.** Headlines use `--f-head` (grotesque, weight 600). `--f-editorial` (Newsreader Italic) is the sole serif exception, allowed **only in showcase / marketing / page-level HTML** — a hero line, a section intro, a pull quote: at most one short expressive sentence per view. It **MUST NOT appear inside any reusable component** (button, input, card, table, nav, modal, chip, list, dashboard tile, …). Components ship sans-serif only, so anything you build *from* the library is serif-free by default; the italic is something a page author adds *around* components, not inside them. Never use it for controls, data, or long body copy.
5. **No shadows, no gradients.** Depth comes from 1px hairlines (`--line`/`--line-2`), whitespace, and frosted glass (`backdrop-filter: blur` is material, not shadow — it is allowed). `box-shadow` is forbidden (sole exception: the `0 0 0 2px` ring on stacked avatars, which is a border substitute).
6. **Cards are borderless frosted glass.** `background: var(--glass)` + `backdrop-filter: blur(1216px)`, radius `--r-md` (8px), no `border` (a ≤1px `--glass-brd` inner hairline is optional), hover = `translateY(-2px)`, never a shadow or border change.
7. **Every dot is a complete circle.** Dot-matrix icons are CSS-grid cells with `border-radius: 50%`. NEVER build dot icons with `mask`, `clip-path`, or dotted borders — they clip dots into partial circles.
@ -71,19 +70,20 @@ The keywords **MUST**, **MUST NOT**, **NEVER**, **ALWAYS** are normative. Violat
Rules: accent fill stays the same red in both themes; the **foreground** variant brightens on dark (`#FF4438`) and darkens on light (`#C2141C`). Status colors darken in light mode. Body text is soft (`#1C1C1C`), never pure black.
### 2.3 Typography — four roles, two routes
### 2.3 Typography — five roles, bundled locally
| Role | Token | Authentic (local, licensed) | Open fallback (shipped) | Used for |
|---|---|---|---|---|
| Dot display | `--f-display` | NDot57 | **Doto** (`ROND` 100, weight ≤500) | wordmark, hero/standalone numerals, glyphs, clocks, module numbers |
| UI / body | `--f-ui` | NType82 | **Helvetica Neue / Arial** | body copy, control labels |
| Mono / data | `--f-mono` | NType82 Mono | **Geist Mono** | UPPERCASE labels (`.08.12em` tracking), data, code, table cells, timestamps |
| Headline | `--f-head` | NType82 Headline (600) | **Helvetica Neue / Arial 600** | card/dialog/section titles |
| Role | Token | Bundled family | Used for |
|---|---|---|---|
| Dot display | `--f-display` | **Doto** (`ROND` 100, weight ≤500) | wordmark, hero/standalone numerals, glyphs, clocks, module numbers |
| UI / body | `--f-ui` | **Geist** | body copy, control labels |
| Mono / data | `--f-mono` | **Geist Mono** | UPPERCASE labels (`.08.12em` tracking), data, code, table cells, timestamps |
| Headline | `--f-head` | **Geist SemiBold** | card/dialog/section titles |
| Editorial accent | `--f-editorial` | **Newsreader Italic** | short brand lines and pull quotes only |
- Every **standalone number** (calendar dates, page numbers, stepper indices, counts, percentages, gauge readings) **MUST** use `--f-display`, including its `%` sign. Letter units (GB, K) stay small `--f-mono`.
- Labels are `--f-mono`, uppercase, 910px, letter-spacing `.08.14em`, color `--secondary`/`--muted`.
- Base body: 11px `--f-mono`, line-height 1.45. `font-variation-settings:'ROND' 100` is set on `body` — do not unset it.
- Proprietary fonts: `@font-face` blocks for NType82 are **commented out** in `tokens.css` (no legally clean file). Drop licensed `.otf`s into `fonts/` and uncomment. NEVER ship them in a public repo; `.gitignore` already excludes them.
- The bundled families are SIL OFL 1.1 fonts. Proprietary NDot/NType assets are not required and MUST NOT be committed.
### 2.4 Geometry & motion
@ -151,12 +151,12 @@ When you need a component this library doesn't have: compose it from tokens + th
- [ ] Zero raw hex / px radii / font names in your markup — tokens only
- [ ] ≤2 red elements on screen, all genuine signals; every active state is black↔white inversion
- [ ] No serif anywhere; standalone numerals (and their `%`) are dot-display; labels are uppercase mono
- [ ] Functional UI is sans-serif; editorial italic appears only in showcase/page-level copy — **never inside a component**; standalone numerals (and their `%`) are dot-display
- [ ] No `box-shadow`, no gradients, no borders on cards; hairlines are 1px token colors
- [ ] Dot field: difference-blend layer behind cards, ~1.3px/~120px, fixed attachment
- [ ] Dot icons are complete circles (grid cells, no masks); 9×9 scaled only via `--gs`
- [ ] Both `data-theme="dark"` and `"light"` verified; dashboards stay dark
- [ ] Hover = opacity/translateY only; easing `ease-in-out`
- [ ] Proprietary fonts not committed (`fonts/*.otf` ignored); Google Fonts link includes `ROND`
- [ ] Only the audited SIL OFL font allowlist is committed; proprietary fonts remain excluded
**Final test:** place your screen next to `index.html`. If a stranger can tell which one wasn't shipped with the library, fix yours.

View File

@ -16,6 +16,7 @@ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
::selection{background:var(--accent);color:var(--accent-ink)}
.label{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}
.fdisplay{font-family:var(--f-display);color:var(--display)} .fui{font-family:var(--f-ui)} .mono{font-family:var(--f-mono)}
.editorial{font-family:var(--f-editorial);font-style:italic}
.muted{color:var(--secondary)} .faint{color:var(--muted)}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.ico.sm{width:16px;height:16px}
@ -88,6 +89,10 @@ h4.sub:first-of-type{margin-top:0}
.glyphset{font-family:var(--f-display);color:var(--secondary);font-size:13px;line-height:1.9;letter-spacing:.12em;word-break:break-all;margin-top:10px}
.weights{display:flex;gap:18px;margin-top:14px;color:var(--secondary);font-family:var(--f-ui);font-size:13px}
.weights b{color:var(--primary)}
.editorial-specimen{font-family:var(--f-editorial);font-style:italic;font-weight:400;font-size:30px;line-height:1.05;
color:var(--display);letter-spacing:-.025em;max-width:13ch}
.editorial-note{font-family:var(--f-mono);font-size:8px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);margin-top:8px;max-width:32ch}
/* 03 icons */
.icogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;color:var(--primary)}

View File

@ -1,16 +1,11 @@
/* nothing-ui · tokens edit here to re-skin globally.
Authentic Nothing fonts are loaded from ../fonts/ if present (proprietary, NOT shipped);
open fallbacks (Doto/Geist Mono) are pulled via the <link> in index.html. */
/* === Authentic Nothing typefaces (local). PROPRIETARY — local use only; the public build ships open substitutes (Doto/Geist Mono) and omits these files. === */
@font-face{font-family:'NDot';src:url('../fonts/Ndot57-Regular.otf') format('opentype');font-weight:400;font-display:swap}
/* NType82 (UI/headline) intentionally commented out: no legally-clean file on hand.
The open fallback Helvetica Neue/Arial (a real grotesque) renders correctly.
Obtain a licensed NType82-Regular.otf + NType82-Headline.otf, drop them in ../fonts/,
then UNCOMMENT to get the authentic face. (Do NOT use the xeji01 mirror that file is a mislabeled serif.) */
/* @font-face{font-family:'NType82';src:url('../fonts/NType82-Regular.otf') format('opentype');font-weight:400;font-display:swap} */
/* @font-face{font-family:'NType82';src:url('../fonts/NType82-Headline.otf') format('opentype');font-weight:600;font-display:swap} */
@font-face{font-family:'NType82 Mono';src:url('../fonts/NType82Mono-Regular.otf') format('opentype');font-weight:400;font-display:swap}
The bundled type system is fully open source under SIL OFL 1.1. */
@font-face{font-family:'Doto';src:url('../fonts/open/Doto-ROND-wght.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/open/Geist-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/open/Geist-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../fonts/open/GeistMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../fonts/open/GeistMono-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/open/Newsreader-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
:root{
--black:#000; --dark-grey:#171717; --grey:#2A2A2A; --light-grey:#5A5A5A; --white:#FFF;
--bg:#000; --surface:#0C0C0C; --raised:#171717;
@ -18,8 +13,8 @@
--muted:#5A5A5A; --secondary:#8C8C8C; --primary:#EDEDED; --display:#FFF;
--accent:#D71921; --accent-ink:#FFFFFF; --accent-text:#FF4438;
--success:#7BE38A; --warning:#F2C94C; --error:#FF5247;
--f-display:'NDot','Doto',monospace; --f-ui:'NType82','Helvetica Neue',Arial,system-ui,sans-serif; --f-mono:'NType82 Mono','Geist Mono',ui-monospace,monospace;
--f-head:'NType82','Helvetica Neue',Arial,sans-serif;
--f-display:'Doto',monospace; --f-ui:'Geist','Helvetica Neue',Arial,system-ui,sans-serif; --f-mono:'Geist Mono',ui-monospace,monospace;
--f-head:'Geist','Helvetica Neue',Arial,sans-serif; --f-editorial:'Newsreader',Georgia,serif;
--dotbg:rgba(255,255,255,.48);
--glass:rgba(16,16,16,.9); --glass-brd:rgba(255,255,255,.09);
--r-sm:6px; --r-md:8px; --r-pill:999px; --ease:ease-in-out;

View File

@ -4,9 +4,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nothing-ui · interactive demo</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Doto:ROND,wght@100,400;100,500;100,700;100,900&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/nothing-ui.css">
<style>
/* ===== demo chrome ===== */

View File

@ -1,16 +1,14 @@
# Fonts
This library ships with **open-source fallback fonts** only (Doto · Geist Mono, loaded from Google Fonts in `index.html`; UI/headline fall back to Helvetica/Arial). There is **no serif** — Nothing's system has none.
The public build is self-contained and bundles four open-source font families in `fonts/open/`:
If you have properly licensed Nothing typefaces, place the relevant files in this folder:
| Role | Family | Source | License |
|---|---|---|---|
| Dot display | Doto | [Google Fonts](https://github.com/google/fonts/tree/main/ofl/doto) | SIL OFL 1.1 |
| UI and headline | Geist | [Google Fonts](https://github.com/google/fonts/tree/main/ofl/geist) | SIL OFL 1.1 |
| Mono and data | Geist Mono | [Google Fonts](https://github.com/google/fonts/tree/main/ofl/geistmono) | SIL OFL 1.1 |
| Editorial accent | Newsreader Italic | [Google Fonts](https://github.com/google/fonts/tree/main/ofl/newsreader) | SIL OFL 1.1 |
```
Ndot57-Regular.otf
NType82-Regular.otf
NType82-Headline.otf
NType82Mono-Regular.otf
```
`css/tokens.css` loads these files locally, so the component reference works offline and renders consistently after cloning. Newsreader Italic is intentionally limited to brand lines, pull quotes, and other expressive moments; functional UI remains sans-serif.
`css/tokens.css` declares NDot and NType82 Mono. The NType82 UI/headline declarations remain commented out until licensed files are supplied; follow the comments in that file to enable them.
**These fonts are proprietary to Nothing.** They are git-ignored on purpose. Do not commit, redistribute, or obtain them from unofficial mirrors. Acquire an appropriate license from the rights holder.
The license text for each family is stored beside the font files. Proprietary NDot, NType, or Lettera files are not part of this project. Do not commit, redistribute, or obtain those assets from unofficial mirrors.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

93
fonts/open/OFL-Doto.txt Normal file
View File

@ -0,0 +1,93 @@
Copyright 2024 The Doto Project Authors (https://github.com/oliverlalan/Doto)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

93
fonts/open/OFL-Geist.txt Normal file
View File

@ -0,0 +1,93 @@
Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

View File

@ -0,0 +1,93 @@
Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

View File

@ -0,0 +1,93 @@
Copyright 2020 The Newsreader Project Authors (http://github.com/productiontype/Newsreader)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

View File

@ -4,10 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nothing-ui — a Nothing-inspired component library</title>
<!-- open fallback fonts; authentic NDot/NType82 load from /fonts if you add them (see fonts/README) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Doto:ROND,wght@100,400;100,500;100,700;100,900&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- Bundled open-source fonts: Doto + Geist + Geist Mono + Newsreader Italic. -->
<link rel="stylesheet" href="css/nothing-ui.css">
</head>
<body>
@ -87,10 +84,13 @@
<h4 class="sub">Primary · Dot Matrix</h4>
<div class="specimen">Aa</div>
<div class="glyphset">ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&amp;*()_+</div>
<h4 class="sub">Secondary · NType82</h4>
<h4 class="sub">Secondary · Geist</h4>
<div style="font-family:var(--f-ui);font-size:32px;color:var(--display);line-height:1">Aa</div>
<h4 class="sub">Headline · NType82</h4>
<h4 class="sub">Headline · Geist SemiBold</h4>
<div style="font-family:var(--f-head);font-weight:600;font-size:38px;color:var(--display);line-height:1">Headline</div>
<h4 class="sub">Editorial Accent · Newsreader Italic</h4>
<div class="editorial-specimen">Ideas should feel inevitable.</div>
<div class="editorial-note">Brand lines · pull quotes · expressive moments only</div>
</div>
<!-- 03 ICONOGRAPHY -->