Appspot Design System: Minimal Enterprise UI Clarity

Alright — let’s break down Appspot’s design DNA, pixel by pixel.

1. Brand Overview

Appspot isn’t a consumer-facing “brand” in the traditional sense — it’s part of Google’s cloud infrastructure, specifically the App Engine hosting platform. The design language here is Google’s Material 3 (M3) interpretation, tuned for enterprise login and console contexts. This means: no fluff, no marketing gloss. It’s functional UI with ruthless clarity.

The vibe: clean, structured, and trust-oriented. This is the design you get when a product’s primary job is authentication and onboarding into a technical toolchain. The main audience is developers, technical managers, and enterprise IT admins. They aren’t here to browse — they’re here to sign in, deploy, and manage apps.

Appspot’s interface inherits Google’s broader ecosystem rules: the blue primary action, white backgrounds, subtle greys for text, and restrained border radii. It’s not trying to entertain — it’s trying to make every interaction predictable.

Two notable things:

Primary blue (#0b57d0) dominates interactive elements — buttons, links, focus states. This is almost a visual handshake saying “this is trustworthy and official.”
The typography stack is pure Google Sans and Roboto — legible, neutral, no personality beyond clarity. The hierarchy is subtle, designed for minimal distraction.

I’ll say it: this design works because it refuses to be clever. No gradients, no skeuomorphism, no “fun” microinteractions. Just a consistent Material 3 application.

2. Color System

2.1 Primary Colors

The main brand color is rgb(11, 87, 208) — normalized to #0b57d0. This is Google’s “primary blue” in the M3 palette. It’s a strong mid-blue — saturated enough to stand out against white backgrounds, but not so bright that it feels childish. Psychologically, it signals stability and trust (think IBM’s blue, Microsoft’s blue).

Compared to AWS, which uses orange (#FF9900), Google’s blue feels calmer, less aggressive. Compared to Azure’s lighter #0078D4, Appspot’s blue is deeper and slightly more formal.

2.2 Complete Palette

Color Name	Hex	Role	Usage
Primary Blue	#0b57d0	Primary	Buttons, links, focus outlines
White	#ffffff	Background / Text on Dark	Page background, text in primary buttons
Dark Grey	#444746	Text Secondary / UI icons	On-surface variant text
Medium Grey	#747775	Border / Outline	Hover/focus outlines, dividers
Inverse Surface	#303030	Dark mode background	Dark mode container
Outline Variant	#c4c7c5	Border variant	Secondary dividers
Inverse On Surface	#f2f2f2	Text on dark	Dark mode text
Shadow	#000000	Shadows	Elevation shadows
Surface Container Low	#f8fafd	Light background	Lowest elevation surfaces
Surface Container	#f0f4f9	Default surface	Cards, modal backgrounds
Surface Dim	#d3dbe5	Slightly darker surface	Layered UI
Surface Container Highest	#dde3ea	Highest elevation container
Error Container	#f9dedc	Error background	Validation error zones
Error	#b3261e	Error text/icon	Form validation
Inverse Primary	#a8c7fa	Dark mode primary	Primary in dark contexts
Surface Variant	#e1e3e1	Surface alt	Alternate backgrounds
On Error	#ffffff	Text on error	Error button text
Tertiary Container	#c4eed0	Alt accent container	Tertiary UI
On Secondary Container	#004a77	Text in secondary container
On Error Container	#8c1d18	Text in error container
Tertiary	#146c2e	Tertiary accent	Positive actions
Surface Container High	#e9eef6	Elevated surface
Outline	#747775	Outline	Borders
On Primary Container	#0842a0	Text in primary container
Secondary	#00639b	Secondary accent	Links, alt CTAs
Secondary Container	#c2e7ff	Secondary background
Primary Container	#d3e3fd	Primary background
On Surface Variant	#444746	Text on surface variant
On Background	#1f1f1f	Main text
On Tertiary Container	#0f5223	Text in tertiary container

2.3 Color Relationships

Contrast is solid. Primary blue on white easily passes WCAG AA for normal text. White on blue also passes. The greys (#444746 and #747775) are used sparingly and at sizes that keep readability acceptable. Dark mode variables like --gm3-sys-color-inverse-surface: rgb(48 48 48) ensure the palette flips without inventing new hues.

2.4 Usage Guide

Use #0b57d0 only for interactive elements — primary buttons, links, focus outlines.
White backgrounds keep the UI airy; avoid mixing with off-white unless it’s a container.
Greys (#444746, #747775) are for text and borders — don’t use them for backgrounds.
Error red (#b3261e) should be paired with light error container backgrounds (#f9dedc) for visibility.
Tertiary green (#146c2e) is rare — use for specific positive actions, not decoration.

3. Typography

3.1 Font Families

Primary font is Google Sans, with a fallback stack:

Google Sans, roboto, Noto Sans Myanmar UI, Noto Sans Khmer, arial

Secondary font is Roboto, fallback:

Roboto, Arial

No external font loading — these are system-available for Google properties.

3.2 Type Scale

Element	Font	Size	Weight	Line Height
Heading-1	Google Sans	44px (2.75rem)	400	1.18
Heading-1	Google Sans	16px (1rem)	400	1.50
Heading-1	Roboto	16px (1rem)	400	1.50
Caption	Google Sans	14px (0.88rem)	400	1.43
Button	Google Sans	14px (0.88rem)	500	—
Button	Google Sans	14px (0.88rem)	500	1.43
Caption	Google Sans	14px (0.88rem)	500	1.43
Link	Google Sans	14px (0.88rem)	500	1.43
Caption	Google Sans	12px (0.75rem)	400	1.33
Link	Google Sans	12px (0.75rem)	400	1.33

3.3 Hierarchy

Hierarchy is minimal. The jump from 44px H1 to 16px body text is stark — titles dominate, body text is subdued. Buttons and links sit at 14px, keeping them legible without overpowering. Captions at 12px work for secondary info but should be used sparingly for accessibility.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. All spacing values are multiples or near-multiples.

Value	Rem	Frequency
1px	0.06rem	3
2px	0.13rem	1
3px	0.19rem	3
6px	0.38rem	6
8px	0.50rem	9
9px	0.56rem	3
11px	0.69rem	1
12px	0.75rem	2
13px	0.81rem	2
16px	1.00rem	13
24px	1.50rem	1
32px	2.00rem	2
36px	2.25rem	1
48px	3.00rem	2
108px	6.75rem	1

4.2 Layout

Breakpoints are tight — starting at 400px and scaling up to 1600px. This suggests fluid layouts that adapt early, not just at desktop widths.

5. Visual Elements

Border Radius Values:

0px 8px 8px 0px — used on span elements
4px — common (inputs, buttons)
8px 0px 0px 8px — span elements
8px — some links
16px — div containers
20px — buttons, some divs
22px — divs
28px — divs

Shadows: One complex M3 shadow:

rgba(0,0,0,0.2) 0px 3px 5px -1px,
rgba(0,0,0,0.14) 0px 6px 10px 0px,
rgba(0,0,0,0.12) 0px 1px 18px 0px

Used sparingly — buttons and elevated elements.

Borders: Mostly 1px or 2px solids in greys or primary blue. Inset borders appear in iframes — likely for legacy rendering.

6. Components

6.1 Buttons

Primary button:

Default: background #0b57d0, white text, padding 0px 24px, radius 20px, no border, no shadow.
Hover: opacity 0.08, subtle elevation shadow, text stays white.
Active: opacity 0.1, heavier shadow.
Focus: outline 2px solid #0b57d0, boxShadow 0 0 0 2px primary container (#d3e3fd), background changes to surface container (#f0f4f9).

6.2 Links

Two styles:

Blue (#0b57d0), font-weight 500, no underline unless hover defined.
Dark (#1f1f1f), font-weight 400, underline on hover.

6.3 Forms

Email input:

Default: transparent bg, #1f1f1f text, radius 4px, padding 12px 14px.
Focus: text color switches to primary blue (#0b57d0).

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #0b57d0;
  --color-white: #ffffff;
  --color-dark-grey: #444746;
  --color-medium-grey: #747775;
  --gm3-sys-color-inverse-surface: rgb(48 48 48);
  --gm3-sys-color-outline-variant: rgb(196 199 197);
  --gm3-sys-color-inverse-on-surface: rgb(242 242 242);
  --gm3-sys-color-shadow: rgb(0 0 0);
  --gm3-sys-color-surface-container-low: rgb(248 250 253);
  --gm3-sys-color-surface-container: rgb(240 244 249);
  --gm3-sys-color-surface-dim: rgb(211 219 229);
  --gm3-sys-color-surface-container-highest: rgb(221 227 234);
  --gm3-sys-color-error-container: rgb(249 222 220);
  --gm3-sys-color-error: rgb(179 38 30);
  --gm3-sys-color-inverse-primary: rgb(168 199 250);
  --gm3-sys-color-surface-variant: rgb(225 227 225);
  --gm3-sys-color-on-error: rgb(255 255 255);
  --gm3-sys-color-tertiary-container: rgb(196 238 208);
  --gm3-sys-color-on-secondary-container: rgb(0 74 119);
  --gm3-sys-color-on-error-container: rgb(140 29 24);
  --gm3-sys-color-tertiary: rgb(20 108 46);
  --gm3-sys-color-surface-container-high: rgb(233 238 246);
  --gm3-sys-color-outline: rgb(116 119 117);
  --gm3-sys-color-on-primary-container: rgb(8 66 160);
  --gm3-sys-color-secondary: rgb(0 99 155);
  --gm3-sys-color-secondary-container: rgb(194 231 255);
  --gm3-sys-color-primary-container: rgb(211 227 253);
  --gm3-sys-color-primary: rgb(11 87 208);
  --gm3-sys-color-on-surface-variant: rgb(68 71 70);
  --gm3-sys-color-on-background: rgb(31 31 31);
  --gm3-sys-color-on-tertiary-container: rgb(15 82 35);

  /* Typography */
  --font-google-sans: 'Google Sans', roboto, 'Noto Sans Myanmar UI', 'Noto Sans Khmer', arial;
  --font-roboto: 'Roboto', Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-48: 48px;
  --space-108: 108px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-xxl: 22px;
  --radius-xxxl: 28px;

  /* Shadows */
  --shadow-m3: rgba(0,0,0,0.2) 0px 3px 5px -1px, rgba(0,0,0,0.14) 0px 6px 10px 0px, rgba(0,0,0,0.12) 0px 1px 18px 0px;
}

8. AI Coding Assistant Prompt

# Appspot Design System Specification

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

## Brand Context
Appspot’s design is part of Google’s Material 3 language, optimized for secure, predictable enterprise login flows. It’s functional, minimal, and consistent — high-trust blue actions, white surfaces, subtle grey text, restrained radii.

## Color Palette
- Primary Blue: #0b57d0 — Primary CTAs, links, focus outlines
- White: #ffffff — Page backgrounds, text on primary buttons
- Dark Grey: #444746 — Secondary text, icons
- Medium Grey: #747775 — Borders, outlines
- Error Red: #b3261e — Error text/icons
- Error Container: #f9dedc — Error backgrounds
- Tertiary Green: #146c2e — Positive actions
- Secondary Blue: #00639b — Secondary CTAs
- Surface Container: #f0f4f9 — Card backgrounds
- Shadow: #000000 — Elevation shadows

## Typography
- Headings: Google Sans, roboto, Noto Sans Myanmar UI, Noto Sans Khmer, arial
- Body: Roboto, Arial
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 44px | 400 | 1.18 | Page titles |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Button | 14px | 500 | — | CTAs |
| Caption | 12px | 400 | 1.33 | Secondary info |

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 3px, 6px, 8px, 9px, 11px, 12px, 13px, 16px, 24px, 32px, 36px, 48px, 108px.

## Border Radius
- sm: 4px — inputs, small buttons
- md: 8px — cards, some links
- lg: 16px — containers
- xl: 20px — pill buttons
- xxl: 22px — large containers
- xxxl: 28px — largest containers

## Shadows & Depth
- Material 3 shadow: rgba(0,0,0,0.2) 0px 3px 5px -1px, rgba(0,0,0,0.14) 0px 6px 10px 0px, rgba(0,0,0,0.12) 0px 1px 18px 0px

## Components

### Primary Button
Default:
```css
background: #0b57d0;
color: #ffffff;
padding: 0px 24px;
border-radius: 20px;
border: none;
font-weight: 500;
font-size: 14px;
```
Hover: opacity: 0.08; shadow applied.
Active: opacity: 0.1; heavier shadow.
Focus: outline: 2px solid #0b57d0; box-shadow: 0 0 0 2px #d3e3fd.

### Navigation Links
Blue variant: #0b57d0, weight 500, no underline on default.
Dark variant: #1f1f1f, weight 400, underline on hover.

### Input Fields
Email:
Default: transparent background, #1f1f1f text, 4px radius, padding 12px 14px.
Focus: text color #0b57d0.

## Layout & Responsive Rules
Breakpoints: 400px, 450px, 480px, 568px, 592px, 600px, 672px, 720px, 800px, 840px, 960px, 1240px, 1600px.

## Interaction Rules
Transition timing: 150ms ease for state changes.
Focus indicators: 2px outline in primary blue or container colors.

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use Google Sans for headings, Roboto for body
- Keep border radii consistent with component rules
- Apply shadows only where elevation is needed

## DON'T List
- Don’t use non-palette colors
- Don’t mix sharp and rounded corners
- Don’t invent hover states — follow opacity/shadow rules
- Don’t overload tertiary green — keep for positive actions

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0b57d0;
  color: #ffffff;
  padding: 0px 24px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  transition: opacity 150ms ease;
}
.btn-primary:hover {
  opacity: 0.08;
  box-shadow: 0 1px 2px rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
}
.btn-primary:focus {
  outline: 2px solid #0b57d0;
}
```

### Input Field
```css
.input-email {
  background: transparent;
  color: #1f1f1f;
  border-radius: 4px;
  padding: 12px 14px;
  border: none;
}
.input-email:focus {
  color: #0b57d0;
}
```

9. Summary

TL;DR: Appspot’s design is pure Material 3 — predictable, minimal, and functional. Blue actions, white surfaces, and restrained typography make it ideal for enterprise login contexts.

Brand Keywords:

enterprise-minimal
trust-blue
functional-material
developer-focused
no-frills