# Maramel Design System

> High-contrast monochrome foundations punctuated by a vibrant berry-pink primary action and wide-tracked condensed display typography.

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

## TL;DR
Maramel utilizes a structured, high-contrast palette where deep grays (#3e3e3e, #444444) and pure black (#000000) anchor a professional, service-oriented aesthetic. The brand voltage is concentrated in a single primary berry-pink (#ce376a) used for high-conversion CTA buttons and specific text highlights. Typography is a dual-system approach: **DinCondensedBold** provides a rhythmic, authoritative display voice with significant letter-spacing (up to 4px), while **Inter** and **NimbusSanLRegular** handle functional UI and dense body copy. Layouts are characterized by sharp-edged surfaces and generous vertical pacing.

## Signature DNA
1. **Condensed Tracking** (DinCondensedBold headlines utilize 2px to 4px letter-spacing, creating a rhythmic, architectural header style across all service sections.)
2. **Berry-Pink Punctuation** (The use of #ce376a is strictly reserved for primary conversion points—"Book a Consultation" and "Contact an expert"—contrasting sharply against the grayscale canvas.)
3. **Achromatic Layering** (Backgrounds alternate between white (#ffffff), light lavender-gray (#f9f7fb), and deep charcoal (#444444) to define content boundaries without introducing secondary hues.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and text | 52 | 0.8 | computed_style |
| `{color.ink.primary}` | `#000000` | Primary display text and dark surfaces | 40 | 0.8 | computed_style |
| `{color.ink.secondary}` | `#58595b` | Secondary body text | 32 | 0.8 | computed_style |
| `{color.surface.dark}` | `#444444` | Section backgrounds (dark mode bands) | 12 | 0.8 | computed_style |
| `{color.surface.soft}` | `#f9f7fb` | Subtle section alternating background | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#ce376a` | Primary CTA background (Berry Pink) | 4 | 0.6 | computed_style |
| `{color.primary.border}` | `#e082a3` | CTA button borders / soft highlights | 4 | 0.6 | computed_style |
| `{color.accent.purple}` | `#785c99` | Decorative text / icons | 33 | 0.8 | computed_style |
| `{color.accent.blue}` | `#0a9fd8` | Decorative text / icons | 15 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| DinCondensedBold | 400, 700 | Display and Section Headings | Barlow Condensed | Licensed |
| Inter | 300, 400, 500 | UI Labels and Subheadings | Inter (Google) | Open Source |
| NimbusSanLRegular | 400 | Primary Body Copy | Helvetica | Licensed |
| Lato | 400 | Navigation and Carousel UI | Lato (Google) | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 44px | 52px | 4px | 700 | Hero headlines | `p` |
| `{type.display.lg}` | 37px | 46.66px | 3px | 400 | Section titles | `p` |
| `{type.heading.md}` | 35px | 41px | normal | 400 | Feature titles | `div.nlp-r4-title` |
| `{type.heading.sm}` | 26px | 32px | normal | 300 | Sub-section titles | `div.nlp-r4-title2` |
| `{type.heading.xs}` | 22px | 20px | 4px | 400 | Component headers | `h3` |
| `{type.body.lg}` | 21px | 28px | normal | 400 | Lead paragraphs | `p:nth-of-type(1)` |
| `{type.body.md}` | 16px | 30px | normal | 400 | Main body copy | `div#header-space` |
| `{type.caption}` | 12px | 20px | normal | 400 | Metadata / Labels | `span.testi-company` |

### Principles
1. **Wide Tracking on Condensed Type**: DinCondensedBold must always carry at least 2px tracking to maintain legibility and brand rhythm.
2. **Weight Contrast**: Pair light-weight Inter (300) subheaders with heavy DinCondensed (700) headers.
3. **Achromatic Hierarchy**: Use #58595b for long-form body text to reduce eye strain against white backgrounds, reserving #000000 for display.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 4 |
| `{space.sm}` | 10px | 33 |
| `{space.md}` | 15px | 23 |
| `{space.lg}` | 20px | 11 |
| `{space.section}` | 85px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Inputs, Cards, Layout containers | 305 occurrences |
| `{radius.full}` | 30px | Primary CTA Buttons | `Rounded Button` component |
| `{radius.max}` | 100px | Icon containers / Avatars | 14 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.3) 0px 0px 8px -1px` | Hover states / Floating elements | 3 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide CTA (Contact, Consultation)
**Pages observed:** https://maramel.com
**Spec:** Background `{color.primary}` (#ce376a) / Text `{color.canvas}` (#ffffff) / Border 1px `{color.primary.border}` (#e082a3) / Radius 30px / Padding 20px 25px / Typography `{type.heading.sm}` (24px)
**States observed:** Default | Hover: Not captured

#### Text Input
**Role:** Lead generation form fields
**Pages observed:** https://maramel.com
**Spec:** Background transparent / Text #717171 / Border 1px #b1b3b2 / Radius 0px / Padding 10px / Typography 12.22px
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Service Card
**Role:** Grid items for service descriptions
**Pages observed:** https://maramel.com
**Spec:** Background #dddddd / Text #ffffff / Border 0px / Radius 3px / Padding 0px / Typography 17px
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** High-contrast content bands
**Pages observed:** https://maramel.com
**Spec:** Background #444444 / Text #929595 / Border 0px / Radius 0px / Padding 0px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1170px (standard container) |
| Section Padding | 85px (vertical) |
| Grid Gap | 30px |

## Imagery & decoration
- **Iconography**: Uses Material Icons and FontAwesome, often tinted with accent colors (#785c99, #0a9fd8).
- **Photography**: High-resolution office/team imagery with natural lighting.
- **Avoid**: Soft shadows on containers; the brand prefers sharp 0px radius edges for most layout blocks.

## Do's
- Use **DinCondensedBold** for all major section headings.
- Apply **4px letter-spacing** to hero-level headlines.
- Reserve **#ce376a** exclusively for primary action buttons.
- Use **#f9f7fb** to separate white sections without introducing heavy borders.
- Maintain **85px vertical spacing** between major content sections.

## Don'ts
- **Wrong:** Using #ce376a for body text links. **Right:** Use #0a9fd8 or #785c99 for inline accents. **Reason:** Berry pink is reserved for high-priority conversion.
- **Wrong:** Applying border-radius to form inputs. **Right:** Keep inputs at 0px radius. **Reason:** Brand identity relies on sharp, architectural edges.
- **Wrong:** Using #000000 for long-form body copy. **Right:** Use #58595b. **Reason:** Improves readability on high-contrast white backgrounds.

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #ce376a;
  --color-primary-border: #e082a3;
  --color-ink-primary: #000000;
  --color-ink-secondary: #58595b;
  --color-surface-dark: #444444;
  --font-display: 'DinCondensedBold', sans-serif;
  --font-body: 'NimbusSanLRegular', Helvetica, Arial, sans-serif;
  --spacing-section: 85px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using #ce376a background, 30px border-radius, and 24px DinCondensedBold text with 4px letter-spacing."
- "Create a section header with 37px DinCondensedBold, #000000 color, and 3px tracking."
- "Design a lead capture form with 0px radius inputs and 1px borders using #b1b3b2."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific breakpoint transitions for the 4px letter-spacing were not fully detailed in the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://maramel.com | 1440x900 | 2026-06-06 |