Cyber Chinese

Cyber Chinese — Style Reference

Vermilion and gold over neon cyan and violet — lanterns hanging over a cyber street.

Theme: dark

Cyber Chinese is a collision of two languages: vermilion (#d4553a) and gold (#c9a227) from tradition against neon cyan (#00d4ff) and violet (#a020f0) from cyber, on a near-black ground (#0a0a0a). Forms stay sharply right-angled throughout. Neon glow may never be omitted, yet it must coexist with the vermilion and gold rather than replace them. Interaction carries an Eastern-cyber signature — a brief scan band or cloud-motif shimmer sweeps past on hover — and never a spring, a playful wobble or a large scale change, with control transitions capped at 400ms.

Colors

Typography

Noto Serif SC — Headings in heavy serif on wide tracking like a plaque; body in the same family lighter for long reading.

• Substitute: 'Songti SC', Georgia, serif
• Weights: 600, 700
• Sizes: 16, 20, 26, 34, 46
• Line height: 1.2 (display), 1.35 (headings), 1.7 (body)
• Letter spacing: 0.04em on display, 0.24em on uppercase labels

JetBrains Mono — Data, coordinates and status codes — the cyber side's face.

• Substitute: ui-monospace, 'Courier New', monospace
• Weights: 400, 700
• Sizes: 11, 13, 15
• Line height: 1.4 (display), 1.4 (headings), 1.6 (body)
• Letter spacing: 0.06em on display, 0.2em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 4px Density: comfortable

Spacing Scale

Border Radius

• Page max-width: 1280px
• Section gap: 64px
• Card padding: 24px
• Element gap: 16px

Components

Lattice Panel

Role: The lattice panel — the core component

6% vermilion fill, zero radius, a 1px gold border at 45%, 24px padding, with dual neon glow (cyan at 16px, violet at 40px). A 12px gold corner bracket marks each corner like the end of a lattice mullion. Hover sweeps a 40px band of 25% cyan diagonally from left to right over 400ms linear while the glow amplifies.

• States: hover: scan band sweep, glow amplified

Vermilion Button

Role: Primary action

Vermilion fill, near-black text, zero radius, a 1px gold border at 70%, 14px/700 at 0.2em, 12px 28px padding, with a 0 0 20px glow at 40% vermilion. Hover takes the border to full, adds a cyan scan band and turns the glow cyan; press darkens the fill and scales 0.98. 240ms.

• Sizes: padding 12px 28px; label 14px
• States: hover: cyan scan, gold border full; active: scale 0.98

Cloud Motif

Role: The cloud-motif shimmer

Repeating cloud or fret paths (1px stroke, 40% gold) run along a section edge, animated by shifting background-position or a clip-path mask from left to right on a three-second linear cycle. Decorative only, at most twice per screen.

Seal Stamp

Role: The seal mark

A 32px square in vermilion with zero radius, holding a 20px near-black serif character, glowing 0 0 12px at 50%. A 1px chipped edge comes from a mask. It marks chapters and verified states.

Neon Data Row

Role: The neon data row

13px monospace at 0.06em, with gold labels on the left and cyan figures on the right under a 0 0 8px text glow at 50%. Rows are 32px tall, divided by 1px gold rules at 15%. Figures must exist as static text.

Do's and Don'ts

Do

• Pair vermilion and gold with neon cyan and violet
• Sharp right angles, no radius
• Neon glow is never omitted
• Hover uses a scan band or cloud shimmer
• Control transitions stay under 400ms
• Figures run monospace with a text glow

Don't

• No bright white grounds
• No soft rounded forms
• Never omit the neon glow
• No purely Western ornament
• No spring rebound or playful wobble
• No control transition beyond 400ms

Surfaces

Elevation

• Dual neon: 0 0 16px rgba(0,212,255,0.45), 0 0 40px rgba(160,32,240,0.30)
• Gold rim: inset 0 0 0 1px rgba(201,162,39,0.60)
• Amplified: 0 0 24px rgba(0,212,255,0.65), 0 0 64px rgba(160,32,240,0.45)

Imagery

Eastern cyber illustration: dragons fused with circuitry, neon lanterns, advertising screens on temple eaves, seals and holograms. Traditional patterns such as cloud and fret motifs may sit beneath glowing layers. No bright white grounds, soft illustration or purely Western ornament.

Layout

Capped at 1280px with 16px padding and 12px between panels. Panels may join on 1px gold lines into a lattice screen. Zero radius runs throughout, and control transitions never exceed 400ms.

Agent Prompt Guide

QUICK COLOR REFERENCE:

• text: #f5f0e1
• background: #0a0a0a
• vermilion: #d4553a
• gold: #c9a227
• cyan: #00d4ff
• violet: #a020f0

EXAMPLE COMPONENT PROMPTS:

1. Build a cyber Chinese panel: background rgba(212,85,58,0.06), zero radius, a 1px rgba(201,162,39,0.45) border, 24px padding, box-shadow 0 0 16px rgba(0,212,255,0.45) and 0 0 40px rgba(160,32,240,0.3). The heading runs 34px heavy serif at 0.04em in #f5f0e1, with 13px monospace gold labels at 0.2em. Hover sweeps a 40px band of rgba(0,212,255,0.25) diagonally left to right over 400ms linear while the glow amplifies to 24px and 64px. The primary button fills vermilion with near-black text, zero radius and a 1px gold border. The page ground is #0a0a0a.

Similar Brands

• Ukiyo-e Digital — Both Eastern tradition, though ukiyo-e is woodblock color while cyber Chinese layers neon on top
• Cyberpunk Neon — Both neon, though cyberpunk is street signage while this carries lattice and seals

Quick Start

:root {
  /* Colors */
  --color-vermilion: #d4553a;
  --color-gold: #c9a227;
  --color-near-black: #0a0a0a;
  --color-neon-cyan: #00d4ff;
  --color-neon-violet: #a020f0;
  --color-pale-violet: #9f9aff;

  /* Typography — Font Families */
  --font-serif: 'Noto Serif SC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 46px;
  --leading-display: 1.2;
  --tracking-display: 0.04em;
  --text-heading: 34px;
  --leading-heading: 1.3;
  --text-subheading: 26px;
  --leading-subheading: 1.4;
  --text-body-lg: 20px;
  --leading-body-lg: 1.65;
  --text-body: 16px;
  --leading-body: 1.7;
  --text-label: 13px;
  --leading-label: 1.4;
  --tracking-label: 0.2em;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 16px;
  --density: comfortable;

  /* Border Radius */
  --radius-cards: 0;
  --radius-buttons: 0;
  --radius-inputs: 0;

  /* Surfaces */
  --surface-near-black: #0a0a0a;
  --surface-panel: rgba(212,85,58,0.06);
  --surface-gold-frame: rgba(201,162,39,0.12);
}