Quickconnect Design System Deep Dive

1. Brand Overview

Quickconnect’s interface is the kind of UI you get when a brand cares more about utility than decoration — but still wants the user to feel a little bit of polish. This isn’t a “design for design’s sake” site. It’s a functional service endpoint, a gateway into Synology’s remote access ecosystem, but it’s not bare-bones CLI ugly either.

The vibe is pragmatic-modern. The palette is restrained: deep charcoal (#323c46), pure black (#000000), pale gray (#bfc2c5), plus two sharp accents — a saturated blue (#1574e8) and a vivid mint green (#0dd399). Those accents aren’t sprinkled everywhere; they’re functional, tied to interactive elements. That’s smart. It keeps the interface feeling clean and focused.

Typography? They’ve gone with “Inter” — a workhorse sans-serif — with a fallback stack of Open Sans, Arial, Helvetica, Verdana. This is a safe, readable choice. The sizing is modest, mostly between 13px and 15px for interactive elements, and 14px captions. No oversized hero headings here. It’s a UI for doing something quickly, not for storytelling.

Spacing follows an 8px logic, but they’ve got some oddball values (6px, 9px, 34px) that break the pure scale. That tells me there’s some legacy or fine-tuned adjustments to fit component constraints. Breakpoints are minimal: 320px and 800px. This isn’t a sprawling responsive system — just “mobile” and “desktop” buckets.

Overall philosophy: functional first, with just enough styling to feel trustworthy and modern. Colors and typography are consistent, shadows are minimal, and components are clearly defined. If you’re building for Quickconnect, you’re building something where clarity and speed matter more than visual flourish — but you still need to nail the polish in buttons, hover states, and spacing.

2. Color System

2.1 Primary Colors

Quickconnect’s primary action color is Blue (#1574e8). This is a mid-saturation, bright blue — it reads as “tech” and “trust” without sliding into corporate navy. Compared to competitors, it’s more vivid than AWS’s muted blues and less aggressive than Microsoft’s pure primary blue. It’s used for CTAs, secondary buttons, and sometimes link accents.

The secondary accent is Mint Green (#0dd399). This is unusual — most brands pair blue with orange or another warm tone. Here, the green is used for primary buttons and some links. It signals “go” and “success,” but in a way that’s more playful than a standard success green.

2.2 Complete Palette

2.3 Color Relationships

Blue (#1574e8) and mint (#0dd399) are both high-contrast against white, easily passing WCAG AA for normal text sizes. Against charcoal (#323c46), both colors stand out sharply.

Charcoal and black are close in luminance — using them together for text requires careful contrast management on darker surfaces.

The palette works fine in light mode. Dark mode would need inversion — white backgrounds swapped for charcoal, text flipped to white, and accents kept as-is (blue and green both work well on dark).

2.4 Usage Guide

• Blue: Use for secondary buttons, links that are informational, borders in focus states.
• Mint Green: Use for primary buttons, important action links.
• Charcoal: Page backgrounds, header bars.
• Black: Body text, icons.
• Light Gray: Borders, subtle backgrounds.
• White: Text on dark backgrounds, main page background in light context.

Avoid putting blue and green together in the same component — they compete. One accent per element.

3. Typography

3.1 Font Families

Primary font: Inter
Fallbacks: Open Sans, Arial, Helvetica, Verdana
No Google Fonts or Adobe Fonts references in the source — likely self-hosted.

Inter is a clean, geometric sans-serif, good for UI clarity. The fallbacks keep the look consistent across systems.

3.2 Type Scale

3.3 Hierarchy

Everything sits in a narrow band of sizes (13–15px). This is deliberate — the UI is about inputting IDs and clicking connect, not scanning long-form content. Bold weight (700) is used sparingly for captions that need emphasis; otherwise, body and link text stay at 400 weight.

Readable, compact, consistent. No big headlines — hierarchy comes from weight and color, not size.

4. Spacing & Layout

4.1 Spacing Scale

Base logic: loosely 8px grid, but they’ve introduced 6px and 34px where needed.

4.2 Layout

Breakpoints:

• Mobile: 320px
• Desktop: 800px

This is minimal — just enough to swap from stacked to horizontal layouts.

5. Visual Elements

Border Radius

The 24px radius is for pill-shaped buttons. The 4px radius is for mild rounding on small surfaces.

Shadow System

• rgba(0, 0, 0, 0.2) 0px 2px 4px 0px — subtle depth
• rgba(13, 211, 153, 0.2) 0px 4px 10px 0px — green glow for primary button
• rgba(21, 116, 232, 0.2) 0px 4px 10px 0px — blue glow for secondary button

Shadows are used sparingly, and tied to button accent colors.

Borders and Dividers

One notable border:

• Width: 0px 0px 3px
• Style: none none solid
• Color: #1574e8
  Used on inputs for emphasis.

6. Components

6.1 Buttons

Primary (Mint Green)

Default:

• Background: #0dd399
• Color: #ffffff
• Padding: 6px 44px 6px 43px
• Border radius: 24px
• Border: none
• Box shadow: rgba(13, 211, 153, 0.2) 0px 4px 10px 0px
• Font size: 13px, weight 400

Hover:

• Background: rgb(4, 103, 224)

Active:

• Background: rgb(0, 90, 200)

Secondary (Blue)

Default:

• Background: #1574e8
• Color: rgba(255, 255, 255, 0.4) — interesting choice: muted white text
• Same padding, radius, shadow (blue variant)

Hover:

• Background: rgb(4, 103, 224)

Active:

• Background: rgb(0, 90, 200)

6.2 Links

Two variants:

• Mint link: #0dd399, underline
• Blue link: #1574e8, underline

6.3 Forms

Text inputs:

• Background: #ffffff
• Text: #000000
• Padding: 12px 2px 14px
• Border radius: 0px
• No box shadow

7. Design Tokens

:root {
  /* Colors */
  --color-charcoal: #323c46;
  --color-black: #000000;
  --color-light-gray: #bfc2c5;
  --color-white: #ffffff;
  --color-blue: #1574e8;
  --color-mint: #0dd399;

  /* Typography */
  --font-primary: 'Inter', 'Open Sans', Arial, Helvetica, Verdana;
  --font-size-link-lg: 15px;
  --font-size-caption: 14px;
  --font-size-button: 13px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --line-height-tight: 1.07;
  --line-height-normal: 1.43;

  /* Spacing */
  --space-1: 1px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-34: 34px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-pill: 24px;

  /* Shadows */
  --shadow-default: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
  --shadow-green: rgba(13, 211, 153, 0.2) 0px 4px 10px 0px;
  --shadow-blue: rgba(21, 116, 232, 0.2) 0px 4px 10px 0px;
}

8. AI Coding Assistant Prompt

# Quickconnect Design System Specification

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

## Brand Context
Quickconnect is a functional-first remote access service. The design is minimal, with tight typography, restrained colors, and clear interactive states. Buttons and links use vivid accents; backgrounds stay neutral.

## Color Palette
- Charcoal: #323c46 — Backgrounds, headers, dark UI surfaces
- Black: #000000 — Body text, icons
- Light Gray: #bfc2c5 — Subtle backgrounds, dividers
- White: #ffffff — Text on dark, light backgrounds
- Blue: #1574e8 — Secondary buttons, links, borders
- Mint Green: #0dd399 — Primary buttons, action links

## Typography
- Font family: "Inter", "Open Sans", Arial, Helvetica, Verdana
- Sizes:
  - Link large: 15px, weight 400, line-height 1.07
  - Caption bold: 14px, weight 700, line-height 1.43
  - Caption normal: 14px, weight 400, line-height 1.43
  - Button: 13px, weight 400
- Use bold weight for emphasis, regular for body/link text.

## Spacing & Grid
- Base: 8px grid with exceptions
- Values: 1px, 6px, 8px, 9px, 10px, 12px, 14px, 16px, 20px, 24px, 30px, 34px
- Apply 6px vertical padding in buttons, 34px for main section gaps.

## Border Radius
- sm: 4px — divs, small containers
- pill: 24px — buttons

## Shadows & Depth
- Default: rgba(0,0,0,0.2) 0px 2px 4px
- Green accent: rgba(13,211,153,0.2) 0px 4px 10px
- Blue accent: rgba(21,116,232,0.2) 0px 4px 10px

## Components

### Primary Button
Default:
```css
background-color: #0dd399;
color: #ffffff;
padding: 6px 44px 6px 43px;
border-radius: 24px;
border: none;
box-shadow: rgba(13, 211, 153, 0.2) 0px 4px 10px;
font-size: 13px;
font-weight: 400;
```
Hover: `background-color: rgb(4, 103, 224);`  
Active: `background-color: rgb(0, 90, 200);`

### Secondary Button
Same as primary, but:
- Background: #1574e8
- Color: rgba(255,255,255,0.4)
- Shadow: rgba(21,116,232,0.2) 0px 4px 10px

### Links
- Mint: #0dd399, underline
- Blue: #1574e8, underline

### Input Field
Default:
```css
background-color: #ffffff;
color: #000000;
padding: 12px 2px 14px;
border-radius: 0px;
box-shadow: none;
```
Special border: bottom 3px solid #1574e8

## Layout & Responsive Rules
- Breakpoints: 320px (mobile), 800px (desktop)
- Mobile: stacked layout, full-width buttons
- Desktop: horizontal layout, spaced with 34px gaps

## Interaction Rules
- Transitions: 150ms ease for hover/active changes
- Focus: visible outline with accent color

## DO List
- Use only palette colors
- Maintain 8px grid (allow given exceptions)
- Keep typography sizes as specified
- Use pill radius for buttons
- Match shadow color to button accent

## DON'T List
- Don't introduce new accent colors
- Don't mix rounded and sharp corners within same component
- Don't use shadows for non-interactive elements
- Don't change button padding

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0dd399;
  color: #fff;
  padding: 6px 44px 6px 43px;
  border-radius: 24px;
  border: none;
  box-shadow: rgba(13, 211, 153, 0.2) 0px 4px 10px;
  font-size: 13px;
  font-weight: 400;
}
.btn-primary:hover { background: rgb(4, 103, 224); }
.btn-primary:active { background: rgb(0, 90, 200); }
```

Secondary Button:
```css
.btn-secondary {
  background: #1574e8;
  color: rgba(255, 255, 255, 0.4);
  padding: 6px 44px 6px 43px;
  border-radius: 24px;
  box-shadow: rgba(21, 116, 232, 0.2) 0px 4px 10px;
}
.btn-secondary:hover { background: rgb(4, 103, 224); }
```

Input:
```css
.input-text {
  background: #ffffff;
  color: #000000;
  padding: 12px 2px 14px;
  border: none;
  border-bottom: 3px solid #1574e8;
}
```

9. Summary

TL;DR — Quickconnect is a minimal, functional design system with two vivid accent colors for interaction, a compact type scale, and a pill-button aesthetic. It’s built for clarity and speed.

Brand Keywords:

• functional-modern
• tech-minimalist
• accent-driven
• pill-button
• clarity-first