Trendy Weekly by Tw93

A literary-style CJK-optimized layout design system, using the open-source LXGW WenKai font and copp...
Back to Home
01

Visual Theme & Atmosphere

# Design System — 潮流周刊 (Trendy Weekly) by Tw93

Extracted from [weekly.tw93.fun/posts/268](https://weekly.tw93.fun/posts/268). A Chinese typography-first, clean reading design with warm accents and dark mode.

---

Live Visual Theme Representation:

Visual Theme Example

02

Color Palette & Roles

primary
#a67c52
primary-focus
#e8a15a
canvas
#ffffff
surface-card
#ffffff
surface-soft
#f3f4f6
ink
#262626
body
#374151
muted
#6b7280
hairline
#e6e6e6
03

Typography Rules

Dynamic Preview:
display-xl size: 36px | weight: 800 | height: 1.11 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Article Title
body-md size: 16px | weight: 400 | height: 1.7 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Body Text
04

Layout Principles

Grid Layout Wireframe Mockup:

Layout Grid Example

Layout Wireframe blueprint
1
2
3
4
5
6
7
8
9
10
11
12
Gutter spacing: 16px / 24px
Side Margins: 24px (Mobile) / 48px (Desktop)
Max Container Width: 1200px
05

Depth & Elevation

Elevation Level Showcase:

Elevation Level Example

Flat Surface (Level 0)

Used for background layers, sidebar headers, or baseline borders.

Low Elevation (Level 1 / Card)

Used for floating product elements, cards, and hover states.

High Elevation (Level 2 / Popover & Dropdown)

Used for modals, select menus, code editor tooltips, and overlay headers.

Border Radius & Shape Scale:

radius-sm 4px
radius-md 6px
radius-lg 8px
radius-pill Pill / Tag
06

Component Stylings

Interactive Component Demonstrations:

Component Interactive Example

07

Do's and Don'ts

Do

  • Use LXGW WenKai as the distinctive font for both Latin and Chinese text.
  • Use the 赫蹏 (heti) library to ensure correct spacing for CJK punctuation.
  • Keep layout backgrounds light white (#ffffff) or matte dark gray (#21262b).

Don't

  • Don't use standard sans-serif Latin fonts for body text or headlines.
  • Don't apply bold weights (use regular 400 for body text).
  • Don't use colors outside the warm brown (#a67c52) and link blue (#1d9bf0) palette.
  • Don't add heavy shadows or excessive card layouts.
✅ Recommended / Do
  • Use LXGW WenKai as the distinctive font for both Latin and Chinese text.
  • Use the 赫蹏 (heti) library to ensure correct spacing for CJK punctuation.
  • Keep layout backgrounds light white (#ffffff) or matte dark gray (#21262b).
❌ Discouraged / Don't
  • Don't use standard sans-serif Latin fonts for body text or headlines.
  • Don't apply bold weights (use regular 400 for body text).
  • Don't use colors outside the warm brown (#a67c52) and link blue (#1d9bf0) palette.
  • Don't add heavy shadows or excessive card layouts.
08

Responsive Behavior

Responsive Adaptation Note:

Responsive Behavior Example

Interactive Viewport Simulator
Width: 800px (Desktop Mode) Grid Container
Primary Column

Adjusts layout width

Secondary Column

Folds on viewport change

Sidebar Column

Stacks to bottom on mobile

09

Agent Prompt Guide

Copyable Agent Integration Prompt:

Prompt Guide Copy Box

10

Full System Design Tokens

The parsed design tokens extracted from the core stylesheet of this design system:

Design TokenHex ValueSystem Palette Role
--primary#a67c52System color representation for primary
--primary-focus#e8a15aSystem color representation for primary-focus
--canvas#ffffffSystem color representation for canvas
--surface-card#ffffffSystem color representation for surface-card
--surface-soft#f3f4f6System color representation for surface-soft
--ink#262626System color representation for ink
--body#374151System color representation for body
--muted#6b7280System color representation for muted
--hairline#e6e6e6System color representation for hairline