ASUS Brand Design System Deep Dive

1. Brand Overview

ASUS sits in that interesting space between hardcore tech engineering and lifestyle consumer electronics. Their brand has always been about performance, precision, and a certain "pro" edge, but they’ve learned to wrap it in a design language that’s accessible enough for a mainstream buyer. On the current site, that balance is clear: bold blues, sharp typography, restrained layout, and just enough softness in corners to avoid feeling clinical.

The vibe is tech confidence. You’re supposed to trust ASUS to make the high-performance machines, routers, and components that power your work and play. The design system reinforces this—primary actions jump out in an intense blue (#006ce1) that screams "click me" without feeling cheap. Neutral grays and deep blacks control the visual hierarchy, while white space keeps the interface breathable.

This is not a playful brand. There’s no pastel palette or quirky microcopy. The typography is modern, condensed where needed for impact (TTNormsStdCondensedNormal), and paired with the strong geometric sans TTNormsPro for most UI text. The fallback is Roboto, which keeps things consistent across systems. The occasional custom font like ROGFonts-Regular shows up in gaming-specific sub-brands.

The audience? Tech-savvy consumers, gamers, and professionals who care about specs but don’t want to wade through chaos to find them. ASUS’s design system delivers clarity and speed—information is chunked cleanly, buttons are obvious, and the grid feels rigid enough to reflect engineering discipline.

This is a design language for a brand that makes motherboards and OLED laptops but also wants to look good on Instagram. It’s corporate in discipline, but consumer-friendly in touchpoints. And it’s built to scale—from a tiny mobile screen showing a product spec sheet, to a 1920px desktop hero with an award badge.

2. Color System

2.1 Primary Colors

The core brand color is ASUS Blue — #006ce1 (rgb(0, 108, 225)). It’s everywhere: primary buttons, main links, CTA highlights. It’s a saturated, medium-deep blue that reads well on both light and dark backgrounds. Psychologically, blue communicates trust, reliability, and expertise—perfect for a tech brand.

Compared to competitors:

• Dell leans more muted and corporate in their blues.
• Razer avoids blue entirely, going for neon green gamer vibes.
• HP uses a lighter, friendlier blue—ASUS’s choice feels more "performance" than "friendly".

This blue also has darker hover/active variations: #0051a8, #005fc5, #0061c9, etc. They’re not just tints—they’re purposeful steps to signal interactivity.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid. ASUS Blue (#006ce1) on white yields a WCAG AAA-level contrast ratio (~6.5:1). Black text on white is obviously fine. They’re careful to use white text on dark blue for primary buttons, which holds up well for accessibility.

Dark mode isn’t a separate system here, but the deep grays (#181818, #4d4d4d) and near-black backgrounds suggest they could pivot to it easily.

2.4 Usage Guide

• Blue + White = primary CTA. Works every time. Never put ASUS Blue on mid-gray—it loses punch.
• Black/Gray text on Off White = comfortable reading.
• Avoid mixing Bright Blue (#248dff) with ASUS Blue (#006ce1) unless it’s a clear hierarchy (Bright Blue for secondary link, ASUS Blue for action).
• Keep hover states darker than default. ASUS nailed this—hover blues are all intentional, not accidental tints.

3. Typography

3.1 Font Families

• TTNormsProRegular / TTNormsProMedium / TTNormsProNormal — main UI and body font. Clean geometric sans.
• TTNormsStdCondensedNormal — used for condensed headings.
• KairosSansCondensedMedium — occasional heading variant.
• ROGFonts-Regular — gaming sub-brand headings.
• Roboto — fallback, also used directly in some captions.

No Google Fonts or Adobe Fonts integration—it’s all custom/self-hosted.

3.2 Type Scale

3.3 Hierarchy

ASUS uses huge headings—52px on links and H1s—especially in hero banners. Condensed headings squeeze more characters into a line without feeling cramped. Body text sits at 16–17px, which is fine for readability. Captions drop to 13–14px but maintain good line height.

The weight variation (400, 450, 500, 600) gives subtle hierarchy without relying on color alone. This works because it keeps the visual language consistent—no rogue serif showing up.

4. Spacing & Layout

4.1 Spacing Scale

Base unit is 8px, but there’s plenty of 1–7px micro-spacing for icon alignment.

Common values:

• 1px — hairline borders.
• 2px, 3px, 4px — tight gaps.
• 5px, 6px, 7px — small control padding.
• 8px — base step.
• 12px, 14px, 15px, 16px, 17px — UI element padding.
• 20px, 24px — card/content padding.
• 34px, 40px — section spacing.
• 48px — large section gaps.

4.2 Layout

Breakpoints are deliberate:

• Mobile starts at 320px, 360px.
• Tablet: 768px, 1024px.
• Desktop: 1280px, 1366px, 1920px.

They’ve defined many in-between breakpoints (639px, 699px, 730px…)—likely for specific component reflows. This is a responsive system tuned to product pages with complex layouts.

5. Visual Elements

Border Radius System

Values range from 0px to 100%:

• 4px — small components (skip links, icons, small buttons).
• 8px — buttons, inputs.
• 16px — occasional container.
• 32px — tablist.
• 50px, 99px — pill-like buttons.
• 100% — full circles.

Corners are mostly rounded for touch targets, but no excessive softness.

Shadow System

Three shadows:

• rgba(0, 0, 0, 0.1) 0px 2px 8px 0px — subtle card depth.
• rgba(0, 0, 0, 0) 0px 0px 0px 4px — outline effect.
• rgba(0, 0, 0, 0.1) 1px -2px 12px 0px — rare, probably on popovers.

Not flat, but restrained.

Borders

Plenty of solid borders:

• White 6px — thick UI edges.
• ASUS Blue 2px — button outlines.
• Gray (#4d4d4d) 1px — dividers.
• Black #000 2px outset — retro focus style.

6. Components

6.1 Buttons

Primary (btn-asus)

• Default: bg #006ce1, text #fff, padding 5px 16px, radius 8px, border 2px solid #006ce1, font 16px/500.
• Hover: bg #0051a8, text #fff.
• Active: bg #0051a8, text #fff.
• Focus: no outline.

Secondary (borderButton)

• Default: transparent bg, text #006ce1, border 2px solid #006ce1.
• Hover: bg #0051a8, text #fff.
• Active: bg #0051a8, text #fff.
• Focus: no outline.

Skip to Content

• Default: bg #fff, text #000, padding 1px 6px, radius 4px, border 2px outset #000, shadow rgba(0,0,0,0.1) 0px 2px 8px, opacity 0.
• Hover: bg #0051a8, text #fff.
• Focus: border 5px solid #000, opacity 1.

6.2 Links

Multiple styles:

• Primary link: #006ce1, no underline, underline on hover.
• Black text link: #000 -> #006ce1 hover.
• White text link: #fff -> #006ce1 hover.
• Accent blue (#248dff) -> #006ce1 hover.
• Dark text (#181818, #4d4d4d) -> #006ce1 hover.

6.3 Forms

Text input:

• Default: bg #fff, text #000, border 1px solid #181818, radius 8px, padding 11px 12px.
• Focus: border 2px solid #248dff, color #f5f5f5 (!), shadow rgba(0,123,255,0.25) 0px 0px 0px 0.2rem.

That focus color shift to #f5f5f5 for text is unusual—probably for placeholder or icon color.

6.4 Cards

Not explicitly defined in data, but shadow and radius patterns suggest:

• Radius 8–16px.
• Shadow rgba(0,0,0,0.1) 0px 2px 8px.
• Padding 14–24px.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-gray: #4d4d4d;
  --color-asus-blue: #006ce1;
  --color-cool-gray: #666a73;
  --color-near-black: #181818;
  --color-white: #ffffff;
  --color-light-gray: #cccccc;
  --color-bright-blue: #248dff;
  --color-off-white: #f5f5f5;
  --color-hover-blue-1: #005fc5;
  --color-hover-blue-2: #0051a8;
  --color-hover-blue-3: #0061c9;
  --color-hover-blue-4: #0060c8;
  --color-light-sky: #7fb5f0;
  --color-asus-blue-50: rgba(0, 108, 225, 0.498);
  --color-hover-blue-5: #0060c9;

  /* Typography */
  --font-ttnorms-pro-regular: "TTNormsProRegular", Roboto, sans-serif;
  --font-ttnorms-pro-medium: "TTNormsProMedium", Roboto, sans-serif;
  --font-ttnorms-pro-normal: "TTNormsProNormal", Roboto, sans-serif;
  --font-ttnorms-std-condensed: "TTNormsStdCondensedNormal", sans-serif;
  --font-kairos-condensed: "KairosSansCondensedMedium", sans-serif;
  --font-rog-regular: "ROGFonts-Regular", sans-serif;
  --font-roboto: Roboto, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17: 17px;
  --space-20: 20px;
  --space-24: 24px;
  --space-27: 27px;
  --space-34: 34px;
  --space-40: 40px;
  --space-48: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 32px;
  --radius-pill: 50px;
  --radius-pill-lg: 99px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;
  --shadow-outline: rgba(0, 0, 0, 0) 0px 0px 0px 4px;
  --shadow-lg: rgba(0, 0, 0, 0.1) 1px -2px 12px 0px;
}

8. AI Coding Assistant Prompt

# ASUS Design System Specification

You are an ASUS design expert. Build UIs matching their visual language exactly.

## Brand Context
ASUS design is performance-focused, modern, and precise. It uses bold saturated blue for primary actions, strong geometric sans typography, and a disciplined 8px spacing grid. Corners are rounded enough for approachability but never whimsical.

## Color Palette
- Black: #000000 — Core text, icons
- Dark Gray: #4d4d4d — Secondary text, nav
- ASUS Blue: #006ce1 — Primary buttons, links
- Cool Gray: #666a73 — Neutral backgrounds
- Near Black: #181818 — Dark UI elements
- White: #ffffff — Background, text on dark
- Light Gray: #cccccc — Divider lines
- Bright Blue: #248dff — Accent links
- Off White: #f5f5f5 — Light backgrounds
- Hover Blue 1: #005fc5 — Button hover
- Hover Blue 2: #0051a8 — Button hover
- Hover Blue 3: #0061c9 — Button hover
- Hover Blue 4: #0060c8 — Button hover
- Light Sky: #7fb5f0 — Hover accents
- ASUS Blue 50%: rgba(0,108,225,0.498) — Overlay
- Hover Blue 5: #0060c9 — Button hover

## Typography
Fonts:
- Headings: TTNormsStdCondensedNormal
- Body/UI: TTNormsProRegular / Medium / Normal
- Gaming: ROGFonts-Regular
- Fallback: Roboto

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 52px | 400 | 1.16 | Hero titles |
| H1 Condensed | 44px | 400 | 1.16 | Section titles |
| Body | 16-17px | 400 | 1.3 | Copy |
| Caption | 13-14px | 400-600 | 1.35 | Labels |

## Spacing & Grid
Base: 8px
Scale: 1, 2, 3, 4, 5, 6, 7, 8, 9, 12, 14, 15, 16, 17, 20, 24, 27, 34, 40, 48
Map:
- Button padding: 5px 16px
- Card padding: 14–24px
- Section gaps: 34–48px

## Border Radius
- sm: 4px — small buttons, icons
- md: 8px — buttons, inputs
- lg: 16px — containers
- xl: 32px — tablist
- pill: 50px — large pills
- pill-lg: 99px — extra large pills
- full: 100% — avatars

## Shadows & Depth
- sm: rgba(0,0,0,0.1) 0px 2px 8px
- outline: rgba(0,0,0,0) 0px 0px 0px 4px
- lg: rgba(0,0,0,0.1) 1px -2px 12px

## Component Specifications

### Primary Button
Default: bg #006ce1, text #fff, padding 5px 16px, radius 8px, border 2px solid #006ce1, font-weight 500, font-size 16px.
Hover: bg #0051a8, text #fff.
Active: bg #0051a8.
Focus: no outline.
Disabled: opacity 0.5.

### Secondary Button
Default: bg transparent, text #006ce1, border 2px solid #006ce1.
Hover: bg #0051a8, text #fff.
Active: same as hover.

### Navigation Links
Default: color #006ce1, no underline.
Hover: underline, same color.

### Input Fields
Default: bg #fff, color #000, border 1px solid #181818, radius 8px, padding 11px 12px.
Focus: border 2px solid #248dff, shadow rgba(0,123,255,0.25) 0px 0px 0px 0.2rem.

### Cards
Radius 8–16px, shadow sm, padding 14–24px.

## Layout & Responsive Rules
Max width: 1920px breakpoint.
Mobile padding: 14px.
Desktop padding: 24px.
Breakpoints: 320, 360, 639, 768, 1024, 1280, 1366, 1920px.

## Interaction Rules
Transition: 150ms ease for state changes.
Focus indicators: visible border change.

## DO
- Use only palette colors.
- Maintain 8px grid.
- Use TTNormsPro for body, TTNormsStdCondensedNormal for headings.
- Darken blues for hover states.
- Keep text contrast WCAG AA+.

## DON'T
- Invent new blues.
- Mix sharp and rounded corners.
- Use shadows heavier than lg.
- Change button padding.
- Use serif fonts.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #006ce1;
  color: #fff;
  padding: 5px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  border: 2px solid #006ce1;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #0051a8; }
.btn-primary:focus { outline: none; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

Secondary Button

.btn-secondary {
  background: transparent;
  color: #006ce1;
  padding: 5px 16px;
  border-radius: 8px;
  border: 2px solid #006ce1;
  transition: background 150ms ease;
}
.btn-secondary:hover {
  background: #0051a8;
  color: #fff;
}

Input

.input {
  background: #fff;
  color: #000;
  border: 1px solid #181818;
  border-radius: 8px;
  padding: 11px 12px;
}
.input:focus {
  border: 2px solid #248dff;
  box-shadow: rgba(0,123,255,0.25) 0px 0px 0px 0.2rem;
  outline: none;
}

---

## 9. Summary

**TL;DR** — ASUS’s design system is a disciplined tech aesthetic: saturated blue CTAs, clean geometric type, tight 8px grid, and minimal but effective shadows. It’s built for speed, clarity, and brand consistency across product lines.

**Brand Keywords**  
- performance-driven  
- precision-modern  
- trust-blue  
- disciplined-grid