# Dropit.shop Design System

> High-contrast retail intelligence anchored by semi-black foundations and high-voltage sea green accents.

**Source:** https://dropit.shop | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Dropit.shop utilizes a "Semi-Black" foundation (`#1c1f25`) to establish a sophisticated, data-heavy environment for retail intelligence. The system is characterized by a stark contrast between deep charcoal surfaces and a vibrant "Medium Sea Green" accent (`#00b588`) used for primary actions and critical borders. Typography pairs the authoritative serif **Merriweather** for headlines with the highly legible sans-serif **Lato** for body and interface elements. Layouts are structured around generous 100px vertical rhythms, utilizing 20px rounded corners for content containers to soften the technical density of the platform.

## Signature DNA
1. **The High-Contrast Action:** Primary CTAs use a saturated `#00b588` background against white text, providing immediate visual priority against the `#1c1f25` or white canvases.
2. **Serif Authority:** Large-scale **Merriweather** headlines (up to 48px) provide an editorial, trustworthy feel that balances the "AI-powered" technical nature of the product.
3. **Softened Technicality:** Despite the data-centric focus, the system avoids sharp edges, employing a consistent `20px` radius on cards and `100px` on pill-shaped panels.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--semi-black` | `#1c1f25` | Primary surface background, primary text | 14 | 1 | Computed Style |
| `--semi-black-100` | `#dbdde0` | Page background, secondary text | 11 | 1 | CSS Variable |
| `--white` | `#ffffff` | Card background, button text | 9 | 1 | Computed Style |
| `--semi-black-800` | `#37393e` | Surface borders, dark section backgrounds | 4 | 1 | CSS Variable |
| `--semi-black-400` | `#989ba2` | Muted body text | 4 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--medium-sea-green` | `#00b588` | Primary CTA background, success borders | 15 | 1 | CSS Variable |
| `--medium-slate-blue` | `#7b61ff` | Interactive text, secondary accents | 8 | 1 | CSS Variable |
| `accent-blue` | `#0000ee` | Inline links (legacy/default) | 7 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Merriweather | 700 | Primary Headings | Merriweather (Google) | OFL |
| Lato | 400, 700 | Body, UI, Buttons | Lato (Google) | OFL |
| Merriweather Sans | 400 | Data Display, Stats | Merriweather Sans (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 64px | 48px | -6px | 400 | Stats/Data | `p.stats_amount` |
| `display-lg` | 48px | 57px | 0.5px | 700 | Hero Headings | `h2.section_heading_2024` |
| `display-md` | 42px | 300px | normal | 400 | Stats Percentage | `span.stats_percentage` |
| `heading-md` | 32px | 38px | 0.5px | 700 | Card Headings | `div.optimizing_card_heading` |
| `heading-sm` | 24px | 36px | 0.5px | 700 | Sub-headings | `h4.text-block-19` |
| `body-lg` | 18px | 27px | 0.5px | 400 | Hero Body | `section.n-section.new-hero` |
| `body-md` | 16px | 24px | 0.5px | 400 | Standard Body | `div.stats_description` |
| `body-sm` | 14px | 21px | 0.5px | 700 | Section Labels | `div.section_title_2024` |

### Principles
1. **Headlines are always Serif:** All major section titles must use Merriweather 700 to maintain brand authority.
2. **Looser Tracking for Body:** Body copy (Lato) maintains a consistent `0.5px` letter-spacing to ensure legibility on dark backgrounds.
3. **Aggressive Display Kerning:** Large numeric data (64px) uses extreme negative letter-spacing (`-6px`) for a compact, impactful look.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `space-xs` | 5px | 4 |
| `space-md` | 16px | 4 |
| `space-section` | 100px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `radius-none` | 0px | Main section containers | 64 occurrences |
| `radius-card` | 20px | Content cards, feature blocks | `Surface` component |
| `radius-pill` | 100px | Buttons, badges, ELT panels | `panel` role |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `flat` | none | Default state for all cards and surfaces | Component audit |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Learn more", "Submit")
**Pages observed:** https://dropit.shop
**Spec:** Background `#00b588` | Text `#ffffff` | Radius `0px` (observed) | Typography `Lato 700`
**States observed:** Default: Captured | Hover: Not captured

#### Surface (Dark)
**Role:** Section containment for high-contrast areas
**Pages observed:** https://dropit.shop
**Spec:** Background `#1c1f25` | Text `#dbdde0` | Padding `100px 0px` | Radius `0px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific product capabilities
**Pages observed:** https://dropit.shop
**Spec:** Background `transparent` | Border `1px solid #37393e` | Radius `20px` | Text `#1c1f25`
**States observed:** Default: Captured

#### Data Badge
**Role:** Circular indicators within diagrams/graphics
**Pages observed:** https://dropit.shop
**Spec:** Background `#ffffff` | Border `1px solid #00b588` | Radius `100%` | Text `#00b588`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Stats Block
**Role:** Large-scale numerical proof points
**Pages observed:** https://dropit.shop
**Spec:** Typography `Merriweather Sans 64px` | Color `#1c1f25` | Letter-spacing `-6px`
**States observed:** Default: Captured

#### Form Input
**Role:** Lead generation in footer
**Pages observed:** https://dropit.shop
**Spec:** Background `transparent` | Border-bottom `1px solid #ffffff` | Text `#ffffff` | Typography `Lato 16px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Section Padding | 100px (Vertical) |
| Max Content Width | ~1200px |
| Grid | 3-column (Features), 2-column (Hero) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Full 3-column feature grids |
| Mobile | 390px | Stacked single-column layout, reduced padding |

## Imagery & decoration
Dropit.shop uses technical diagrams with thin-line connectors and circular nodes. Graphics often feature glowing "Medium Sea Green" or "Medium Slate Blue" accents to represent data flow. Photography is limited to professional headshots (testimonials) and UI screenshots.

## Do's
- Use `#1c1f25` for primary text on light backgrounds and for dark section backgrounds.
- Apply `20px` border-radius to all content cards.
- Ensure all primary buttons use the `#00b588` background.
- Use **Merriweather** only for headings, never for body text.
- Maintain `100px` vertical spacing between major sections.

## Don'ts
- **Wrong:** Using `#7f56d9` (Purple) as the primary CTA color. **Right:** Use `#00b588`. **Reason:** Purple is a secondary accent/token, not the primary brand action color.
- **Wrong:** Setting display stats in Merriweather (Serif). **Right:** Use Merriweather Sans. **Reason:** Data visualization requires the clarity of the sans-serif variant.
- Do not use sharp corners on cards; always apply the `20px` radius.
- Do not use `#0000ee` for primary UI buttons; this is reserved for legacy inline links.

## Similar brands
- Scale AI (High-contrast technical UI)
- Flexport (Logistics-focused, authoritative typography)
- Samsara (Dark-mode technical dashboards)

## Quick start

### CSS Custom Properties
```css
:root {
  --semi-black: #1c1f25;
  --semi-black-800: #37393e;
  --semi-black-100: #dbdde0;
  --medium-sea-green: #00b588;
  --medium-slate-blue: #7b61ff;
  --white: #ffffff;
  
  --font-heading: 'Merriweather', serif;
  --font-body: 'Lato', sans-serif;
  --font-data: 'Merriweather Sans', sans-serif;
  
  --radius-card: 20px;
  --space-section: 100px;
}
```

## Agent prompt examples
- "Generate a feature card using a 1px border of #37393e, a 20px border radius, and a Merriweather 700 heading at 32px."
- "Create a primary CTA button with a background of #00b588, white Lato 700 text, and 16px horizontal padding."
- "Design a dark section using #1c1f25 as the background with 100px vertical padding and #dbdde0 for the body text."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the source.
- Shadow tokens were not present in the CSS or rendered styles.
- The full responsive breakpoint scale beyond 1440px and 390px was not sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://dropit.shop | 1440x900 | 2026-06-06 |
| Mobile Home | https://dropit.shop | 390x844 | 2026-06-06 |