pixelwrld.co — Design System

1. Visual Theme & Atmosphere

Pixelwrld.co is a design or creative portfolio built in Framer that lives in a light, airy register — near-white backgrounds, softened grey tones, and a single signature design decision: pill-shaped containers with a 30px border radius. The aesthetic is modern, approachable, and minimal without being sparse. The absence of bold accent colors keeps the focus on content and imagery. The overall mood is clean agency portfolio — confident enough to strip decoration, warm enough not to feel clinical.

2. Color Palette & Roles

Backgrounds

• rgb(247, 247, 247) — Site background; barely-off-white, slightly warmer than pure #F7F7F7
• rgb(228, 228, 228) — Card / panel surface; visible separation from background
• rgba(226, 226, 226, 0.8) — Semi-transparent panel layer; frost-like overlay effect

Text & Ink

• rgb(0, 0, 0) — All primary text; no grey softening in the type system

Interactive / Link

• rgb(0, 0, 238) — Browser-default blue on external links (Threads); notable as the only color in the system

Borders

• rgb(0, 0, 0) — Borders are ink-black where present

The palette is essentially monochromatic. The single instance of rgb(0, 0, 238) on external links suggests browser defaults were not overridden — an intentional choice to signal “this is an outbound link.”

3. Typography Rules

Inter is the sole custom typeface, appearing on paragraphs and body content. Generic sans-serif is used at the base (body, a) suggesting Framer’s own baseline, with Inter layered in for rendered content.

Line height on Inter paragraphs is tight: 19.2px (1.2×), giving text a compact, editorial density. No display sizes, no bold weights, no tracking adjustments. Typography is deliberately invisible — Inter at 16px/400 is the neutral default of the web.

4. Component Styling

Pill containers: border-radius: 30px is the defining component shape. Applied to cards, tags, or callout elements — creating a rounded, badge-like vocabulary throughout.

Panels: Three surface levels stack within the grey-on-grey system: #F7F7F7 (page), #E4E4E4 (card), rgba(226,226,226,0.8) (overlay/frosted panel). The translucent layer creates a subtle depth effect without blur.

Links: Black by default; browser-default blue (rgb(0,0,238)) on social/external links. No custom hover states detected.

No shadows detected. Cards are differentiated purely through background color contrast.

5. Layout Principles

A dense, multi-tiered breakpoint system drives fine-grained responsive behavior: 479, 480, 649, 650, 799, 800, 999, 1000, 1727. This suggests a Framer canvas with explicit layout variants at every common device width — likely a masonry or grid layout that reflows at each step. The 1727px upper breakpoint accommodates wide-monitor displays.

Framer’s absolute-positioned layout model means spacing is canvas-set rather than token-driven. No custom CSS spacing properties were declared.

6. Depth & Elevation

No box shadows. Depth is achieved through the three-step grey surface stack: page → card → semi-transparent overlay. The 0.8 opacity on the third surface creates a glass-like effect that implies layering without blur. No border-radius on body or text elements — the 30px radius is reserved for containers only.

7. Do’s and Don’ts

Do:

• Apply border-radius: 30px consistently to pill/card containers — this is the design’s signature
• Use #F7F7F7 as the base; let #E4E4E4 cards read as elevated
• Use Inter at 16px/400 for all body content; keep line-height at 1.2–1.3
• Let the semi-transparent grey (rgba(226,226,226,0.8)) handle overlay moments
• Allow external links to use browser-default blue — it’s an intentional signal

Don’t:

• Don’t introduce accent colors — the monochrome palette is load-bearing
• Don’t add box shadows (the system uses surface color for elevation)
• Don’t reduce border-radius below 20px on pill elements — it loses the signature shape
• Don’t increase font weight above 400 — bold is absent from this system
• Don’t add letter-spacing or text-transform; this is a neutral typographic voice

8. Responsive Behavior

Nine breakpoints span from 479px to 1727px, with paired transitions at most steps (e.g., 479/480, 649/650). The paired breakpoints suggest Framer generates a “less than” and “greater than” variant for each device tier. Layout fluidly adapts across mobile (≤479), large mobile (480–649), tablet (650–799), desktop-small (800–999), desktop (1000–1727), and wide (1727+).

9. Agent Prompt Guide

Build a portfolio card layout in the pixelwrld.co style. Background is #F7F7F7. Cards use #E4E4E4 with border-radius: 30px and no box-shadow. An optional frosted overlay layer uses rgba(226,226,226,0.8). Typography is Inter at 16px/400 with 1.2 line height. Text is #000000. No accent colors — the only color in the system is browser-default blue on external links. No shadows. Depth comes from the background contrast between surface levels, not elevation. Responsive layout adapts at 480, 650, 800, and 1000px.

Generated by Sparkbites — extracted from live CSS analysis