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
