Songgrid · 宋律

Song-dynasty aesthetics × Swiss International Style — a theme for the DeepSeek Harness Web UI.

中文 ｜ English

---

Xuanzhi · light	Yemo · dark

The two variants, captured live (the sidebar is the Eight Standing Seats board). Card areas are redacted.

Why "Songgrid"

The warm white of rice paper, the celadon of Ru ware, the warning red of cinnabar — disciplined by Swiss International Style: a 4pt spacing scale, 2/4px radii, and type sizes locked to line heights.

This is not ancient styling pasted onto a UI. Every traditional colour is placed on the functional role it can actually hold.

Two accents, two jobs

The one decision in this theme that looks like a duplicate but must not be collapsed:

Role	Colour	Contrast (on paper)	Where it lands
Functional · Ru celadon	#3A7284	4.91 : 1 ✓ AA	buttons · focus ring · selection · links
Editorial · kiln copper	#9A6B50	4.19 : 1	blockquotes · markers

Celadon passes WCAG AA, so it can carry "can I click this / is this selected". Kiln copper does not pass AA for body text, so it only carries "is this worth a second look". Their hues sit 174° apart — they were never two candidates for one role.

Two variants

Variant	id	Character
Xuanzhi (rice paper)	song-grid-xuanzhi	warm paper white × Ru celadon × cinnabar
Yemo (night ink)	song-grid-yemo	cool blue-black × brightened celadon
Follow system	system	switches with the host

Palette

Xuanzhi · light

Role	Value
Paper	#F7F5EF
Surface +1	#FBFAF6
Surface +2	#F0EDE4
Overlay	#E7E3D8
Hairline	#DDD8CB
Ink (primary text)	#26221C
Secondary text	#5C554A
Tertiary text	#8B8478
Brand / functional	#3A7284
Editorial accent	#9A6B50
Success	#4E7A5A
Warn	#B0823A
Cinnabar (error)	#B5453C

Yemo · dark

Role	Value
Night ink	#10151A
Surface +1	#191F26
Surface +2	#1D242B
Primary text	#E8E3D6
Secondary text	#A8A193
Tertiary text	#7A7468
Brand / functional	#7FB4C4
Error	#D07A70

The dark ground is a cool blue-black, tuned together with the celadon. Swapping it for a warm black means re-tuning the entire dark variant.

Typography

• Chinese runs on a Song serif (Noto Serif SC); Latin stays sans-serif — each script gets its own face, never mixed
• Sizes are defined in pairs with their line heights (body / secondary / caption)
• Emphasis comes from colour roles (celadon vs. kiln copper), not from stacking bolds

Structure layers

Three layers; two of them are orthogonal to colour — future palette work never touches them:

Layer	Contents	Colour
STRUCTURE_CSS	spacing scale (4pt grid + semantic aliases) · 2/4px radii · 4 line-height steps · 5 motion durations + 3 curves · focus ring · icon sizes	no
ICON_CSS	46 Lucide mask icons, following currentColor	no
SEMANTIC_CSS	accent role split (--sg-accent-functional / --sg-accent-editorial)	yes

Install

dsh plugin --profile web add dsh-theme-songgrid

Then refresh the page and pick 「宋律 · 宣纸」/「宋律 · 夜墨」/ follow-system under Settings → General → Theme. The choice persists in the songgrid settings namespace.

Compatibility

• Verified on DSH 0.1.5-rc.2 (@deepseek-ai/dsh)
• Implemented purely by overriding host design tokens — no host source is patched, no raw values
• Not affiliated with DeepSeek

Development

lib/index.js     host half: registers the songgrid settings namespace
lib/client.js    browser half: theme tokens + three CSS layers + theme picker
assets/          landscape backgrounds (ink / ink-night / celadon)

• Structure layer: tokens live in :root; add a step there. New styles take var(--sg-gap-*) / var(--sg-radius-*) — never raw values
• Icons: <span class="sg-icon sg-icon-check"></span>, 46 glyphs in ICON_CSS; sizes via .sm / .lg / .xl or --sg-icon-size
• More editorial emphasis: --sg-accent-editorial already exists in SEMANTIC_CSS; add selectors — the only rule is never on an interactive control, that slot belongs to the functional accent

License

MIT