Skip to content
Zhejiang University College of Artificial Intelligence
中文
Design System

English Site Design System

College of Artificial Intelligence, Zhejiang University — premium tech glass, navy/indigo hue family, Outfit + Plus Jakarta Sans.

01Brand Core

Zhejiang University College of Artificial Intelligence

Academic and confident, with a layer of technological polish — frosted glass, ambient glow, geometric display type. Every other decision (color, type, spacing, glass) derives from this lockup.

01aLogo Usage

Clear space & minimum size

ZJU AI logo clear space

Keep clear space of at least the seal-circle height on all sides. Never render below h-8(32px) — the “COLLEGE OF ARTIFICIAL INTELLIGENCE” wordmark stops being legible. Header uses h-11/h-14, footer h-12.

On light vs. dark (.logo-invert)

logo on light

Native navy fill on light surfaces; recolor to white via .logo-invert (filter: brightness(0) invert(1)) on dark — no separate reversed asset.

Don't render the navy logo on a dark surface without .logo-invert — it vanishes.
Don't stretch, recolor to a non-brand hue, or add effects (shadow/outline).
Don't crop the seal or retype the SVG by hand — copy the file byte-for-byte.

02Color System

brand-primary

#063d7f

brand-primary-dark

#033f7e

brand-primary-deep

#0b0e14

accent-blue

#2563eb

accent-indigo

#4f46e5

accent-emerald

#10b981

accent-teal

#0d9488

accent-amber

#f59e0b

accent-rose

#f43f5e

Ink (text hierarchy)

Surface (layering)

03Gradient System

Gradient Text

04Typography

Font direction — (A) is now the production stack (Archivo, SpaceX-inspired); B/C/D are alternatives, and the last card shows the previous Outfit for contrast

A · Current — Archivo, uppercase display (SpaceX-inspired)

Innovating Intelligence

The college oversees two first-level disciplines — Artificial Intelligence and Design — as well as two undergraduate programs.

Medium-weight DIN-style display, UPPERCASE + open tracking for big titles; Plus Jakarta Sans body. The aerospace read comes from letterforms + spacing, not weight.

B · Space Grotesk + Inter

Innovating Intelligence

The college oversees two first-level disciplines — Artificial Intelligence and Design — as well as two undergraduate programs.

Distinctive quirky-geometric display (wide apertures, squared curves) + the industry-standard engineered body face (Linear, Vercel, GitHub).

C · Sora + Inter

Innovating Intelligence

The college oversees two first-level disciplines — Artificial Intelligence and Design — as well as two undergraduate programs.

Sharper, more rounded-geometric display than Space Grotesk — increasingly the default in AI-product branding — paired with the same Inter body.

D · Manrope (unified)

Innovating Intelligence

The college oversees two first-level disciplines — Artificial Intelligence and Design — as well as two undergraduate programs.

One typeface, different weights for display vs. body — softer, more Scandinavian/institutional, less startup-y.

Previous — Outfit extrabold (for reference)

Innovating Intelligence

The college oversees two first-level disciplines — Artificial Intelligence and Design — as well as two undergraduate programs.

The heavier geometric-bold this replaced — kept here only to show the contrast in weight/feel.

Hero display — .display-hero (Archivo, uppercase)

Zhejiang University

Heading — .font-display (Archivo)

Redefining Computing

Eyebrow — tracking-eyebrow

College of Artificial Intelligence

Body — Plus Jakarta Sans

The college oversees two first-level disciplines — Artificial Intelligence and Design — as well as two undergraduate programs.

Type scale — named tiers, font-agnostic (shared with the Chinese site)

Aa

.text-h1 — page/article title

Aa

.text-h2 — section divider

Aa

.text-h3-feature — feature card

Aa

.text-h3 — standard card

Aa

.text-h3-compact — list item

Aa

.text-caption — caption/date

Article reading typography — .prose-article (full spec: lead, headings, lists, quote, figure, divider)

Brain-inspired computing applies the operating mechanisms of biological neural networks to computer system design — creating low-power, highly parallel, and efficient systems that begin to resemble the brain itself.

In a breakthrough that pushes the boundaries of artificial intelligence and neuroscience, researchers at Zhejiang University unveiled a brain-inspired computer powered by a dedicated neuromorphic chip with more than two billion neurons. The achievement positions the college at the forefront of the field.

A new way of computing

The human brain is an extraordinarily efficient system, integrating vision, hearing, language, learning, reasoning, and planning at a fraction of the energy a conventional processor would need for the same work.

Key specifications

  • 960 Darwin-III neuromorphic chips across 15 blade servers
  • 2.25 billion spiking neurons; over 200 billion synapses
  • Typical power draw of roughly 2,000 watts
We are not only building faster computers — we are exploring a new way of computing, and rethinking how machines can learn.
Figure 1. The Darwin-III wafer-level neuromorphic package (illustrative).

Source: ZJU English Portal. This sample renders every element the article template supports, so a new article only needs content — never bespoke styling.

04aGlass / Premium-Tech System

glass-panel-dark

backdrop-blur-md over the hero

glass-panel-light

backdrop-blur-lg, denser opacity

Glass only appears where there is something behind it to blur — the gradient + glow orbs here, or scrolled page content behind the sticky header.

Light-glass texture options — pick a direction for header / mega menu / mobile nav

A · Soft Frost

Current default. Flat tint + hairline border, no embellishment — quietest option.

B · Rim Light

Inset top highlight, like light catching a beveled edge — reads more dimensional.

C · Sheen

Diagonal brightness gradient across the panel, like light raking a curved pane.

D · Grain

Faint noise texture blended into the tint — reads as etched/sandblasted glass.

All four use the same base opacity and blur radius — only the highlight/texture layer differs. Tell me which direction (A/B/C/D) to apply site-wide to the header, mega menu, and mobile nav.

06–07Radius + Elevation Scale

radius-sm

radius-md

radius-lg

radius-xl

radius-2xl

radius-pill

Elevation

--shadow-sm

--shadow-md

--shadow-lg

08–10Components

Card

White bg, hairline border, radius-lg, shadow-[var(--shadow-sm)] → hover:shadow-[var(--shadow-md)].

Pill / Tag

Computer VisionKnowledge Graphs

Button — variants + states

Icons — lucide-react (the only icon set), strokeWidth 2

Line icons, sized to sit inline with text. Grouped by role; add new icons only from lucide so stroke weight and sizing stay consistent.

Navigation & indicators

Menu

X

ChevronDown

ChevronRight

ArrowRight

Contact

MapPin

Phone

Mail

Links

ExternalLink

Sizes — pick to match adjacent text

13px

inline w/ small text (ExternalLink)

16px

footer contact rows

18px

mobile menu toggle

20px

standalone / grids

08aForms — inputs, validation, search

Please enter a valid email address.

Search icon, type=search.

Textarea, same focus/error language.

States: default · focus (brand ring) · error (rose ring, invalid + Field error) · disabled. Controls are token-driven and share one focus language.

08bData Display — tabs, table, accordion, pagination

Tabs — keyboard-accessible (arrow keys, ARIA)

The generic replacement for bespoke filter rows — this panel would list all faculty.

Table — rosters, courses, rankings

NameInstituteRole
WU FeiTheory & SystemsProfessor
WENG KaiTheory & SystemsAssociate Prof.
LI MingIntelligent DesignProfessor

Accordion / FAQ

Pagination

08cStatus & Feedback — semantic tokens, badges, alerts, toasts

Semantic tokens

--color-success

--color-warning

--color-danger

--color-info

Badges — status markers (not filter chips; see Pill above)

NewFeaturedOpenClosing SoonClosed

Alerts — inline, stays put (page/section-level status)

Applications open March 2026

Undergraduate applications for the 2026 cohort open in the spring.

Submitted

Your inquiry was received — expect a reply within 3 business days.

Toasts — transient, self-dismissing (click to fire; mounted once via <Toaster /> in the root layout)

04dMotion — easings, durations, live demos

--ease-out-expo

Entrances — things arriving on screen

cubic-bezier(0.16, 1, 0.3, 1)

--ease-standard

Reversible UI state — hovers, toggles

cubic-bezier(0.4, 0, 0.2, 1)

Entrances — click to replay

.animate-hero-in · 0.7s · ease-out-expo

Zhejiang University

.animate-fade-up · 0.55s · ease-out-expo · 70ms stagger (Reveal grid)

0ms

70ms

140ms

.animate-mega-menu-in · 0.18s · ease-standard

Dropdown panel opening

Micro-animations — loading & ambient

.skeleton — loading

.animate-pulse-soft — status

Live

.animate-float — ambient

AI

Loading spinner also ships in Button (loading prop). All loop animations pause under prefers-reduced-motion. For richer scroll-driven or timeline-sequenced motion later, GSAP (with ScrollTrigger) is the recommended next step.

Hover interactions — hover to preview

card lift

nav underline

Overview

11aLayout — containers, grids, templates

Container widths

max-w-7xl · 80rem — page default
max-w-5xl · 64rem — hero copy
max-w-3xl · 48rem — reading measure

Card grids

2-col

features, spinoffs

3-col

research directions

4-col

homepage Research

Page templates

Section + sidebar

Listing (no sidebar)

Article / reading

04gContent Patterns — beyond the box

Body content shouldn’t all be cards-in-boxes. These reusable patterns visualize different content types — chronology, emphasis, structured lists — so long pages stay readable and expressive.

Timeline — EnTimeline (chronology)

  1. 1978

    Department of Computer Science founded.

  2. 2019

    China's first AI interdisciplinary program approved.

  3. 2025

    College of Artificial Intelligence inaugurated.

Pull quote — .prose-article blockquote

“Seeking Truth, Pursuing Innovation” — building a world-class hub for AI research and talent cultivation.

08dContent Block Components — Stat / CTA / Split / Profile / Course / Event

The real building blocks of a college page — applied live on the Research Directions, Undergraduate, and Innovation pages, not just demoed here.

EnStatBand — used on Overview → Research Directions

2.25B

neurons

960

Darwin3 chips

~2kW

power

1.0Å

structure accuracy

EnCtaBand — used on Overview → Research Directions

Admissions

Ready to shape the next era of AI?

EnProfileCard — used on the Faculty roster (photo optional, falls back to initials)

WF

WU Fei

Theory & Systems

WK

WENG Kai

Theory & Systems

LM

LI Ming

Intelligent Design

EnCourseCard — used on Education → Undergraduate

AI (Direct-entry Ph.D.)

6-year trackResearch-focused

A full-chain BSc–MSc–PhD talent system for foundational AI research.

Intelligent Engineering

4-year track

Cross-disciplinary training in AI systems and creative design.

AI + X Micro-major

Joint program

With Fudan, Nanjing, SJTU, and USTC — an interdisciplinary AI credential.

EnEventCard — ready for the Events listing once real event data exists

15

MAY

World Digital Education Conference

Hangzhou International Expo Center

Site visit and panel on AI + education transformation.

27

MAR

ZJU × Apple Mobile App Innovation Contest

Zijingang Campus

Kickoff of the 10th China Collegiate Computing Contest.

13Responsive Notes

BreakpointPrefixBehavior
< 640px(base)Stacked layout, hamburger nav, glow-orb blur reduced
≥ 640pxsm:Logo steps up, 2-column grids
≥ 768pxmd:Sidebar + content goes horizontal
≥ 1024pxlg:Desktop nav with dropdowns, 3–4 column grids

Our Mission

Pioneering a New Chapter in Artificial General Intelligence

We are dedicated to achieving breakthroughs in fundamental theory, algorithmic innovation, and system development, while nurturing visionary leaders with a global perspective.

“Seeking Truth, Pursuing Innovation.”

To build a world-class hub for AI research and talent cultivation.