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:
parent
2c0e85aad1
commit
1c0ee27bc9
18
.github/workflows/quality.yml
vendored
18
.github/workflows/quality.yml
vendored
@ -23,12 +23,24 @@ jobs:
|
|||||||
test -f css/nothing-ui.css
|
test -f css/nothing-ui.css
|
||||||
test -f js/nothing-ui.js
|
test -f js/nothing-ui.js
|
||||||
test -f docs/preview.png
|
test -f docs/preview.png
|
||||||
- name: Reject proprietary font files
|
- name: Verify bundled open fonts
|
||||||
run: |
|
run: |
|
||||||
if find . -type f \( -iname '*.otf' -o -iname '*.ttf' -o -iname '*.woff' -o -iname '*.woff2' \) | grep -q .; then
|
expected_fonts='
|
||||||
echo "Proprietary or bundled font files must not be committed."
|
./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
|
exit 1
|
||||||
fi
|
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
|
- name: Reject local-only links in public pages
|
||||||
run: |
|
run: |
|
||||||
if grep -R -n -E 'localhost:[0-9]+|file:///Users/' README.md index.html demo.html SPEC.md; then
|
if grep -R -n -E 'localhost:[0-9]+|file:///Users/' README.md index.html demo.html SPEC.md; then
|
||||||
|
|||||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -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/*.otf
|
||||||
fonts/*.ttf
|
fonts/*.ttf
|
||||||
fonts/*.woff
|
fonts/*.woff
|
||||||
|
|||||||
@ -4,6 +4,10 @@ All notable changes to this project will be documented here.
|
|||||||
|
|
||||||
## [Unreleased]
|
## [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
|
## [1.0.0] - 2026-06-10
|
||||||
|
|
||||||
- Added 40+ zero-dependency UI components.
|
- Added 40+ zero-dependency UI components.
|
||||||
|
|||||||
54
DESIGN.md
54
DESIGN.md
@ -5,7 +5,7 @@
|
|||||||
> **如何使用本文档**
|
> **如何使用本文档**
|
||||||
> - 给 AI(Claude / Gemini 等)生成或修改界面前,请**完整读本文件**;所有视觉数值取自下方 token,不要手写裸值;产出后用文末 Checklist 自检。
|
> - 给 AI(Claude / Gemini 等)生成或修改界面前,请**完整读本文件**;所有视觉数值取自下方 token,不要手写裸值;产出后用文末 Checklist 自检。
|
||||||
> - 本文件刻意写得自洽、可移植:可作为蓝本交给设计型模型(如 Gemini)去**重新设计/扩展规范**,再把结果交给实现型模型(如 Claude)落地为代码。改 token 即可全局改皮。
|
> - 本文件刻意写得自洽、可移植:可作为蓝本交给设计型模型(如 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)的科技复古、以及大量负空间带来的从容。
|
这是开发者工具 / Agent 系列的设计语言。界面应当**克制、工业、可信赖**——不是消费玩具。它的气质来自三处张力:Swiss/grotesque 排版的秩序、点阵(dot-matrix)的科技复古、以及大量负空间带来的从容。
|
||||||
|
|
||||||
调性关键词:**单色 monochrome · 圆点点阵 round-dot · 无衬线工业排版 grotesque · 工业极简 · 大量留白 · 机械式精确**。
|
调性关键词:**单色 monochrome · 圆点点阵 round-dot · 无衬线工业排版 grotesque · 克制的编辑性斜体 · 工业极简 · 大量留白 · 机械式精确**。
|
||||||
|
|
||||||
当某个细节没被本规范覆盖时,按这句话裁决:**安静、精确、信息优先。**
|
当某个细节没被本规范覆盖时,按这句话裁决:**安静、精确、信息优先。**
|
||||||
|
|
||||||
@ -66,34 +66,34 @@
|
|||||||
|
|
||||||
## 3 · 字体 / Typography
|
## 3 · 字体 / Typography
|
||||||
|
|
||||||
四种角色,各司其职。**两条字体路线**:(A) **真字体**——最正统,本地/自用;(B) **开源 fallback**——公开发布用。CSS 用 `@font-face` 先声明真字体、再在 token 里把开源字体放进 fallback,于是 `fonts/` 里有真字体就用真字体、没有就自动降级到开源(同一套代码两用)。
|
五种角色,各司其职。公开版本把字体与许可证一起放在 `fonts/open/`,克隆后无需联网即可保持一致呈现。
|
||||||
|
|
||||||
| 角色 | (A) 真字体(专有·本地)| (B) 开源 fallback(公开发布)| 用途 |
|
| 角色 | 开源字体 | 用途 |
|
||||||
|---|---|---|---|
|
|---|---|---|
|
||||||
| **点阵 Display** | **NDot57 / NDot55** | **Doto**(`ROND` 轴=100 → 圆点非方块)| 英雄数字、品牌字、glyph、计时器、独立数字 |
|
| **点阵 Display** | **Doto**(`ROND` 轴=100 → 圆点非方块)| 英雄数字、品牌字、glyph、计时器、独立数字 |
|
||||||
| **UI / 正文** | **NType82-Regular/Headline** | **Helvetica Neue / Arial**(中性 grotesque;勿用 Geist)| 正文、副文、UI 文案 |
|
| **UI / 正文** | **Geist** | 正文、副文、UI 文案 |
|
||||||
| **Mono / Data** | **NType82 Mono / LetteraMonoLL** | **Geist Mono** | 标签(大写)、数据、代码、导航、时间戳 |
|
| **Mono / Data** | **Geist Mono** | 标签(大写)、数据、代码、导航、时间戳 |
|
||||||
| **Headline 标题** | **NType82-Headline** | **Helvetica Neue / Arial**(600 字重)| 卡片标题、弹窗标题、营销/编辑标题 |
|
| **Headline 标题** | **Geist SemiBold** | 卡片标题、弹窗标题、功能标题 |
|
||||||
|
| **Editorial Accent** | **Newsreader Italic** | 品牌短句、pull quote、少量表达性时刻 |
|
||||||
|
|
||||||
> **不要用衬线(重要)**:Nothing 的真实系统**没有任何衬线字体**——只有 NDot(点阵)+ NType82(grotesque)+ Lettera Mono。"编辑性衬线标题"是社区仿品最常见的破绽,已从本规范移除。标题统一走 NType82-Headline(fallback:Helvetica 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
|
```css
|
||||||
/* (A) 真字体:本地放 fonts/,@font-face 声明 */
|
@font-face{font-family:'Doto';src:url('../fonts/open/Doto-ROND-wght.ttf')}
|
||||||
@font-face{font-family:'NDot';src:url('fonts/Ndot57-Regular.otf')}
|
@font-face{font-family:'Geist';src:url('../fonts/open/Geist-Regular.ttf');font-weight:400}
|
||||||
@font-face{font-family:'NType82';src:url('fonts/NType82-Regular.otf')}
|
@font-face{font-family:'Geist';src:url('../fonts/open/Geist-SemiBold.ttf');font-weight:600}
|
||||||
@font-face{font-family:'NType82 Mono';src:url('fonts/NType82Mono-Regular.otf')}
|
@font-face{font-family:'Geist Mono';src:url('../fonts/open/GeistMono-Regular.ttf')}
|
||||||
/* (B) 开源 fallback:Google Fonts */
|
@font-face{font-family:'Newsreader';src:url('../fonts/open/Newsreader-Italic.ttf');font-style:italic}
|
||||||
@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');
|
--f-display:'Doto',monospace;
|
||||||
/* token 把两者串成 fallback 链 */
|
--f-ui:'Geist','Helvetica Neue',Arial,sans-serif;
|
||||||
--f-display:'NDot','Doto',monospace;
|
--f-mono:'Geist Mono',ui-monospace,monospace;
|
||||||
--f-ui:'NType82','Helvetica Neue',Arial,sans-serif;
|
--f-head:'Geist','Helvetica Neue',Arial,sans-serif;
|
||||||
--f-mono:'NType82 Mono','Geist Mono',ui-monospace,monospace;
|
--f-editorial:'Newsreader',Georgia,serif;
|
||||||
--f-head:'NType82','Helvetica Neue',Arial,sans-serif; /* 标题:配 font-weight:600 取 NType82-Headline */
|
|
||||||
```
|
```
|
||||||
真 NDot 本身就是圆点,无需 ROND 轴;仅当降级到 Doto fallback 时需 `body{font-variation-settings:'ROND' 100}`(只设 ROND、不动字重,无副作用)。
|
`body{font-variation-settings:'ROND' 100}` 固定 Doto 的圆点形态(只设 ROND、不动字重)。
|
||||||
|
|
||||||
**Doto 字重铁律**:点阵大字用 **~400–500 字重**,相邻圆点才会**分离且圆**;用 700/900 会把圆点糊成一团、在曲线顶端挤出尖角("0" 变尖头)。要"很多小圆点"的点阵感就**别加粗**。
|
**Doto 字重铁律**:点阵大字用 **~400–500 字重**,相邻圆点才会**分离且圆**;用 700/900 会把圆点糊成一团、在曲线顶端挤出尖角("0" 变尖头)。要"很多小圆点"的点阵感就**别加粗**。
|
||||||
|
|
||||||
@ -157,7 +157,7 @@ Nothing 的标志性背景:一层**极稀疏的圆点网格**。它的层级
|
|||||||
- **滑块 Slider**:细轨 + 圆钮;填充与钮用 `display`(白),不用强调色。
|
- **滑块 Slider**:细轨 + 圆钮;填充与钮用 `display`(白),不用强调色。
|
||||||
- **分段进度条 Segmented Bar**(招牌):离散方块 + 2px 间隙、方头无圆角;常态填充 `display`,**超限**用 `accent`(信号),空槽 `line`;永远配数字读数。
|
- **分段进度条 Segmented Bar**(招牌):离散方块 + 2px 间隙、方头无圆角;常态填充 `display`,**超限**用 `accent`(信号),空槽 `line`;永远配数字读数。
|
||||||
- **仪表盘 Gauge**:细描边圆 + 刻度环(tick)+ **居中** Doto 数字,`%` 紧跟其后(不换行)。常态弧用 `display`;仅当表达告警时用 accent。
|
- **仪表盘 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 指示条。
|
- **数据表 Table**:Geist Mono;数字右对齐、文字左对齐;**无斑马纹**;活动行 `raised` 底 + 左侧 2px accent 指示条。
|
||||||
- **导航 / Tabs / 分页**:标签 Geist Mono 大写;当前态 = `display`(白)下划线 / 反色,不用强调色。
|
- **导航 / Tabs / 分页**:标签 Geist Mono 大写;当前态 = `display`(白)下划线 / 反色,不用强调色。
|
||||||
- **日历 Calendar**:日期为 Doto 点阵数字;今日 = 反色填充;选中 = `display` 描边。
|
- **日历 Calendar**:日期为 Doto 点阵数字;今日 = 反色填充;选中 = `display` 描边。
|
||||||
@ -171,13 +171,13 @@ Nothing 的标志性背景:一层**极稀疏的圆点网格**。它的层级
|
|||||||
|
|
||||||
## 8 · 反模式 / Don'ts(绝不)
|
## 8 · 反模式 / Don'ts(绝不)
|
||||||
|
|
||||||
**衬线字体(Nothing 无衬线,是仿品最大破绽)** · 渐变 · 阴影 / 模糊投影 · 骨架屏(用 `[LOADING…]` 或分段 spinner)· toast 弹窗(用内联状态)· 吉祥物 / 哭脸插画 / 多段空状态文案 · 表格斑马纹 · 填充图标 / 多色图标 / emoji 当 UI · 视差 / 滚动劫持 · 弹簧回弹缓动 · 多种字重堆层级 · 把强调色当装饰、或用强调色铺满控件 · 把波点叠到前景内容上 · 卡片描边 + 圆角 >8px · 在浅底上用高明度色作文字/边框。
|
**在功能 UI 中使用衬线、或滥用编辑性斜体** · 渐变 · 阴影 / 模糊投影 · 骨架屏(用 `[LOADING…]` 或分段 spinner)· toast 弹窗(用内联状态)· 吉祥物 / 哭脸插画 / 多段空状态文案 · 表格斑马纹 · 填充图标 / 多色图标 / emoji 当 UI · 视差 / 滚动劫持 · 弹簧回弹缓动 · 多种字重堆层级 · 把强调色当装饰、或用强调色铺满控件 · 把波点叠到前景内容上 · 卡片描边 + 圆角 >8px · 在浅底上用高明度色作文字/边框。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 9 · 平台映射 / Platform
|
## 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)` 切模式。
|
- **原生桌面(SwiftUI)**:bundle 字体;`Color` 扩展按 token;`@Environment(\.colorScheme)` 切模式。
|
||||||
- **Markdown 产物**:无 CSS——克制标题层级、用表格 + 水平线分隔、emoji 极度克制、等宽呈现数据。
|
- **Markdown 产物**:无 CSS——克制标题层级、用表格 + 水平线分隔、emoji 极度克制、等宽呈现数据。
|
||||||
|
|
||||||
@ -189,7 +189,7 @@ Nothing 的标志性背景:一层**极稀疏的圆点网格**。它的层级
|
|||||||
- [ ] 黑灰白为主;强调色一屏屈指可数,只在"信号"处
|
- [ ] 黑灰白为主;强调色一屏屈指可数,只在"信号"处
|
||||||
- [ ] 控件激活态用黑白反色,不用强调色(开关 ON = 白轨)
|
- [ ] 控件激活态用黑白反色,不用强调色(开关 ON = 白轨)
|
||||||
- [ ] 结构用 hairline + 留白,零阴影 / 零渐变
|
- [ ] 结构用 hairline + 留白,零阴影 / 零渐变
|
||||||
- [ ] 独立数字 + 其 `%` 用像素 Doto;英雄字 Doto/NDot、标题 NType82-Headline(无衬线,**禁衬线**)、正文 Helvetica、标签数据 Geist Mono
|
- [ ] 独立数字 + 其 `%` 用 Doto;标题与正文用 Geist、标签数据用 Geist Mono;Newsreader Italic 仅用于一句式品牌文案或引语
|
||||||
- [ ] Doto 字重 ≤500、`ROND=100`(圆点分离且圆,"0" 不尖头)
|
- [ ] Doto 字重 ≤500、`ROND=100`(圆点分离且圆,"0" 不尖头)
|
||||||
- [ ] 图标为 9×9 完整圆点(非 mask 裁切)、比例可缩放(`--gs`);标点为圆点单元
|
- [ ] 图标为 9×9 完整圆点(非 mask 裁切)、比例可缩放(`--gs`);标点为圆点单元
|
||||||
- [ ] 背景波点:稀疏 ~120px、**局部反差取色**(`mix-blend-mode:difference`、`z-index:-1` 在卡片之下)、卡片遮蔽(不叠前景)
|
- [ ] 背景波点:稀疏 ~120px、**局部反差取色**(`mix-blend-mode:difference`、`z-index:-1` 在卡片之下)、卡片遮蔽(不叠前景)
|
||||||
|
|||||||
@ -24,10 +24,6 @@ A zero-dependency, Nothing-inspired UI system for the web. It combines monochrom
|
|||||||
## Quick Start
|
## Quick Start
|
||||||
|
|
||||||
```html
|
```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">
|
<link rel="stylesheet" href="css/nothing-ui.css">
|
||||||
|
|
||||||
<body data-theme="dark">
|
<body data-theme="dark">
|
||||||
@ -52,6 +48,7 @@ Switch themes on any ancestor:
|
|||||||
│ └── nothing-ui.css Components and layout primitives
|
│ └── nothing-ui.css Components and layout primitives
|
||||||
├── js/
|
├── js/
|
||||||
│ └── nothing-ui.js Theme, controls, and dot-icon rendering
|
│ └── nothing-ui.js Theme, controls, and dot-icon rendering
|
||||||
|
├── fonts/open/ Bundled SIL OFL typefaces and licenses
|
||||||
├── docs/ Repository screenshots
|
├── docs/ Repository screenshots
|
||||||
├── index.html Visual component reference
|
├── index.html Visual component reference
|
||||||
├── demo.html Interactive comparison experience
|
├── demo.html Interactive comparison experience
|
||||||
@ -79,9 +76,9 @@ The 25x25 display uses a circular mask with inactive LED texture, white active c
|
|||||||
|
|
||||||
## Fonts
|
## 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
|
## Contributing
|
||||||
|
|
||||||
|
|||||||
26
SPEC.md
26
SPEC.md
@ -13,7 +13,6 @@ The keywords **MUST**, **MUST NOT**, **NEVER**, **ALWAYS** are normative. Violat
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en" data-theme="dark"> <!-- or "light"; dark is the default -->
|
<html lang="en" data-theme="dark"> <!-- or "light"; dark is the default -->
|
||||||
<head>
|
<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">
|
<link rel="stylesheet" href="css/nothing-ui.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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** 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.
|
- 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).
|
- **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.
|
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 **0–2** red elements. If you are about to use red on a button, tab, link, slider, or hover — stop; that is wrong.
|
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 **0–2** 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.
|
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).
|
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(12–16px)`, radius `--r-md` (8px), no `border` (a ≤1px `--glass-brd` inner hairline is optional), hover = `translateY(-2px)`, never a shadow or border change.
|
6. **Cards are borderless frosted glass.** `background: var(--glass)` + `backdrop-filter: blur(12–16px)`, 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.
|
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.
|
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 |
|
| Role | Token | Bundled family | Used for |
|
||||||
|---|---|---|---|---|
|
|---|---|---|---|
|
||||||
| Dot display | `--f-display` | NDot57 | **Doto** (`ROND` 100, weight ≤500) | wordmark, hero/standalone numerals, glyphs, clocks, module numbers |
|
| Dot display | `--f-display` | **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 |
|
| UI / body | `--f-ui` | **Geist** | body copy, control labels |
|
||||||
| Mono / data | `--f-mono` | NType82 Mono | **Geist Mono** | UPPERCASE labels (`.08–.12em` tracking), data, code, table cells, timestamps |
|
| Mono / data | `--f-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 |
|
| 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`.
|
- 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, 9–10px, letter-spacing `.08–.14em`, color `--secondary`/`--muted`.
|
- Labels are `--f-mono`, uppercase, 9–10px, 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.
|
- 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
|
### 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
|
- [ ] 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
|
- [ ] ≤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
|
- [ ] 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 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`
|
- [ ] 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
|
- [ ] Both `data-theme="dark"` and `"light"` verified; dashboards stay dark
|
||||||
- [ ] Hover = opacity/translateY only; easing `ease-in-out`
|
- [ ] 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.
|
**Final test:** place your screen next to `index.html`. If a stranger can tell which one wasn't shipped with the library, fix yours.
|
||||||
|
|||||||
@ -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)}
|
::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)}
|
.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)}
|
.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)}
|
.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{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}
|
.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}
|
.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{display:flex;gap:18px;margin-top:14px;color:var(--secondary);font-family:var(--f-ui);font-size:13px}
|
||||||
.weights b{color:var(--primary)}
|
.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 */
|
/* 03 icons */
|
||||||
.icogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;color:var(--primary)}
|
.icogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;color:var(--primary)}
|
||||||
|
|||||||
@ -1,16 +1,11 @@
|
|||||||
/* nothing-ui · tokens — edit here to re-skin globally.
|
/* nothing-ui · tokens — edit here to re-skin globally.
|
||||||
Authentic Nothing fonts are loaded from ../fonts/ if present (proprietary, NOT shipped);
|
The bundled type system is fully open source under SIL OFL 1.1. */
|
||||||
open fallbacks (Doto/Geist Mono) are pulled via the <link> in index.html. */
|
@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}
|
||||||
/* === 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:'Geist';src:url('../fonts/open/Geist-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
|
||||||
@font-face{font-family:'NDot';src:url('../fonts/Ndot57-Regular.otf') format('opentype');font-weight:400;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}
|
||||||
/* NType82 (UI/headline) intentionally commented out: no legally-clean file on hand.
|
@font-face{font-family:'Geist Mono';src:url('../fonts/open/GeistMono-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
|
||||||
The open fallback Helvetica Neue/Arial (a real grotesque) renders correctly.
|
@font-face{font-family:'Newsreader';src:url('../fonts/open/Newsreader-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
|
||||||
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}
|
|
||||||
:root{
|
:root{
|
||||||
--black:#000; --dark-grey:#171717; --grey:#2A2A2A; --light-grey:#5A5A5A; --white:#FFF;
|
--black:#000; --dark-grey:#171717; --grey:#2A2A2A; --light-grey:#5A5A5A; --white:#FFF;
|
||||||
--bg:#000; --surface:#0C0C0C; --raised:#171717;
|
--bg:#000; --surface:#0C0C0C; --raised:#171717;
|
||||||
@ -18,8 +13,8 @@
|
|||||||
--muted:#5A5A5A; --secondary:#8C8C8C; --primary:#EDEDED; --display:#FFF;
|
--muted:#5A5A5A; --secondary:#8C8C8C; --primary:#EDEDED; --display:#FFF;
|
||||||
--accent:#D71921; --accent-ink:#FFFFFF; --accent-text:#FF4438;
|
--accent:#D71921; --accent-ink:#FFFFFF; --accent-text:#FF4438;
|
||||||
--success:#7BE38A; --warning:#F2C94C; --error:#FF5247;
|
--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-display:'Doto',monospace; --f-ui:'Geist','Helvetica Neue',Arial,system-ui,sans-serif; --f-mono:'Geist Mono',ui-monospace,monospace;
|
||||||
--f-head:'NType82','Helvetica Neue',Arial,sans-serif;
|
--f-head:'Geist','Helvetica Neue',Arial,sans-serif; --f-editorial:'Newsreader',Georgia,serif;
|
||||||
--dotbg:rgba(255,255,255,.48);
|
--dotbg:rgba(255,255,255,.48);
|
||||||
--glass:rgba(16,16,16,.9); --glass-brd:rgba(255,255,255,.09);
|
--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;
|
--r-sm:6px; --r-md:8px; --r-pill:999px; --ease:ease-in-out;
|
||||||
|
|||||||
@ -4,9 +4,6 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>nothing-ui · interactive demo</title>
|
<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">
|
<link rel="stylesheet" href="css/nothing-ui.css">
|
||||||
<style>
|
<style>
|
||||||
/* ===== demo chrome ===== */
|
/* ===== demo chrome ===== */
|
||||||
|
|||||||
@ -1,16 +1,14 @@
|
|||||||
# Fonts
|
# 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 |
|
||||||
|
|
||||||
```
|
`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.
|
||||||
Ndot57-Regular.otf
|
|
||||||
NType82-Regular.otf
|
|
||||||
NType82-Headline.otf
|
|
||||||
NType82Mono-Regular.otf
|
|
||||||
```
|
|
||||||
|
|
||||||
`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.
|
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.
|
||||||
|
|
||||||
**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.
|
|
||||||
|
|||||||
BIN
fonts/open/Doto-ROND-wght.ttf
Normal file
BIN
fonts/open/Doto-ROND-wght.ttf
Normal file
Binary file not shown.
BIN
fonts/open/Geist-Regular.ttf
Normal file
BIN
fonts/open/Geist-Regular.ttf
Normal file
Binary file not shown.
BIN
fonts/open/Geist-SemiBold.ttf
Normal file
BIN
fonts/open/Geist-SemiBold.ttf
Normal file
Binary file not shown.
BIN
fonts/open/GeistMono-Medium.ttf
Normal file
BIN
fonts/open/GeistMono-Medium.ttf
Normal file
Binary file not shown.
BIN
fonts/open/GeistMono-Regular.ttf
Normal file
BIN
fonts/open/GeistMono-Regular.ttf
Normal file
Binary file not shown.
BIN
fonts/open/Newsreader-Italic.ttf
Normal file
BIN
fonts/open/Newsreader-Italic.ttf
Normal file
Binary file not shown.
93
fonts/open/OFL-Doto.txt
Normal file
93
fonts/open/OFL-Doto.txt
Normal 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
93
fonts/open/OFL-Geist.txt
Normal 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.
|
||||||
93
fonts/open/OFL-GeistMono.txt
Normal file
93
fonts/open/OFL-GeistMono.txt
Normal 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.
|
||||||
93
fonts/open/OFL-Newsreader.txt
Normal file
93
fonts/open/OFL-Newsreader.txt
Normal 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.
|
||||||
12
index.html
12
index.html
@ -4,10 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>nothing-ui — a Nothing-inspired component library</title>
|
<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) -->
|
<!-- Bundled open-source fonts: Doto + Geist + Geist Mono + Newsreader Italic. -->
|
||||||
<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">
|
<link rel="stylesheet" href="css/nothing-ui.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -87,10 +84,13 @@
|
|||||||
<h4 class="sub">Primary · Dot Matrix</h4>
|
<h4 class="sub">Primary · Dot Matrix</h4>
|
||||||
<div class="specimen">Aa</div>
|
<div class="specimen">Aa</div>
|
||||||
<div class="glyphset">ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*()_+</div>
|
<div class="glyphset">ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*()_+</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>
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<!-- 03 ICONOGRAPHY -->
|
<!-- 03 ICONOGRAPHY -->
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user