# Nefeni.pl Design System

> High-contrast monochrome utility meets vibrant green-screen heroics, anchored by bold Rubik displays and sharp, zero-radius geometry.

**Source:** https://nefeni.pl | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Nefeni.pl utilizes a high-contrast foundation of deep charcoal `#262626` and pure white `#ffffff`, punctuated by a signature "Vivid Green" `#58b749` hero canvas. The system is strictly geometric, rejecting border radii (`0px`) in favor of sharp, architectural edges for buttons and cards. Typography is a dual-font system: **Rubik** provides a technical, modern feel for headings (notably at a signature light weight of 300 for massive displays), while **Arial** handles functional UI and body text. Layouts are spacious, using a 50px-based vertical rhythm to separate dense content blocks.

## Signature DNA
1. **The Sharp Edge** (All interactive elements, including primary buttons and content cards, use a strict `0px` border radius, creating a rigid, professional grid feel across all pages).
2. **Lightweight Display** (Hero headlines utilize Rubik at weight 300 at 100px scale, creating an editorial contrast against the heavy 700-weight sub-headers).
3. **Achromatic Core with Green Voltage** (The functional UI is strictly monochrome `#262626`, but the brand identity is carried by large-scale `#58b749` flood-fills in hero sections).

## Family Map
Not captured in source (Single-brand topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.ink}` | `#262626` | Primary text, button backgrounds, footer surfaces | 52 | 0.8 | computed_style |
| `{color.canvas}` | `#ffffff` | Page background, primary surface, button text | 48 | 1.0 | `--wp--preset--color--white` |
| `{color.void}` | `#000000` | Deep section backgrounds, shadow tokens | 3 | 1.0 | `--wp--preset--color--black` |
| `{color.neutral}` | `#7f7f7f` | Muted secondary text | 7 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.green}` | `#58b749` | Hero backgrounds, primary brand signal | 5 | 0.6 | computed_style |
| `{color.accent.blue}` | `#337ab7` | Text links, decorative highlights | 3 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Rubik | 300, 500, 700 | Display, Headings | Rubik (Google Fonts) | OFL |
| Arial | 400, 600, 700 | Body, UI, Navigation | Arimo | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 100px | 120px | normal | 300 | Hero headlines | `p.text-bg` |
| `{type.display.lg}` | 50px | 55px | 1px | 700 | Section titles | `h2.text-center` |
| `{type.heading.sm}` | 20px | 28.5px | normal | 700 | Card titles | `div.post-title` |
| `{type.body.md}` | 16px | 22.8px | normal | 400 | Navigation, Body | `div.navbar` |
| `{type.body.sm.bold}` | 15px | 20px | normal | 600 | Links, UI labels | `a` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Secondary body | `p:nth-of-type(1)` |
| `{type.label.xs}` | 13px | 18.5px | 1px | 500 | Small UI links | `a.text-white` |
| `{type.caption}` | 12px | 17.1px | 1px | 700 | Button labels | `a.btn.btn-black` |

### Principles
1. **Display weight inversion:** Use weight 300 for the largest type (100px) and weight 700 for mid-size headings (50px).
2. **Functional Sans:** Arial is strictly for utility; never use Rubik for long-form body text or navigation menus.
3. **Tracking for Small Caps:** Increase letter spacing to 1px for all bold labels under 14px to maintain legibility.

## Spacing
**Base unit:** Custom (10px/12px)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 12px | 12 |
| `{space.sm}` | 20px | 11 |
| `{space.md}` | 40px | 12 |
| `{space.lg}` | 50px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | All buttons, cards, and containers | 101 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | none | All components | `shadow: none` in component spec |

## Components

### Tier 1: Foundational

#### Button
**Role:** Primary site actions and CTA
**Pages observed:** All
**Spec:** Background: `#262626` | Text: `#ffffff` | Border: `0px` | Radius: `0px` | Padding: `12px 40px 11px 24px` | Typography: `{type.caption}`
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Navbar
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#262626` | Typography: `{type.body.md}` | Height: ~60px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### News Card
**Role:** Content preview in "Aktualności"
**Pages observed:** `https://nefeni.pl`
**Spec:** Background: `#000000` (overlay) | Text: `#ffffff` | Radius: `0px` | Padding: `20px`
**States observed:** Default

#### Client Logo Grid
**Role:** Social proof section
**Pages observed:** `https://nefeni.pl`
**Spec:** Background: `#ffffff` | Item Gap: `30px` | Image filter: None (Full color)
**States observed:** Default

### Tier 3: Surface-specific

#### Hero Section
**Role:** Primary landing impact
**Pages observed:** `https://nefeni.pl`, `404 page`
**Spec:** Background: `#58b749` | Text: `#ffffff` | Padding-bottom: `50px`
**States observed:** Default

#### Footer
**Role:** Global site info
**Pages observed:** All
**Spec:** Background: `#262626` | Text: `#ffffff` | Typography: `{type.body.sm}` | Padding: `40px 0`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Page Max-Width | 1170px (standard container) |
| Section Vertical Gap | 50px |
| Column Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Column stacks to 1-up. |

## Imagery & decoration
- **Color Blocks:** Uses full-width background floods of `#58b749` or `#262626`.
- **Iconography:** Minimalist line icons (e.g., the mouse scroll indicator in the hero).
- **Avoidance:** No drop shadows, no rounded corners, no gradients.

## Do's
- Use `#262626` for all primary text on white backgrounds.
- Set Rubik to weight 300 for display sizes above 80px.
- Maintain a strict `0px` radius on all interactive containers.
- Use 50px increments for vertical section spacing.
- Ensure buttons have generous horizontal padding (min 24px).

## Don'ts
- **Wrong:** Using `#00d084` (WP Green) as the primary brand hero color. **Right:** Use `#58b749`. **Reason:** The WP preset is a system token, not the brand's resolved primary.
- Do not apply border-radius to buttons or cards.
- Do not use Rubik for body paragraphs; use Arial.
- Do not use drop shadows to create depth; use color contrast instead.

## Similar brands
- **Vercel:** Sharp geometry, monochrome core.
- **Standard Projects:** Editorial typography, high-contrast layouts.
- **Gov.uk:** Utility-first sans-serif, strict flat design.

## Quick start

```css
/* CSS Variables */
:root {
  --color-ink: #262626;
  --color-canvas: #ffffff;
  --color-brand: #58b749;
  --font-display: 'Rubik', sans-serif;
  --font-ui: 'Arial', sans-serif;
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Generate a CTA section with a `#58b749` background, a Rubik 300 headline at 100px, and a sharp-edged button with `#262626` background."
- "Create a 3-column grid of content cards using `#ffffff` backgrounds, `#262626` text, and `0px` border radius."

## Known gaps
- Hover and Active states for buttons were not captured in the static trace.
- Specific mobile breakpoint triggers (px values) were inferred from standard viewport captures.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | `https://nefeni.pl` | 1440px | 2026-06-06 |
| Pricing | `https://nefeni.pl/pricing` | 1440px | 2026-06-06 |
| Mobile Home | `https://nefeni.pl` | 390px | 2026-06-06 |