Overview
- Build the experience as an index, dossier, or ledger rather than a promotional portfolio.
- Let whitespace do most of the talking.
- Use thin rules, utility stamps, and microtype to organize information with extreme restraint.
Aaron Sananes
Senior Product Designer & Creative Web Developer
4.0
19
Visits
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
Aaron Sananes Home design analysis
Build the experience as an index, dossier, or ledger rather than a promotional portfolio. Let whitespace do most of the talking. Use thin rules, utility stamps, and microtype to organize information with extreme restrain...
Key Takeaways
- Build the experience as an index, dossier, or ledger rather than a promotional portfolio.
- Let whitespace do most of the talking.
- Use thin rules, utility stamps, and microtype to organize information with extreme restraint.
- Use sparse archival imagery, muted product stills, and occasional dark slabs to punctuate the page.
- Keep every image isolated and surrounded by substantial white space.
- Let visual artifacts feel collected, documented, or filed rather than marketed.
Image Direction
- Use sparse archival imagery, muted product stills, and occasional dark slabs to punctuate the page.
- Keep every image isolated and surrounded by substantial white space.
- Let visual artifacts feel collected, documented, or filed rather than marketed.
Colors
- FFFFFF should dominate the page and preserve the silence of the system.
- 111111 is the main anchor for text, marks, and rare heavy moments.
- DADADA should define rules, rows, and structure without becoming visible decoration.
Typography
- Use a technical sans for primary reading and one mono family for utility detail.
- Keep the hierarchy subtle. Large type should still feel quiet.
- Use mono for coordinates, row labels, timestamps, and barcode-adjacent information.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Ledger Artifact Minimalism
A highly restrained portfolio language built from white void, ruled indexes, and sparse archival artifact panels.
Quiet, archival, analytical, and uncompromisingly sparse.
Primary mode: lightdesign portfoliocontent-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Quiet, archival, analytical, and uncompromisingly sparse.
Density
2
Variance
4
Motion
1
Signals
thin gray rules · barcode-like utility details · large intentional emptiness
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Index Black
#111111
Archive White
#FFFFFF
Paper Mist
#F8F8F6
Rule Gray
#DADADA
Dust Gray
#9DA0A6
Muted Olive
#7A8575
Usage rules
Keep the page overwhelmingly white.
Use rules and microcopy instead of filled surfaces whenever possible.
Let any non-black accent stay muted and rare.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
0.4rem
sm
0.75rem
md
1rem
lg
1.75rem
xl
3rem
section_gap
clamp(5rem, 12vw, 10rem)
panel_padding
clamp(1rem, 2vw, 1.5rem)
Token Radii
Corner radii tokens with a live surface sample.
sm
0px
md
8px
lg
12px
xl
16px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
IBM Plex Sans
technical sans with enough personality to stay human
Body
IBM Plex Sans
clean descriptive body copy
Accent
IBM Plex Mono
ledger labels, coordinates, and barcode-adjacent detail
Mono
IBM Plex Mono
utility system text
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(2.6rem, 4vw, 3.6rem)/—
Display
H2
clamp(1.75rem, 2.6vw, 2.4rem)/—
H2
H3
clamp(1.1rem, 1.6vw, 1.35rem)/—
H3
Body
0.98rem/—
Body
Label
0.78rem/—
Label
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep typography light and precise rather than loud. · Use mono labels for utility detail and row metadata. · Let display scale come from whitespace, not from dramatic type styling.
Borders
Border tokens with resolved values.
Fine
1px solid #DADADA
Soft
1px solid rgba(17, 17, 17, 0.08)
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
120ms-180ms
Easing
linear
Borders
Resolved border token values.
| Property | Value |
|---|---|
fine | 1px solid #DADADA |
soft | 1px solid rgba(17, 17, 17, 0.08) |
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 120ms-180ms |
easing | linear |
Layout Principles
Use emptiness as a first-class layout device.
Organize content into ruled lists, narrow metadata columns, and isolated evidence blocks.
Avoid large filled containers unless they hold an image artifact.
Let the page feel like an index or dossier rather than a marketing page.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#111111
Border
none
Radius
0px
Item padding
0.1rem 0.2rem
Typography
mono-small
Lists index row
Base Attributes
Background
transparent
Text
#111111
Border
1px solid #DADADA
Radius
0px
Padding
0.7rem 0
Shadow
none
Lists metadata strip
Base Attributes
Background
transparent
Text
#9DA0A6
Border
none
Radius
0px
Padding
0px
Shadow
none
Artifact panels dark slab
Base Attributes
Background
#111111
Text
#FFFFFF
Border
none
Radius
0px
Padding
0px
Shadow
none
Artifact panels image insert
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(17,17,17,0.06)
Radius
8px
Padding
0px
Shadow
none
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -dark artifact image
- -blurred interface still
- -archival detail crop
Subject patterns
- -isolated dark slab with minimal caption
- -sparse evidence images separated by lots of white space
- -utility artifacts like barcode strips or typographic fragments
Composition logic
- -Treat imagery as evidence, not decoration.
- -Leave large intervals of white space between image moments.
- -Use image contrast to punctuate otherwise quiet sections.
Treatment rules
- -Favor muted tones, blur, and low-saturation dark imagery.
- -Keep borders and framing minimal.
- -Avoid full-bleed spectacle.
Generation cues
- -Describe the amount of white space surrounding the artifact.
- -Mention whether the image reads as archived, blurred, or analytical.
- -Use captions and metadata sparingly and precisely.
Avoid
- -No noisy collage.
- -No bright product-gloss marketing shots.
- -No ornamental color fields.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not fill the empty space with decorative cards.
- -Do not replace the ruled ledger feel with oversized CTA marketing modules.
- -Do not introduce glossy gradients or colorful UI states.
- -Do not remove the utility microdetails that make the system feel archived and exact.