Synology Design System: Enterprise-Minimalist UI Precision

:root {
  /* Colors */
  --color-primary-blue: #0050bf;
  --color-accent-blue: #0067e6;
  --color-white: #ffffff;
  --color-grey-dark: #545454;
  --color-grey-darker: #303030;
  --color-grey-mid: #666666;
  --color-black: #000000;
  --color-grey-tertiary: #757575;
  --color-neutral-very-dark: #0a0a0a;
  --color-blue-light-alpha: #8dc8ff;
  --color-blue-mid-alpha: #5cb0ff;
  --color-blue-dark-alpha1: #0053ba;
  --color-blue-dark-alpha2: #0054bb;
  --color-blue-dark-alpha3: #0053b9;
  --color-blue-dark-alpha4: #0059c6;

  /* Typography */
  --font-primary: "Inter", "Open Sans", Arial, Helvetica, Verdana;
  --font-secondary: -apple-system, system-ui, "Segoe UI", Roboto;

  /* Font sizes */
  --fs-h1-xl: 3.25rem;
  --fs-h1-lg: 1.63rem;
  --fs-h1-md: 1.38rem;
  --fs-button-lg: 1.13rem;
  --fs-button-md: 1rem;
  --fs-body-lg: 0.94rem;
  --fs-body-md: 0.88rem;
  --fs-caption-sm: 0.75rem;

  /* Spacing (px) */
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-32: 32px;
  --space-40: 40px;
  --space-50: 50px;
  --space-52: 52px;
  --space-70: 70px;
  --space-80: 80px;
  --space-142: 142px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xlg: 65px;
  --radius-pill: 214px;
  --radius-full: 50%;
  --radius-full-abs: 100%;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.2) 0px 0px 30px 0px;
  --shadow-lg: rgba(0,0,0,0.05) 0px 4px 30px 5px;
}

# Synology Design System Specification

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

## Brand Context
Synology designs for enterprise reliability: clean layouts, minimal decoration, cool professional blues with neutral greys. The aesthetic is purpose-built for system administration and infrastructure tools—clarity over flash.

## Color Palette
- Primary Blue: #0050bf — Main CTAs, primary buttons
- Accent Blue: #0067e6 — Links, focus outlines
- White: #ffffff — Backgrounds, text on dark
- Grey Dark: #545454 — Secondary text, icons
- Grey Darker: #303030 — Primary dark text
- Grey Mid: #666666 — Less prominent text
- Black: #000000 — Brand marks, strong borders
- Grey Tertiary: #757575 — Placeholder text
- Neutral Very Dark: #0a0a0a — Hover backgrounds
- Blue Light Alpha: #8dc8ff — Hover/focus highlight
- Blue Mid Alpha: #5cb0ff — Hover/focus borders
- Blue Dark Alpha1: #0053ba — Hover backgrounds
- Blue Dark Alpha2: #0054bb — Hover backgrounds
- Blue Dark Alpha3: #0053b9 — Hover backgrounds
- Blue Dark Alpha4: #0059c6 — Hover backgrounds

## Typography
Fonts:
- Primary: "Inter", "Open Sans", Arial, Helvetica, Verdana
- Secondary/system: -apple-system, system-ui, "Segoe UI", Roboto

Type scale:
| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 XL | Inter | 52px | 600 | 1.23 | Page titles |
| H1 LG | Inter | 26px | 600 | 1.54 | Major section headings |
| H1 MD | Inter | 22px | 400/600 | 1.45 | Inline headings |
| Button LG | Inter | 18px | 400 | 1.56 | Large buttons |
| Button MD | System | 16px | 400 | 1.50 | Medium buttons |
| Body LG | Inter | 15px | 400 | 1.87 | Paragraph |
| Link LG | Inter | 15px | 400 | 1.60 | Navigation links |
| Caption MD | Inter | 14px | 400 | 1.57 | Labels |
| Caption SM | Inter | 12px | 400/600 | 1.33–2.33 | Small labels |

## Spacing & Grid
Base spacing: 8px (with 4px micro increments)
Scale: 4, 5, 6, 8, 10, 11, 12, 16, 18, 20, 22, 24, 26, 32, 40, 50, 52, 70, 80, 142px
Use for: button padding, card gutters, section spacing.

## Border Radius
- sm: 10px — inputs, small cards
- md: 24px — buttons
- lg: 32px — larger fieldsets
- xl: 65px — specific containers
- pill: 214px — large capsule buttons
- full: 50% — circular controls, avatars
- full-abs: 100% — full element round

## Shadows & Depth
Minimal:  
- md: rgba(0,0,0,0.2) 0px 0px 30px 0px  
- lg: rgba(0,0,0,0.05) 0px 4px 30px 5px

## Component Specifications

### Primary Button
Default:
```css
background-color: #0050bf;
color: #ffffff;
padding: 8px 32px;
border-radius: 24px;
border: none;
font-weight: 500;
font-size: 14px;
```
Hover:
```css
background-color: #0067e6;
opacity: 0.8;
```
Focus:
```css
outline: 3px solid rgba(92,176,255,0.7);
```
Disabled:
```css
opacity: 0.5;
cursor: not-allowed;
```

### Secondary Button
Default:
```css
background-color: #ffffff;
color: #000000;
padding: 8px 32px;
border: 1px solid #000000;
border-radius: 24px;
font-size: 14px;
font-weight: 500;
```
Hover:
```css
background-color: #107bff;
opacity: 0.8;
color: #0078ff;
```

### Navigation Links
Style 1: dark grey underline; hover removes underline.  
Style 2: blue no underline; hover darkens.  
Style 3: grey underline; hover darkens and removes underline.

### Input Fields
Default:
```css
border: 1px solid #e6e6e6;
border-radius: 10px;
padding: 8px 32px 8px 16px;
background-color: #ffffff;
color: #2e3742;
```
Focus:
```css
outline: 3px solid rgba(92,176,255,0.7);
```

## Layout & Responsive Rules
Breakpoints at: 300, 480, 768, 1024, 1440, 1920, up to 2500px.  
Mobile padding: 16px. Desktop: 32px sections.

## Interaction Rules
- Transition: background, border, opacity 150ms ease
- Focus indicators: 3px solid blue alpha
- Hover states must change background or text color—not both at once
- Disabled: opacity 0.5 and remove hover/focus styles

## DO List
- Use only approved hex colors
- Maintain 8px grid, use multiples
- Respect border-radius map—consistent corner style
- Keep shadows subtle
- Use Inter for all headings and UI text

## DON'T List
- Don't invent accent colors
- Don't mix 10px corners with pills in same component
- Don't add heavy shadows
- Don't change font sizes outside scale

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0050bf;
  color: #ffffff;
  padding: 8px 32px;
  border-radius: 24px;
  border: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-primary:hover { background: #0067e6; opacity: 0.8; }
.btn-primary:focus { outline: 3px solid rgba(92,176,255,0.7); }
```

Secondary Button:
```css
.btn-secondary {
  background: #ffffff;
  color: #000000;
  padding: 8px 32px;
  border-radius: 24px;
  border: 1px solid #000000;
  font-weight: 500;
  font-size: 14px;
}
.btn-secondary:hover { background: #107bff; opacity: 0.8; }
```

Input:
```css
.input {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 8px 16px;
  background: #ffffff;
  font-size: 14px;
}
.input:focus { outline: 3px solid rgba(92,176,255,0.7); }
```