Typography
Italic serif display headings paired with clean sans-serif body copy.
Live portfolio template
Atelier Portfolio Template: Atelier is built for designers and creative builders.
An editorial portfolio for designers, creative technologists, and independent makers.
Visual storytellingEditorial rhythmDistinctive voice
Visual system
Warm sand background with textured ochre gold, rust terracotta red, and muted slate blue accents.
SEO structure
Clear headings, project sections, metadata controls, and a public preview path make this template easier to understand and share.
Template style guide
The design system behind Atelier.
Use this guide to decide whether the template matches your work before you publish.
Canvas
oklch(89% 0.07 72)
Ink
oklch(23% 0.055 48)
Rust Red
oklch(58% 0.18 35)
Ochre Gold
oklch(77% 0.14 82)
Slate Blue
oklch(52% 0.12 220)
Layout rhythm
Asymmetric split layout columns with staggered masonry grids and overlapping floating circular shapes.
Component language
Intimate personal biography columns, blockquote testimonials, and custom floating spheres.
Best content to prepare
Personal point of view and creative positioning
Case studies with process, context, and outcomes
Testimonials, writing, and visual proof
A contact section that feels like an invitation
Technical Spec Sheet
Engineering blueprint.
Developer specifications, design tokens, responsive thresholds, and structural rules powering this template.
Visual Strategy
Atelier is an expressive editorial canvas combining spacious layout grids, serif display headers, and warm organic palettes tailored for creative storytellers.
expressive-editorialHue: warm-sand (oklch(89% 0.07 72))
The Floor
The page canvas operates with Warm Sand (#ebd9bf) with Deep Charcoal Brown (#403126) typography. Layout transitions handle values cleanly across dark and light palettes.
Dark Canvasoklch(23% 0.055 48)
Light Canvasoklch(89% 0.07 72)
03 / BRAND COLOR MATRIX
Accent & Surface Hues
Accent (Dark)
oklch(58% 0.18 35)
Accent (Light)
oklch(77% 0.14 82)
Obsidian Paper
oklch(23% 0.055 48)
Chalk Paper
oklch(89% 0.07 72)
04 / TYPOGRAPHIC HIERARCHY
Text Tokens
| Token | Size | Weight | Purpose / Use Case |
|---|---|---|---|
| display-lg | clamp(3.6rem, 8vw, 7.5rem) | 800 | Section italic headings |
| display-md | clamp(2.5rem, 5vw, 5rem) | 800 | Case study headers |
| body-md | 0.875rem | 400 | Narrative description copy |
| label-mono | 11px | 800 | Metadata year & tags uppercase tracking |
Developer Spec Sheet
Building or customizing this template?
Turn on Developer Mode to inspect styling tokens, layout padding values, shape border-radii, responsive queries, and the raw specs JSON.
Best fit
Use Atelier when the portfolio needs this kind of reader.
Designers & Art Directors
Creative builders
Independent studios
Visual storytellers
Motion direction: Slow-pacing layout reveals, floating orbit sphere layers, and custom section entry transitions.
Suitability by target role
Designers & Art Directors
Spacious layout columns and soft, intentional typography put visual portfolios first.
Independent Makers
A slower, reading-focused rhythm provides room for case studies and writing.
Creative Directors
The elegant canvas colors and minimalist design emphasize high-end creative taste.
Frequently Asked Questions
Got questions about Atelier?
Explore answers to common questions about this layout, design styling choices, and performance optimizations.
Atelier features an expressive editorial design system inspired by high-end print design. It pairs large italic serif display headlines with structured sans-serif body copy, set against a warm sand canvas with terracotta red, ochre gold, and slate blue accents.
To convey book publishing and editorial layouts, Atelier intentionally avoids rounded corners on card containers. This clean, flat-edge structure mimics physical newspaper grids and magazine spreads.
Atelier renders a large background wireframe circle featuring colored inner circles that slowly translate and rotate using CSS keyframe animations. It is disabled under prefers-reduced-motion queries to ensure high accessibility.
Atelier is designed specifically for creative directors, designers, art curators, and independent writers who want to highlight their journey through a visual narrative that values pacing and personal voice.
Ready to build