Design Principles

The visual standards provide a set of shared criteria that can be interpreted. When principles conflict, decide by this priority: "trustworthy, open, restrained, accessible".

Trustworthy

• Pages should clearly state the current status, data sources, and what to expect next.
• Error messages must point out the specific problem and offer constructive next steps, instead of vague messages like "operation failed".
• For anything involving academic-system integration, campus identity, or third-party service authentication, explain at first interaction that the community maintains it independently.
• If a project is a course experiment or is no longer maintained, label its status directly and be honest about how real the project is.

Open

• Use SVG for logos and templates; PNG is only an export artifact.
• Colors, spacing, and theme styles are maintained centrally, avoiding duplicated definitions across pages.
• Design changes are recorded through Issues/PRs and the Changelog, so verbal agreements are never the only source of truth.
• Content should be copyable, citable, and readable offline, without requiring login or downloading remote fonts.

Restrained

Brand materials (covers, posters, banners, etc.) follow the official university VI color ratios: primary blue makes up more than 80%, and gold accents no more than 20%. Software interfaces follow accessibility instead: default ratios are "80% neutral colors, 15% brand blue, 5% gold or light-blue accents". Shadows are only used to indicate layered stacking, and gradients are limited to covers and brand illustrations.

Avoid abusing the "tech project" positioning with terminal rain, code brackets, neon outlines, or large black backgrounds. Hardware management, course resources, and public-service projects are equally part of the community context.

Accessible

• Ensure body text and background contrast reaches at least 4.5:1 as required by WCAG 2.2 AA.
• Never convey state through color alone; always pair it with text or icons.
• Make sure every interactive element supports keyboard focus (Tab navigation) with a visible focus ring.
• Support 200% page zoom and narrow layouts, and respect the prefers-reduced-motion system preference.

Review Questions

Before submitting a design proposal, answer these self-check questions: Can users clearly tell where they are? Is the core action clear and unique? Can states be distinguished without relying on color alone? Is full keyboard navigation supported? Does the interface accurately communicate the community's independent identity?