HomeUI Design SystemLegacy format

HomeUI uses a polished B2B landing and product-presentation style: bright white documentation sections, dark immersive product sections, blue brand accents, rounded cards, soft glass borders, and large editorial typography.

The interface should feel clean, technical, premium, and structured. Favor spacious layouts, clear hierarchy, precise spacing, and restrained use of gradients. The design language comes from a Pixso-exported "建站设计规范" page and includes application banners, sections, cards, tabs, tags, forms, collapses, quantity steppers, carousel indicators, and arrow buttons.

• Use white or near-white backgrounds for documentation, settings, and design-system pages.

• Use near-black backgrounds for immersive product, hero, media, and feature showcase areas.

• Use blue only as the primary action and emphasis color.

• Keep cards compact and structured. Avoid stacking cards inside larger decorative cards.

• Use subtle opacity layers, 1px borders, and soft blue glow only for interactive or elevated dark surfaces.

• Keep text capitalization consistent with source strings. The current CSS often uses text-transform: capitalize for body labels.

• Prefer explicit responsive typography over fluid viewport-scaled type.

### Page Structure

• Root app fills the viewport: body, #root use 100vw and 100vh.

• Main design-guide canvas is scrollable and full width.

• Sections are stacked vertically with full-width bands.

• Typical light section: white background, 80px 64px padding, 32px group gap.

• Hero/design intro section: near-white background #F9FAFB, large vertical rhythm, brand/date row at top.

• Dark product sections: near-black background, white text, blue accents, cards with glass borders.

### Grid And Composition

• Use flex and grid layouts with clear rows.

• Keep content widths stable. Cards should not stretch unpredictably.

• Use gap: 24px for card grids and feature rows.

• Use gap: 32px for section groups.

• Use gap: 10px for buttons and inline icon/text controls.

• Use image/media areas with fixed aspect or explicit height so layout does not jump.

• Product or application screenshots should be real bitmap assets from src/assets/images.

• Use background-size: cover for media thumbnails.

• Use background-size: 100% 100% only for exported vector/symbol assets that need exact sizing.

• Prefer centered backgrounds.

• Keep media blocks with 8px radius inside cards.

• Desktop target is spacious with 64px side padding and large headings.

• Laptop keeps most desktop heading sizes except h2 at 44px.

• Tablet reduces major headings and section gutters.

• Mobile reduces headings to the mobile scale and stacks multi-column layouts.

• Do not use viewport-width font scaling. Use named breakpoints and explicit token changes.

• Maintain touch targets at least 40px high for interactive controls.

### Responsive Layout Widths

Use the following breakpoint and container rules when building new pages or refactoring exported sections. Page margin is measured as a percentage of the current viewport width unless a fixed value is specified.

| Device | Screen width | Page margin | Content width |

| --- | --- | --- | --- |

| Desktop XL | > 1920px | 8% each side | Max content width 1800px |

| Desktop L | 1600px - 1920px | 7% each side | Responsive layout |

| Desktop M | 1440px - 1600px | 7% each side | Max content width 1366px |

| Laptop | 1150px - 1440px | 5% each side | Max content width 1200px |

| Tablet | 700px - 1150px | 5% each side | Responsive layout |

| Mobile | < 700px | Fixed 20px each side | Responsive layout |

Container implementation guidance:

• Use a centered content wrapper for each full-width section.

• For > 1920px, compute side gutters as 8vw, but clamp content to 1800px.

• For 1440px - 1600px, compute side gutters as 7vw, but clamp content to 1366px.

• For 1150px - 1440px, compute side gutters as 5vw, but clamp content to 1200px.

• For responsive-layout rows, allow the content wrapper to fill the remaining width after margins.

• For mobile below 700px, use fixed 20px side padding instead of percentage gutters.

• Keep full-bleed background bands spanning 100% width; apply these width rules only to inner content.

Suggested CSS pattern:

```css

.section-inner {

width: min(100% - 14vw, 1366px);

margin-inline: auto;

}

@media (min-width: 1921px) {

.section-inner {

width: min(100% - 16vw, 1800px);

}

}

@media (min-width: 1600px) and (max-width: 1920px) {

.section-inner {

width: calc(100% - 14vw);

}

}

@media (min-width: 1150px) and (max-width: 1439px) {

.section-inner {

width: min(100% - 10vw, 1200px);

}

}

@media (min-width: 700px) and (max-width: 1149px) {

.section-inner {

width: calc(100% - 10vw);

}

}

@media (max-width: 699px) {

.section-inner {

width: calc(100% - 48px);

}

}

```

• Read this file before generating UI.

• Prefer existing CSS variables and classes when editing the current Pixso export.

• When building new components, translate this design system into clean component CSS rather than reusing Pixso-generated numeric class names.

• Preserve Roboto as the default UI family.

• Use font-weight: 600 for semibold and font-weight: 400 for regular.

• Normalize noisy exported values: 139.9999976158142% should become 140%; 160.0000023841858% should become 160%.

• Normalize repeated radius values: 16px 16px 16px 16px should become 16px.

• Keep the page visually close to the current service at http://localhost:5173/.

This design system was extracted from:

• src/assets/styles/common.css

• src/assets/styles/variables.css

• src/assets/styles/global.css

• src/assets/styles/font.css

• src/index.css

• src/styles/Frame124599314.css

• src/styles/Button.css

• src/styles/Card.css

• Component CSS files in src/styles