SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 2 Packages Projects Releases Wiki Activity

feat(ai): nine original style guides join the corpus

Browse source 
Two web-landing voices measured from shipped documents, a butter-
paper serif editorial, and four social-card themes (mineral cave
dark, letterpress vermilion, arcade neon night, highlighter
notebook) — palettes derived from real anchors via the sampling
protocol, prose written fresh, platform-tagged for the card shelf.

Claude-Session: https://claude.ai/code/session_01FqKQqNj8exYwopGDpYUU7x
This commit is contained in:
Fini 2026-08-09 01:22:33 +08:00
parent 06c4fa7f21
commit ab2b4757af
7 changed files with 1482 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

219
crates/op-ai-skills/skills/style-guides/arcade-neon-dark.md Normal file
View file

@ -0,0 +1,219 @@
---
name: 'arcade-neon-dark'
tags: [social-card, card-series, cjk-type, vertical-portrait, dark-mode, night, neon, electric, bold-typography, display, high-contrast, urban, textured]
platform: card
---
## Style Scope
This guide is self-contained and written for **Chinese social cards** — a swipeable series of fixed-canvas pages read on a phone, not a scrolling page and not an app screen. Apply its palette, tube language, spacing, and type treatments only when this exact guide is selected; do not import crypto, gaming, cyberpunk, or SaaS-dark patterns into it. Treat unnamed layout frames as structural by default: no fill, stroke, cornerRadius, or shadow unless the node is deliberately a signage panel, a neon tube, a vertical signboard, or a caption rail.
## Style Summary
A shophouse arcade at night. The ground is `#0F1225` — not black, but the ink-blue-violet a city sky turns when its own light bounces off low cloud. Everything else in the system depends on that choice: neon laid on true black is a sticker, and neon laid on a sky that has already been stained by light has air between the tube and the wall.
Neon appears **only as tube**. A colour in this style is a 2px rounded-rect stroke with nothing inside it, plus a soft radial of the same hue at 12% opacity sitting underneath at two and a half times the tube's width. It never fills a shape, never becomes a text colour on a light ground, never becomes a gradient background. That single rule is the whole difference between this style and the cheap-AI-tech look it superficially resembles.
There are three tubes: magenta, cyan, amber. **Two per card, and each appears at most twice.** A fourth colour (jade) exists and is capped at one appearance across the entire deck — the one sign on the street that's a different colour from all the others.
Type is loud and Chinese. The display face is a genuine oblique Chinese sans — one of the very few that exists — and it carries every headline. It never sets body copy; its personality becomes reading friction past two lines. Body is a geometric screen sans in acrylic white at three brightnesses. The other signature device is the **vertical signboard**: a narrow 120-160px frame of stacked characters hard against the right edge of the cover, which is what shophouse signage actually does and which Latin typography structurally cannot do.
Key aesthetics:
- **Light-stained sky, not black**: `#0F1225` at chroma 0.038 — the tube needs air to glow into
- **Neon is a stroke, never a fill**: 2px tube + a 12% radial bloom underneath, and nothing else
- **Two tubes per card, twice each**: a third hue on one page is a bug
- **Vertical signboard**: stacked characters in a 120-160px rail, right edge, cover only
- **Oblique Chinese display over geometric sans body**: headline face never touches body copy
- **Acrylic white at three brightnesses**: `#E3E8EE` / `#ABB2BA` / `#757E88`
- **Wet-street fade**: one bottom-edge linear to the deepest night, 200px tall, once per deck
- **Panels are matte**: signage panels are flat fills with no glow — only tubes glow
- **Denser leading on dark**: body at 4+ lines moves up a size and out to 1.80 line height
## Color System
### Core Backgrounds
| Token | Value | Usage |
| --------------- | ------- | --------------------------------------------------------------------- |
| Page Background | #0F1225 | The night sky. Every card's ground; never a panel colour |
| Deep Night | #060816 | The deepest step — inside a tube frame, and the end of the wet-street fade |
| Card Surface | #1B2036 | Signage panel — the standard matte block |
| Raised Surface | #282F47 | A panel on a panel, and the resting row inside one |
All four sit at hue ~273 with chroma 0.038-0.044. Only lightness moves between them; a hue shift would read as two different nights.
### Text Colors
| Token | Value | Usage |
| -------------- | ------- | ---------------------------------------------------------------- |
| Primary Text | #E3E8EE | Headlines and body copy. 15.04:1 on the ground |
| Secondary Text | #ABB2BA | Deck lines, annotations, list sub-copy. 8.65:1 |
| Muted Text | #757E88 | Captions, sources, page numbers. 4.50:1 |
| On Tube | #060816 | Text set inside a filled tube frame — used sparingly |
Acrylic white is cooled at hue 250 to match the sky rather than fight it. A warm white on this ground reads as a lit bulb rather than an acrylic sign face.
### Border Colors
| Token | Value | Usage |
| --------------- | ------- | ------------------------------------------------------------------ |
| Default Border | #282F47 | The hairline between two panels of the same tone |
| Tube Stroke | #FA618E | The 2px neon stroke — see the accent table for the other two hues |
There is almost no border work. Panels separate by lightness. A tube is not a border: it is a light source, and it never wraps a content card — only a headline, a numeral, or a signboard.
### Accent Colors
| Token | Value | Usage |
| -------------- | ------- | -------------------------------------------------------------- |
| Primary Accent | #FA618E | Magenta tube. 6.32:1 on the ground |
| Cyan Tube | #44D6D5 | Cyan tube. 10.43:1 |
| Amber Tube | #F0B04E | Amber tube. 9.73:1 |
| Jade Tube | #4CBD88 | The odd sign out. **Exactly one appearance per deck** |
**How to use the tubes.** Each is a 2px `stroke` on a rounded rect or a headline underscore, with a same-hue `radial` from 12% to transparent underneath it at 2.5× the stroke width. That is the entire vocabulary. A tube colour may also set display type at 88px and above directly on the ground — all three clear 6:1 — but it must not set body copy, must not fill a block, and must not appear on a light surface.
Two tubes per card. Each tube colour at most twice on that card. The bloom counts as part of its tube, not as a second appearance.
**Gradients** exist for exactly two things: the tube bloom (radial, same hue, 12% → 0) and the wet-street fade (linear 90°, transparent → Deep Night, 200px tall, bottom edge, once per deck). Never a background gradient, never a two-hue gradient, and never blue-to-purple — that combination is the single most recognisable fingerprint of generic AI tech design and this style must not be mistaken for it.
## Typography
### Font Families
| Role | Family | Range | Usage |
| ---------------- | ----------------------------------------- | ------------- | -------------------------------------------------------- |
| Display | Anton, 得意黑 Smiley Sans, Noto Sans SC | 88px and up | Every headline, signboard, and large numeral |
| Body / Interface | Schibsted Grotesk, Glow Sans SC, Noto Sans SC | 64px and down | Body, deck lines, list rows, captions, page numbers |
| Data / Numerals | Schibsted Grotesk | any | Every figure, with tabular-nums on |
得意黑 is one of the very few Chinese faces with a true designed oblique rather than a synthesised skew, which is exactly why it is here — and exactly why it must never set body copy: two lines of it and the reader is fighting the letterforms. All faces named are OFL.
The Latin face leads every fallback chain, so digits and Latin words are set by Anton / Schibsted Grotesk instead of by the Chinese face's own Latin.
### Type Scale
| Level | Size | Font | Weight | Tracking | Line Height | Usage |
| ---------- | ----- | ------- | ------ | -------- | ----------- | ----------------------------------------- |
| Display XL | 168px | Display | 700 | -0.01em | 1.05 | Cover headline, 2-6 characters |
| Display L | 120px | Display | 700 | -0.01em | 1.10 | Cover headline, signboard, large numerals |
| Display | 88px | Display | 700 | 0 | 1.15 | Interior headline, pull quote |
| Title 1 | 64px | Body | 700 | 0 | 1.25 | Page title |
| Title 2 | 48px | Body | 600 | 0 | 1.30 | Section title, card title |
| Body L | 40px | Body | 400 | 0.02em | 1.70 | **Default body copy** |
| Body | 36px | Body | 400 | 0.02em | 1.70 | Body floor — never below |
| Caption | 32px | Body | 400 | 0.02em | 1.50 | Sources, page numbers, corner marks |
**At most four of these eight on one card.**
**Dark-ground correction**: when a card carries four or more lines of body copy, Body 36 is not allowed — use Body L 40 and raise line height to **1.80**. Light text on a dark ground blooms optically, and dense small copy on this palette closes up.
### Font Weights
| Weight | Value | Usage |
| -------- | ----- | ---------------------------------------------------------- |
| Regular | 400 | All body copy and captions |
| Semibold | 600 | Section titles, the emphasised run inside a body line |
| Bold | 700 | Page titles and every display line |
No `font-style: italic` on Han characters, ever — 得意黑's oblique is drawn into the face, and asking the browser to skew on top of it deforms every stroke. Emphasis in body copy is weight, or a tube underscore.
### Line Height
- Display (88-168px): 1.05-1.15
- Titles (48-64px): 1.25-1.30
- Body (36-40px): **1.70**, and **1.80** on cards with four or more body lines
- Captions: 1.50
### Letter Spacing
Body 0.02em; titles 0; display -0.01em. Latin all-caps labels +0.10em. Never apply Latin display tracking of -0.05em to Han text.
### Vertical Setting
The signboard is set with `writing-mode: vertical-rl`. Latin words and multi-digit numbers inside a vertical run must be set upright (`text-orientation: upright`, and two-digit numbers combined) or they lie on their side and break the sign.
## Spacing System
### Gap Scale
| Value | Usage |
| ----- | ------------------------------------------------ |
| 8px | The baseline unit |
| 16px | Icon to label, tube to its caption |
| 24px | Between a list number and its text |
| 32px | Between stacked list rows |
| 48px | Between a headline and its deck line |
| 72px | Between blocks within a card |
| 120px | Between the headline block and the content block |
### Padding Scale
| Value | Usage |
| --------- | -------------------------------------------------------- |
| [16, 28] | Tube frames around a short phrase |
| 40px | Signage panels |
| 56px | A panel carrying four or more lines of body copy |
| [96, 80] | The card — 96 top, 80 sides |
| 128px | Card bottom, deliberately larger so feed chrome misses the last line |
### Layout Pattern
- Canvas 1080 × 1440 (3:4). Content column 920: 12 columns of 62 with 16 gutters
- Cover: vertical signboard hard against the right edge in a 120-160px rail; headline and deck line in the left 9 columns; one tube frame; the wet-street fade at the bottom
- Interior: one headline, one content structure. Two structures means two pages
- Tubes: never wrap a content card. They frame a headline, a numeral, or the signboard
- Panels are matte: signage panels are flat Card Surface fills with no glow and no stroke
- Wet-street fade: bottom 200px, once per deck
- Page number: bottom-right, Caption size, Muted Text
## Corner Radius
| Value | Usage | Rationale |
| ----- | ------------------------------------------------ | -------------------------------------------------- |
| 4px | Grit marks and micro tags | Nearly square at the finest scale |
| 16px | Button radius, tube frames around a short phrase | A bent glass tube has a radius; a sharp corner lies |
| 24px | Card radius — signage panels | The signature container radius |
| 40px | The signboard rail | Long surfaces need a larger corner to read soft |
Nothing is a full capsule. A pill in this style reads as a UI chip, and there are no UI chips on a card.
## Icons
### Icon Font
- **Family**: Lucide
- **Style**: Outline, 2px stroke, round caps
Round caps here, unlike the flat-print styles: they match the bent-glass logic of the tubes.
### Commonly Used Icons
arrow-right, arrow-up-right, chevron-right, chevron-down, zap, sparkles, moon, play, circle, square, bookmark, message-circle, hash
### Icon Sizes
| Size | Usage |
| ---- | ------------------------------ |
| 32px | Beside Caption text |
| 40px | Beside Body text, list markers |
| 56px | Section markers |
### Icon Color States
| State | Color | Usage |
| --------- | ------- | ------------------------------------------- |
| Primary | #E3E8EE | Default on the ground and on matte panels |
| Muted | #757E88 | Decorative and inactive marks |
| Accent | #FA618E | The single marker carrying emphasis |
## Anti-Patterns
- **Never fill with a tube colour.** Neon is a stroke plus a bloom. A magenta block, a cyan background, or a tube colour behind body copy destroys the style instantly.
- **No blue-to-purple gradient.** It is the defining fingerprint of generic AI tech design; this style's whole premise is being read as a photographed street instead.
- **No glitch, no scanlines, no chrome, no circuit traces, no rain droplets.** This is a night street, not cyberpunk. Figurative sci-fi props pull it straight into the cheap register.
- **No third tube hue on a card**, and no more than two appearances per hue.
- **Panels never glow.** Only tubes do. A glowing card edge reads as a game UI.
- **得意黑 never sets body copy**, and never sets anything under 88px.
- **No pure black.** `#000000` anywhere removes the atmospheric layer the whole palette is built on.

201
crates/op-ai-skills/skills/style-guides/broadsheet-lime-light.md Normal file
View file

@ -0,0 +1,201 @@
---
name: 'broadsheet-lime-light'
tags: [editorial, magazine, clean, light-mode, minimal, serif, lime-accent, crisp, data-focused, tech]
platform: webapp
---
## Style Scope
This guide is self-contained. Apply its palette, radius scale, spacing, shadows, and component treatments only when this exact guide is selected; do not borrow food, social, dashboard, luxury, terminal, or other guide-specific patterns into another style. Treat unnamed layout frames as structural by default: no fill, stroke, cornerRadius, or shadow unless the node is intentionally a card, input, button, badge, media mask, navigation surface, or other visible component. Avoid decorative wrapper shells around components; hierarchy should come from spacing, typography, and this guide's explicit surfaces.
## Style Summary
A paper-white product page that borrows its manners from a broadsheet newspaper: near-black ink on white, hairline rules instead of shadows, and one italic serif word dropped into an otherwise sans-serif headline to carry the emphasis. Surfaces are #FFFFFF and #FAFAFA, separated by #E5E5E5 hairlines rather than by elevation, so the page stays flat and the reader's eye is led by type size and rule placement alone.
The single accent is an electric lime, #A3E635, and it is deliberately rationed: the primary button, the "most popular" pricing badge, one bar in a seven-bar chart, one success state. Against a page this quiet, a lime chip reads as a highlighter mark on newsprint — which is exactly the intent, and why a second accent would ruin it.
Key aesthetics:
- **Hairline structure, no shadows**: 1px #E5E5E5 rules define every card, table row and section boundary
- **Serif emphasis inside a sans headline**: one word per headline set in Fraunces italic, the rest in Geist — the page's whole voice lives in that contrast
- **Rationed lime**: #A3E635 on the primary CTA, the featured pricing tier, and single data points; never as a background wash
- **Tight radii**: 4px and 8px only, with full capsules for pills — a soft, generous corner would undo the printed feel
- **Live-product panels**: hero and comparison sections show a real answer card (query, response, cited sources) rather than an abstract illustration
- **Data as body copy**: analytics blocks use the same type scale as the prose around them, with numerals at 36-48px doing the shouting
## Color System
### Core Backgrounds
| Token | Value | Usage |
| --------------- | ------- | ------------------------------------------------ |
| Page Background | #FFFFFF | Root page ground |
| Page Alternate | #FAFAFA | Alternating sections, table headers, quiet bands |
| Card Surface | #FFFFFF | Cards and panels, distinguished by their rule |
| Inset Surface | #F5F5F5 | Inputs, chips, code wells |
| Ink Panel | #171717 | The one inverted block per page (code, avatars) |
| Ink Panel Soft | #303030 | Rows inside an inverted block |
### Text Colors
| Token | Value | Usage |
| ---------------- | ------- | ---------------------------------------------- |
| Ink | #262626 | Headlines, body copy, table values |
| Ink Secondary | #525252 | Supporting copy, descriptions |
| Ink Muted | #737373 | Metadata, timestamps, column headers |
| Ink Faint | #A3A3A3 | Placeholders, disabled labels |
| On Ink | #FFFFFF | Text on an inverted block |
| On Accent | #171717 | Text on a lime fill — lime is too bright for white |
### Border Colors
| Token | Value | Usage |
| --------------- | ------- | -------------------------------------------- |
| Hairline | #E5E5E5 | Card edges, table rows, section rules |
| Hairline Subtle | #F0F0F0 | Dividers inside a card |
| Hairline Strong | #D4D4D4 | Input outlines, focused edges |
| Ink Border | #171717 | The emphasised card (featured pricing tier) |
### Accent Colors
| Token | Value | Usage |
| ------------- | ------- | ---------------------------------------------- |
| Primary Lime | #A3E635 | Primary buttons, featured badge, hero bar |
| Lime Soft | #ECFCCB | The one tinted background lime is allowed |
| Mint | #7EE2B8 | The secondary data series, status "healthy" |
| Success | #16A34A | Verified marks, positive deltas |
| Warning | #F59E0B | "Needs attention" chips in a data table |
| Danger | #DC2626 | Failures, negative deltas |
**How to use the accent**: one lime element per viewport height. If two want it, the more actionable one keeps it and the other becomes an ink-outlined variant. Lime always carries #171717 text — white on lime fails contrast and looks washed out.
## Typography
### Font Families
| Role | Family | Usage |
| --------------- | -------- | ------------------------------------------------------ |
| Display / Body | Geist | Everything by default — headlines, copy, labels, data |
| Serif Emphasis | Fraunces | One italic word per headline, pull-quote attributions |
| UI / Data | Inter | Dense tabular readouts, chart labels, code-adjacent UI |
### Type Scale
| Level | Size | Font | Weight | Usage |
| ------------ | ---- | -------- | ------ | -------------------------------------------- |
| Display | 48px | Geist | 600 | Hero headline (with one Fraunces italic word) |
| Title 1 | 36px | Geist | 600 | Section headlines, big metric values |
| Title 2 | 20px | Geist | 600 | Card titles, pricing tier names |
| Title 3 | 16px | Geist | 600 | Sub-headings, row titles |
| Body Large | 16px | Geist | 400 | Hero sub-copy, section intros |
| Body | 14px | Geist | 400 | Card copy, feature lists, table cells |
| Label | 13px | Geist | 600 | Buttons, active navigation |
| Caption | 12px | Geist | 400 | Metadata, helper text |
| Eyebrow | 11px | Geist | 600 | Uppercase section labels (+1.2 tracking) |
| Data | 12px | Inter | 500 | Chart labels, chips, dense readouts |
### Font Weights
| Weight | Value | Usage |
| -------- | ----- | ---------------------------------------- |
| Regular | 400 | Body copy, table cells |
| Medium | 500 | Chart and chip labels |
| Semibold | 600 | Headlines, titles, buttons, eyebrows |
Italic is reserved: Fraunces italic for headline emphasis and pull quotes, and nothing else. An italicised label or caption breaks the device.
### Letter Spacing
- Display (48px): -1.5px
- Section headlines (36px): -1px
- Uppercase eyebrows: +1.2px
- Body, labels, data: 0px
### Line Height
- Display: 1.1
- Headlines (20-36px): 1.2
- Body (14-16px): 1.55
- Table cells and chips: 1.3
## Spacing System
### Gap Scale
| Value | Usage |
| ----- | -------------------------------------------- |
| 4px | Icon and label pairs, value+unit pairs |
| 6px | Chip rows, citation badges |
| 8px | Feature list items, tight stacks |
| 10px | Table row internals |
| 12px | Button groups, card sub-sections |
| 16px | Form fields, card internals |
| 24px | Cards within a grid, panel sections |
| 32px | Section sub-blocks |
| 40px | Between page sections |
| 96px | Between major bands |
### Padding Scale
| Value | Usage |
| --------- | -------------------------------------- |
| [2, 8] | Micro status chips |
| [4, 8] | Table action buttons |
| [4, 10] | Tags and citation badges |
| [6, 12] | Segmented-control segments |
| [12, 16] | Inputs, list rows |
| [20, 24] | Cards |
| 24px | Panels and pricing tiers |
| [96, 96] | Section blocks |
### Layout Pattern
- Page width: 1200px, content inset 96px on each side
- Hero: copy column on the left (max 520px), a live answer-card panel on the right
- Feature block: one wide primary column plus stacked secondary cards, each with an eyebrow, a title, copy and a small live readout
- Analytics: three metric cards in a row above a two-column split — a chart card and a data table
- Pricing: three tiers, the middle one emphasised by an ink border and a lime badge, not by scale
- Charts: give bar columns and their axis labels the SAME explicit column width so bars and labels stay on shared centres, and so the row is not mistaken for a data table
## Corner Radius
| Value | Usage | Rationale |
| ----- | ------------------------------------------- | -------------------------------------------- |
| 0px | Section rules, table dividers | Printed rules have no corners |
| 2px | Chart bars | Just enough to avoid a hard pixel edge |
| 4px | Chips, tags, small badges, inputs | The dense default |
| 8px | Cards, panels, buttons, pricing tiers | The container default — and the largest used |
| Full | Pills, avatars, toggles, status dots | Set the radius to the element's own size |
Design rationale: the ceiling of 8px is the rule that keeps this style from drifting into a generic rounded SaaS look. Softness here comes from white space and hairlines, not from corners.
## Icons
### Icon Font
- **Family**: Lucide
- **Style**: Outline, 1.5-2px stroke
### Commonly Used Icons
search, sparkles, check, circle-check, file-text, book-open, database, refresh-cw, activity, trending-up, trending-down, clock, shield-check, hexagon, layers, globe, arrow-right, chevron-down, copy, calendar, zap, git-pull-request, link-2
### Icon Sizes
| Size | Usage |
| ---- | ---------------------------------------- |
| 12px | Inside chips and citation badges |
| 14px | Inline with body copy, feature checks |
| 16px | Buttons, card headers, table actions |
| 20px | Logo-wall marks, section markers |
| 24px | Hero panel header, tier icons |
### Icon Color States
| State | Color | Usage |
| ---------- | ------- | ---------------------------------------- |
| Ink | #262626 | Default on white |
| Muted | #737373 | Secondary and decorative marks |
| Accent | #A3E635 | Only where the lime element already is |
| Success | #16A34A | Verified sources, passing checks |
| On Ink | #FFFFFF | Icons on the inverted block |

213
crates/op-ai-skills/skills/style-guides/butter-serif-light.md Normal file
View file

@ -0,0 +1,213 @@
---
name: 'butter-serif-light'
tags: [editorial, serif, dual-font, display, light-mode, warm-tones, colorful, rounded, soft-corners, friendly]
platform: webapp
---
## Style Scope
This guide is self-contained. Apply its palette, radius scale, spacing, shadows, and component treatments only when this exact guide is selected; do not borrow food, social, dashboard, luxury, terminal, or other guide-specific patterns into another style. Treat unnamed layout frames as structural by default: no fill, stroke, cornerRadius, or shadow unless the node is intentionally a card, input, button, badge, media mask, navigation surface, or other visible component. Avoid decorative wrapper shells around components; hierarchy should come from spacing, typography, and this guide's explicit surfaces.
## Style Summary
A butter-cream page with no lines on it anywhere. The ground is #FFFFEB — a warm, faintly yellow off-white, not a grey ivory — and structure comes entirely from big soft-cornered blocks of colour dropped onto it: a sand panel here, a deep-teal section there, one long near-black band in the middle of the page. There is not a single stroke in the whole system; where another style would draw a 1px rule, this one changes the fill.
The voice lives in one typographic move, used on every large headline: a roman serif phrase interrupted by an italic one of the same face. "Built around *how you work*", "4x faster *than typing*", "Don't type, *just speak.*" — EB Garamond carries the whole line at weight 400, and the italic run is the only thing that changes. Display type runs very large (64-120px) and very tight: -0.03em tracking and a line height at or just under 1.0, so a two-line headline reads as one block of shape.
The two faces do not share the headline; they split the page. **EB Garamond owns everything from 20px up and Figtree owns everything below it** — there is no sans-serif headline anywhere and no serif button label. Body copy is Figtree 16/500 in near-black, and secondary copy is the same ink at 70% opacity rather than a second grey. Colour arrives only as whole surfaces — a teal section, a lilac button, a mint stat card — never as tints, gradients, or outlines.
Key aesthetics:
- **Butter-cream ground**: #FFFFEB, warm and slightly yellow, is the page — not a card colour, not a section colour
- **Zero strokes**: no borders, no dividers, no hairlines; separation is fill against fill
- **Roman interrupted by italic**: one phrase per headline switches to EB Garamond italic — same face, same size, same baseline
- **A clean face split**: EB Garamond at 20px and above, Figtree at 20px and below; neither crosses
- **Oversized tight display**: 64-120px at -0.03em with line height 0.95-1.0
- **Ink at three opacities**: #1A1A1A at 100 / 70 / 50 % instead of a grey ramp
- **Big soft corners**: 32-48px on section blocks, full capsules on every button and tag
- **Crayon accents as whole surfaces**: mint, coral, lilac and amber appear as filled blocks and pills, never as text colour or outline
- **One drawn line**: a single thick organic black ribbon sweeping across a section is the only illustration device
## Color System
### Core Backgrounds
| Token | Value | Usage |
| ---------------- | ------- | -------------------------------------------------------- |
| Page Background | #FFFFEB | The whole page. Sections sit on it; it is never a card |
| Sand Surface | #E4E4D0 | Cards, feature panels, the standard raised block |
| Sand Quiet | #EEEBE3 | A second sand a step closer to the page |
| Paper Panel | #F5F4F0 | Inset panels inside a sand card |
| Paper Bright | #FFFDF9 | The lightest surface, for a panel on a coloured ground |
| Inverted Band | #1A1A1A | One long full-bleed near-black section per page |
| Deep Teal Band | #034F46 | The second full-bleed section, and the tile colour it seeds |
### Text Colors
| Token | Value | Usage |
| --------------- | --------- | ------------------------------------------------------ |
| Ink | #1A1A1A | Headlines, body copy, everything primary |
| Ink 70% | #1A1A1AB3 | Secondary copy, descriptions, captions |
| Ink 50% | #1A1A1A80 | Uppercase eyebrows, metadata, disabled labels |
| Ink Soft | #71716E | The rare label that needs a solid grey rather than alpha |
| On Dark | #FFFFEB | All text on the inverted band, the teal band, and pills |
| On Dark Soft | #FFFFEB1A | A whisper-level wash on dark, for a resting surface |
Note the ink ramp is opacity, not separate greys. `#1A1A1A` at 70% over butter cream is warmer than any neutral grey would be, which is what keeps secondary copy from going cold on this ground.
### Border Colors
There are none. This style has no strokes: not on cards, not on inputs, not as dividers. If two things must be told apart, give one of them a surface colour. The only near-border in the system is a low-alpha wash used as a resting fill:
| Token | Value | Usage |
| ----------- | --------- | ----------------------------------------------- |
| Ink Wash | #1A1A1A26 | A pressed / selected state on a light surface |
| Sand Wash | #E4E4D01A | A resting row inside a coloured section |
### Accent Colors
| Token | Value | Usage |
| ----------- | ------- | -------------------------------------------------------- |
| Teal | #034F46 | The section ground, the primary dark pill, tile surfaces |
| Lilac | #F0D7FF | The primary call-to-action pill (with ink text) |
| Mint | #34D399 | One stat or status block per page |
| Coral | #FF6C4C | One emphasis block, opposite the mint one |
| Amber | #FFA946 | The third and last crayon, for a single highlight tile |
**How to use the accents**: they are surfaces, not ink. A crayon colour fills a block, a pill, or a tile; it never colours text, never outlines anything, and never appears as a gradient. Use at most three of the four on one page, each exactly once — the effect depends on each colour reading as a single deliberate object against the cream, and a repeated crayon immediately reads as a palette instead.
**Gradients** are for image scrims only: a 180° `#FFFFFF00 → #000000B3` to seat white text over photography, or `#FFFFFF00 → #034F46` to fade an image into the teal band. Never on a button, a card, or a background.
## Typography
### Font Families
| Role | Family | Range | Usage |
| ---------------- | ----------- | --------- | ----------------------------------------------------------- |
| Display | EB Garamond | 20px and up | Every headline and pull quote, always weight 400; italic for the emphasis run |
| Interface / Body | Figtree | 20px and down | Body, labels, buttons, navigation, captions, data |
The split at 20px is the rule, and 20px is the one size both faces are allowed: Figtree 20/500 for hero sub-copy, EB Garamond 20/400 for a quiet serif section label. Everywhere else the size decides the face.
### Type Scale
| Level | Size | Font | Weight | Tracking | Usage |
| ------------ | ----- | ----------- | ------ | -------- | ------------------------------------------- |
| Display XL | 120px | EB Garamond | 400 | -3.6px | The closing statement, one line, once |
| Display L | 96px | EB Garamond | 400 | -2.88px | Hero headline |
| Display | 75px | EB Garamond | 400 | -2.25px | Section openers on a full-bleed band |
| Title 1 | 64px | EB Garamond | 400 | -1.92px | Major section headlines |
| Title 2 | 48px | EB Garamond | 400 | -1.44px | Big numbers, stat values, sub-headlines |
| Title 3 | 32px | EB Garamond | 400 | -0.96px | **The workhorse** — card titles, feature headings, pull quotes |
| Serif Label | 20px | EB Garamond | 400 | 0 | A quiet serif label inside a card |
| Lead | 20px | Figtree | 500 | 0 | Hero sub-copy, section intros |
| Body | 16px | Figtree | 500 | 0 | The default body copy |
| Body Strong | 16px | Figtree | 600 | 0 | Emphasis inside body, product-name labels |
| Label | 14px | Figtree | 500 | 0 | **Most-used size** — nav, buttons, list rows, footer links |
| Eyebrow | 14px | Figtree | 500 | +1.12px | Uppercase section labels, at Ink 50% |
| Caption | 13px | Figtree | 500 | 0 | Metadata, units, footnotes |
| Micro | 12px | Figtree | 600 | -0.24px | Input placeholders, badge text |
Two rules make the scale work. **Display tracking is -0.03em at every size** — the pixel values above are that ratio, so a size not in the table computes rather than guesses. **Uppercase eyebrows are +0.08em** (+1.12px at 14px), the only positive tracking in the system.
### Font Weights
| Weight | Value | Usage |
| -------- | ----- | -------------------------------------------------------- |
| Regular | 400 | EB Garamond — every headline, no exceptions |
| Medium | 500 | Figtree default: body, labels, navigation, captions |
| Semibold | 600 | Figtree emphasis: a strong run in body, a placeholder |
| Bold | 700 | Reserved. If a 600 is not enough, the size is wrong |
The display face never goes above 400. Its presence at 75-120px is what carries the weight, and a bolded Garamond loses exactly the quality it was chosen for.
### The emphasis run
A headline at 64px or above is one line of EB Garamond 400 roman with a single phrase swapped to the **italic** of the same face, at the same size and baseline. Put the italic on the phrase that carries the promise, not on a noun — the roman states the fact and the italic says how it feels. One run per headline, and only on the largest tier: a 32px card title stays roman throughout, and a second italic run in one line turns the device into decoration.
### Line Height
- Display (48-120px): 0.95, and 1.0 where a headline wraps to two lines
- Title 3 (32px): 1.0
- Lead and Body (16-20px): 1.19-1.21
- Eyebrows and captions: 1.2
Tight is the point. A display line height above 1.0 opens a gap that the tracking has just closed.
## Spacing System
### Gap Scale
| Value | Usage |
| ----- | ---------------------------------------------- |
| 8px | Icon and label inside a pill |
| 12px | Tag rows, tight stacks |
| 16px | Card internals, list items |
| 24px | Between a headline and its sub-copy |
| 32px | Between cards in a row |
| 48px | Between a section header and its content |
| 80px | Between blocks inside a section |
| 160px | Between page sections on the cream ground |
| 240px | Around a full-bleed band, above and below |
### Padding Scale
| Value | Usage |
| ---------- | ------------------------------------------------ |
| [10, 20] | Pills and buttons |
| [12, 24] | Tags and status capsules |
| 24px | Inset panels |
| 40px | Sand cards |
| [80, 64] | Section blocks |
| [160, 120] | Full-bleed bands, top and bottom generous |
### Layout Pattern
- Page width: 1920, content held to a centred ~1240 column
- Hero: centred stack — uppercase eyebrow, display headline over two lines, 20px sub-copy, one pill CTA, a small availability caption beneath it
- Full-bleed bands: two per page at most, one inverted (#1A1A1A) and one teal (#034F46), each with 32-48px corners so the cream shows at the edges
- Feature list: a tall sand or teal panel on the left, a stack of 32px title + 16px copy pairs on the right
- Comparison: two panels side by side inside one sand card — the teal half asks, the paper half answers
- Decoration: one thick black organic ribbon per page, drawn as a path that crosses a section edge. One. It is a signature, and two is a pattern.
## Corner Radius
| Value | Usage | Rationale |
| ------- | ---------------------------------------------- | --------------------------------------------- |
| 4-8px | Inline chips, small inset wells | The smallest things stay nearly square |
| 12-16px | Cards inside a panel, image masks | One step under the block that holds them |
| 32px | Sand cards, section blocks | The signature container radius |
| 48px | Full-bleed bands | Large surfaces need a large corner to read soft |
| Full | Buttons, pills, tags, avatars, waveform capsules | Set the radius to the element's own height |
Every interactive element is a capsule. There are no rounded-rectangle buttons in this style — a button with an 8px corner reads as a different product.
## Icons
### Icon Font
- **Family**: Lucide
- **Style**: Outline, 2px stroke, rounded caps
This style is not icon-led: it prefers a drawn ribbon, a waveform capsule, or a photograph where another style would place a glyph. Keep icons to the places that genuinely need one — a check inside a status pill, a chevron in a nav — and let the type and the colour blocks do the rest.
### Commonly Used Icons
check, circle-check, chevron-down, chevron-right, arrow-right, arrow-up-right, mic, audio-lines, languages, sparkles, keyboard, command, globe, play, x
### Icon Sizes
| Size | Usage |
| ---- | -------------------------------------- |
| 14px | Inside a pill, beside 13-14px text |
| 16px | Buttons, list rows |
| 20px | Card headers |
| 24px | Section markers |
### Icon Color States
| State | Color | Usage |
| --------- | --------- | ---------------------------------------- |
| Ink | #1A1A1A | Default on cream and on a crayon surface |
| Ink 50% | #1A1A1A80 | Decorative and inactive marks |
| On Dark | #FFFFEB | On the inverted band, the teal band, pills |

202
crates/op-ai-skills/skills/style-guides/editorial-orange-light.md Normal file
View file

@ -0,0 +1,202 @@
---
name: 'editorial-orange-light'
tags: [editorial, clean, high-contrast, light-mode, bold-typography, orange-accent, confident, tech, corporate]
platform: webapp
---
## Style Scope
This guide is self-contained. Apply its palette, radius scale, spacing, shadows, and component treatments only when this exact guide is selected; do not borrow food, social, dashboard, luxury, terminal, or other guide-specific patterns into another style. Treat unnamed layout frames as structural by default: no fill, stroke, cornerRadius, or shadow unless the node is intentionally a card, input, button, badge, media mask, navigation surface, or other visible component. Avoid decorative wrapper shells around components; hierarchy should come from spacing, typography, and this guide's explicit surfaces.
## Style Summary
A near-white marketing page that gets its structure from solid near-black blocks rather than from borders. The page ground is #FAFAFA; whole sections — the product mock-up, the feature cards, the closing call to action — drop onto #18181B or #09090B panels with generous internal padding, so the reader travels through alternating light and dark bands instead of a uniform scroll. One saturated orange, #FF5A00, does every job an accent can do: the primary button, the active state, the progress fill, the inline link arrow. Nothing else competes with it.
Type is one grotesque, Inter, worked hard across a wide weight range. Headlines run 48-64px at 700 with negative tracking; body sits at 14-15px/1.5 in zinc greys; and small uppercase labels at 11-12px with +1.5 tracking mark every section so the page reads as an organised document rather than a stack of paragraphs.
Key aesthetics:
- **Alternating bands**: light page ground broken by full-bleed near-black sections; the contrast IS the layout
- **One accent, used decisively**: #FF5A00 on primary buttons, active toolbar cells, progress fills and link arrows — never as a tint or wash
- **Zinc neutral ramp**: every grey comes from one ramp (#09090B → #FAFAFA), which is what keeps dark panels from looking like different materials
- **Uppercase eyebrow labels**: 11-12px, +1.5 tracking, above every section title
- **Soft-square radii**: 10-14px on cards and panels, 8px on buttons and inputs, full capsules reserved for pills and badges
- **Product mock-ups as hero art**: a windowed application frame with a title bar and traffic-light dots, drawn with real UI inside it rather than a screenshot placeholder
## Color System
### Core Backgrounds
| Token | Value | Usage |
| --------------- | ------- | ---------------------------------------------------- |
| Page Background | #FAFAFA | Root page ground, the light half of every band pair |
| Page Alternate | #F4F4F5 | Quiet strips between two light sections |
| Panel Ink | #18181B | Full-bleed dark sections, feature cards, CTA block |
| Panel Deep | #09090B | Application-mock chrome, the darkest inset available |
| Panel Raised | #27272A | Cards and rows sitting on a dark panel |
| Panel Inset | #3F3F46 | Inputs, tracks and wells inside a dark panel |
### Text Colors
| Token | Value | Usage |
| ----------------- | ------- | ------------------------------------------------ |
| Ink | #18181B | Headlines and body on the light ground |
| Ink Secondary | #52525B | Supporting copy on the light ground |
| Ink Muted | #71717A | Captions, metadata, disabled labels |
| On Panel Primary | #FFFFFF | Headlines and values on a dark panel |
| On Panel Muted | #A1A1AA | Body and labels on a dark panel |
| Accent Text | #FF5A00 | Inline links, active labels, emphasised numerals |
### Border Colors
| Token | Value | Usage |
| --------------- | ------- | -------------------------------------------- |
| Hairline | #E4E4E7 | Section rules and dividers on light |
| Hairline Strong | #D4D4D8 | Input outlines, card edges that must be seen |
| On Panel Border | #27272A | Dividers inside a dark panel |
| Accent Border | #FF5A00 | Focus rings, selected tabs, active cells |
### Accent Colors
| Token | Value | Usage |
| --------------- | ------- | -------------------------------------------- |
| Primary | #FF5A00 | Primary buttons, active states, progress fill |
| Primary Pressed | #E14F00 | Pressed and hovered primary |
| Signal Blue | #2563EB | One full-bleed section that must break the two-tone rhythm (testimonials, community) |
| Success | #27C93F | Live/synced indicators, positive status dots |
| Warning | #FFBD2E | Pending status dots |
| Danger | #FF5F56 | Error status dots, destructive actions |
**How to use the accent**: give it to exactly one element per view — the primary CTA. Everything else that wants attention gets weight, size, or a dark panel instead. When an accent surface needs a second level (a hovered row, a selected chip), reach for the zinc ramp rather than a lighter orange; a tinted orange reads as a different brand.
## Typography
### Font Families
| Role | Family | Usage |
| -------- | ------------- | -------------------------------------------------------- |
| Display | Inter | Hero headline, section titles, metric values |
| Body | Inter | Paragraphs, card copy, labels |
| CJK | Noto Sans SC | Any Chinese run — pairs with Inter at the same weights |
| Monospace| Cosmica | Code listings, file names, token values |
### Type Scale
| Level | Size | Weight | Usage |
| ------------ | ---- | ------ | ------------------------------------------------- |
| Display | 64px | 700 | Hero headline (two lines, tracking -1.5) |
| Title 1 | 40px | 700 | Section headlines |
| Title 2 | 24px | 600 | Card and panel titles |
| Title 3 | 20px | 600 | Sub-headings, callout titles |
| Body Large | 16px | 400 | Hero sub-copy, section intros |
| Body | 14px | 400 | Card descriptions, list copy |
| Label | 14px | 500 | Navigation links, button labels |
| Label Strong | 14px | 600 | Active navigation, table headers |
| Caption | 12px | 400 | Metadata, helper text |
| Eyebrow | 11px | 600 | Uppercase section labels (+1.5 tracking) |
| Code | 12px | 400 | Monospace listings |
### Font Weights
| Weight | Value | Usage |
| -------- | ----- | ----------------------------------------- |
| Regular | 400 | Body copy, captions |
| Medium | 500 | Navigation, secondary labels |
| Semibold | 600 | Card titles, eyebrows, emphasised numbers |
| Bold | 700 | Display and section headlines |
### Letter Spacing
- Display (48-64px): -1.5px to -0.5px
- Section headlines (32-40px): -0.5px
- Uppercase eyebrows: +1.5px
- Body and labels: 0px
### Line Height
- Display: 1.05
- Headlines (20-40px): 1.2
- Body (14-16px): 1.5
- Captions and eyebrows: 1.4
## Spacing System
### Gap Scale
| Value | Usage |
| ----- | ----------------------------------------- |
| 4px | Icon and label pairs, tight numeral stacks |
| 6px | Code lines, dense status rows |
| 8px | Badge groups, tag rows |
| 12px | Button groups, list items |
| 16px | Card internals, form fields |
| 20px | Nested panel sections |
| 24px | Cards within a grid |
| 32px | Section sub-blocks |
| 48px | Between page sections |
| 80px | Between full-bleed bands |
### Padding Scale
| Value | Usage |
| --------- | ------------------------------------- |
| [4, 12] | Small pills, status chips |
| [6, 12] | Tabs, inline tags |
| [12, 20] | Buttons |
| [14, 16] | Inputs |
| 20px | Compact cards on a dark panel |
| 28px | Feature cards |
| 32px | Panel interiors |
| [80, 80] | Full-bleed section blocks |
### Layout Pattern
- Page width: 1200px, content inset 80px on each side
- Hero: two columns — copy on the left (max 520px), a windowed product mock-up on the right
- Feature grid: three equal cards on a dark band, gap 24
- Logo wall: a single uppercase eyebrow over a horizontal row of icon+wordmark pairs, gap 32
- Footer: brand column (240px fixed) + link columns that hug their labels + a newsletter column that takes the remainder. Do not make the link rail and the newsletter both `fill_container` — they will split the row evenly and the rail's columns will spill.
## Corner Radius
| Value | Usage | Rationale |
| ----- | ------------------------------------ | ----------------------------------------- |
| 4px | Progress tracks, thin indicators | Barely softened, reads as a bar not a pill |
| 8px | Buttons, inputs, small tags | The interactive default |
| 10px | Cards inside a panel | One step under the panel that holds them |
| 14px | Panels, feature cards, mock-up frame | The signature container radius |
| 24px | Full-bleed band blocks | Large surfaces need a larger corner to read as soft |
| Full | Avatars, status dots, capsule pills | Set the radius to the element's own size |
Design rationale: radii step up with the size of the thing they belong to, so nesting always reads correctly — a 10px card inside a 14px panel looks contained, whereas equal radii look like a mistake.
## Icons
### Icon Font
- **Family**: Lucide
- **Style**: Outline, 2px stroke, rounded caps
### Commonly Used Icons
zap, shield, bar-chart-2, panels-top-left, layers, box, triangle, credit-card, sliders-horizontal, arrow-right, play, check, circle-check, globe, mail, message-circle, sparkles, activity, git-pull-request, cpu, link
### Icon Sizes
| Size | Usage |
| ---- | ----------------------------------------- |
| 14px | Inline with 12-14px text, status markers |
| 16px | Button icons, list bullets |
| 18px | Card header icons |
| 20px | Logo-wall marks, section markers |
| 24px | Feature-card badges (inside a 44px tile) |
### Icon Color States
| State | Color | Usage |
| ---------- | ------- | --------------------------------------- |
| Accent | #FF5A00 | Primary action icons, active states |
| On Light | #52525B | Default icons on the page ground |
| On Panel | #A1A1AA | Default icons inside a dark panel |
| On Accent | #FFFFFF | Icons sitting on an orange fill |
| Muted | #71717A | Disabled and decorative marks |

214
crates/op-ai-skills/skills/style-guides/highlighter-notebook-light.md Normal file
View file

@ -0,0 +1,214 @@
---
name: 'highlighter-notebook-light'
tags: [social-card, card-series, cjk-type, vertical-portrait, light-mode, education, friendly, clean, display, soft-corners, crisp, data-focused]
platform: card
---
## Style Scope
This guide is self-contained and written for **Chinese social cards** — a swipeable series of fixed-canvas pages read on a phone, not a scrolling page and not an app screen. Apply its palette, paper language, spacing, and type treatments only when this exact guide is selected; do not borrow SaaS, dashboard, wellness, or e-commerce patterns into it. Treat unnamed layout frames as structural by default: no fill, stroke, cornerRadius, or shadow unless the node is deliberately a highlight band, a sticky note, a grid panel, or a margin rule.
## Style Summary
Somebody's revision notes, photographed well. The page is `#FAFAF8` — copier white with a trace of warmth — carried by a faint cross-dot grid and a single red margin rule down the left. The writing colour is `#212939`, a blue-black, because a ballpoint's ink is blue-black and that is the tell that separates "handwritten notes" from "a printed handout". Nothing in the system is pure black and nothing is pure white.
The signature device is the **highlight band**, and it is defined by two constraints that most treatments get wrong. First, the fluorescent colours are pulled *down* to chroma 0.06-0.145 rather than up to screen-fluorescent saturation, because a real highlighter is translucent and the paper dilutes it — an undiluted highlight reads as a colour block, not as a pen stroke. Second, **the band is 55% of the line height, sitting from 45% above the baseline**, and it wraps only the highlighted characters plus 8px each side. A band that fills the full line height and the full column width has stopped being a highlighter and become a background.
Everything else is study-desk furniture used sparingly: a sticky note with one curled corner, a red-pen circle, a cross-dot grid at 48px pitch. The style is built for the highest-save-rate content — checklists, frameworks, step sequences, numbers — so its density ceiling is higher than the other light themes, and its ranking device is size and highlight rather than colour variety.
Key aesthetics:
- **Copier white, not pure white**: `#FAFAF8`, with a cross-dot grid at 48px pitch
- **Blue-black ink, not black**: `#212939` — the ballpoint tell
- **Diluted fluorescents**: chroma 0.06-0.145, because paper dilutes a translucent marker
- **The band is 55% of line height**, from 45% above baseline, hugging the words plus 8px
- **Two highlight colours per card, maximum**
- **Red pen circles and annotates, never sets text**: 8 characters or fewer
- **One sticky note per card**, with one curled corner and the only shadow in the system
- **Margin rule at one column in from the left**, the full height of the card
- **Rank by size and highlight, never by adding colours**
## Color System
### Core Backgrounds
| Token | Value | Usage |
| --------------- | ------- | ----------------------------------------------------------------- |
| Page Background | #FAFAF8 | The copier sheet. Every card's ground; never a panel colour |
| Card Surface | #EFF2F4 | Grid panel — the standard block for a grouped set of rows |
| Grid Line | #D6DFE6 | The cross-dot grid and table rules |
| Sticky Surface | #F7E8AF | The sticky note. One per card |
### Text Colors
| Token | Value | Usage |
| -------------- | ------- | ------------------------------------------------------------------ |
| Primary Text | #212939 | Headlines and body copy. 13.95:1 on the sheet |
| Secondary Text | #545B6A | Deck lines, annotations, list sub-copy. 6.52:1 |
| Muted Text | #69707F | Sources, page numbers, corner marks. 4.76:1 |
| On Highlight | #212939 | Text sitting on a highlight band — 9.5:1 or better on all three |
The ink ramp carries a +265° blue cast at chroma 0.022-0.032. Flattening it to neutral grey turns the whole style into a printed worksheet, which is the opposite of what it is for.
### Border Colors
| Token | Value | Usage |
| --------------- | ------- | ------------------------------------------------------------------------ |
| Default Border | #D6DFE6 | Grid lines, table rules, panel edges. **Never carries text** (1.6:1) |
| Margin Rule | #E9B5B4 | The single red rule down the left margin, 2px, full card height |
### Accent Colors
| Token | Value | Usage |
| ---------------- | ------- | ----------------------------------------------------------------- |
| Primary Accent | #FBE76B | Highlight yellow. Carries ink at 11.62:1 |
| Highlight Mint | #A5F3C0 | Highlight mint. Carries ink at 11.23:1 |
| Highlight Pink | #F8C5CD | Highlight pink. Carries ink at 9.62:1 |
| Red Pen | #C33939 | Circles, underlines, annotations of 8 characters or fewer (5.07:1) |
**How to use the highlights.** A band is a `rect` behind a text run: height = 55% of the line height, top edge = 45% of the line height above the baseline, width = the run's measured width plus 8px on each side, radius 4px. It never spans the full line, never spans the full column, and never sits behind a whole paragraph.
**Two highlight colours per card, maximum**, and each one marks at most two runs. Three colours on one page turns a note into a rainbow and the reader stops knowing which mark matters.
Red pen is a different instrument, not a fourth highlight. It draws circles and underlines and writes short annotations; it never sets a headline, never sets body copy, and never fills anything.
**Gradients**: none. Highlighter ink on paper is flat; the only depth in the whole system is the sticky note's shadow.
## Typography
### Font Families
| Role | Family | Range | Usage |
| ---------------- | --------------------------------------------- | ------------- | ------------------------------------------------------- |
| Display | Familjen Grotesk, Noto Sans SC Heavy | 88px and up | Every headline, big numeral, and framework label |
| Body / Interface | Geist, LXGW Neo XiHei, Noto Sans SC | 64px and down | Body, deck lines, list rows, captions, page numbers |
| Data / Numerals | Geist | any | Every figure, with tabular-nums on |
LXGW Neo XiHei is the body face rather than 思源黑体 on purpose: it is lighter and more open on screen, and this style's content is list-dense, so the body face is doing more work than usual. All faces named are OFL.
The Latin face leads every fallback chain so digits and Latin words are set by Geist rather than by the Chinese face's own Latin. Because this style carries checklists and metrics, `tabular-nums` is mandatory on every numeric run — without it 1 and 8 have different widths and a column of figures visibly shivers.
### Type Scale
| Level | Size | Font | Weight | Tracking | Line Height | Usage |
| ---------- | ----- | ------- | ------ | -------- | ----------- | ----------------------------------------- |
| Display XL | 168px | Display | 900 | -0.01em | 1.05 | Cover headline, 2-6 characters |
| Display L | 120px | Display | 900 | -0.01em | 1.10 | Cover headline, big numeral |
| Display | 88px | Display | 900 | 0 | 1.15 | Interior headline, framework label |
| Title 1 | 64px | Body | 700 | 0 | 1.25 | Page title |
| Title 2 | 48px | Body | 600 | 0 | 1.30 | List-item title, table header |
| Body L | 40px | Body | 400 | 0.02em | 1.70 | **Default body copy** |
| Body | 36px | Body | 400 | 0.02em | 1.70 | Body floor — never below |
| Caption | 32px | Body | 400 | 0.02em | 1.50 | Sources, page numbers, annotations |
**At most four of these eight on one card.** This style's content is the densest of the four card themes, which makes the four-tier cap more important here, not less — density is carried by the list structure, never by adding type sizes.
### Font Weights
| Weight | Value | Usage |
| -------- | ----- | ----------------------------------------------------------- |
| Regular | 400 | All body copy and captions |
| Semibold | 600 | List-item titles and table headers |
| Bold | 700 | Page titles |
| Heavy | 900 | Display lines only — the whole style's contrast lives here |
The display tier at 900 against body at 400 is the primary hierarchy device, and it costs nothing to load in a variable face. No italic on Han characters; emphasis is weight, a highlight band, or a red-pen underline.
### Line Height
- Display (88-168px): 1.05-1.15
- Titles (48-64px): 1.25-1.30
- Body (36-40px): **1.70** — Chinese needs roughly 0.2 more leading than the Latin default, and here it also leaves room for the highlight band to sit without touching the line above
- Captions: 1.50
### Letter Spacing
Body 0.02em; titles 0; display -0.01em. Latin all-caps labels +0.10em. Never apply Latin display tracking of -0.05em to Han text.
### Line Length
Body lines cap at **22 Han characters**. At 40px on the 920px column that falls out naturally; at 36px, narrow the measure to 10 of 12 columns.
## Spacing System
### Gap Scale
| Value | Usage |
| ----- | ------------------------------------------------------------------------- |
| 8px | The baseline unit; also the padding each side of a highlight band |
| 16px | Checkbox to label, icon to label |
| 24px | Between a list number and its text |
| 32px | Between the lines *within* one list item |
| 72px | Between list items — **must be at least 2× the intra-item gap**, or the list reads as one block |
| 48px | Between a headline and its deck line |
| 120px | Between the headline block and the content block |
### Padding Scale
| Value | Usage |
| --------- | ---------------------------------------------------------------- |
| [12, 20] | Small tags and checkbox cells |
| 32px | Table cells |
| 40px | Grid panels |
| 48px | The sticky note |
| [96, 80] | The card — 96 top, 80 sides |
| 128px | Card bottom, larger than the top so feed chrome misses the last line |
### Layout Pattern
- Canvas 1080 × 1440 (3:4). Content column 920: 12 columns of 62 with 16 gutters
- Margin rule: 2px in Margin Rule colour, one column in from the left edge, full card height
- Grid: 4×4 dots in Grid Line at 48px pitch, behind everything, never over text
- Cover: heavy display headline, one highlighted run inside it, deck line, one sticky note
- Lists: 3-7 items; one marker type per card — numbers **or** checkboxes **or** timeline nodes, never a mixture
- Sticky note: one per card, 2° rotation or less, one curled corner path, a 0/4/12 shadow at 8% — the only shadow in the system
- Page number: bottom-right, Caption size, Muted Text
## Corner Radius
| Value | Usage | Rationale |
| ----- | ----------------------------------------------- | -------------------------------------------------- |
| 4px | Highlight bands, grid dots, micro tags | A marker stroke has a barely-rounded end |
| 8px | Checkbox squares, table cells | Nearly square |
| 16px | Button radius | The interactive floor |
| 20px | Card radius — grid panels and the sticky note | The signature container radius |
Nothing is a full capsule. A pill in a notebook is a UI element that wandered in from another product.
## Icons
### Icon Font
- **Family**: Lucide
- **Style**: Outline, 2px stroke, round caps
### Commonly Used Icons
check, square, circle, arrow-right, arrow-up-right, chevron-right, pencil, bookmark, sticky-note, list, hash, trending-up, trending-down, alert-triangle, star
### Icon Sizes
| Size | Usage |
| ---- | ---------------------------------------- |
| 32px | Beside Caption text |
| 40px | Beside Body text, checkboxes, list markers |
| 56px | Section markers |
### Icon Color States
| State | Color | Usage |
| --------- | ------- | ---------------------------------------- |
| Primary | #212939 | Default on the sheet and on panels |
| Muted | #69707F | Decorative and inactive marks |
| Accent | #C33939 | The single red-pen marker per card |
## Anti-Patterns
- **The band never fills the line.** Full-line-height or full-column-width highlight bands are the single most common failure of this style; they turn a pen mark into a background wash.
- **Never saturate the fluorescents.** Screen-fluorescent chroma above 0.20 makes the palette read as a candy UI, not as marker on paper.
- **No handwriting face for body copy.** A script face may annotate at 32px or below; it may never set a paragraph.
- **Red pen never sets text longer than 8 characters** and never fills a shape.
- **One marker type per card.** Numbers, checkboxes, and timeline nodes are three different systems; mixing two on one page destroys the scan pattern that makes this style worth saving.
- **No pure black, no pure white.**
- **No shadow anywhere except the one sticky note.**
- **No third highlight colour**, and no more than two marked runs per colour.

216
crates/op-ai-skills/skills/style-guides/leadprint-vermilion-light.md Normal file
View file

@ -0,0 +1,216 @@
---
name: 'leadprint-vermilion-light'
tags: [social-card, card-series, cjk-type, vertical-portrait, light-mode, editorial, magazine, serif, display, warm-tones, red-accent, sharp-corners, confident]
platform: card
---
## Style Scope
This guide is self-contained and written for **Chinese social cards** — a swipeable series of fixed-canvas pages read on a phone, not a scrolling page and not an app screen. Apply its palette, rule system, spacing, and type treatments only when this exact guide is selected; do not pull dashboard, terminal, wellness, or SaaS patterns into it. Treat unnamed layout frames as structural by default: no fill, stroke, cornerRadius, or shadow unless the node is deliberately a masthead rule, a tinted column, a pull-quote block, or a table row. Structure comes from rules and column edges, not from cards with shadows.
## Style Summary
A newspaper set in lead, one colour over black. The page is `#F1EDE1` — mechanical woodpulp newsprint, greyer and cooler than a cream ivory and much cooler than rice paper. The ink is not black: `#1E1A16`, lightness 0.22 with a faint warm cast, because lead ink laid on absorbent pulp spreads a hair and never reaches true black. Those two decisions — 2% each — are the entire difference between "looks like a newspaper" and "black text on a white page".
There is exactly one chromatic colour: **vermilion**, the second-run red of an old masthead, orange-leaning and a little dirty. Newspapers of this period were black plus one, and the palette keeps that constraint literally. A second colour exists (`#324673`, an indigo stamp) and is capped at **one appearance per deck** — it is the ink the editor used to mark the proof, not part of the printing.
The signature device is **misregistration**. The cover headline is set twice: once in vermilion, offset by (3, 3), sitting underneath the black setting. That is what a two-run press does when the sheet shifts. It happens once, on the cover, and only there — used twice it stops being a press artefact and becomes a graphic effect.
Everything else is rules and columns. The masthead is a heavy rule over a hairline. Columns are separated by a 1px vertical. Tables use a tinted zebra row rather than a border. There is no shadow anywhere in the system, because ink on pulp does not cast one.
Key aesthetics:
- **Woodpulp ground**: `#F1EDE1` at chroma 0.016 — machine-made newsprint, not ivory and not rice paper
- **Ink that isn't black**: `#1E1A16`, warm-cast, the spread of lead ink into pulp
- **Black plus one**: vermilion is the only chromatic colour; a second is capped at one per deck
- **Misregistration once**: the cover headline doubled in vermilion at (3, 3), under the black
- **Rules, not cards**: heavy-over-hairline masthead, 1px column rules, tinted zebra rows
- **No shadow, no radius above 8px**: printed matter is flat and cut square
- **Old-Song display over Song body**: a hard-cut headline face over a publishing-grade serif
- **Vermilion as ink and as wash**: solid for headline runs, a tinted wash for blocks carrying black text
- **Grid visible in the outcome**: columns align hard; a hanging element is a defect
## Color System
### Core Backgrounds
| Token | Value | Usage |
| --------------- | ------- | ---------------------------------------------------------------- |
| Page Background | #F1EDE1 | The newsprint sheet. The whole card; never a panel colour |
| Card Surface | #E5DDCC | Aged stock — pull-quote blocks, sidebars, tinted columns |
| Tint Surface | #D8CEBB | Table zebra rows and the deepest tint |
| Vermilion Wash | #FAD5C8 | The red block that carries black text (12.69:1) |
| Inverted Band | #1E1A16 | One full-bleed ink band per deck, at most |
### Text Colors
| Token | Value | Usage |
| -------------- | ------- | ----------------------------------------------------------------- |
| Primary Text | #1E1A16 | Headlines and body copy. 14.77:1 on the sheet |
| Secondary Text | #544F4A | Deck lines, annotations, list sub-copy. 6.92:1 |
| Muted Text | #6D6863 | Sources, bylines, page numbers. 4.71:1 |
| On Ink | #F1EDE1 | All text on the inverted band and on solid vermilion |
The grey ramp is warm at hue 60. A neutral grey caption on this stock reads blue by comparison and immediately looks like a screenshot of a website.
### Border Colors
| Token | Value | Usage |
| --------------- | ------- | --------------------------------------------------------------- |
| Default Border | #B3B1AA | Column rules, hairlines, table dividers. **Never carries text** |
| Lead Grey | #717579 | Icon strokes and rule marks that need more weight than a hairline |
`#B3B1AA` at 2.28:1 against the sheet is a rule colour and nothing else. Any text set in it fails, so the ramp above exists to make that unnecessary — captions go to Muted Text.
### Accent Colors
| Token | Value | Usage |
| -------------- | ------- | ------------------------------------------------------------------------ |
| Primary Accent | #B74A37 | Vermilion. Headline runs ≥40px, rules, numerals, the misregister layer |
| Vermilion Wash | #FAD5C8 | The vermilion block that carries black text |
| Indigo Stamp | #324673 | The proof-mark blue. **Exactly one appearance per deck** |
**How to use vermilion.** At 4.43:1 on the sheet it is legal at 40px and up, or at any size in weight 700. Below that it goes to black and the emphasis moves to a vermilion rule underneath the phrase. A solid vermilion block must carry **newsprint-coloured text** (4.43:1) — ink on vermilion is only 3.33:1 and fails. The house choice is the wash instead: black on `#FAD5C8` is 12.69:1, and a saturated red panel on newsprint reads as advertising.
Vermilion appears **at most twice per card**. The masthead rule counts as one of the two.
**Gradients**: none. Not on a block, not on a rule, not on the ground. Two-run letterpress has no gradients and neither does this style.
## Typography
### Font Families
| Role | Family | Range | Usage |
| ---------------- | -------------------------------------------- | ------------- | ----------------------------------------------------- |
| Display | Libre Caslon Text, 京华老宋体, Noto Serif SC | 88px and up | Mastheads, cover headlines, pull quotes |
| Body / Interface | Archivo, Noto Serif SC | 64px and down | Body, deck lines, list rows, captions, page numbers |
| Data / Numerals | Archivo | any | Every figure, with tabular-nums on |
The Latin face leads every fallback chain so digits and Latin words are set by Archivo / Libre Caslon rather than by the Chinese face's own weak Latin. 京华老宋体 is free for commercial use; the rest are OFL.
Body copy is a **serif**, not a sans. This is a newspaper: a sans body would be a magazine, which is a different object.
### Type Scale
| Level | Size | Font | Weight | Tracking | Line Height | Usage |
| ---------- | ----- | ------- | ------ | -------- | ----------- | --------------------------------------- |
| Display XL | 168px | Display | 700 | -0.01em | 1.05 | Masthead-scale cover headline, 2-6 字 |
| Display L | 120px | Display | 700 | -0.01em | 1.10 | Cover headline, large numerals |
| Display | 88px | Display | 700 | 0 | 1.15 | Interior headline, pull quote |
| Title 1 | 64px | Body | 700 | 0 | 1.25 | Page title |
| Title 2 | 48px | Body | 600 | 0 | 1.30 | Section title, table header |
| Body L | 40px | Body | 400 | 0.02em | 1.70 | **Default body copy** |
| Body | 36px | Body | 400 | 0.02em | 1.70 | Body floor — never below |
| Caption | 32px | Body | 400 | 0.02em | 1.50 | Bylines, sources, page numbers |
**At most four of these eight on one card.** Newspapers look busy but are ruthlessly few-tiered; the density comes from column structure, not from type sizes.
### Font Weights
| Weight | Value | Usage |
| -------- | ----- | -------------------------------------------------------- |
| Regular | 400 | All body copy and captions |
| Semibold | 600 | Section titles and table headers |
| Bold | 700 | Page titles, display lines, and small-size vermilion runs |
No italic on Han characters — the synthesised skew deforms the strokes. Emphasis is weight, a vermilion rule under the phrase, or a dot emphasis mark, which is the native Chinese device and the most period-correct one here.
### Line Height
- Display (88-168px): 1.05-1.15
- Titles (48-64px): 1.25-1.30
- Body (36-40px): **1.70** — Han glyphs fill the em box, so Chinese body needs about 0.2 more leading than the Latin default
- Captions: 1.50
### Letter Spacing
Body 0.02em; titles 0; display -0.01em. Latin all-caps labels take +0.10em, the only positive tracking in the system. Never apply Latin display tracking of -0.05em to Han text.
### Line Length
Body lines cap at **22 Han characters**. At 40px on a 920px column that is the natural break; at 36px the column must narrow to 10 of 12 columns to hold the cap. Runaway line length does more damage to readability than any type choice.
## Spacing System
### Gap Scale
| Value | Usage |
| ----- | -------------------------------------------------- |
| 8px | The baseline unit |
| 16px | Byline to rule, icon to label |
| 24px | Between a list number and its text |
| 32px | Between paragraphs (1.5 × the 40px body line) |
| 48px | Between a headline and its deck line |
| 72px | Between blocks within a card |
| 120px | Between the masthead block and the content block |
### Padding Scale
| Value | Usage |
| --------- | --------------------------------------------------------- |
| [12, 20] | Vermilion tags and corner marks |
| 32px | Table cells |
| 40px | Pull-quote and sidebar blocks |
| 56px | The inverted ink band |
| [96, 80] | The card — 96 top, 80 sides |
| 128px | Card bottom, larger than the top so feed chrome doesn't sit on the last line |
### Layout Pattern
- Canvas 1080 × 1440 (3:4). Content column 920: 12 columns of 62 with 16 gutters
- Masthead: a 3px rule over a 1px rule, full content width, with the headline between them
- Cover: masthead, then the doubled misregistered headline, then a deck line, then one rule
- Columns: two-column body is allowed only at Body 36 in an 11-column measure; otherwise single column
- Tables: header row in Card Surface, zebra rows in Tint Surface, no vertical rules
- Inverted band: at most one per deck, full-bleed, 0 radius
- Page number: bottom-right, Caption size, Muted Text, no frame
## Corner Radius
| Value | Usage | Rationale |
| ----- | -------------------------------------------------- | ----------------------------------------- |
| 0px | Rules, bands, table cells, tinted columns | Printed matter is cut, not rounded |
| 4px | Button radius, small vermilion tags | The barest softening on an interactive tag |
| 8px | Card radius — pull-quote blocks and sidebars | The maximum in this system |
Nothing exceeds 8px and nothing is a capsule. A rounded card in this style reads as a web component pasted onto a newspaper.
## Icons
### Icon Font
- **Family**: Lucide
- **Style**: Outline, 2px stroke, square caps
Icons are near-absent. A newspaper marks things with rules, numerals, and dingbats, and so does this style. Use an icon only in a list marker or a source line.
### Commonly Used Icons
arrow-right, arrow-up-right, chevron-right, minus, square, quote, hash, bookmark, external-link, corner-down-right
### Icon Sizes
| Size | Usage |
| ---- | ------------------------------ |
| 32px | Beside Caption text |
| 40px | Beside Body text, list markers |
| 56px | Section markers |
### Icon Color States
| State | Color | Usage |
| --------- | ------- | -------------------------------------- |
| Primary | #1E1A16 | Default on the sheet |
| Muted | #6D6863 | Decorative and inactive marks |
| Accent | #B74A37 | The single marker carrying emphasis |
| On Ink | #F1EDE1 | On the inverted band |
## Anti-Patterns
- **No aging effects.** No coffee stains, no torn edges, no curling paper, no halftone dot screens. The stock's character is already in its colour; simulated damage is costume.
- **No brushwork or seals.** No ink wash, no dry-brush, no calligraphic stroke, no red seal stamps. This is a machine-set lead page: the letterforms are hard-edged and the red is a second press run, not a chop.
- **Misregistration exactly once**, on the cover only. A second use makes it a decoration rather than an artefact.
- **`#B3B1AA` never carries text.** It is a rule colour at 2.28:1.
- **No shadows.** Ink on pulp casts none, and the moment one appears the whole system reads as a web page.
- **Indigo Stamp more than once per deck** voids the "black plus one" premise the style is built on.
- **No gradient anywhere.**

217
crates/op-ai-skills/skills/style-guides/mingsha-mineral-dark.md Normal file
View file

@ -0,0 +1,217 @@
---
name: 'mingsha-mineral-dark'
tags: [social-card, card-series, cjk-type, vertical-portrait, dark-mode, warm-tones, editorial, serif, display, textured, sophisticated, high-contrast]
platform: card
---
## Style Scope
This guide is self-contained and written for **Chinese social cards** — a series of 6-10 fixed-canvas pages read by swiping on a phone, not a scrolling page and not an app screen. Apply its palette, texture language, spacing, and type treatments only when this exact guide is selected; do not borrow dashboard, terminal, luxury, food, or landing-page patterns into it. Treat unnamed layout frames as structural by default: no fill, stroke, cornerRadius, or shadow unless the node is deliberately a plaster panel, a mineral block, a caption rail, or a foil-ruled corner mark. Hierarchy comes from the mineral colours and the size jump, not from wrapper shells.
## Style Summary
A cave-wall ground with pigment sitting on top of it. The page is `#21120B` — the ochre mud of a plaster wall after the paint has come off, not a black and not a brown card. Everything above it is one of five mineral pigments ground from actual stone: cinnabar red, azurite blue, malachite green, ochre, and shell white. The relationship is physical rather than decorative — **opaque pigment laid over bare plaster**, so a colour block always reads as something applied to the wall, never as the wall changing colour.
The signature device is **flaking**. Three to five irregular polygons in the next plaster tone up sit on the ground, edges deliberately off-grid, as if the top layer had come away. They are the only shape in the system allowed to ignore the column grid, and no two of them may be the same path — a repeated flake stops being erosion and becomes wallpaper.
Type splits cleanly. A旧字形 Ming display face carries every headline at 88px and up; a thin screen-optimised sans carries everything below it. The display face is what a cave inscription panel would look like if it were set rather than brushed: square-shouldered, high-contrast strokes, no calligraphic gesture at all. Body copy is shell white at three brightnesses rather than three greys, because the warm ochre ground turns a cold grey secondary tone muddy within one step.
Colour is rationed hard. **Three pigments exist; at most two appear on any one page, and each appears at most twice.** Gold leaf is not a pigment — it is a 1px rule around a corner mark, and it never touches text below 64px.
Key aesthetics:
- **Plaster ground**: `#21120B`, ochre mud at chroma 0.028 — a paper-weight surface, never a card colour
- **Flaking as the only texture**: 3-5 irregular polygons, off-grid, never repeated
- **Opaque pigment, never wash**: mineral colour covers; it does not bleed, blur, or fade into the ground
- **Two pigments per page, twice each**: the third pigment on a page is a bug
- **Shell white at three brightnesses**: `#EFEBE2` / `#BBB7AD` / `#8A867D`, warm-tinted so they sit on ochre
- **Ming display over thin sans**: 88px and up is the Ming face; below it, nothing but the sans
- **Gold as a rule, never as ink**: 1px foil frames on corner marks only
- **Grit at the edges**: 8-14 four-pixel squares of pigment scattered within 40px of a colour block's edge
- **No brush, anywhere**: no ink bleed, no dry-brush, no calligraphic stroke — this is applied pigment, not painting
## Color System
### Core Backgrounds
| Token | Value | Usage |
| --------------- | ------- | --------------------------------------------------------------- |
| Page Background | #21120B | The plaster wall. Every card's ground; never a panel colour |
| Card Surface | #312018 | Plaster panel — the standard raised block |
| Raised Surface | #412E25 | A panel on a panel, and the fill of every flake polygon |
| Wash Surface | #4F3E37 | The quietest step up, for a resting row inside a panel |
Four steps, all at hue 45 and chroma 0.030. The ramp is lightness only — a shift in hue between surfaces would read as two different walls.
### Text Colors
| Token | Value | Usage |
| -------------- | ------- | ------------------------------------------------------------------ |
| Primary Text | #EFEBE2 | Headlines and body copy. 15.27:1 on the ground |
| Secondary Text | #BBB7AD | Sub-copy, deck lines, list annotations. 9.07:1 |
| Muted Text | #8A867D | Captions, sources, page numbers, corner marks. 5.01:1 |
| On Pigment | #EFEBE2 | All text on a deep-pigment block |
Shell white carries a +85° warm tint at chroma 0.012. On this ochre ground a neutral grey secondary tone goes green within one step; the tint is what keeps the three brightnesses reading as one material.
### Border Colors
| Token | Value | Usage |
| --------------- | ------- | ------------------------------------------------------------ |
| Default Border | #4F3E37 | The rare hairline between two panels of the same tone |
| Foil Rule | #D5AA55 | 1px gold rule, corner marks and page-number frames only |
Borders are close to absent. Two panels are told apart by lightness, the way two coats of plaster are. If a rule appears, it is because two same-tone surfaces meet, and it is 1px.
### Accent Colors
| Token | Value | Usage |
| ----------------- | ------- | ---------------------------------------------------------------------- |
| Primary Accent | #C54F3B | Cinnabar. Display type ≥48px, thick underscores, flake highlights |
| Cinnabar Deep | #9D2E1C | The cinnabar block that carries shell-white text (6.21:1) |
| Azurite | #3577AB | The blue pigment: chart bars, markers, numerals |
| Azurite Deep | #105482 | The azurite block that carries shell-white text (6.76:1) |
| Malachite | #479173 | The green pigment. **Once per deck**, never more |
| Malachite Deep | #1B674C | Its text-bearing block (5.71:1) |
| Gold Leaf | #D5AA55 | Foil: 1px rules and corner marks. Never body ink |
**How to use the pigments.** Each pigment has a bright tone and a deep tone, and they are not interchangeable: the bright tone is for *type and marks sitting on the wall* (3.79-4.81:1 — legal at 48px and above, never for body copy), the deep tone is for *blocks that carry white text*. Picking the bright tone as a block fill is the single most common way to break this style — shell white on `#C54F3B` is only 3.87:1 and body copy inside it fails.
At most two pigments appear on one card, each at most twice. Malachite is capped at one appearance across the whole deck — it is the rarest of the three stones and the palette treats it that way.
**Gradients** exist for exactly one thing: the niche glow. A single `radial` from Muted Text at 12% to transparent, centred around (0.5, 0.28), used once on the cover page. No gradient on a block, a panel, a button, or a pigment.
## Typography
### Font Families
| Role | Family | Range | Usage |
| ---------------- | ----------------------------------- | ------------ | ----------------------------------------------------------- |
| Display | Newsreader, 汇文明朝体, Noto Serif SC | 88px and up | Every headline, pull quote, and large numeral |
| Body / Interface | Geist, LXGW Neo XiHei, Noto Sans SC | 64px and down | Body, captions, list rows, annotations, page numbers |
| Data / Numerals | Geist | any | All figures, with tabular-nums on |
The Latin face is written **first** in every fallback chain. Font-family matching is per-character: Latin faces carry no CJK codepoints, so Han characters fall through to the Chinese face automatically. Written the other way round, the Chinese face's own mediocre Latin swallows every digit and letter and the paired Latin face never appears.
汇文明朝体 is free for commercial use; Newsreader, Geist, LXGW Neo XiHei, and the Noto faces are OFL.
### Type Scale
| Level | Size | Font | Weight | Tracking | Line Height | Usage |
| ---------- | ----- | ------- | ------ | -------- | ----------- | ----------------------------------------- |
| Display XL | 168px | Display | 700 | -0.01em | 1.05 | Cover headline, 2-6 characters |
| Display L | 120px | Display | 700 | -0.01em | 1.10 | Cover headline, large numerals |
| Display | 88px | Display | 700 | 0 | 1.15 | Interior headline, pull quote |
| Title 1 | 64px | Body | 700 | 0 | 1.25 | Page title |
| Title 2 | 48px | Body | 600 | 0 | 1.30 | Section title, card title |
| Body L | 40px | Body | 400 | 0.02em | 1.70 | **Default body copy** |
| Body | 36px | Body | 400 | 0.02em | 1.70 | Body floor — never go below |
| Caption | 32px | Body | 400 | 0.02em | 1.50 | Sources, page numbers, corner marks |
**Use at most four of these eight on one card.** More than four and the levels stop meaning anything; the scale exists to force that restraint, not to offer variety.
32px is the floor for anything at all. A card renders 1080px wide and is read at roughly 390pt, so 32px lands near 11.6pt — already the bottom of comfortable. Below that is not "small type", it is a defect.
### Font Weights
| Weight | Value | Usage |
| -------- | ----- | -------------------------------------------------------------------- |
| Regular | 400 | All body copy and captions |
| Semibold | 600 | Section titles, the emphasised run inside a body line |
| Bold | 700 | Page titles and every display line |
Chinese has no italic. Never set `font-style: italic` on Han characters — the browser synthesises a skew that deforms the strokes. Emphasis moves to weight (400 → 600), to a pigment underscore, or to a change of face. Turn synthesis off globally.
### Line Height
- Display (88-168px): 1.05-1.15 — the larger the size, the tighter
- Titles (48-64px): 1.25-1.30
- Body (36-40px): **1.70** — Chinese runs about 0.2 higher than the Latin equivalent because Han glyphs fill the em box top to bottom, and 1.5 leaves them touching
- Captions: 1.50
### Letter Spacing
Body 0.02em; titles 24-64px at 0; display above 88px at -0.01em. **Never apply the Latin display convention of -0.05em to Han text** — Han glyphs are already full-width by design, and negative tracking at that scale collides strokes.
## Spacing System
### Gap Scale
| Value | Usage |
| ----- | ------------------------------------------------- |
| 8px | The baseline unit. Everything is a multiple |
| 16px | Inside a caption rail, icon to label |
| 24px | Between a list row's number and its text |
| 32px | Between stacked list rows |
| 48px | Between a headline and its deck line |
| 72px | Between blocks inside a card |
| 120px | Between the headline block and the content block |
### Padding Scale
| Value | Usage |
| --------- | ------------------------------------------------------- |
| [16, 24] | Corner marks and small pigment tags |
| 40px | Plaster panels |
| 56px | A deep-pigment block carrying white text |
| [96, 80] | The card itself — 96 top, 80 sides |
| 128px | Card bottom. Deliberately larger than the top: the feed overlays interaction chrome there |
### Layout Pattern
- Canvas 1080 × 1440 (3:4). Content column 920 wide: 12 columns of 62 with 16 gutters
- Cover: display headline in the top 38%, deck line under it, the flake cluster and one pigment block in the bottom 45%
- Interior: one headline, one content structure, nothing else. A page that carries two structures is two pages
- Flakes: 3-5 polygons in Raised Surface, none repeated, edges off-grid, never overlapping text
- Grit: 8-14 four-pixel squares in a pigment at 15-25% opacity, within 40px of a block's edge
- Niche glow: one radial per deck, cover page only
- Page number: bottom-right, Caption size, Muted Text, inside a 1px foil frame
## Corner Radius
| Value | Usage | Rationale |
| ----- | ------------------------------------------------ | ------------------------------------------------ |
| 0px | Flake polygons, grit squares, foil rules | Erosion and pigment have no radius |
| 8px | Pigment tags and corner marks | Just enough to read as applied rather than cut |
| 16px | Button radius, caption rails | The interactive floor |
| 24px | Card radius — plaster panels and pigment blocks | The signature container radius |
Nothing in this style is a capsule. A fully rounded pill reads as a UI control, and there are no UI controls on a card.
## Icons
### Icon Font
- **Family**: Lucide
- **Style**: Outline, 2px stroke, square caps
This style is not icon-led. It prefers a numeral, a foil rule, or a pigment block where another style would place a glyph. Icons appear in list markers and corner marks and nowhere else.
### Commonly Used Icons
arrow-right, arrow-up-right, chevron-right, check, minus, plus, circle, square, bookmark, quote, hash, corner-down-right
### Icon Sizes
| Size | Usage |
| ---- | ---------------------------------- |
| 32px | Beside Caption text |
| 40px | Beside Body text, list markers |
| 56px | Section markers |
### Icon Color States
| State | Color | Usage |
| --------- | ------- | ----------------------------------------- |
| Primary | #EFEBE2 | Default on the wall and on pigment blocks |
| Muted | #8A867D | Decorative and inactive marks |
| Accent | #C54F3B | The single marker that carries emphasis |
## Anti-Patterns
- **No figurative motifs.** No apsaras, no lotus, no caisson ceilings, no camel bells, no dunes. The moment a representational symbol appears, the theme collapses from "a pigment system" into "a tourism poster".
- **No brushwork.** No ink bleed, no dry-brush texture, no calligraphic stroke, no seal stamps. This style is opaque pigment applied to plaster — covering, not soaking in. That is exactly what separates it from every ink-and-rice-paper treatment.
- **No repeated flake.** Reusing one polygon path turns erosion into a pattern, and a pattern is cheap.
- **No gold ink.** Gold is a 1px rule. A gold headline is the fastest way to make this style look like a banquet menu.
- **No third pigment on a page**, and no bright pigment used as a block fill under body copy.
- **No gradient** except the single cover-page niche glow.