CURATED · OPEN · FREE

Kaleidografik

A minimal, content-first portfolio for an independent creative studio.

AgencyPortfolioBold TypographyEditorialStudio

↓ Download design system (4 MB)Open in OpenDesign

Visit: https://kaleidografik.com

📦 Browse pack contents →

Identity DNA

Creative AgencyDigital StudioVisual DesignPortfolioIndependent

A blank canvas that lets bold client work speak for itself

Color

#000000Ink

#ECEAE5BG

rgba(0,0,0,1.0)Line

Strict monochrome canvas with warm off-white background, relying entirely on client work for color.

Typography

humanist-sans · monospace

display120px · 400
h132px · 400
body16px · 400

All typography uses Suisse Intl Regular at weight 400 · Navigation links use 16px body size with underline for active state · Massive background watermark text uses extremely large display size

Spacing

4px

8px

16px

20px

24px

48px

75px

Generous whitespace with 20px horizontal padding and 75px bottom padding on containers

Surfaces

sm · 0px

md · 8px

lg · 0px

pill · 0px

No visible borders on containers, 1px solid black underlines on active nav items

0 4px 20px rgba(0,0,0,0.1) on project cards

Layout

1400container

12columns

24pxgutter

768 / 1024breakpoints

Masonry-like grid with varying card sizes, top navigation bar, and large background watermark text

Motion & Interaction

150msmicro

400mssmall

500msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Opacity fade transitions on hover states · Smooth opacity and transform transitions for navigation · Background color transitions on interactive elements

Opacity reduction on navigation links and project cards · Navigate to project detail pages

Components

button Minimal text links with underline states, no visible button containers
card Project preview cards with varying aspect ratios, containing screenshots and case study imagery
chip Small pill-shaped tags with 1px black border for project metadata
input Not visible in current view
hero Scattered project cards over large faded background typography

Voice & Don'ts

Tone Understated, professional, letting work speak for itself
Headlines Minimal, direct, uppercase for project categories
CTAs Simple text links without visual emphasis

Don't use multiple font weights — screenshot shows uniform weight 400 throughout
Don't add decorative UI elements — screenshot shows purely content-driven layout
Don't use colorful backgrounds — screenshot shows consistent #ECEAE5 off-white
Don't create complex button styles — screenshot shows text-only navigation with underlines
Don't add drop shadows to main containers — screenshot shows flat, clean card presentation
Don't use brand-colored accents — screenshot shows completely monochromatic scheme
Avoid: Avoid decorative elements that compete with client work
Avoid: Avoid complex gradients or shadows
Avoid: Avoid multiple font weights

Inside the pack — real screenshots

Kaleidografik — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Kaleidografik is an independent creative studio portfolio with a minimal, content-first design. The site uses a warm off-white background (#ECEAE5) with pure black text (#000000), creating a monochrome canvas that lets bold client work provide all visual interest. Typography is exclusively Suisse Intl Regular at weight 400, with massive background watermark text as the primary decorative element. Navigation is a simple three-item horizontal bar (Work, Studio, Play) with underline active states. Project cards are displayed in an asymmetric masonry layout with generous whitespace. Key don'ts: never use multiple font weights, never add decorative UI elements, never introduce colored backgrounds or accent colors, never create complex button styles, never add drop shadows to containers, never use brand-colored accents. The design philosophy is extreme restraint - the agency's own site deliberately steps back to showcase client work as the visual centerpiece.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko