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
