Website design guidelines

The website uses monochrome typography, consistent content boundaries and three clear heading levels. Editorial lists organize images, titles, categories and dates to support reading. The homepage hero uses a full-width background and centered text. Pages use Elexvx content and images without copying another site's brand assets.

Implementation starts with information hierarchy, followed by shared widths and spacing, then cards, themes and responsive behavior. Research, activities, news and products are primary sections; categories within them are secondary filters and should not use page-heading sizes. The guidelines reflect source code and browser checks, not screenshot estimates alone.

The site uses a locally hosted Source Han Sans variable font and a shared font stack for Chinese and English. Each page has one H1, sections use H2 and cards or subsections use H3. Semantic and visual hierarchy should agree.

The clamp function lets font size respond to viewport width within minimum and maximum limits. A page heading is not fixed at 64px on every device.

Headings wrap naturally within the available width. Avoid manual line breaks and isolated characters. Collaboration headings use the shared H2 size, without a separate fixed 38px rule. Body text, captions and references retain distinct levels in the hierarchy.

Standard pages use a centered container up to 1440px wide, including side padding of 32px above 720px or 20px on mobile. The maximum desktop content width is therefore 1376px.

List pages follow this order: global navigation, page heading, categories where applicable, content list and footer. Collections without categories do not need an empty filter bar. Headings, filters and grids share aligned boundaries. Horizontal news items retain the same outer container width.

Company and product details use an eyebrow, page heading, introduction, optional actions, content modules and the footer. Standard company introductions use a shared reading width and low-density sections instead of colored outlines, rounded corners or pale cards. Cards are reserved for images, interactions or content that needs a distinct boundary. Long passages are organized into clearly themed modules or cards. Technical explanations include architecture, technologies and process diagrams with supporting prose; they do not replace the explanation with technology names or deployment commands alone.

Team profiles show the photo, name and role above the biography. Above 720px, the biography uses two columns with a 40px gap; mobile uses one column. Photos are at most 240px wide. Identity and biography sections are separated by 48px on desktop or 32px on mobile.

Research articles use a 180px contents column alongside the body on desktop, switching to one column on mobile. Long contents entries are truncated on one line, with scrolling retained. KaTeX renders equations; figures, tables and their captions have distinct styling; citations link to their references.

The hero is a full-width exception. Its background fills the viewport beneath the 64px navigation, without the 1440px container limit, rounded corners, borders or outer margins. Other homepage sections use the standard content width.

Desktop hero minimum height is clamp(520px, 76svh, 820px), with 80px vertical and 32px horizontal padding. Mobile uses a minimum height of 520px, 56px vertical and 24px horizontal padding. Content may increase the height; text must not be clipped.

The background uses cover cropping. The heading, description and optional button form a centered group, with text up to 1040px wide and the description up to 880px. Heading-to-description spacing is 24px on desktop and 20px on mobile; description-to-button spacing is 32px on desktop and 24px on mobile. A dark gradient keeps white text readable.

When the important-message option is enabled and a title exists, show that message; otherwise use the default brand heading, description and background. An optional link appears only when both its address and label are present.

These shared rules and context-specific values do not imply identical spacing everywhere. New pages should reuse shared variables rather than add page-specific overrides.

Company sections use a shared section rhythm, without stacking duplicate large vertical padding at their boundaries. Do not apply the same vertical spacing to both the outer section and its inner container.

New content cards should generally use 24px gaps and 24–32px padding; compact metadata uses 8–12px gaps. These are recommendations, not descriptions of every existing component. Image grids may use responsive spacing.

The dark theme uses a black canvas and white primary text; the light theme reverses this. Secondary text uses neutral grays controlled by theme variables. Body text avoids decorative colors; images retain their original colors.

Article cards show an image, title and essential metadata. Homepage article cards and activity lists omit excerpts; product cards may retain positioning text. Card backgrounds, borders and corners follow their component styles. Standard company introductions do not use nested cards, and hero sections do not inherit card corners.

Images use lazy loading and asynchronous decoding by default, with the first-screen hero and brand marks prioritized. Stable aspect ratios prevent layout shifts. Wide charts and tables may scroll locally on mobile, but the entire page must not overflow.

First identify whether the page is a list, detail page or special homepage region. Reuse shared navigation and footer data so company subpages appear consistently in desktop menus, mobile menus and the footer.

Base heading variables are in src/styles/sections/21-heading-system.css, the final global editorial layer is in 24-global-editorial.css, width variables are in 20-page-width.css, and base fonts and colors are in 01-foundation.css with theme overrides in 10-theme.css. Components connect to shared rules through class names; an H2 tag alone does not guarantee the intended visual style.

Check at least 390px, 793px, 1320px and a large viewport. Verify heading hierarchy, boundaries, wrapping, contrast and image cropping. Inspect computed font sizes, element bounds and page scrollWidth. A successful build does not replace visual checks.

This document is the source for the guidelines. The webpage is generated from it and the download provides the same design.md. Run npm run design:sync after changes; dev and build run it automatically. Update the document and examples when design variables change, then verify the rendered result.