Original font files, measured line boxes, complete role guidance, and clear rules for wrapping, fallback, and content extremes.
authored CSS + browser font set + binary metadata
Inter is the primary text face. GeistMono is visibly used in metadata. Loaded or declared extra faces do not prove use by every component.
authored CSS + browser font set + binary metadata
Inter is the primary text face. GeistMono is visibly used in metadata. Loaded or declared extra faces do not prove use by every component.
authored CSS + browser font set + binary metadata
Inter is the primary text face. GeistMono is visibly used in metadata. Loaded or declared extra faces do not prove use by every component.
authored CSS + browser font set + binary metadata
Inter is the primary text face. GeistMono is visibly used in metadata. Loaded or declared extra faces do not prove use by every component.
authored CSS + browser font set + binary metadata
Inter is the primary text face. GeistMono is visibly used in metadata. Loaded or declared extra faces do not prove use by every component.
Your shortcut to everything.
36px below 480;48px to 719;64px from 720 · ss08, ss02, liga off
One place for your next idea.
27px base,48px desktop on shared feature hero · ss08, ss02, liga off
Small details. Faster work.
32px on narrow screens; source marketing family exceptions retained · local reference role
Keep your tools close.
Fixed, wraps naturally · source-derived shared visual style
Build with the details that make Raycast feel like Raycast.
14px below 720 · Inter ss03
Give every state a clear next step.
15px on phone · local reading role
Open reference
Fixed; wraps only when explicitly allowed · Inter ss03
Components
Original fixed 14; reference compact 12px880–1199 · Inter ss03
Labels stay readable when the content grows.
Fixed; no hard line breaks · local reference role
Captured 18 Sep 2026
Never below 11px for essential text · Geist Mono for technical metadata
--container-width: 1204px;
Wrap prose snippets; scroll exact code only when needed · Geist Mono
⌘ K
Visible pointer path also required · Geist Mono + system glyph fallback
$8
Tabular figures; amount+unit remain together · Inter tabular-nums
Public marketing illustration.
Always wraps; never elides provenance · local reference role
Every rendered role has an explicit numeric line-height, weight, tracking, foreground, background, case and decoration policy. The original feature display, hero copy and navigation use normal in their captured source contexts; the local numeric replacements below are reconstructed authoring decisions.
| Role | Rendered sample | Consumer color / case | Fallback and boundary |
|---|---|---|---|
| Display / home | 64px / 70.4px · 600 · tracking 0 · #e6e6e6 on #07080a | Heading: #ffffff on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Display / feature | 48px / 58px · 600 · tracking 0 · #e6e6e6 on #07080a | Heading: #ffffff on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Original CSS uses normal line-height in the captured context. This numeric local reconstruction removes browser-dependent authoring ambiguity; it is not an original source declaration. |
| Section display | 40px / 44px · 600 · tracking -1px · #e6e6e6 on #07080a | Heading: #ffffff on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Feature title | 22px / 26.4px · 500 · tracking 0 · #e6e6e6 on #07080a | Heading: #ffffff on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Body / hero | 18px / 21.6px · 400 · tracking .2px · #e6e6e6 on #07080a | Body/code/price: #e6e6e6 on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Original CSS uses normal line-height in the captured context. This numeric local reconstruction removes browser-dependent authoring ambiguity; it is not an original source declaration. |
| Body / prose | 16px / 28.8px · 400 · tracking 0 · #e6e6e6 on #07080a | Body/code/price: #e6e6e6 on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Control | 14px / 16px · 500 · tracking .2px · #e6e6e6 on #07080a | Primary button: #2f3031 on #e6e6e6; secondary: #e6e6e6 on #28292b. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Navigation | 14px / 17px · 500 · tracking .2px · #e6e6e6 on #07080a | Navigation: #9c9c9d at rest, #ffffff on hover/current. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Original CSS uses normal line-height in the captured context. This numeric local reconstruction removes browser-dependent authoring ambiguity; it is not an original source declaration. |
| Supporting text | 14px / 22.4px · 400 · tracking 0 · #e6e6e6 on #07080a | Supporting: #9c9c9d on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Metadata | 12px / 18px · 400 · tracking 0 · #e6e6e6 on #07080a | Supporting: #9c9c9d on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-monospace, SFMono-Regular, Consolas, monospace Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Code | 12px / 21.6px · 400 · tracking 0 · #e6e6e6 on #07080a | Body/code/price: #e6e6e6 on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-monospace, SFMono-Regular, Consolas, monospace Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Shortcut | 11px / 16px · 400 · tracking 0 · #e6e6e6 on #07080a | Body/code/price: #e6e6e6 on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-monospace, SFMono-Regular, Consolas, monospace Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Price | 40px / 48px · 500 · tracking -1px · #e6e6e6 on #07080a | Body/code/price: #e6e6e6 on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Caption | 12px / 19.2px · 400 · tracking 0 · #e6e6e6 on #07080a | Supporting: #9c9c9d on #07080a or #111214. Sentence case in authored labels; preserve product names, identifiers and user text. Transform: none; decoration: none. | Guide Noto Sans JP, Guide Noto Sans Devanagari, ui-sans-serif, system-ui, sans-serif Local role specification; captured route-specific exceptions remain in the geometry evidence. |
| Role | Measured geometry | Font behavior |
|---|---|---|
| Homepage display | 64px/70.4px at 1440;600weight; two lines; h140.8125px | Inter 4.001 variable; ss08,ss02; liga off; letter spacing0. |
| Primary button | 14px/16px;500weight; letter spacing.2px | Inter; label line box16px; icon16px;8px flex gap. |
| Navigation | 14px normal (~17px);500weight; letter spacing.2px | Label metrics independent from 36px/44px control target. |
| Supporting hero | 18px normal;400weight; letter spacing.2px | Max490px locally; text-wrap:balance is explicit. |
| Mono metadata | 12px; public Geist Mono variable resource | Technical values use tabular figures; fallback metrics can change wrapping. |
@font-face {
font-family: Inter;
src: url("inter-latin.woff2") format("woff2");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
.hero h1 {
font-size: 64px; line-height: 110%; font-weight: 600;
letter-spacing: 0;
font-feature-settings: "ss08", "ss02", "liga" 0;
max-width: 540px;
}AveryLongExtensionNameThatStillNeedsToRemainReadableWithoutHorizontalScrolling
Titles wrap; essential instructions never depend on a tooltip. Preview descriptions may clamp only when a full detail destination exists.
Not provided
Missing is different from zero, an empty string, an unavailable record, and a permission boundary.
ابحث عن الأدوات التي تحتاجها
Local resilience example. Public product localization was not established. Set language and direction at the content boundary.
Inter and Geist Mono are self-hosted in this publication with their SIL Open Font License. The source also declares JetBrains Mono, Instrument Serif and VT323 for selected feature demonstrations. A declared font does not mean every page uses it. Latin subsets cannot establish Arabic glyph metrics; those examples use a system fallback and have their own local comparison boundary.
Font and asset attribution