andreaskruszakin.com — Design Language

1. Visual Theme & Atmosphere

Andreas Kruszakin’s portfolio occupies a distinctive corner of the designer-portfolio space: sky-blue as the dominant surface colour, not as accent. The background is a washed periwinkle-blue (rgb(165,219,255)), shifting to a slightly more saturated sibling on cards (rgb(138,208,255)). There is no dark mode, no white canvas — the sky-blue ground is the identity. Against it, a serif headline font (Recia) and a monospace body font (Spline Sans Mono) create an unusual editorial pairing that feels simultaneously bookish and technical. Built in Framer, the layout is fluid and animation-forward, but the design system underneath is spare: two fonts, a blue-and-black palette, tight negative tracking, and careful use of rounded corners. The atmosphere reads as thoughtful craft — a product designer who thinks in systems but has a clear visual point of view.

2. Color Palette & Roles

The entire site lives in a blue-and-black world. No warm neutrals, no off-whites, no accent pop.

Backgrounds

• rgb(165, 219, 255) — Body background; a calm sky blue. The defining colour of the site’s identity.
• rgb(138, 208, 255) — Card/section surface; slightly more saturated to create layer differentiation without leaving the blue family.

Text & foreground

• rgb(0, 0, 0) — Body text and headings; pure black on the blue ground. High contrast, direct.

Interactive

• rgb(0, 0, 238) — Link default colour; the browser-default blue that reads as a deliberate, retro-informed choice rather than an oversight. On hover: no change observed (text-only interaction).

Borders

• rgb(0, 0, 0) — Border colour matches text; clean, consistent.

3. Typography Rules

Two typefaces in intentional contrast:

Recia — A contemporary serif with editorial presence. Used for headings.

Spline Sans Mono — A refined monospace face. Used for body/paragraph text, an unusual choice that signals technical rigor without sacrificing readability.

Both faces are negative-tracked — the letter-spacing compression (-0.8px / -0.85px) tightens the overall texture and signals intentionality. The heading weight (500) is medium, not bold — headline authority comes from the serif’s intrinsic presence, not from weight. Using monospace for prose is a strong identity decision: it separates Kruszakin’s voice from every Söhne or Inter portfolio in the space.

4. Component Stylings

Cards / sections — Surface colour shifts from body (rgb(165,219,255)) to card (rgb(138,208,255)). No borders needed; the luminance delta creates the boundary.

Radius — Two values used: 14px for smaller elements (tags, chips), 48px for larger containers (likely CTA buttons or featured blocks). Both values read as intentional, leaning toward pill-like rather than sharp.

Shadows — One inset shadow present, adding subtle depth to surfaces without lifting them.

Links — Browser-default blue (rgb(0,0,238)) maintained as a deliberate choice; the anachronistic colour feels knowing rather than accidental in this editorial context.

5. Layout Principles

Built on Framer. Breakpoints cluster around a dense responsive ladder: 599 / 600 / 809 / 810 / 999 / 1000 / 1199 / 1200 / 1365 / 1492px — Framer’s auto-generated breakpoints from canvas-size presets. The layout is likely a single-column reading column on mobile, expanding to a wider grid at 810px+ and a full desktop layout at 1200px+.

Spacing is Framer-managed (no explicit CSS custom property tokens). The negative letter-spacing on both font roles means copy looks deliberately compressed — content density is higher than the airy background colour would suggest.

6. Depth & Elevation

Depth is handled via background-colour shifts within the blue family rather than shadows or borders. The two-step background stack (rgb(165,219,255) → rgb(138,208,255)) provides enough luminance contrast to define card boundaries. A single inset shadow adds tactile quality to surface elements. The overall effect is flat-with-texture rather than fully flat.

7. Do’s and Don’ts

Do:

• Use rgb(165,219,255) as the page ground — it is the primary identity colour, not an accent.
• Pair Recia (serif) with Spline Sans Mono (monospace) as a deliberate editorial contrast.
• Apply negative letter-spacing (−0.8px to −0.85px) to all type roles.
• Keep text pure black (rgb(0,0,0)) — the blue ground handles atmosphere, not the text colour.
• Use 48px radius on large containers and 14px on small chips; don’t mix arbitrary values.

Don’t:

• Don’t replace the sky-blue ground with white or off-white — the colour is the identity.
• Don’t substitute a sans-serif for Spline Sans Mono in body text; the monospace texture is load-bearing.
• Don’t add warm colours; the palette is blue-and-black only.
• Don’t add heavy drop shadows; inset shadow is the extent of elevation language.
• Don’t use medium/large type weights — the restrained weight (400/500) preserves the editorial calm.

8. Responsive Behavior

Framer’s fine-grained breakpoint ladder (10 breakpoints) means the layout reflows at many intervals rather than at the standard three or four. Key transitions:

• Below 600px: Single-column mobile; compact spacing.
• 810px+: Wider grid; likely two-column case studies.
• 1200px+: Full desktop canvas; maximum content width.

Light mode only — no dark mode observed.

9. Agent Prompt Guide

“Design in the style of andreaskruszakin.com: sky-blue page background rgb(165,219,255), card surface rgb(138,208,255), pure black text rgb(0,0,0). Recia serif for headings (weight 500, negative-tracked −0.8px); Spline Sans Mono for body text (17px, weight 400, negative-tracked −0.85px). Border-radius: 48px on large containers, 14px on small chips. No colour accents beyond the retro browser-blue rgb(0,0,238) for links. Depth via background colour steps, not shadows. Framer-generated responsive breakpoints at 600 / 810 / 1200px.”

Generated by Sparkbites — extracted from live CSS analysis