Next Token词元之外
Menu

Next Token / Design system

Interface standards

Brand, typography, color and interface specifications

Visual styles, components and page layouts for the Next Token website.

Next Token
Official logo

01 / Identity

Brand identity

The brand identity consists of a wordmark, an orange square, a warm paper background and recording-session photography.

Wordmark and mark

The wordmark uses League Spartan Black. The orange square has fixed placement and proportions.

Interface structure

The interface uses rectilinear layouts, shared alignment and fine dividers.

Photography and artwork

Brand photography depicts recording sessions. Episode artwork displays in its original aspect ratio.

Use the official outlined logo with fixed square placement. Documentary photography carries the brand; episode artwork is shown intact.

02 / Typography

Fonts and type hierarchy

Typography defines brand letterforms, Chinese, English and code separately. Sizes use rem; px equivalents assume a 16px root. The mobile / desktop breakpoint is 48rem. Fluid sizes show their range, and line height is expressed as a ratio.

Brand Latin letterforms

Next Token · 0123456789

League Spartan Black

For the wordmark, brand display titles and selected numerals. Only the local 900 weight is loaded; it is not used for long-form reading. The official logo uses outlined artwork.

League Spartan has no Chinese glyphs. Chinese text in mixed display typography uses the system Chinese fallback stack.

Chinese body and interface

词元之外，正在发生的世界。

PingFang SC → Hiragino Sans GB → Microsoft YaHei → Noto Sans CJK SC → Noto Sans SC → sans-serif

For Chinese headings, body copy, buttons and metadata. macOS / iOS typically use PingFang SC; Windows typically uses Microsoft YaHei. Other systems follow the installed fallback sequence.

Uses installed fonts without a separate Chinese font download. Body 400, emphasis 600, headings 700; brand display may request 900, with rendering depending on available system weights.

English body and interface

Ideas, grounded in experience. 0123456789

-apple-system → BlinkMacSystemFont → Segoe UI → sans-serif

For English body copy, navigation, controls and Latin text in mixed content. Apple uses its system sans-serif; Windows prioritizes Segoe UI; other platforms use the system sans-serif.

Chinese and English share --sans; glyph coverage determines font selection. Body 400, emphasis 600, headings 700; entry titles request 650, matched to the weights available.

Code and technical labels

--type-body: 1.0625rem;

ui-monospace → SFMono-Regular → Consolas → monospace

For code, token names and technical values, not prose. Tables align numbers with tabular figures.

Use metadata sizing and preserve the system fallback stack.

Chinese and English share the same size scale. Body leading is 1.8–1.85, headings 1.25 and brand display 1.15. Body copy has no extra tracking; short uppercase labels may use positive tracking. English wraps at word boundaries and Chinese at character boundaries.

Brand displaytype-hero

Beyond the next token.

2.25–4rem · 36–64px · leading 1.15 · weight 900
Page titletype-title

Perspectives from the AI front line

1.875 / 2.5rem · 30 / 40px · leading 1.25 · weight 700
Reading titleheading-reading-title

A conversation opens a question

1.875 / 2.5rem · 30 / 40px · leading 1.25 · weight 700
Editorial sectionheading-section-display

One open table.

1.75 / 2rem · 28 / 32px · leading 1.25 · weight 700
Content sectionheading-section-content

Inside this conversation

1.5 / 1.75rem · 24 / 28px · leading 1.25 · weight 700
Supporting sectionheading-section-compact

People and products

1.375 / 1.5rem · 22 / 24px · leading 1.25 · weight 700
Follow sectionheading-follow-display

Keep the conversation going.

1.75 / 2rem · 28 / 32px · leading 1.25 · weight 700
Entry titletype-entry

Ideas, grounded in experience

1.25rem · 20px · leading 1.25 · weight 650
Bodytype-body

Technology, products and creative work, through first-hand experience.

1.0625rem · 17px · leading 1.8 · weight 400
Interfacetype-ui

Search episodes, people and products

0.875rem · 14px · leading 1.5 · weight 400
Metadatatype-meta

Weekly #006 · Conversation · 2026

0.8125rem · 13px · leading 1.6 · weight 400

Additional sizes: captions 0.75rem · 12px；short copy 1rem · 16px；minor headings 1.125rem · 18px。Poster wordmarks and decorative numerals scale with their container; prose, controls and navigation use the fixed type scale.

Next Token｜词元之外

AI、Agent 与创作 · 0123456789 · #006

Mixed scripts retain natural spacing. Titles use their full column and wrap at word boundaries.

03 / Color

Color system

The logo uses Warm Paper, Ink Black and Signal Orange, respectively: #f1eee5 / #111111 / #ff4b18. Extended colors and purpose-specific variants apply to the website interface. The Brand Kit uses the same names and values →

Neutrals carry the interface, Signal Orange establishes brand recognition, and Distant Sky supports information. Semantic colors communicate explicit states.

Accent families

Signal Orange is the primary accent and Distant Sky the supporting accent. Both have base, surface and text variants; Signal Orange also has a light variant for dark surfaces. Base colors serve graphics; text variants serve small text and icons on light surfaces.

Signal Orange

Primary accent · brand identity and selection

Base--signal#ff4b18

Brand marks and graphic accents

Surface--signal-soft#f9dfd2

Selected control backgrounds

Light--signal-light#ff9473

Accent text on dark surfaces

Text--signal-text#b8320d

Accent text and focus on light surfaces

Distant Sky

Supporting color · information and grouping

Base--sky#caddee

Supporting fills and editorial graphics

Surface--sky-soft#e8f1f8

Information panels and highlighted rows

Text--sky-text#285d7a

Text and icons on pale blue

Display variant: --signal-display #f24816 is reserved for large brand headlines on paper.

Neutrals

Neutrals define page backgrounds, content surfaces, body text and supporting text.

Warm Paper
--paper#f1eee5

Page background

Warm White
--white#fffdf6

Inputs and reading surfaces

Paper Shadow
--surface#e8e4da

Secondary and disabled surfaces

Ink Black
--ink#111111

Body text, primary actions and inverse surfaces

Soft Ink
--muted#635f58

Supporting text and metadata

Borders reference Ink Black opacity or the Soft Ink border variant for content, structure and controls. See Rules & layers.

Supporting colors and variants

Warm Ginger identifies people and categories. Soft Ink variants define inverse text and control boundaries. Usage aliases reference standard color definitions.

Warm Ginger
--gold#d7a878

A soft ginger accent for identity markers and categories, not body text.

Soft Ink · Light
--muted-light#b7b3ac

Supporting text on dark surfaces

Soft Ink · Border
--muted-border#7b7770

Control boundaries on light surfaces

Semantic colors

Information, success and error states use deep blue, green and red respectively, with accompanying labels or symbols.

Information

i · Additional information

--sky-textDistant Sky · Text
Success

✓ Complete

--success#356247
Error

! Check your input

--error#a62d28

Color pairings

Default reading

Paper + ink text

--paper / --ink
Supporting information

Soft sky + deep blue text

--sky-soft / --sky-text
Featured content

Ink + warm white text

--ink / --white

Supporting text: Soft Ink · Light

Accent text: Signal Orange · Light

Signal Orange identifies brand accents and selection; Distant Sky supports information. Pale blue surfaces pair with ink or deep blue text. Dark surfaces use light text.

Interface icons inherit their control's text color. The Next Token mark uses fixed logo colors. Media-platform and partner marks use their own brand colors. Icon color usage →

04 / Layout

Dimensions and layout

Pages have an 88rem maximum width; reading columns up to 46rem. Mobile gutters start at 1.25rem with a 0.25rem spacing unit. Dimensions are defined in rem and labelled with computed pixels: 20px and 4px respectively at a 16px root.

rem
Type, spacing, padding, controls and reading widths follow the root font size.
px
Borders, dividers and focus outlines use 1px / 2px. CSS pixels are not fixed physical pixels; browser page zoom still enlarges them.
em · % · fr
Icons can follow text with em; columns use percentages or fr; line height stays unitless.
space-10.25rem · 4px
space-20.5rem · 8px
space-30.75rem · 12px
space-41rem · 16px
space-61.5rem · 24px
space-82rem · 32px
space-123rem · 48px
space-164rem · 64px

Lists use space and light rules. Reading pages pair an outline with the article, stacked on narrow screens.

05 / Rules & layers

Rules and layers

Rules are classified as content dividers, structural rules, control boundaries and emphasis. They use solid 1px or 2px strokes.

Content divider

1px · Ink Black · 16%

Table rows, lists and supporting content; never the sole boundary of an input.

Structural rule

1px · Ink Black · 38%

Headers, sections and summary boundaries.

Control boundary

1px · Soft Ink · Border

Inputs and secondary buttons, clearly visible against paper and white.

Emphasis and focus2px · --signal-text / --ink

Active underlines, quote rules and keyboard focus. Focus outlines sit 1px outside buttons and form controls, and 3px outside ordinary links, without shifting layout.

Light rules are decorative separators. Interactive boundaries use stronger colors; inverse surfaces use light rules. Adjacent regions share one divider, drawn by one side only. List rows use a consistent divider style.

On dark surfaces, 1px rules use Warm White · 20% for content, Warm White · 40% for structure, and Warm White · 70% for controls.

Layers and shadows

Opacity is composited over the underlying background. Shadows belong to menus and popovers; space and rules organize ordinary content.

Menu

Menu shadow

Ink Black · 8%

0 0.75rem 1.5rem
Popover

Popover shadow

Ink Black · 16%

0 0.5rem 1.5rem

Sticky navigation: Warm Paper · 94%; text scrims on images: a gradient from transparent to Ink Black · 75%.

06 / Tables

Table specifications

Table text is 0.875rem, with 0.8125rem headers and 0.75rem × 1rem cell padding. Use horizontal rules, left-aligned text and right-aligned tabular numbers.

Wide tables support horizontal scrolling. The table region supports Tab focus and left/right arrow-key scrolling.

Size reference · default root font size 16px
RolerempxUse
Body1.062517Articles and explanations
Interface0.87514Buttons and tables
Desktop controls2.540Minimum height
Touch controls · highlighted2.7544Larger touch area
  • Use a 1px structural rule below the header and 1px light row dividers. Omit enclosing boxes and vertical rules by default; comparison matrices may add column dividers.
  • Compact tables use 0.5rem × 0.75rem padding without shrinking type. Highlighted rows pair pale blue with a written label. Static rows have no pointer cursor or clickable hover effect.
  • Keep captions and scoped row and column headers. Explain dashes used for missing values. Wide tables scroll within their region without shrinking text or widening the page.

07 / Iconography

Icons and marks

Icons are grouped by function, media platform and brand identity. Interface icons inherit text color; platform and brand marks retain their shapes, proportions and colors within consistent display areas.

Interface icons

Color: inherit the control's text color. Use Ink Black by default, the Signal Orange text variant for accents on light surfaces, and Warm White on inverse surfaces. The base orange is used for the logo and graphics. Color specifications →

Line icons use flat stroke ends and currentColor. Sizes use rem, with strokes scaling proportionally to the SVG viewport. Decorative icons are hidden from assistive technology; icon-only controls have an accessible name on their button or link.

Search

search

Header search link

Size
1.125rem · 18px
viewBox
0 0 24 24
Stroke
2 viewBox units

Menu

menu

Mobile navigation toggle

Size
1.25rem · 20px
viewBox
0 0 20 20
Stroke
1.5 viewBox units

Pixel equivalents assume a 16px root. Search and menu strokes both render at 1.5px at that root size and scale with text preferences.

Media platforms

Media-platform marks use their respective brand colors and retain the colors defined in each asset.

Subscription marks use a 1.75rem square slot and a 0.65rem name gap. Optical sizes are listed below. Marks are centered with their original proportions, colors and clear space, without stretching, cropping or redrawing.

Spotify, YouTube and WeChat Official Accounts use official SVGs; Apple Podcasts uses an official PNG. WeChat Channels uses its official site's vector artwork and orange; Xiaoyuzhou uses its official pinned-tab vector and website blue. Bilibili uses the official site’s TV vector and pink; RedNote uses the official site’s header PNG wordmark. Assets use their listed file formats and the specified display sizes and alignment.

Text symbols

Arrows, close symbols and status symbols are font glyphs, not SVG icons. QR codes are content images and are not part of the icon library.

08 / Interaction

Interface controls

Controls have a minimum height of 2.5rem on desktop and 2.75rem on touch screens: 40px and 44px at a 16px root. Controls have a 1px corner radius and support keyboard and touch input, with an outline indicating keyboard focus.

Explore episodes →Read the blogExplore the Wiki

Input focus and text selection

Inputs have a 1px corner radius. Focus uses a 2px outline in the Signal Orange text variant, offset by 1px. Selected text uses Distant Sky with Ink Black text.

Switches and disclosure

Switches control one setting, with labels and thumb position indicating state. Disclosure controls show or hide a group of content.

Inactive track: Ink Black · 18%; active track: Signal Orange · Text.

Additional information

The expanded state retains the heading, keyboard focus and complete content.

Action feedback

Copy actions confirm success beside the button. If clipboard access is unavailable, a selectable read-only link is provided. Feedback does not rely on color alone.

09 / Reading

Reading typography

NEXT TOKEN / FIELD NOTES

About the show

Next Token Weekly is an AI conversation show covering technology, products, entrepreneurship and creative work. Episode pages include summaries, chapter navigation and references.

Episode content includes audio, video and transcripts.

People, products and ideas connect to the Wiki. Episode detail pages link to the full conversation.

  • Clear chapters and full context
  • Accessible links and traceable sources

Captions, dates and sources use metadata type. Inline links use a 1px dashed underline offset by 0.3em + 1px; hover and focus use the Signal Orange surface.

Identity markers

Identity colors are fixed aliases of standard colors, accompanied by names, avatars and 2px rules. Names use Ink Black; unassigned identities use Soft Ink.

Yang Pan
Distant Sky
Guizang
Warm Ginger
Orange
Signal Orange
Xiangyang Qiaomu
Ink Black
Unassigned
Soft Ink

Person identity combines an avatar and name, with identity color as a secondary cue. Static identities label authors or speakers; linked identities open profiles and provide hover and keyboard-focus states.

Category links

Categories use distinct backgrounds with Ink Black text: 8% opacity by default, 22% in emphasis mode, and 16% / 30% on keyboard focus with an underline and outline.

Codex

Product / show · Distant Sky · Text

Text states

Search match: Next Token

Navigation target: the paragraph reached by a link.

Search matches and navigation targets share Signal Orange · Surface; navigation targets add a 2px Signal Orange outline.

Search matches use 0.125em × 0.2em padding, retained on each wrapped line. Target backgrounds extend outward by 0.375rem, with a 3px gap between the background edge and the outline. Highlight bounds are independent of paragraph layout.

Annotation blocks

Annotation rules are 4px. Ordinary notes use Paper Shadow; highlighted notes use Distant Sky · Surface with a rule in the same family’s text variant.

10 / Composition

Composition examples

Content cards combine artwork, headings, metadata, category labels and actions, using the shared type, color and control specifications.

#006 AI reverse engineering is unstoppable; hooked on Grok Bot and Muse: real work or playing house?
#006

Episode #006

AI reverse engineering, Grok Bot and Muse: Real work or playing house?

2026-10-19 · Audio & video

Four co-hosts discuss what personal agents can deliver, where they fail, and what remains worth building.

Personal AgentReverse engineeringMemory
Listen / watch ↗