# eryc.cc — Design Reference

## 1. Visual Theme & Atmosphere

eryc.cc is a personal portfolio built with quiet confidence. The design philosophy is anti-spectacle: a soft gray canvas (`#F6F7F7`), muted mid-tone text, and a single typeface family (Roobert) used at modest scale across all elements. There is no hero typography, no scroll-jacking, no animation library. The atmosphere is contemplative and honest — a designer who doesn't need to shout.

Built on Astro, the site signals a developer-designer hybrid. The font feature settings (ss02, ss03, ss04, ss07, ss10, ss11) on every element show obsessive attention to Roobert's OpenType possibilities.

## 2. Color Palette & Roles

| Role | Value | Notes |
|------|-------|-------|
| Background | `#F6F7F7` (--shade-gray--50) | Near-white with cool tint |
| Body text | `#868C8C` (--shade-gray--500) | Medium gray — intentionally muted |
| Dark text | `#0F1010` (--shade-gray--900) | Near-black for high-emphasis |
| Mid grays | `#1A1D1D` → `#CCD1D1` | Full tonal scale, 9 steps |
| Black | `black` | Absolute black for special cases |
| White | `white` | Pure white for insets |

**What's absent:** No brand color whatsoever. No blues, no accents, no color at all. This is a pure grayscale system — unusual and deliberate.

## 3. Typography Rules

Roobert is the single typeface for everything. It's used with extensive OpenType feature sets to exploit the typeface's full character. The scale is compressed and intimate — nothing is set at display scale.

| Element | Family | Size | Weight | Notes |
|---------|--------|------|--------|-------|
| H1 | Roobert | 15px | 500 | Same size as body — hierarchy by position only |
| H2 | Roobert | 13px | 500 | Slightly smaller than body |
| Body | Roobert | 15px | 500 | OT features: ss02,ss03,ss04,ss07,ss10,ss11 |
| Para | Roobert | 15px | 500 | Identical to body |
| Button | Roobert | 11px | 500 | Smallest unit |
| Mono fallback | Courier New | — | — | Available but likely unused |
| Serif (italic) | PP Right Serif / Rowan | — | — | Defined but likely for emphasis |

The PP Right Serif and Rowan italic are registered as custom properties, suggesting occasional editorial use for emphasis or pull quotes without breaking the overall sans-serif tone.

## 4. Component Stylings

- **Navigation:** Transparent header, minimal — likely just text links
- **Body padding:** 64px horizontal, creating a generous inset feel
- **Section rhythm:** 56px top margin on sections — regular, understated
- **No border-radius** detected — corners are sharp
- **No card components** — content flows as a document
- **Color tokens:** 9-step gray scale from 50 to 900, used for subtle tonal variation

## 5. Layout Principles

- 64px horizontal body padding — wide margins at desktop
- No breakpoints detected — possibly a single-column layout that works across all widths
- Content width is constrained by the padding, not an explicit max-width
- Typography-driven layout — space comes from the natural rhythm of type

## 6. Depth & Elevation

No shadows, no cards, no elevation at all. This is the flattest possible design — a single plane with only tonal variation in text color. Depth is achieved purely through contrast: dark text on light background, muted secondary text on the same ground.

## 7. Do's and Don'ts

**Do:**
- Use Roobert with its full OpenType feature set (ss02–ss11)
- Keep the gray scale tight — 9 steps, cool tints
- Use 15px/500 as the base text size — larger than typical web body copy
- Rely on position and whitespace alone for hierarchy, not type scale
- Use wide horizontal margins (60px+)

**Don't:**
- Add any brand color — this is a grayscale-only system
- Use decorative elements, shadows, or gradients
- Set headlines larger than ~20px — the design is anti-spectacle
- Add hover animations — if interactions exist, they are subtle

## 8. Responsive Behavior

- No explicit breakpoints detected
- The 64px horizontal padding likely reduces on mobile
- Single-column layout adapts naturally to narrow viewports
- Type size stays constant — scale is flat by design

## 9. Agent Prompt Guide

> "Design in the style of eryc.cc: pure grayscale, cool-tinted off-white background (`#F6F7F7`), muted mid-tone body text (`#868C8C`). Single typeface (Roobert or similar geometric grotesque) at modest 15px/500 weight. No brand color, no shadows, no elevation. Wide horizontal margins. Hierarchy through position only — all text elements nearly the same size. Minimalist to the point of austerity."

---

*Generated by Sparkbites — extracted from live CSS analysis*