# Reklamstore Design System

> A corporate digital canvas defined by high-contrast navy and white foundations, punctuated by a vibrant growth-green for primary actions and organic, fluid masking.

**Source:** https://reklamstore.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Reklamstore utilizes a professional "Trust & Growth" palette, pairing a deep navy `#0d102b` with a primary action green `#50b74a`. The interface relies on a clean white foundation `#ffffff` and a structured typography system featuring **Plus Jakarta Sans** for headlines and **Questrial** or system sans for body text. Visual interest is generated through organic, non-geometric masks and dashed-line decorative containers. Components are generally sharp-edged or use very subtle 3px-4px radii, with the exception of large decorative "panel" elements that use a 50px radius.

## Signature DNA
1. **The Growth Green CTA** (The use of `#50b74a` as the singular high-voltage action color for buttons and success states, contrasting against navy backgrounds).
2. **Organic Masking** (Images and illustrations are frequently contained within fluid, non-standard organic shapes rather than strict rectangles, seen on the About and Home pages).
3. **Dashed Enclosures** (Key statistics and secondary containers often feature white or light gray dashed borders to denote modularity without heavy solid lines).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 47 | 1 | Computed Style |
| `{color.ink.primary}` | `#212529` | Primary body text | 79 | 0.8 | Computed Style |
| `{color.ink.heading}` | `#0d102b` | Primary heading color, navy accent | 44 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#999999` | Secondary text, navigation links | 28 | 0.8 | Computed Style |
| `{color.ink.deep}` | `#060815` | Footer background text, high-contrast ink | 18 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#50b74a` | Primary CTA background, growth accent | 4 | 0.6 | Computed Style |
| `{color.accent.blue}` | `#007bff` | Link text, secondary brand signal | 63 | 1 | `--primary` |
| `{color.accent.lavender}` | `#c5cae9` | Decorative text, soft UI elements | 34 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `{color.success}` | `#50b74a` | Primary brand green used for success/growth |
| `{color.info}` | `#007bff` | Standard blue for informational links |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Plus Jakarta Sans | 500 | Headings | Plus Jakarta Sans | Google Fonts |
| Questrial | 400, 600, 700 | Body, sub-headings | Questrial | Google Fonts |
| -apple-system | 400, 500 | UI, Navigation, Inputs | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{text.h2}` | 32px | 38.4px | 0.032px | 500 | Section Headings | `h2.elementor-heading-title` |
| `{text.h3}` | 25px | 28px | 0.5px | 700 | Sub-section heads | `b` |
| `{text.body.lg}` | 18px | 27px | 0.32px | 400 | Lead paragraphs | `span` |
| `{text.body.md}` | 17px | 28px | 0.34px | 600 | Feature descriptions | `p.elementor-image-box-description` |
| `{text.body.default}` | 16px | 24px | 0.32px | 400 | Standard body text | `section.elementor-section` |
| `{text.nav}` | 16px | 16px | 0.32px | 400 | Top navigation items | `li#menu-item-75013` |
| `{text.button}` | 15px | 15px | normal | 400 | CTA labels | `button.elementor-button` |
| `{text.caption}` | 15px | 22.5px | 0.32px | 400 | Small labels | `span.elementor-size-small` |

### Principles
1. **Heading Weight Restraint:** Headings use a medium weight (500) rather than heavy bolds to maintain a modern, airy feel.
2. **Body Tracking:** Questrial is set with positive letter-spacing (0.34px) to improve legibility in descriptive blocks.
3. **Navy for Emphasis:** High-level information is rendered in navy `#0d102b`, never pure black.

## Spacing
**Base unit:** 5px (observed frequently in padding/margins)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 51 |
| `{space.sm}` | 10px | 24 |
| `{space.md}` | 15px | 30 |
| `{space.lg}` | 20px | 20 |
| `{space.xl}` | 50px | 3 |
| `{space.section}` | 70px | 4 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers, Navigation | `radius: 0px` |
| `{radius.sm}` | 3px | Buttons, Text Inputs | `radius: 3px` |
| `{radius.md}` | 4px | Form fields | `radius: 4px` |
| `{radius.lg}` | 50px | Large decorative panels | `radius: 50px` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.nav}` | `rgba(0, 0, 0, 0.06) 5px 4px 50px 0px` | Main header shadow | Navigation component |
| `{shadow.card}` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Content cards | Card component |
| `{shadow.deep}` | `rgb(66, 68, 90) 0px 2px 24px -4px` | Floating UI elements | Shadows array |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** Home, About
**Spec:** Background `#ffffff` / Text `#999999` / Shadow `rgba(0, 0, 0, 0.06) 5px 4px 50px 0px` / Font-size `16px`
**States observed:** Default | Hover: captured (text changes to `#1e4ec4`)

#### Text Input
**Role:** Form data entry
**Pages observed:** Home, About
**Spec:** Background `#ffffff` / Text `#1f2124` / Border `1px solid #6972125` / Radius `3px` / Padding `5px 14px`

### Tier 2: Patterns

#### Rounded Button
**Role:** Primary CTA (Submit, Contact)
**Pages observed:** Home, About
**Spec:** Background `#50b74a` / Text `#ffffff` / Radius `3px` / Padding `0px 24px` / Font-size `15px`
**States observed:** Default | Hover: captured

#### Card
**Role:** Feature or service display
**Pages observed:** Home, About
**Spec:** Background `transparent` / Shadow `rgb(128, 128, 128) 0px 0px 5px 0px` / Radius `2px` / Font-size `16px`

### Tier 3: Surface-specific

#### Dark Surface
**Role:** Footer or high-impact section
**Pages observed:** Home, About
**Spec:** Background `#000000` / Text `#212529` / Padding `70px 0px 10px`

#### Gray Surface
**Role:** Subtle section differentiation
**Pages observed:** Home, About
**Spec:** Background `rgb(230, 230, 230)` / Text `#212529`

## Layout
| Property | Value |
| :--- | :--- |
| Content Max-Width | 1140px (standard Elementor container) |
| Section Padding | 70px (vertical) |
| Grid Gutter | 20px |

## Do's
- Use `#50b74a` for all primary "Growth" actions.
- Apply `Plus Jakarta Sans` at weight 500 for all H2 section titles.
- Utilize organic, non-geometric masks for team or technology imagery.
- Maintain a white background `#ffffff` for content-heavy sections to ensure readability.
- Use dashed borders for secondary data containers or "Quick Start" boxes.

## Don'ts
- Do not use `#007bff` (Blue) for primary buttons; this is reserved for text links.
- Do not use heavy border-radii on buttons; stick to the `{radius.sm}` (3px) standard.
- Do not use pure black `#000000` for body text; use `{color.ink.primary}` (`#212529`).
- Avoid solid heavy borders; prefer `{shadow.card}` or dashed lines for containment.

## Similar brands
- LinkedIn (Professional networking palette)
- HubSpot (Growth-focused green accents)
- DoubleClick (Legacy ad-tech aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #50b74a;
  --color-navy: #0d102b;
  --color-blue: #007bff;
  --color-white: #ffffff;
  --color-ink: #212529;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Questrial', sans-serif;
  --radius-sm: 3px;
  --shadow-nav: 5px 4px 50px 0px rgba(0, 0, 0, 0.06);
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": {
      "primary": { "value": "#50b74a" },
      "navy": { "value": "#0d102b" }
    },
    "neutral": {
      "white": { "value": "#ffffff" },
      "ink": { "value": "#212529" }
    }
  }
}
```

## Agent prompt examples
- "Create a primary CTA button using Reklamstore's growth green #50b74a, with a 3px border radius and 15px Plus Jakarta Sans text."
- "Design a feature card with a subtle 5px gray shadow and a dashed border, containing a heading in #0d102b navy."
- "Generate a section layout with 70px vertical padding and a white background, using Questrial for the body copy."

## Known gaps
- Hover states for secondary navigation items were not fully captured in the computed style evidence.
- Mobile-specific breakpoint values (e.g., 768px vs 1024px) were not explicitly declared in the token set.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Home | https://reklamstore.com | Desktop 1440 | 2026-06-06 |
| About | https://reklamstore.com/about | Desktop 1440 | 2026-06-06 |
| Home (Mobile) | https://reklamstore.com | Mobile 390 | 2026-06-06 |