# eu-inc.org — Design Reference

## 1. Visual Theme & Atmosphere

eu-inc.org carries the aesthetic authority of institutional minimalism. Built in Framer, the design uses a cool light-gray canvas (`rgb(245,245,245)`) as a neutral institutional ground — neither warm nor cold, simply present. The typographic system pairs **Inter Display** for headings with **Apfel Grotezk** for body copy, a combination that balances Swiss rationalism with the warm personality Apfel brings.

The site signals credibility through restraint: limited color, compact type scale, and clean negative space. It feels like a thoughtfully designed annual report or policy brief made interactive.

## 2. Color Palette & Roles

| Role | Value | Notes |
|------|-------|-------|
| Background | `rgb(245, 245, 245)` | Cool light gray — institutional tone |
| Surface 2 | `rgb(238, 238, 238)` | Subtle section differentiation |
| Surface 3 | `rgb(221, 221, 221)` | Deeper gray for active/hover areas |
| Primary text | `rgb(0, 0, 0)` | Pure black — maximum contrast |
| Link color | `rgb(0, 0, 238)` | Browser-default blue — deliberate, raw |

**What's absent:** No brand color system, no accent hue. The blue link color is the browser default — a statement of raw authenticity rather than polished brand control.

## 3. Typography Rules

| Element | Family | Size | Weight | Notes |
|---------|--------|------|--------|-------|
| H2 | Inter Display | 22px | 600 | −0.44px tracking, tight 1.2× line height |
| Body | sans-serif (fallback) | 12px | 400 | System fallback — compact density |
| Para | Apfel Grotezk Regular | 16px | 400 | OT features: cv01, cv05, cv09, ss01 |
| Links | sans-serif | 12px | 400 | Same as body — no typographic distinction |

The 12px body/link size is unusually compact — this is a dense information design, not a marketing site. Apfel Grotezk for paragraphs provides warmth and texture at reading scale while Inter Display anchors headings in modern clarity.

## 4. Component Stylings

- **Framer-generated layout** — class names are auto-generated Framer blocks
- **Cards/sections:** Differentiated by background tint steps (245 → 238 → 221 gray)
- **No border-radius** detected — hard corners throughout
- **No shadows** — entirely flat
- **Links:** Unstyled default blue — no custom underline treatment
- **Buttons:** Not detected — possibly text-only CTAs

## 5. Layout Principles

- Breakpoints at 810px and 1200px — a clean two-breakpoint system
- Framer auto-layout underlying all positioning
- Dense information layout — 12px base font suggests data-heavy sections
- Framer Motion for transitions — tasteful, not decorative
- Content likely constrained to a centered max-width column

## 6. Depth & Elevation

No shadows at all. The three-step gray surface system (245/238/221) creates subtle layering purely through background color. This is the flattest possible elevation system — institutional, trustworthy, unpretentious.

## 7. Do's and Don'ts

**Do:**
- Use the three-step gray scale for surface layering
- Keep type compact — 12–16px range, no display-scale headlines
- Use Inter Display at 600 weight with negative tracking for headings
- Use Apfel Grotezk for body paragraphs — its humanist character softens the dense layout
- Treat link color as a semantic signal, not a brand element

**Don't:**
- Add brand colors or accent hues — institutional neutrality is the identity
- Use rounded corners — sharp edges reinforce the formal tone
- Add decorative animation — Framer Motion transitions should be minimal
- Scale up typography for marketing effect

## 8. Responsive Behavior

- Three tiers: mobile (< 810), tablet (810–1199), desktop (1200+)
- Dense 12px layout likely adapts to 14px at mobile for legibility
- Single-column stacking at mobile breakpoints
- Framer handles responsive layout automatically via auto-layout containers

## 9. Agent Prompt Guide

> "Design in the style of eu-inc.org: cool light-gray canvas (`#F5F5F5`), institutional minimalism. Inter Display 600 for headings at compact scale (22px), Apfel Grotezk for body at 16px. No brand color — default browser blue for links only. Three-step gray surface hierarchy, no shadows, no rounded corners. Dense information layout, Framer-style clean spacing."

---

*Generated by Sparkbites — extracted from live CSS analysis*