Overview
Use a quiet white portfolio ledger: visible grid rails, black pill navigation, tiny category filters, large screenshots, and occasional paper-note interactions.
Saugat
Software designer specializing in 0 - 1 work
4.0
18
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Saugat Home design analysis
Use a quiet white portfolio ledger: visible grid rails, black pill navigation, tiny category filters, large screenshots, and occasional paper-note interactions.
Colors
Keep the system mostly white, black, and pale gray. Use muted gray for descriptions. Category colors should appear only as small squares or chips.
Typography
Use a restrained Swiss-style sans. Intro text can be 28px; project titles around 18px; navigation around 15px.
Layout
Make the grid visible. Header items sit in grid cells. Work pages start with a short statement, then filters, then large screenshot-led projects.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Gridded Portfolio Ledger
A minimal designer portfolio language with white ledger grids, black pill navigation, small color filter tags, large product screenshots, paper-note details, and restrained Swiss-style typography.
Quiet, precise, personal, and archival.
Primary mode: lightdesigner portfolio and case-study archivecontent-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Quiet, precise, personal, and archival.
Density
4
Variance
3
Motion
2
Signals
white grid lines · black pill nav · tiny color filters · large screenshots · paper-note sheet · muted archive panels
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
White Ledger
#FFFFFF
Grid Line
#F0F0F0
Ink
#000000
Soft Panel
#FAFAFA
Muted Gray
#808080
Product Pink
#E93C9A
Website Green
#22C55E
Build Orange
#FF6A00
Usage rules
Keep the system mostly white and black.
Use category colors only as tiny filter squares or chips.
Let product screenshots become the visual mass.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
36px
header_height
64px
section_padding
64px 32px
row_gap
28px
card_padding
32px
Token Radii
Corner radii tokens with a live surface sample.
pill
999px
card
12px
panel
10px
paper
2px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Swiss grotesk
plain, precise, and neutral
Body
Swiss grotesk
portfolio captions and case-study copy
Mono
System mono
optional for case-study markers
Typography Scale
Top-level typography scale rendered as live text specimens.
Intro
28px/1.35
Intro
Project title
18px/1.3
Project title
Body
16px/1.4
Body
Nav
15px/1.1
Nav
Note label
14px/—
Note label
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
intro | 1.35 |
project_title | 1.3 |
body | 1.4 |
nav | 1.1 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
intro | 450 |
title | 450 |
body | 400 |
nav | 400 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use modest type sizes and let spacing do the work. · Avoid decorative display type except for personal note details.
Borders
Border tokens with resolved values.
Grid
1px solid #F0F0F0
Dotted
1px dotted rgba(0, 0, 0, 0.16)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
Paper
0 24px 70px rgba(0, 0, 0, 0.10)
None
none
Borders
Resolved border token values.
| Property | Value |
|---|---|
grid | 1px solid #F0F0F0 |
dotted | 1px dotted rgba(0, 0, 0, 0.16) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
paper | 0 24px 70px rgba(0, 0, 0, 0.10) |
none | none |
Layout Principles
Use the page grid as the main layout system.
Keep navigation in repeated black pills attached to grid cells.
Introduce work with a short sentence, then filters, then large screenshots.
Use note pages as tactile paper interactions.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Navigation grid header
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#000000
Border
{tokens.borders.grid}->1px solid #F0F0F0
Height
{tokens.spacing.header_height}->64px
Filters category
Base Attributes
Background
#FAFAFA
Text
#000000
Border
0
Radius
{tokens.radii.paper}->2px
Padding
4px 8px
Marker size
12px
Cards project
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#000000
Border
0
Radius
0
Padding
0
Shadow
none
Cards archive preview
Feature Card
Component preview content
Base Attributes
Background
#E5E5E5
Text
#000000
Border
0
Radius
{tokens.radii.card}->12px
Padding
{tokens.spacing.card_padding}->32px
Shadow
none
Cards note paper
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#000000
Border
0
Radius
{tokens.radii.paper}->2px
Padding
64px
Shadow
{tokens.shadows.paper}->0 24px 70px rgba(0, 0, 0, 0.10)
Personal marks
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Small hardware-like nav images, paper textures, handwritten red marks, and colored category squares can add personal specificity.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use portfolio hero theatrics.
- -Do not add colorful backgrounds.
- -Do not turn every project into a raised card.
- -Do not make category colors large.