Typography & Imagery
Typeface System
The typeface rules align with the dedicated fonts of the official Chongqing University of Technology visual identity manual (2024.04). The official fonts are commercially licensed and must be licensed by their users; without a license, fall back to system font stacks for consistent cross-platform rendering.
- Chinese preferred (when licensed): FZLanTingHeiS-B-GB for headings, FZLanTingHeiS-DB-GB for subheadings, FZLanTingHeiS-L-GB for body text.
- English preferred (when licensed): HerounMHSans SemiBold for headings, HerounMHSans Regular for subheadings, HerounMHSans Light for body text.
- System fallback (default): PingFang SC, Microsoft YaHei, Segoe UI, and Roboto; JetBrains Mono or Fira Code for code blocks and numeric displays.
Recommended font stacks:
/* Headings */
font-family:
"FZLanTingHeiS-B-GB", "FZLanTingHeiS-DB-GB", "PingFang SC", "Microsoft YaHei", "Segoe UI",
"Roboto", sans-serif;
/* Body */
font-family:
"FZLanTingHeiS-L-GB", "PingFang SC", "Microsoft YaHei", "Segoe UI", "Roboto", sans-serif;
/* English headings */
font-family: "HerounMHSans SemiBold", "HerounMHSans", "Segoe UI", "Roboto", sans-serif;Body line height is recommended between 1.65 (light mode) and 1.8 (dark background), with Regular (400) or Medium (500) weights; heading line height is 1.25 with Bold (700) or Extra Bold (800).
Punctuation & Formatting
- In mixed Chinese–English text, keep a half-width space between Chinese and Latin/digits (e.g. "集成 React 框架").
- Chinese content must use full-width punctuation, including brackets and colons (e.g. "声明:本规范……").
- Proper nouns keep consistent capitalization: Git, GitHub, Markdown, HTML, CSS, JavaScript, TypeScript.
Cover Image Spec
Project repository covers and Open Graph sharing images should use the standard templates to ensure visual quality:
- Layout structure: project name, description, and status label on the left; supporting brand graphics on the right.
- Graphic requirements: covers may reference engineering grids, CQUT letter modules, and node connection lines as supporting graphics, or borrow the wing and runway line-art motifs from the official VI. Design stays professional and independent, with no unauthorized official assets such as the university emblem.
- Color ratios: the background is dominated by primary blue (
#0068B7), above 80% overall; gold is small accents only, capped at 20%. - Gradient control: use the official theme gradient (all three stops at primary blue
#0068B7, transitions made through transparency); the light end of the official ramp (#BCC5E0 → #E1C4AB → #F3E7DD) may be used for light atmosphere backgrounds, with the warm end stretched beyond the frame to avoid an overly bright image.
Icons
For interface interaction and status icons, prefer Feather Icons or Lucide. Except for minimal status indicators, action icons keep a consistent stroke weight (2px) and size (24×24px). Do not mix styles (e.g. filled flat and outlined) within the same menu or list.