Notamedia Brand Design System Deep-Dive

1. Brand Overview

Notamedia’s digital agency site feels sharp, confident, and unapologetically professional. This is a brand that knows its audience — large-scale clients, serious projects, and a design language that says “we’ve done this before, and we’ve done it well.” The visual tone is dark, grounded, and deliberate. No pastel fluff, no gradient fireworks. Their palette leans into disciplined neutrals and controlled accents: deep greys, strong greens, occasional teal. The typography is modern sans-serif with geometric leanings, tightly spaced and often uppercase — which reads as assertive rather than playful.

The overall vibe: corporate but not bland. There’s a sense of “we’re in control” — reinforced by the very consistent use of Proxima as the only real typeface family across headings, links, and body text. Even buttons keep their radius consistent, and the color choices avoid “web template” clichés. They use color sparingly, which makes the green accent pop more when it appears. This is the kind of design system that works well for complex content — portfolios, case studies, and multi-section layouts — because it’s not visually noisy.

From a philosophy point of view: minimal ornamentation, tight control over spacing, and typography doing most of the personality work. It’s a brand for people who value precision and hierarchy. The design system is clearly built to scale — all spacing values sit neatly on an 8px grid, breakpoints are exhaustive, and the palette is small but functional. This tells me they care about engineering discipline as much as visual craft.

If you’re working with this system, you need to respect its restraint. Every deviation — a random color, a loose line height — will immediately feel off. This is a system that rewards consistency and punishes improvisation.

2. Color System

2.1 Primary Colors

The main brand accent is #38a14c (rgb(56, 161, 76)) — a saturated green. It’s used for interactive highlights (links, accents) and some buttons. Green here signals growth, reliability, and action. It’s a safe but strong choice, especially in a corporate context. Compared to competitors, it’s less “startup neon” and more “environmentally aware enterprise.” The rest of the palette is dominated by greys — #656a73, #2e3641 — and deep blacks/granite tones. There is a teal-ish hue (#045d56) used in hover/focus states, which keeps the interaction feedback subtle but noticeable.

The psychology: The green stands out against the muted background, giving CTAs clear visibility without screaming. The dark neutrals keep content readable and high-contrast in both light and dark sections.

2.2 Complete Palette

2.3 Color Relationships

Contrast ratios are strong — black text on white, white on dark backgrounds, green on dark backgrounds — all pass WCAG AA easily. The teal hover colors are darker than the green accent, so hover states subtly shift tone without breaking brand consistency. This system is inherently dark-mode friendly, since most sections lean toward deep greys, blacks, and muted accents.

2.4 Usage Guide

• Good combos: #38a14c on #2e3641 (clear accent on dark), white text on primary green for buttons, #656a73 on white for secondary text.
• Avoid: Green on teal — too little contrast; teal on gray background — can look muddy.
• Interactive elements: Always use hover/focus teal shades for subtle feedback; don’t swap to unrelated colors.

3. Typography

3.1 Font Families

Everything is Proxima — no Google Fonts, no Adobe Fonts, no variable fonts. Fallbacks are null or occasionally Roboto (for a single 12px link variant). This makes typography extremely consistent. Proxima’s geometric sans style fits the brand’s assertive, modern tone.

3.2 Type Scale

3.3 Hierarchy

This scale is wide — H1s range from 108px to 48px depending on context. The uppercase transform on many headings adds authority. Body sizes hover around 16–20px, which is readable but tight due to low line heights in some cases. The multiple weights (400–700) keep hierarchy clear without extra color usage.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. All values are multiples, except occasional 3px/5px micro-tweaks. This is a disciplined scale.

4.2 Layout

Breakpoints range from tiny mobile (340px) up to massive desktop (2500px). This is a hyper-responsive system. They clearly tailor layouts for dozens of specific widths — unusual in most systems. It suggests pixel-perfect control for many viewport sizes. Likely driven by complex layouts in case studies.

5. Visual Elements

Border Radius System

Values are deliberate:

• 2px — badges
• 3px — divs
• 5px — spans
• 8px — inputs, divs, textarea
• 16px — divs
• 20px — spans
• 24px — ul, input
• 30px — button
• 38px — spans
• 100px — a, div, select, span
• 50% — buttons, spans, inputs, divs, a
• 100% — divs

They use 50% for perfect circles — common for avatars or pill buttons. 100px is essentially full-pill for large buttons.

Shadow System

Two shadows exist — a white inset overlay and a subtle grey drop shadow — but used sparingly. This is mostly a flat design system.

Borders

Common: 1px solid rgb(211, 221, 229) for inputs. Some dividers with 1px top border in deep grey. Occasional 2px solid colored borders for emphasis.

6. Components

6.1 Buttons

Primary green button (case-form__submit but_green):

• Default: bg rgb(54,64,78), color white, padding 0, radius 30px, border none, font-weight 600, font-size 16px.
• Hover: opacity 0.75, bg rgb(18,102,165), color white.
• Active: opacity 0.9.

No focus style defined — possible oversight.

6.2 Links

Multiple link styles — all no underline, color changes by type:

• Dark text links (#090c1b)
• Light grey links (#b2b2b2)
• Green links (#38a14c)
• White links (#ffffff)
• Neutral grey links (#656a73)

Hover: color inherits, still no underline.

6.3 Forms

Text inputs: transparent bg, white text, no border by default, padding bottom 10px. Focus: border-color #50545a, box-shadow inset #232b37.

6.4 Cards

No explicit card component in data — but can infer from div styles: modest radius (8px–16px), occasional 1px border, flat bg.

7. Design Tokens

:root {
  /* Colors */
  --color-neutral-gray: #656a73;
  --color-black: #000000;
  --color-primary-green: #38a14c;
  --color-deep-gray: #2e3641;
  --color-teal-hover-1: #045d56;
  --color-teal-hover-2: #045e56;
  --color-teal-hover-3: #045d55;
  --color-swiper-blue: #007aff;

  /* Typography */
  --font-proxima: "Proxima";
  --font-roboto: "Roboto", "Proxima";

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-38: 38px;
  --space-48: 48px;
  --space-50: 50px;
  --space-80: 80px;

  /* Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-30: 30px;
  --radius-38: 38px;
  --radius-100: 100px;
  --radius-circle: 50%;
  --radius-full: 100%;

  /* Shadows */
  --shadow-white-inset: rgb(255, 255, 255) 0px 0px 0px 1000px inset;
  --shadow-grey: rgb(128, 128, 128) 0px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# Notamedia Design System Specification

You are a Notamedia design expert. Build UIs matching their visual language exactly.

## Brand Context
Notamedia's design philosophy is precise, restrained, and corporate-modern. Colors are muted with a single strong accent green. Typography is geometric sans, mostly uppercase, with tight spacing. Spacing sits strictly on an 8px grid.

## Color Palette
- Neutral Gray: #656a73 — secondary text, icons
- Absolute Black: #000000 — text, hero backgrounds
- Primary Green: #38a14c — links, buttons, accents
- Deep Gray: #2e3641 — section backgrounds, navigation bars
- Teal Hover 1: #045d56 — hover/focus states
- Teal Hover 2: #045e56 — hover/focus states
- Teal Hover 3: #045d55 — hover/focus states
- Swiper Blue: #007aff — carousel indicators

## Typography
- Font Family: "Proxima" (no Google/Adobe), occasional "Roboto" fallback for small text
- Sizes/Weights:
| Level | Size | Weight | Line Height | Use |
| H1 | 108px | 700 | 0.90 | Hero titles |
| H1 | 80px | 500 | 1.00 | Page titles |
| H2 | 48px | 500/600 | 1.21 | Section headings |
| Body | 24px | 400/500/600 | 1.08–1.45 | Paragraph text |
| Small Text | 16px | 400–700 | 1.00–1.50 | UI labels |
| Caption | 14px | 400–700 | 1.00–1.43 | Metadata |
| Micro | 12px | 400/700 | 1.00–2.00 | Footnotes |

## Spacing & Grid
Base: 8px grid  
Scale: 1px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 15px, 16px, 18px, 20px, 24px, 30px, 32px, 36px, 38px, 48px, 50px, 80px  
Usage: Buttons (radius 30px, padding multiple of 8), cards (16px–24px padding), section gaps (48px+).

## Border Radius
- sm: 2px — badges
- sm+: 3px — small divs
- md: 8px — inputs, cards
- lg: 16px — large divs
- xl: 30px — buttons
- pill: 100px — large pills
- circle: 50% — avatars, circular buttons
- full: 100% — full fill shapes

## Shadows & Depth
- rgb(255,255,255) 0px 0px 0px 1000px inset — white overlay effect
- rgb(128,128,128) 0px 0px 5px 0px — subtle drop shadow
Mostly flat design — avoid heavy shadows.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background-color: rgb(54,64,78);
  color: #fff;
  padding: 0;
  border-radius: 30px;
  border: none;
  font-weight: 600;
  font-size: 16px;
  transition: opacity 150ms ease, background-color 150ms ease;
}
.btn-primary:hover {
  background-color: rgb(18,102,165);
  opacity: 0.75;
}
.btn-primary:active {
  opacity: 0.9;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Link Styles

.link-dark { color: #090c1b; text-decoration: none; }
.link-grey { color: #b2b2b2; text-decoration: none; }
.link-green { color: #38a14c; text-decoration: none; }
.link-white { color: #fff; text-decoration: none; }
.link-neutral { color: #656a73; text-decoration: none; }
.link:hover { color: inherit; }

Input Field

.input-text {
  background-color: transparent;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 0 0 10px;
}
.input-text:focus {
  border-color: #50545a;
  box-shadow: inset 0 0 0 50px #232b37;
}

Layout & Responsive Rules

• Max content width: fluid up to 2500px breakpoints
• Page padding: multiples of 8px
• Breakpoints: 340px to 2500px with many intermediate values for fine-tuning

Interaction Rules

• Transition: 150ms ease on hover/active states
• Focus: subtle color shifts, avoid large outlines
• Loading: likely opacity changes — avoid spinners unless brand-approved

DO

• Use ONLY palette colors
• Maintain 8px grid
• Keep typography in Proxima
• Use uppercase for headings when specified
• Respect hover/focus teal tones

DON'T

• Add unapproved colors
• Mix sharp and rounded corners randomly
• Use heavy shadows
• Increase line heights beyond set values
• Underline links (brand avoids underline)

Code Examples

Primary Button:

.btn-primary { /* as above */ }

Card:

.card {
  border-radius: 8px;
  padding: 24px;
  background-color: #2e3641;
}

Form Input:

.input-text { /* as above */ }

---

## 9. Summary

**TL;DR:** Notamedia’s design system is dark, disciplined, and typography-led. Stick to the small, functional palette and the strict 8px grid. Let Proxima’s uppercase headings do the heavy lifting for personality.

**Brand Keywords:** corporate-modern, grid-disciplined, green-accented, typography-driven, flat-structured