# Crmrebs.ro Design System

> High-contrast utility interface anchored by deep navy foundations, sharp geometry, and vibrant emerald action triggers.

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

## TL;DR
Crmrebs.ro utilizes a structured, enterprise-grade aesthetic that prioritizes legibility and clear hierarchy. The system is built on a foundation of neutral grays (#212529, #333333) and a deep primary blue (#1565c0) used for headings and navigation. The brand's "voltage" is concentrated in its primary CTA—a high-saturation emerald green (#2abb67) button that stands out against the white canvas. Typography is strictly sans-serif, pairing PT Sans for structural elements and headings with Open Sans for high-density body content. Layouts are characterized by sharp corners (0px radius) and generous vertical sectioning.

## Signature DNA
1. **Emerald Trigger** (The use of #2abb67 for primary "Testeaza gratuit" actions creates a singular, high-contrast focal point against the otherwise blue/gray palette.)
2. **Achromatic Density** (Heavy reliance on #212529 for body text and #333333 for secondary elements ensures a professional, tool-like clarity.)
3. **Sharp Utility** (A dominant 0px border radius across buttons and cards reinforces a precise, technical software identity.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--dark` | `#333333` | Secondary text, structural labels | 28 | 1.0 | CSS Variable |
| `--white` | `#ffffff` | Page canvas, button text | 14 | 1.0 | CSS Variable |
| `--gray` | `#6c757d` | Muted metadata, footer text | 4 | 1.0 | CSS Variable |
| `--foundation-ink` | `#212529` | Primary body text, borders | 47 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--primary` | `#1565c0` | Headings, navigation links, brand blue | 31 | 1.0 | CSS Variable |
| `--secondary` | `#2abb67` | Primary CTA background, success indicators | 4 | 1.0 | CSS Variable |
| `--blue` | `#007bff` | Decorative icons, social links | 1 | 1.0 | Declared Token |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `--red` | `#dc3545` | Error states (declared) |
| `--yellow` | `#ffc107` | Warning states (declared) |
| `--green` | `#28a745` | Success states (declared) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| PT Sans | 300, 400, 500, 700 | Headings, Nav, UI Labels | N/A | Google Fonts |
| Open Sans | 100, 300, 400, 700 | Body copy, descriptions | N/A | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.h2}` | 25px | 30px | normal | 700 | Section Titles | `h2.titlu` |
| `{text.cta-lg}` | 25px | 37.2px | normal | 700 | Hero Buttons | `a.btn.btn-secondary` |
| `{text.brand}` | 24px | 36px | normal | 700 | Navbar Logo | `a.navbar-brand` |
| `{text.name}` | 24px | 20px | normal | 700 | Profile Headers | `div.nume-specialist` |
| `{text.body}` | 16px | 24px | normal | 400 | Main Content | `div.img_home.started` |
| `{text.nav}` | 16px | 24px | normal | 400 | Top Navigation | `a.nav-link` |
| `{text.footer}` | 14px | 21px | normal | 400 | Footer Links | `span.footer-1-pad` |
| `{text.copyright}` | 13px | 19.5px | normal | 400 | Legal Text | `div.text-copyright` |

### Principles
1. **Heading Weight Consistency:** All major headings and brand identifiers are locked at 700 weight for maximum authority.
2. **Sans-Serif Utility:** No serifs are used; the system relies on font-family switching (PT Sans to Open Sans) to distinguish between UI and content.
3. **Tight Display Leading:** Large headings use a tight 1.2x line-height (30px on 25px text) to maintain visual density.

## Spacing
**Base unit:** 8px (approximate)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 22 |
| `{space.sm}` | 16px | 13 |
| `{space.md}` | 24px | 6 |
| `{space.lg}` | 32px | 5 |
| `{space.xl}` | 52px | 15 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Buttons, Cards, Inputs | 127 occurrences |
| `{radius.pill}` | 50px | Decorative badges | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(35, 31, 32, 0.07) 0px 0px 20px 4px` | Feature cards, testimonial blocks | Surface component |
| `{shadow.button}` | `rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.3) 0px 2px 2px 0px` | Primary Emerald CTA | Button component |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main conversion trigger (e.g., "Testeaza gratuit")
**Pages observed:** https://crmrebs.ro
**Spec:** Background: `#2abb67` / Text: `#ffffff` / Radius: `0px` / Padding: `14.4px 57.6px` / Typography: `PT Sans 700 24.8px`
**States observed:** Default | Hover: captured (darker green)

#### Navigation Link
**Role:** Global site navigation
**Pages observed:** https://crmrebs.ro
**Spec:** Background: `transparent` / Text: `#1565c0` / Typography: `PT Sans 400 16px`
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Testimonial Card
**Role:** Social proof display
**Pages observed:** https://crmrebs.ro
**Spec:** Background: `#ffffff` / Shadow: `{shadow.card}` / Radius: `0px` / Padding: `20px`
**States observed:** Default: captured

#### Feature Block
**Role:** Explaining product capabilities
**Pages observed:** https://crmrebs.ro
**Spec:** Text: `#212529` / Heading: `#1565c0` / Border-left: `1px solid #ced4da` (observed in list patterns)
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Footer Surface
**Role:** Site-wide navigation and legal
**Pages observed:** https://crmrebs.ro
**Spec:** Background: `#ffffff` / Text: `#6c757d` / Border-top: `1px solid #ced4da`
**States observed:** Default: captured

#### Specialist Badge
**Role:** User profile identification
**Pages observed:** https://crmrebs.ro
**Spec:** Text: `#212529` / Font: `PT Sans 700 24px` / Margin-bottom: `10px`
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Max content width | 1140px |
| Section padding | 50px - 80px (vertical) |
| Column gap | 30px |

## Do's
- Use `#2abb67` only for the primary conversion action.
- Ensure all headings use `PT Sans` at weight 700.
- Maintain `0px` border radius on all functional UI components.
- Use `#1565c0` for all interactive text links and section headers.
- Apply `{shadow.card}` to elements that require separation from the white canvas.

## Don'ts
- **Wrong:** Using `#1565c0` for primary CTA buttons. **Right:** Use `#2abb67`. **Reason:** Blue is the brand foundation; green is the conversion signal.
- **Wrong:** Applying rounded corners to buttons. **Right:** Keep radius at `0px`. **Reason:** The brand identity is built on sharp, technical geometry.
- **Wrong:** Using `Open Sans` for main section headings. **Right:** Use `PT Sans`. **Reason:** PT Sans is the designated structural typeface.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary: #1565c0;
  --secondary: #2abb67;
  --dark: #333333;
  --ink: #212529;
  --gray: #6c757d;
  --white: #ffffff;
  --radius-sharp: 0px;
  --shadow-card: 0px 0px 20px 4px rgba(35, 31, 32, 0.07);
}
```

## Agent prompt examples
- "Create a primary CTA button using #2abb67 background, white PT Sans 700 text, 0px border radius, and a subtle 2px bottom shadow."
- "Design a feature card with a white background, 0px border radius, and the standard brand shadow (rgba 35, 31, 32, 0.07)."
- "Generate a section header using PT Sans 700 at 25px in the brand blue #1565c0."

## Known gaps
- Hover and active states for secondary navigation items were not fully captured in the automated trace.
- Mobile-specific breakpoint transitions for the 3-column testimonial grid were not explicitly defined in the evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://crmrebs.ro | 1440px | 2026-06-06 |