smart_grid_iot/系统设计/UI/客户小程序授权管理/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Industrial Precision	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant bg-page text-muted border-rule status-warn status-error accent-subtle #ffffff #ccdbf1 #f8f9ff #ffffff #eef4ff #e5efff #dbe9ff #d5e4fa #0d1c2c #424655 #233142 #e9f1ff #727787 #c2c6d8 #0056d2 #0054cd #ffffff #136bfb #fefcff #b2c5ff #712ae2 #ffffff #8a4cfc #fffbff #00685f #ffffff #008378 #f4fffc #ba1a1a #ffffff #ffdad6 #93000a #dae2ff #b2c5ff #001847 #0040a1 #eaddff #d2bbff #25005a #5a00c6 #89f5e7 #6bd8cb #00201d #005049 #f8f9ff #0d1c2c #d5e4fa #eef3f8 #5b6b7e #dbe4ee #e0852b #dc2626 rgba(29,111,255,0.08)	display-lg headline-md title-sm body-md label-bold data-mono caption-sm headline-md-mobile fontFamily fontSize fontWeight lineHeight hankenGrotesk 32px 700 40px fontFamily fontSize fontWeight lineHeight hankenGrotesk 23px 700 28px fontFamily fontSize fontWeight lineHeight hankenGrotesk 17px 700 24px fontFamily fontSize fontWeight lineHeight hankenGrotesk 15px 400 24px fontFamily fontSize fontWeight lineHeight hankenGrotesk 13px 700 16px fontFamily fontSize fontWeight lineHeight jetbrainsMono 12px 500 16px fontFamily fontSize fontWeight lineHeight hankenGrotesk 12px 700 14px fontFamily fontSize fontWeight lineHeight hankenGrotesk 20px 700 26px	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	base xs sm md lg xl container-max gutter 4px 8px 12px 16px 24px 40px 1200px 16px

Brand & Style

The design system is engineered for the Xintong Smart Power Operation Management APP, targeting power engineers and grid operators. The brand personality is Professional, Efficient, and Industrial Tech. It emphasizes reliability through a structured, high-density interface that transforms complex electrical data into actionable insights.

The design style is a blend of Corporate Modern and Information-Dense Minimalism. It utilizes a "Layered Surface" approach where data is organized into logical card blocks, using subtle elevations and clear semantic color-coding to denote system status. The aesthetic is clean and functional, avoiding decorative elements in favor of technical precision and rapid scanability.

• Professionalism: High-contrast typography and a restrained color palette.
• Efficiency: Condensed layouts that prioritize data visualization and task status.
• Reliability: Solid borders, consistent spacing, and clear state indicators.

Colors

The color architecture is strictly functional, mapping specifically to the operation layers of the power management system.

• Primary (Deep Blue): Reserved for core branding, navigation, and "Client" layer interactions.
• Secondary (Purple): Dedicated to "Gateway" operations and task-specific management.
• Tertiary (Teal): Used for "Service" layer success states and optimized performance indicators.
• Neutral (Ink): Used for primary text to ensure maximum legibility against light surfaces.

Semantic Usage:

• Use status-warn (Amber) for non-critical alerts or data synchronization states.
• Use status-error (Red) for critical power failures or permission denials.
• The bg-page provides a soft, low-strain canvas for long-duration monitoring, while surface (White) distinguishes interactive cards and data containers.

Typography

This design system uses Hanken Grotesk as the primary typeface for its sharp, contemporary feel that bridges the gap between industrial and tech. JetBrains Mono is employed for technical data, device IDs, and numerical values to emphasize the system's engineering DNA.

• Hierarchy: Use display-lg for dashboard summaries. title-sm is the default for card headers.
• Data Visualization: All tabular data and technical strings must use data-mono for character alignment and clarity.
• Mobile Adaptation: For mobile screens, headlines should scale down to headline-md-mobile to maintain visual balance while preserving authority.

Layout & Spacing

The layout utilizes a Flexible Grid System with a focus on logical grouping through card-based containment.

• Grid: A 12-column grid is used for desktop views, transitioning to a single-column stacked layout for mobile.
• Rhythm: An 8px-based spacing scale ensures vertical consistency. Use lg (24px) for outer card padding and md (16px) for internal element spacing.
• Mobile Margins: Standard mobile side margins are set to md (16px) to maximize screen real estate for dense data tables.
• Sectioning: Distinct operational modules should be separated by xl (40px) of vertical space to prevent cognitive overload.

Elevation & Depth

This design system conveys hierarchy through Tonal Layering and Subtle Ambient Shadows. We avoid heavy skeuomorphism in favor of a "Flat-Plus" approach.

• Base Layer: The page background (bg-page) sits at the lowest elevation.
• Mid Layer (Cards): UI cards use a white surface with a subtle shadow (0 4px 14px rgba(0,0,0,.07)) to appear slightly lifted.
• Interactive Layer: On hover or active state, cards may transition to a higher elevation (0 8px 28px rgba(0,0,0,.1)) with a slight upward translation of -2px.
• Overlays: Modals and dropdowns use the highest z-index with a distinct backdrop blur to maintain focus on the task at hand.
• Gradients: Use soft radial gradients in the background (Blue/Purple) to create environmental depth without interfering with content legibility.

Shapes

The shape language is Rounded, balancing industrial rigidity with modern software approachability.

• Cards & Sections: Use the standard rounded-lg (1rem) for primary containers.
• Nodes & Blocks: Architecture and data nodes use rounded (0.5rem) to fit more compactly within layouts.
• Interactive Elements: Buttons and tags use a "Pill-shape" (rounded-xl or 999px) to distinguish them from structural containers.
• Borders: Use 1px solid with the border-rule color for most containers. Active states or primary focus areas may increase to 1.5px.

Components

Buttons:

• Primary: Solid primary_color with white text. Pill-shaped.
• Secondary: Transparent with primary_color border or subtle purple tint for operation tasks.
• Danger: Solid status-error for irreversible actions.

Cards:

• White background, 1px border-rule, and rounded-lg corners.
• Headers should have a 18px internal padding and a bottom border to separate from the content body.

Input Fields:

• Soft white background with 1px border.
• Focused states should use a primary_color border with a subtle outer glow.

Chips & Tags:

• Used for status (e.g., "Active", "Offline").
• Backgrounds should use 8% opacity versions of the semantic colors (Blue, Green, Red) with bolded text in the 100% opacity color.

Data Visualization:

• Charts should use the primary blue and secondary purple as the main data series colors.
• Use data-mono for all axis labels and tooltips to ensure technical accuracy.

Status Indicators:

• Small 7px circular dots used within lists or architecture nodes to show real-time connectivity status.