DropCatch Design System: High-Speed Utilitarian UI

1. Brand Overview

DropCatch is a niche utility brand with a very specific audience: domain investors, flippers, and anyone obsessed with sniping expired domains. The vibe is utilitarian, slightly aggressive, and unapologetically functional. This isn’t a lifestyle brand; it’s a tool for people who want speed and precision.

The design language reflects that. You’re not here to “explore” or “browse”; you’re here to execute. The UI is stripped down to what matters: data tables, filters, and actionable buttons. No ornamental visuals. No over-designed illustrations. Just information and controls.

Color choices follow this functional philosophy—there’s a primary black (rgba(0, 0, 0, 0.87)) for text and functional elements, a sharp link blue (#1a72db), and a high-energy yellow (#fcf843) for accents. The palette is full of utilitarian grays and whites for surfaces and dividers. The occasional red (#f41910) shows up in error states or warnings—very much “stop what you’re doing” rather than “gentle alert.”

Typography is equally no-nonsense. Roboto dominates, with IBM Plex Sans appearing in certain headings and links. Sizes are practical, weights are clear, and line heights are tight—there’s a focus on fitting more data on screen without sacrificing clarity.

If you’re designing for DropCatch, you need to think in terms of speed, density, and clarity. This is a brand for people who value milliseconds. Every design decision should help them see, decide, and act faster.

2. Color System

2.1 Primary Colors

Primary brand color: rgba(0, 0, 0, 0.87)—essentially near-black. This is the text color and the anchor for the interface. It’s functional, high-contrast, and puts maximum focus on the data.

The link blue #1a72db is the true “action” color. Used for clickable elements and navigation, it stands out cleanly against white backgrounds. Psychologically, it’s confident and trustworthy—a safe color in the world of high-stakes transactions.

Accent yellow #fcf843 is used sparingly, which makes it pop when it appears. It’s not the primary CTA color, but when you see it, you know it’s important. It reads as a signal rather than decoration.

2.2 Complete Palette

That's just the palette extracted from actual usage. The CSS variables define an even richer system with blues, greens, reds, oranges, and neutrals—clearly a full token set for scalable design.

2.3 Color Relationships

The core contrast is black-on-white. That’s WCAG AAA-level for text. Link blue also scores well against white backgrounds (contrast ratio ~5.6:1 for large text).

Yellow #fcf843 on white is low contrast—this is fine for accent use but not for body text. They use it for highlights where legibility isn’t critical (icons, accents).

Dark mode isn’t primary here, but the palette supports it via deep blues (#164378, #153c6a) and dark neutrals (#141415, #111111). The CSS variables also define very dark “surface” colors—likely for modal overlays.

2.4 Usage Guide

• Use #1a72db for links and primary interactive states.
• Keep #fcf843 purely for highlights—it loses contrast for text.
• Gray tones are for UI scaffolding—don’t use them for primary actions.
• Avoid mixing blues from different levels unless you’re following the token map (blue--400, blue--600, etc.).
• For accessibility, ensure colored text sits on a contrasting background—yellow needs a dark BG, blue needs white or very light gray.

3. Typography

3.1 Font Families

Two main workhorses:

• Roboto — primary UI font, versatile weights, practical readability.
• IBM Plex Sans — appears in headings and links, adding a slightly more modern, tech-forward feel.
• Material Icons — used via icon font for consistent iconography.

No Google Fonts or Adobe Fonts load in the extracted data—likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

They use tight line heights for big headings—often 0.00 or 1.20. This compresses vertical space, letting more data fit above the fold. Smaller text has taller line heights (1.92 for captions at 13px), which improves legibility when space is tight.

Weights are decisive: 700 for strong headings, 400 for body, 600 for semi-bold emphasis. IBM Plex Sans at 32px semi-bold gives primary headings a distinctive look—slightly different from Roboto’s geometry.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, but with some 1px and 3px micro-spacing for table cell borders and dense layouts.

4.2 Layout

Breakpoints cover everything from 320px mobile up to 1920px desktop. Notably:

• Mobile: 320px–479px
• Tablet: 600px–959px
• Desktop: 1280px+
  Also some niche breakpoints like 975px and 1085px—likely tuned to specific table layouts.

5. Visual Elements

Border Radius

Main radius: 4px. Used everywhere—buttons, inputs, small cards.
Special: 50% for circular buttons/pagination controls.
Occasional 2px radius for small UI elements.
Some asymmetric radii for joined inputs (e.g., 4px 4px 0px 0px).

Shadows

Two shadows:

1. rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 2px 1px -1px, rgba(0, 0, 0, 0.2) 0px 1px 3px 0px — subtle elevation.
2. rgb(128, 128, 128) 0px 0px 5px 0px — soft glow.

Mostly flat design—shadows are rare.

Borders

1px solid dividers (#e8e8e8) dominate. Inputs get #767676 borders. There’s also inset/outset styles for special containers.

6. Components

6.1 Buttons

Three main variants:

Variant 1 (dc-auctions__toggle-btn):

• Default: bg #c2c2c2, color #212529, radius 2px, no shadow.
• Hover: color via token, bg transparent mix.
• Active: bg via token, translateY(1px).
• Focus: bg via token, color #4e5862.

Variant 2 (mdc-button):

• Default: transparent bg, color rgba(0,0,0,0.87), radius 4px, 1px border rgba(0,0,0,0.12).
• Hover: transparent bg, token color.
• Active: translateY(1px), bg via token.
• Focus: outline 2px solid link color.

Variant 3 (dark):

• Default: bg #767676, color white, radius 4px.
• Hover/Active: same token logic as Variant 2.
• Focus: outline 2px solid link color.

6.2 Links

Three styles:

• Blue #1a72db on white—primary links.
• White #ffffff on dark backgrounds—footer/nav.
• Dark #212529 for inline links.
  No underline by default; hover changes color via token.

6.3 Forms

Text input:

• Default: bg rgba(255,255,255,0.6), no border, shadow elevation.
• Focus: bg white, border #dea411 (yellow-orange), stronger shadow.

Number input:

• Default: bg white, border #767676.
• Focus: border #dea411.

Checkbox:

• Default: transparent bg.
• Focus: border #dea411.

6.4 Cards

Not explicitly defined here, but likely use white background, 4px radius, subtle divider borders.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-text: rgba(0, 0, 0, 0.87);
  --color-accent-yellow: #fcf843;
  --color-white: #ffffff;
  --color-link-blue: #1a72db;
  --color-gray-dark: #767676;
  --color-gray-light: #f5f5f5;
  --color-gray-divider: #e8e8e8;
  --color-near-black: #111111;
  --color-gray-mid: #7a7a7a;
  --color-shadow-light: rgba(0, 0, 0, 0.06);
  --color-gray-hover: #888888;
  --color-shadow-very-light: rgba(0, 0, 0, 0.05);
  --color-navy-dark: #153c6a;
  --color-white-semi: rgba(255, 255, 255, 0.635);
  --color-navy-medium: #164378;
  --color-white-semi-light: rgba(255, 255, 255, 0.392);
  --color-navy-bright: #164a87;
  --color-white-very-light: rgba(255, 255, 255, 0.333);
  --color-orange-signal: #ffbf47;
  --color-charcoal: #141415;
  --color-gray-soft: #d8d8d8;

  /* Typography */
  --font-roboto: "Roboto", sans-serif;
  --font-ibm-plex: "IBM Plex Sans", sans-serif;
  --font-icons: "Material Icons";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-20: 20px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-50: 50px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-elevated: rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, 
                     rgba(0, 0, 0, 0.12) 0px 2px 1px -1px, 
                     rgba(0, 0, 0, 0.2) 0px 1px 3px 0px;
  --shadow-soft: rgb(128, 128, 128) 0px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# DropCatch Design System Specification

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

## Brand Context
DropCatch is a functional, data-focused brand for domain investors. The design is dense, fast, and utilitarian. Colors are sharp and purposeful, typography is tight, and spacing follows a disciplined grid.

## Color Palette
- Primary Text: rgba(0,0,0,0.87) — body text, headings
- Accent Yellow: #fcf843 — highlights
- White: #ffffff — backgrounds
- Link Blue: #1a72db — links, navigation
- Gray Dark: #767676 — secondary text
- Gray Light: #f5f5f5 — secondary surfaces
- Gray Divider: #e8e8e8 — dividers
- Near Black: #111111 — hover/focus
- Gray Mid: #7a7a7a — hover/focus
- Shadow Light: rgba(0,0,0,0.06) — state layers
- Gray Hover: #888888 — icon hover
- Shadow Very Light: rgba(0,0,0,0.05) — state layers
- Navy Dark: #153c6a — link hover
- White Semi: rgba(255,255,255,0.635) — overlay text
- Navy Medium: #164378 — link hover
- White Semi-Light: rgba(255,255,255,0.392) — overlay text
- Navy Bright: #164a87 — link hover
- White Very Light: rgba(255,255,255,0.333) — overlay text
- Orange Signal: #ffbf47 — warnings
- Charcoal: #141415 — dark UI hover
- Gray Soft: #d8d8d8 — background hover

## Typography
Fonts:
- Headings: "IBM Plex Sans", sans-serif
- Body/UI: "Roboto", sans-serif
- Icons: "Material Icons"

Sizes/Weights:
| Level | Size | Weight | Line Height | Use |
| H1 IBM Plex | 32px | 600 | 0.00 | Primary headings |
| H1 Roboto | 32px | 700 | 1.20 | Headings |
| Button | 16px | 400 | 1.56 | Button text |
| Caption | 13px | 400 | 1.92 | Metadata |
... (include all from table above)

## Spacing & Grid
Base: 8px grid with micro-spacing
Scale: 1px, 2px, 3px, 5px, 8px, 10px, 12px, 15px, 20px, 30px, 35px, 40px, 50px

## Border Radius
- none: 0px — joined inputs
- sm: 2px — small buttons
- md: 4px — buttons, inputs, cards
- full: 50% — circular buttons

## Shadows & Depth
- Elevated: rgba(0,0,0,0.14)... — inputs, modals
- Soft: rgb(128,128,128) 0px 0px 5px — subtle emphasis

## Component Specifications

### Primary Button
Default: bg #c2c2c2, color #212529, radius 2px, no shadow  
Hover: bg transparent mix, color token  
Active: translateY(1px), bg token  
Focus: color #4e5862, bg token

### Secondary Button
Default: transparent bg, color rgba(0,0,0,0.87), radius 4px, 1px border rgba(0,0,0,0.12)  
Hover: transparent bg  
Active: translateY(1px)  
Focus: outline 2px solid link color

### Dark Button
Default: bg #767676, color white, radius 4px  
Hover: transparent bg  
Active: translateY(1px)  
Focus: outline 2px solid link color

### Navigation Links
Default: color #1a72db (blue), no underline  
Hover: color token dark blue, no underline

### Input Fields
Text:
Default: bg rgba(255,255,255,0.6), no border, shadow elevated  
Focus: bg white, border #dea411, stronger shadow

Number:
Default: bg white, border #767676  
Focus: border #dea411

Checkbox:
Default: transparent bg  
Focus: border #dea411

## Layout & Responsive Rules
Max content width: up to 1920px desktop  
Breakpoints: 320, 479, 480, 599, 600, 768, 959, 960, 975, 1085, 1279, 1280, 1919, 1920

## Interaction Rules
Transitions: 150ms ease for state changes  
Focus indicators: clear outline (2px solid link color)  
No motion-heavy animations

## DO List
- Use ONLY colors from palette
- Maintain 8px grid and micro-spacing
- Use IBM Plex Sans for headings, Roboto for body
- Tight line heights for headings
- Keep buttons consistent with radius values

## DON'T List
- Add shadows where not defined
- Mix rounded and square corners arbitrarily
- Use colors outside tokens
- Underline links unless specified

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #c2c2c2;
  color: #212529;
  padding: 0;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: transparent; }
.btn-primary:focus { outline: 2px solid #1a72db; }
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  border: 1px solid #e8e8e8;
}
```

Input:
```css
.input {
  background: rgba(255,255,255,0.6);
  border: none;
  padding: 1px 40px 1px 10px;
  box-shadow: var(--shadow-elevated);
}
.input:focus {
  background: #ffffff;
  border: 1px solid #dea411;
}
```

9. Summary

TL;DR — DropCatch’s design system is pure function. Black, white, blue, and yellow drive high-contrast, high-speed UI. Tight typography and disciplined spacing keep data dense but readable. If you’re building for them, think “fast, minimal, precise.”

Brand Keywords:

• high-contrast-functional
• data-dense
• speed-focused
• utilitarian-tech
• decisive-minimal