Mediatek Brand Design System Deep Dive

1. Brand Overview

Mediatek’s site feels like a tech company that’s confident but approachable. They’ve got the orange dialed in — a warm, saturated primary (rgb(255, 152, 0), hex #ff9800) that screams “energy” without leaning into the aggressive reds or cold corporate blues you see in competitors like Qualcomm. This is silicon for humans, not just engineers.

The vibe is clean, structured, but not sterile. White backgrounds dominate, giving their orange plenty of breathing room. Typography is sans-serif and modern, with Riona Sans in multiple weights — they’ve clearly invested in a custom or premium font to avoid the default web feel. Line heights are tight in headings, looser in body, giving a clear hierarchy.

They don’t drown you in gradients or depth tricks. Shadows are rare — just one subtle rgba(0, 0, 0, 0.2) soft drop. Borders do most of the work separating content. Border radii are generous (20–30px) on interactive elements, making buttons and cards feel approachable and touch-friendly. It’s not the hyper-flat minimalism of a government site, but it’s edging towards flat with just enough depth for clarity.

Responsive thinking is everywhere — the breakpoints list is massive, from 300px mobile up to 1920px desktop, so they’re clearly optimizing for a lot of different devices. The spacing system is rooted in an 8px scale, but they break it with some 5px and 6px increments — odd choice, maybe legacy or designer preference.

Overall: This is a tech brand that wants to look friendly, global, and professional. The design system supports that with warm color, approachable shapes, and crisp typography. It’s aimed at engineers, partners, and consumers — it has to work across datasheets, press releases, and product marketing without feeling fragmented.

2. Color System

2.1 Primary Colors

Mediatek’s primary is rgb(255, 152, 0) — hex #ff9800. This is a vivid orange, tilted slightly toward yellow. It’s bold, but not neon. Psychologically, orange communicates energy, friendliness, and creativity. In tech, it’s rare — most semiconductor companies stick to blue (stability) or red (power). Orange here sets Mediatek apart and makes CTAs stand out against their white-heavy layouts.

It’s used for:

• Primary buttons
• Link highlights (default state)
• Card borders (accent lines)

Hover states darken it slightly to rgb(255, 128, 0) (#ff8000), giving clear feedback. Active and focus states go darker or invert to black backgrounds.

2.2 Complete Palette

Note: Some colors appear only in state changes (hover blues, active blacks).

2.3 Color Relationships

Contrast: Primary orange on white is about 2.25:1 — not WCAG AA for small text. They sidestep this by using orange mostly for larger text or icons and keeping body text black (#000000). Orange on black is high contrast — great for active button states. Accessibility-wise, they need to watch orange on white for small link text.

Dark mode: No evidence of a dark mode palette. Everything is optimized for light backgrounds.

2.4 Usage Guide

Works well:

• Orange (#ff9800) for CTAs over white backgrounds — draws the eye.
• Black text on white — maximum readability.
• Blue hover for links — clear, conventional.
• Semi-transparent gray borders — subtle separation without visual noise.

Avoid:

• Orange text on white for small font sizes — fails contrast.
• Mixing orange and blue in the same component — clashes.
• Using semi-transparent gray for text over colored backgrounds — low readability.

3. Typography

3.1 Font Families

Primary typeface: Riona Sans — multiple weights: Regular, Light, Medium, Extra Light. Fallbacks: Helvetica, Arial, Lucida (only in some styles). No Google Fonts or Adobe Fonts — likely self-hosted.

It’s a geometric sans, clean and modern, fitting for tech. Multiple weights allow fine-tuned hierarchy.

3.2 Type Scale

3.3 Hierarchy

Large headings (50–62px) are tight (line-height ~1.0–1.2) — strong impact. Body and link text are lighter weights (200–400) with more space (line-height ~1.4). Uppercase transforms are sprinkled in for small headings — adds structure without shouting.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px scale, but with exceptions (5px, 6px). Common values:

4.2 Layout

Breakpoints from 300px up to 1920px — granular control. Likely fluid grids with specific adjustments at common device widths (320, 768, 1024, 1440). No fixed container widths in data, but spacing tokens suggest consistent margins.

5. Visual Elements

Border Radius: Heavy use of rounded corners — 20px, 25px, 30px common. Cards, buttons, images all get them. No tiny 2px radii — it’s all substantial.

Shadows: One shadow — rgba(0, 0, 0, 0.2) 0px 2px 9px 0px. Very subtle, used sparingly.

Borders: Primary orange borders on cards, gray on dividers, black on focus states. They use multi-side borders for visual accents (e.g., 1px solid top, none elsewhere).

6. Components

6.1 Buttons

Primary button (.slick-next pull-right slick-arrow):

Default:

• Background: #ff9800
• Text color: transparent (odd — maybe icon button)
• Padding: 0
• Border radius: 30px (pill shape)
• Border: none
• Font size: 16px, weight 400

Hover:

• Background: #ff8000
• Text: white
• Border: 1px solid black

Active:

• Background: #282828
• Text: white
• Border: 1px solid black

Focus:

• Background: black
• Text: white
• Border: 1px solid black

6.2 Links

Variants:

1. Orange, underline by default; hover blue.
2. Black, underline default; hover blue.
3. White, no underline; hover blue.
4. Gray (#b3b3b3), no underline; hover blue.

6.3 Forms

Text inputs:

• Default: Transparent background, black border, padding 15px 20px
• Focus: Border black, text color white (odd — maybe inverted style)

Checkbox:

• Default: White background, gray border (#d9d9d9), radius 5px
• Focus: Border black, text color white

6.4 Cards

Cards use orange borders on two sides (0px 1px 1px solid #ff9800), 25px radii, no shadows. Padding often 20–24px.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #ff9800;
  --color-white: #ffffff;
  --color-gray-60: rgba(77, 77, 77, 0.6);
  --color-dark-brown: #683e00;
  --color-hover-orange: #ff8000;
  --color-black: #000000;
  --color-hover-blue: #0022ff;
  --color-gray-light: #b3b3b3;
  --color-border-light: #d9d9d9;

  /* Typography */
  --font-riona-regular: "Riona Sans Regular", Helvetica, Arial, Lucida;
  --font-riona-light: "Riona Sans Light", Helvetica, Arial, Lucida;
  --font-riona-medium: "Riona Sans Medium", Helvetica, Arial, Lucida;
  --font-riona-extra-light: "Riona Sans Extra Light", Helvetica, Arial, Lucida;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-19: 19px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-44: 44px;
  --space-57: 57px;
  --space-60: 60px;
  --space-80: 80px;
  --space-90: 90px;
  --space-176: 176px;

  /* Radius */
  --radius-0: 0px;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-10: 10px;
  --radius-20: 20px;
  --radius-25: 25px;
  --radius-30: 30px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.2) 0px 2px 9px 0px;
}

8. AI Coding Assistant Prompt

# Mediatek Design System Specification

You are a Mediatek design expert. Build UIs matching their visual language exactly.

## Brand Context
Mediatek’s design is warm, approachable tech. Orange primary, white surfaces, generous rounded corners. Minimal shadows — borders define structure. Typography is clean sans with varied weights.

## Color Palette
- Primary Orange: #ff9800 — CTAs, primary buttons, card borders
- Hover Orange: #ff8000 — Button hover
- White: #ffffff — Backgrounds, surfaces
- Black: #000000 — Text, focus states
- Hover Blue: #0022ff — Link hover
- Semi-Transparent Gray: rgba(77,77,77,0.6) — Dividers, muted text
- Dark Brown: #683e00 — Rare hover/focus accent
- Light Gray: #b3b3b3 — Disabled link text
- Border Light Gray: #d9d9d9 — Input borders

## Typography
Fonts:
- Riona Sans Regular, Helvetica, Arial, Lucida
- Riona Sans Light, Helvetica, Arial, Lucida
- Riona Sans Medium, Helvetica, Arial, Lucida
- Riona Sans Extra Light, Helvetica, Arial, Lucida

Sizes/Weights:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1    | 62px | 500    | 1.06        | Page titles |
| H1    | 50px | 500    | 1.00        | Hero headings |
| Body  | 16px | 400    | 1.42        | Paragraphs |
... (full table above)

## Spacing & Grid
Base: 8px grid. Tokens: 4, 5, 6, 10, 15, 16, 18, 19, 20, 24, 30, 40, 44, 57, 60, 80, 90, 176px.
Use multiples for padding/margins.

## Border Radius
- none: 0px — menus, flat elements
- sm: 5px — inputs
- md: 20px — links
- lg: 25px — cards, images
- pill: 30px — buttons

## Shadows & Depth
One shadow: rgba(0,0,0,0.2) 0px 2px 9px — use sparingly.

## Components
### Primary Button
Default:
- bg: #ff9800
- color: transparent (icon buttons)
- radius: 30px
- border: none
Hover:
- bg: #ff8000
- color: #ffffff
- border: 1px solid #000000
Active:
- bg: #282828
- color: #ffffff
- border: 1px solid #000000
Focus:
- bg: #000000
- color: #ffffff
- border: 1px solid #000000

### Link Styles
1. Orange underline → hover blue
2. Black underline → hover blue
3. White no underline → hover blue
4. Gray no underline → hover blue

### Inputs
Text:
- border: 1px solid #000000
- padding: 15px 20px
- bg: transparent
Focus: border-color #000000, text white

Checkbox:
- bg: #ffffff
- border: 1px solid #d9d9d9
- radius: 5px

## Layout & Responsive
Breakpoints: 300px, 320px, 768px, 1024px, 1440px, 1920px (full list above).
Adjust spacing at breakpoints, maintain grid.

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: border change to black
- No complex animations — keep it functional

## DO
- Use only palette colors
- Maintain 8px grid
- Use Riona Sans for all text
- Keep rounded corners consistent
- Use hover blue for all link states
- Keep shadows subtle and rare

## DON'T
- Add gradients
- Use random colors
- Mix sharp and rounded corners
- Overuse shadow
- Change button radius

## Code Examples

### Button
```css
.btn-primary {
  background: #ff9800;
  color: transparent;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #ff8000;
  color: #ffffff;
  border: 1px solid #000000;
}

Card

.card {
  background: #ffffff;
  border-radius: 25px;
  border-right: 1px solid #ff9800;
  border-bottom: 1px solid #ff9800;
  padding: 20px;
}

Input

.input-text {
  border: 1px solid #000000;
  border-radius: 0px;
  padding: 15px 20px;
  background: transparent;
}
.input-text:focus {
  border-color: #000000;
  color: #ffffff;
  outline: none;
}

---

## 9. Summary

**TL;DR** — Mediatek’s design system is warm-orange tech minimalism. Strong sans-serif typography, generous rounded corners, minimal shadows. Borders and color do the heavy lifting. It’s approachable without losing professionalism.

**Brand Keywords**: warm-tech, rounded-minimalist, border-driven, orange-identity, responsive-global