BRAND · VISUAL SYSTEM

Brand Showcase Page
AuGPU.AI · Black & Gold Tech System

A complete black‑gold + deep space blue visual system: logo usage, color, typography, and reusable components — consistent from the homepage to campaign landings.

Deliverables: Brand showcase page · Logo applications · Component guidelines Use cases: Company site, product website, campaign landing pages
AuGPU.AI Logo

1. Color System · Black & Gold + Deep Space Blue

Built around deep-space backgrounds and energy gold, with cool accent blues for buttons, links, and highlights — ensuring contrast and readability on dark UIs.

Primary · Energy Gold
#FDE68A / #FBBF24 / #EA580C
Accent · Tech Blue
#60A5FA / #1D4ED8
Background · Deep Space
#020617 / #030712
States · Success / Positive
#22C55E / #16A34A

2. Typography & Components · Reusable UI Modules

A clean sans-serif stack for English and CJK headings. Buttons, tags, and info cards are modular for fast reuse across pages.

Heading Scale

H1 for hero headlines; H2 for section headings; H3/H4 for card and module titles. Sizes and spacing follow an 8pt grid for consistent alignment and clear hierarchy on both desktop and mobile.

Buttons & Tags

Primary buttons use an energy-gold gradient with a subtle glow and shadow on hover; secondary buttons use an outlined style for secondary actions. Tags label module types (e.g., “Brand System”, “Frontend”, “Responsive”) for quick scanning.

Typography System

Use a consistent English font (e.g., Inter / SF Pro) paired with a CJK font when needed (e.g., Source Han Sans). Font weights separate hierarchy. Body line-height stays around 1.6–1.8 for readability in long-form and technical content.

3. Brand Applications · Real-world Page Patterns

The same visual language scales from the home hero to product pages and campaign landing pages — high recognition with a consistent experience.

Home Hero
Use deep-space backgrounds with energy-gold headlines and optional particle/glow effects to communicate the core value proposition.
Brand Story / About Page
Use editorial layouts and key metrics to tell the origin story, technical strengths, and team — ideal for external brand communication.
Campaign / Landing Page
Keep brand colors and component rules, then add themed illustration and interaction modules for holidays, launches, and events.
← Back to demos