Erome Design System Deep Dive

1. Brand Overview

Erome's site is stripped down, functional, and unapologetically direct. This is not a "design for design's sake" brand — it's about doing the job, quickly, with minimal distraction. The palette is tight. Typography is consistent. Components are few and to the point.

The vibe leans into a dark, high-contrast UI with pink accents. The dark base (#1b1b1b) dominates, giving everything a grounded, slightly edgy feel. The pinks (#eb6395 and #e3759f) are the only real bursts of color; they’re used sparingly, mostly to draw attention to interactive elements. This is a deliberate choice — nothing here is ornamental.

Interaction states are well thought out: hover, focus, active are differentiated but subtle. There’s no overuse of shadows — one shadow in the whole system, and even that is light-touch. Corners are barely rounded (2px radius), which keeps the UI feeling sharp and utilitarian.

Typography is locked to Montserrat. No mixing families, no quirky display fonts. This gives a clean, modern baseline that’s easy to read across devices. Line heights are generous, which helps spacing breathe even with a small type size (10–14px range in the UI).

Spacing is on a 4px scale, but actual values in use are uneven — you’ll see 10px, 30px, 100px, 150px — which means they’re designing per-component rather than strictly to a vertical rhythm. Breakpoints are thorough, covering everything from tiny screens (315px) to large desktops (1400px).

Overall: Erome’s system is about focus and clarity. The palette is minimal, the type is consistent, the components are tight. If you want flamboyance, look elsewhere. If you want a lean system that doesn’t get in the way — this is it.

2. Color System

2.1 Primary Colors

The primary brand color is #eb6395 — a saturated pink. It’s feminine in tone but not overly soft; the RGB values (235, 99, 149) give it enough punch to feel active. In the UI, this pink is mainly used for CTA buttons. Hover states darken it to rgb(219, 70, 126) — more contrast, more urgency.

Psychologically, pink here signals action without aggression. Compared to competitors in dark UI spaces (think Twitch purple or YouTube red), Erome's pink is warmer, more approachable. It stands out against the deep dark base (#1b1b1b) with strong contrast, which helps accessibility.

2.2 Complete Palette

2.3 Color Relationships

The contrast between #1b1b1b and #eb6395 is high — visually strong and WCAG AA friendly for large text. #ffffff on #eb6395 also passes for small text. The secondary pink (#e3759f) is similar in tone, so using it next to primary pink can reduce visual hierarchy — best to separate their contexts.

Dark mode is essentially the default UI — the palette is built for dark backgrounds. Light mode would require inversion or replacement of background and text colors.

2.4 Usage Guide

• Primary Action: #eb6395 background, white text.
• Hover: Darken pink to #db467e.
• Active: Switch to #0a0a0a background, white text.
• Disabled: Lower opacity to 0.5–0.75.
• Avoid pairing #e3759f with #eb6395 in the same component — they blend.
• Links use #1b1b1b or #a09f9d for default states; hover states lighten to #777777.

3. Typography

3.1 Font Families

Everything runs on Montserrat, loaded from Google Fonts. Fallbacks are DejaVu Sans, Verdana. No variable fonts, no Adobe Fonts.

3.2 Type Scale

3.3 Hierarchy

This is a flat hierarchy. Max size in the UI is 14px — no oversized headings. Weight is either 400 (regular) or 700 (bold captions). Uppercase is reserved for small captions at 11px bold — probably labels or tags. Line heights are generous, especially for small sizes (3.0+), which keeps text blocks airy.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 4px. Actual values in use:

4.2 Layout

Breakpoints are thorough:

315, 345, 383, 384, 400, 479, 480, 767, 768, 900, 991, 992, 1199, 1200, 1400 px.

The pairs like 479/480 or 991/992 suggest pixel-perfect media queries to avoid rounding errors. This is a dev-friendly approach — keeps layouts stable at edges.

5. Visual Elements

Border Radius

Tiny rounding — keeps components almost square.

Shadows

Only one shadow:

rgba(0, 0, 0, 0.5) 0px 5px 15px 0px — used sparingly (count 1). This is a deep, soft shadow for a single element, maybe a modal.

Borders

One combination:

0px 1px 0px 0px, style none solid none none, color #1b1b1b — used on <i> elements. Likely vertical dividers.

6. Components

6.1 Buttons

Primary Pink Button (btn btn-pink btn-lg-240):

• Default:

  • Background: #eb6395
  • Color: #1b1b1b
  • Padding: 0px
  • Radius: 2px
  • Border: 1px solid rgba(0, 0, 0, 0)
  • Shadow: none
  • Outline: #1b1b1b none 0px
  • Opacity: 1

• Hover:

  • Background: #db467e
  • Color: #ffffff
  • Border: none
  • Opacity: 0.75

• Active:

  • Background: #0a0a0a
  • Color: #ffffff
  • Shadow: none

• Focus:

  • Background: #eb6395
  • Color: #777777
  • Border: none
  • Opacity: 0.9

6.2 Links

Two styles:

1. Default: #1b1b1b, no underline. Hover: #777777.
2. Default: #a09f9d, no underline. Hover: #777777.

6.3 Forms

No data on inputs — likely minimal or custom.

6.4 Cards

No explicit data, but spacing and shadow suggest flat cards with 2px radius and occasional shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-base: #1b1b1b;
  --color-primary-pink: #eb6395;
  --color-secondary-pink: #e3759f;
  --color-hover-pink: #db467e;
  --color-active-black: #0a0a0a;
  --color-white: #ffffff;
  --color-grey-text: #777777;
  --color-light-grey-text: #a09f9d;

  /* Typography */
  --font-family-base: "Montserrat", "DejaVu Sans", "Verdana";
  --font-size-lg: 14px;
  --font-size-md: 11px;
  --font-size-sm: 10px;
  --line-height-lg: 2.00;
  --line-height-btn: 1.43;
  --line-height-link: 2.29;
  --line-height-md: 3.27;
  --line-height-sm: 3.00;
  --letter-spacing-base: 0.5px;

  /* Spacing */
  --space-10: 10px;
  --space-28: 28px;
  --space-30: 30px;
  --space-100: 100px;
  --space-150: 150px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.5) 0px 5px 15px 0px;
}

8. AI Coding Assistant Prompt

# Erome Design System Specification

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

## Brand Context
Erome's design is dark, minimal, and action-focused. The palette is tight: deep dark backgrounds with pink accents for interaction. Typography is consistent and modern, corners are sharp, and shadows are rare.

## Color Palette
- Dark Base: #1b1b1b — page backgrounds, text, icon strokes
- Primary Pink: #eb6395 — primary buttons, CTAs
- Secondary Pink: #e3759f — brand icons
- Hover Pink: #db467e — button hover background
- Active Black: #0a0a0a — active button background
- White: #ffffff — text on dark or pink backgrounds
- Grey Text: #777777 — focus state text
- Light Grey Text: #a09f9d — secondary link text

## Typography
Font family: "Montserrat", "DejaVu Sans", "Verdana"

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| Caption | 14px | 400    | 2.00        | body captions |
| Button  | 14px | 400    | 1.43        | primary buttons |
| Link    | 14px | 400    | 2.29        | nav links |
| Caption | 11px | 700    | 3.27        | uppercase labels |
| Caption | 10px | 400    | 3.00        | small captions |
| Link    | 10px | 400    | 3.00        | small links |

## Spacing & Grid
Base: 4px scale. Common values: 10px, 28px, 30px, 100px, 150px.

## Border Radius
- sm: 2px — buttons, divs
- md: 4px — modals

## Shadows & Depth
- shadow-lg: rgba(0,0,0,0.5) 0px 5px 15px 0px — rare, modals only
- Otherwise flat design — use borders/dividers.

## Component Specifications

### Primary Button
Default:
```css
background: #eb6395;
color: #1b1b1b;
padding: 0px;
border-radius: 2px;
border: 1px solid rgba(0,0,0,0);
font-size: 14px;
font-weight: 400;
```
Hover:
```css
background: #db467e;
color: #ffffff;
opacity: 0.75;
```
Active:
```css
background: #0a0a0a;
color: #ffffff;
```
Focus:
```css
background: #eb6395;
color: #777777;
opacity: 0.9;
```

### Links
Style 1:
Default: color #1b1b1b; no underline.
Hover: color #777777.

Style 2:
Default: color #a09f9d; no underline.
Hover: color #777777.

### Cards
Background: #1b1b1b; border-radius: 2px; padding: 30px; no shadow.

## Layout & Responsive Rules
Breakpoints: 315, 345, 383, 384, 400, 479, 480, 767, 768, 900, 991, 992, 1199, 1200, 1400 px.

## Interaction Rules
Transitions: 150ms ease for state changes.
Focus indicators: color change to #777777 on buttons.

## DO
- Use only palette colors
- Maintain 4px spacing scale
- Use Montserrat everywhere
- Keep radii at 2px unless modal (4px)
- Reserve shadow for modals
- Separate primary and secondary pink usage

## DON'T
- Add new colors
- Mix rounded and square corners
- Overuse shadows
- Use uppercase outside labels
- Increase type size beyond 14px in UI

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #eb6395;
  color: #1b1b1b;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid rgba(0,0,0,0);
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #db467e;
  color: #ffffff;
  opacity: 0.75;
}
```

### Link
```css
.link {
  color: #1b1b1b;
  text-decoration: none;
}
.link:hover {
  color: #777777;
}
```

### Card
```css
.card {
  background: #1b1b1b;
  border-radius: 2px;
  padding: 30px;
}
```

9. Summary

TL;DR — Erome’s design system is lean: dark base, pink accents, Montserrat type, sharp corners. Minimal shadows, consistent spacing, clear component states.

Brand Keywords — dark-minimalist, action-focused, sharp-edged, pink-accented, utilitarian