Overview
Build a system that feels kind, editorial, and sharply opinionated. A stark editorial portfolio system built from black hero pills, white outlined capsules, giant grotesk type, and orange-red proof cards.
Oriol.Design
Product design leader with 15+ years of experience leading start-ups and teams growth. Reach out for work & collab proposals in Barcelona and remotely as: Design Leader, Design Manager, Design Mentor.
3.0
7
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Oriol.Design Home design analysis
Build a system that feels kind, editorial, and sharply opinionated. A stark editorial portfolio system built from black hero pills, white outlined capsules, giant grotesk type, and orange-red proof cards.
Image Direction
Use a dominant white field, quiet case modules, and a few bright proof cards that interrupt the calm. Visual density should stay low and deliberate.
Colors
Black and white carry the system. Orange-red is a concentrated accent for proof cards, while soft gray borders keep the white capsules and cards readable.
Typography
Use oversized grotesk type with strong compression and clarity. Supporting text should stay softer but never low-contrast enough to undermine readability.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Kind Editorial System
A stark editorial portfolio system built from black hero pills, white outlined capsules, giant grotesk type, and orange-red proof cards.
stark, humane, and highly legible
Primary mode: lightdesign portfolio marketingeditorial-portfolio
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
stark, humane, and highly legible
Density
3
Variance
3
Motion
2
Signals
white page field · black hero pill · outlined secondary pills · orange-red leadership cards
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Editorial Black
#111111
Paper White
#FAFAF7
Outline Gray
#E4E4E0
Signal Orange
#FF4B26
Grass Green
#169A59
Body Gray
#5A5A57
Lavender Patch
#BFB8FF
Usage rules
The page should stay mostly white and black, with orange-red used as a concentrated proof accent.
Secondary pill controls must stay light and outlined, not filled with accent color.
Green can appear in proof text highlights, but it should never replace the main action system.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
120px
Token Radii
Corner radii tokens with a live surface sample.
sm
10px
md
16px
lg
24px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter Tight
oversized leadership headline voice
Body
Inter
editorial support copy voice
Mono
IBM Plex Mono
tiny category label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
5rem/—
Display
H2
2.3rem/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use huge black grotesk type with disciplined line breaks and little decoration. · Keep body copy soft-gray but still readable enough to support a mostly white field. · Small labels can feel editorial and quiet rather than productized.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
160ms-220ms
Easing
cubic-bezier(.22,.82,.2,1)
Spring
stiffness 92, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 160ms-220ms |
easing | cubic-bezier(.22,.82,.2,1) |
spring | stiffness 92, damping 18 |
Layout Principles
Give the hero type and primary capsules a lot of empty space.
Let accent proof cards punctuate the page rather than saturate it.
Keep editorial sections spaced far apart so each case or principle block can stand alone.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#111111
Text
#FFFFFF
Border
1px solid #111111
Radius
999px
Padding
18px 26px
Min height
48px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E4E4E0
Radius
999px
Padding
18px 26px
Min height
48px
Shadow
none
Typography
body
Cards accent
Feature Card
Component preview content
Base Attributes
Background
#FF4B26
Text
#111111
Border
1px solid #FF4B26
Radius
24px
Padding
24px
Shadow
none
Cards paper
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E4E4E0
Radius
24px
Padding
24px
Shadow
none
Navigation micro
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#111111
Active text
#111111
Item padding
0px
Item radius
0px
Badges tag
Base Attributes
Background
#FFFFFF
Text
#5A5A57
Border
1px solid #E4E4E0
Radius
999px
Padding
8px 12px
Shadow
none
Inputs field
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E4E4E0
Radius
999px
Padding
12px 16px
Min height
44px
Placeholder
rgba(17,17,17,0.42)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -editorial proof card
- -tag cluster
- -white portfolio module
Subject patterns
- -white content slabs, orange-red leadership cards, and selective green text highlights
Composition logic
- -Use the white field as the dominant stage and interrupt it with a few loud proof cards.
- -Keep tags tiny and systematic under each case or principle.
Treatment rules
- -Primary actions stay black-filled pills.
- -Secondary actions stay white or pale with quiet borders.
Generation cues
- -white editorial portfolio, black pill CTA, orange-red case card, giant grotesk headline
Avoid
- -No low-contrast gray-on-white body copy.
- -No orange-filled secondary buttons.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not fill the secondary pills with orange.
- -Do not switch the hero button family to rectangles.
- -Do not let soft-gray support text fall below readable contrast on white.