DESIGN EXAMPLES
BFSUAPA Design Examples
This page brings together the colours, type, spacing, motion values and chart components the site already uses, so you can compare against them while designing. For the rules, see the design system and the colour system.
01
Design tokens
The authoritative definitions live in src/app/globals.css. Every colour, font, spacing and motion value comes from there; do not introduce new values.
Page background
Light #ffffff
Dark #0d1117
Body / primary text
Light #111318
Dark #f5f7fa
Dark surface
Light #0d1117
Dark #080b10
Secondary text
Light #626b78
Dark #a8b1be
Default divider
Light ink 19%
Dark ink 18%
Focus outline
Light #1f5aa8
Dark #87aae0
Primary chart series / main accent
Light #2a5b9e
Dark #7b9fd2
Third series / caution accent
Light #a57218
Dark #cea653
Error state / peak
Light #b84f42
Dark #d47c70
Success state
Light #277158
Dark #6ba88f
BFSUAPA Red (core brand)
Light #e14b3f
Dark #f0705f
Typography
--font-displayDisplay / interface headingsNoto Sans Variable + CJK--font-cjkChinese body textNoto Sans SC Variable · PingFang · Microsoft YaHei--font-worldTranslations in other languagesNoto fonts chosen per language一百种语言，同一个世界
Heading line height 1.12–1.28, body line height 1.65–1.8. Chinese is never set in italics; panels and cards always have square corners.
Spacing
0.5rem0.75rem1rem1.5rem2.25rem3.5rem5.5remMotion
--motion-fast150msQuick feedback (hover, press)--motion-base200msStandard transitions (colour, movement)--motion-slow220msPanels opening, complex entrances--motion-easecubic-bezier(0.22, 1, 0.36, 1)Shared easing curve02
Colour system
BFSUAPA Red is the core brand colour; the seven-continent and four-ocean palettes distinguish themes. The web interface uses the --accent-* accent colours; the brand palettes are for visual content that needs a clear theme.
Each cell shows the step number, the hex value, and the contrast between the cell text (ink black or white) and that colour. Body text needs at least 4.5; large text needs at least 3. Click a swatch to copy its value.
BFSUAPA Red · identity (core brand colour)
Seven continents · the colours of the world (secondary)
Four oceans · the blues that connect (secondary)
Chart-safe palette · blue / gold / orange
Charts use blue, gold and orange and their lighter and darker shades first, and avoid telling series apart by red and green alone; every legend has a text label. The swatches show light-theme values.
03
Chart components
The site’s data sections and the 回声 column share these chart components. They are drawn with CSS and inline SVG only, load no external scripts, and look the same in screenshots.
183
Diplomatic partners
China has established diplomatic relations with 183 countries
101
Languages
Languages taught at BFSU
125
Undergraduate majors
Total undergraduate majors at BFSU
The charts below use made-up sample data to show how the components look. The categories, regions and values do not correspond to any real school, region or statistic.
Sample · ranking bars
Sample · share donut
- Category A1643.2%
- Category B1232.4%
- Category C924.3%
Sample · rose chart
- Region A12entries
- Region B22entries
- Region C18entries
- Region D8entries
- Region E4entries
Sample · timeline
- 05.01
120 visits · Start
- 06.15
460 visits · Peak
- 07.20
210 visits · Decline
- 08.10
90 visits · End
Sample · word cloud
Type size shows word frequency | Sample data, no source
04
Guidelines
This page shows existing components and colours. When producing something, check the relevant guide first, then the specific content, sizes and context.
Choose layouts and components by content; look up type, spacing and motion values.
COLOR SYSTEMColour systemLook up full colour scales, choose foreground and background, check contrast.
DEMOColour comparisonsCompare buttons, navigation, forms and charts and see what each needs checked.