cedric.design — Design System

1. Visual Theme & Atmosphere

cedric.design is a portfolio built entirely in Framer, and its design philosophy is unapologetic darkness. The canvas sits on a near-black rgb(20, 20, 20) background — not pure black, which would feel lifeless, but a dark charcoal that adds just enough warmth to feel like a physical surface. Layered on top, slightly lighter cards at rgb(26, 26, 26) and rgb(38, 38, 38) create a sense of depth through luminance steps rather than through shadows.

The atmosphere is editorial and quiet. Typography is the hero: custom web-licensed cuts of the Suisse type family (SuisseWorks for display, SuisseIntl for interface) give the site a distinctly Swiss-modernist sensibility. The type is small and precise — body text runs at just 13px with tight tracking — signaling that the work is meant to be read closely, not skimmed.

Built on Framer, the site also inherits subtle micro-interactions: links scale up 6% on hover via CSS transform rather than any color change, a restrained gesture that feels mechanical and deliberate.

2. Color Palette & Roles

Background surfaces (luminance-ordered, layered):

• Page background: rgb(20, 20, 20) — base canvas
• Mid-layer cards: rgb(26, 26, 26) — section containers
• Elevated elements: rgb(38, 38, 38) — inputs, interactive surfaces

Text:

• Primary / headings: rgb(224–242, 224–242, 224–242) — near-white, slight warmth
• Secondary / navigation links: rgb(135, 135, 135) — muted grey, becomes rgb(170, 170, 170) on hover
• Body copy: rgb(0, 0, 0) is overridden by the Framer layer; effective body text is light on dark

Accent / interactive:

• No brand accent color is present. The site deliberately avoids color as emphasis.
• Focus rings use the browser default blue rgb(0, 95, 204) — accessibility without decoration

What’s absent: No primary brand color, no gradient, no hue. The palette is entirely achromatic. Color would feel intrusive here.

3. Typography Rules

The site uses the Suisse type family exclusively — a conscious investment in premium web fonts that positions the work before a single word is read.

Key rules:

• Negative letter-spacing is applied at every level — this is a precision aesthetic, not loose.
• Weight 450 is used instead of 400 or 500, taking advantage of the variable-font capabilities of Suisse.
• Line heights are tight: H1 at 1.15× (36.8/32), body at ~1.23× (16/13). This creates density without crowding.
• Inputs use the "ss02" OpenType feature set — a detail that shows typographic intentionality even in form elements.
• No uppercase, no decorative text transforms.

4. Component Stylings

Cards / content blocks: Dark surface elevation using the three luminance steps. No borders — separation is achieved purely through background color contrast.

Inputs: rgb(38, 38, 38) background with a subtle inset shadow rgba(38, 38, 38, 0.5) 0px 0px 0px 1px inset acting as a border. On focus, the inner shadow deepens slightly rather than changing color.

Navigation links: Rendered in rgb(135, 135, 135), transitioning to rgb(170, 170, 170) on hover. No underlines, no background changes — just luminance shift.

Interactive links (large): Scale 1.06× on hover via CSS transform: matrix(1.06, 0, 0, 1.06, 0, 0). This is the only motion on the page, making it feel considered.

Border radii in use: 6px, 7px, 8px, 10px, 12px, 17px, 24px — the variance suggests Framer-generated components rather than a strict token system.

Shadows: Two layered shadow styles:

• Inset white highlight: rgba(255, 255, 255, 0.5) 0px -1px 0px 0px inset — adds a subtle top-edge shimmer to cards
• Multi-layer drop: a stacked box-shadow for subtle depth on elevated elements

5. Layout Principles

The layout is controlled by Framer’s auto-layout engine. Key observations:

• Breakpoints at 810px and 1200px — a two-breakpoint system covering mobile, tablet, and desktop
• Tight body padding: The page resets to padding: 0 and relies on Framer’s internal grid
• Content density: Small type sizes and compressed line heights maximise information without scrolling
• No visible grid lines — structure is implied by consistent card widths and alignment, not borders or rules
• No max-width container is detectable from CSS; Framer manages this internally

6. Depth & Elevation

Depth is created through the three-step surface stack rather than shadow:

1. Page (rgb(20, 20, 20)) → lowest
2. Section containers (rgb(26, 26, 26)) → mid
3. Interactive / form elements (rgb(38, 38, 38)) → highest

Shadows serve as refinement, not structure:

• A 1px inset white line at the top of cards simulates a lit edge
• The three-layer drop shadow uses very small spreads (0.6–2.3px) for a barely-there lift effect

7. Do’s and Don’ts

Do:

• Use achromatic surfaces only — the palette is intentionally without hue
• Apply negative letter-spacing to all typographic elements
• Use weight 450 for display/UI text when Suisse fonts are available
• Separate content zones with surface luminance, not borders
• Reserve motion for scale transforms on interactive elements

Don’t:

• Introduce color as decorative emphasis
• Use font-weight 700 (bold) — the aesthetic demands restraint
• Add drop shadows with large spread or high opacity
• Use uppercase transforms — this aesthetic eschews them
• Mix fonts outside the Suisse family

8. Responsive Behavior

The site uses two meaningful breakpoints:

• ≤810px: Mobile/tablet layout — likely single column, compact navigation
• 810px–1200px: Intermediate — possible two-column grid
• ≥1200px: Full desktop layout with widest content grid

Since the site is Framer-built, responsive behavior is entirely handled by Framer’s layout engine. CSS breakpoints are minimal; most adaptation happens through Framer’s variant system. Type sizes do not appear to scale responsively — the small body text remains fixed.

9. Agent Prompt Guide

When recreating or referencing cedric.design:

“Design a dark portfolio site with an achromatic palette using three surface luminance levels: page #141414, containers #1a1a1a, and interactive elements #262626. Typography is exclusively the Suisse family — SuisseWorks-Book at 32px/−0.96px tracking for display, SuisseIntl-Book at 16px/−0.32px for UI, SuisseIntl-Regular at 13px/−0.13px for body. No brand colors. Links use a 6% scale transform on hover instead of color change. Shadows are ultra-subtle: inset 1px white edge highlight, multi-layer drop at <3px spread. Two breakpoints: 810px and 1200px.”

Generated by Sparkbites — extracted from live CSS analysis