Refto
Marius Bălaj

Marius Bălaj

I’m a UI engineer turned founder with a background in startups. I co-founded QED in 2021, grew it, and eventually sold it to The Sandbox. Now, I’m focused on building in AI.

DevelopmentPortfolioMinimalPersonalLightClean
3.0
4
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Marius Bălaj Home design analysis

Let the page feel like a personal ledger with room to think. Use electric blue as a spark and a deep anchor field. Keep proof object-based and reflective rather than productized. Use books, tiny charts, notes, and other...

Key Takeaways

  • Let the page feel like a personal ledger with room to think.
  • Use electric blue as a spark and a deep anchor field.
  • Keep proof object-based and reflective rather than productized.
  • Use books, tiny charts, notes, and other collected artifacts instead of polished hero renders.
  • Give every object a lot of air around it.
  • Keep the page mostly off-white and slate.

Overview

  • Let the page feel like a personal ledger with room to think.
  • Use electric blue as a spark and a deep anchor field.
  • Keep proof object-based and reflective rather than productized.

Image Direction

  • Use books, tiny charts, notes, and other collected artifacts instead of polished hero renders.
  • Give every object a lot of air around it.

Colors

  • Keep the page mostly off-white and slate.
  • Use electric blue for links, small sparks, and one or two deep anchor fields.
  • Let pale blue appear only in quiet widgets.

Typography

  • Use clean system sans for the main reading voice.
  • Use italic literary cues only as a secondary, human layer.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Electric Essay Ledger

An airy personal-ledger language built from off-white reading space, electric-blue accents and footer bands, italic literary cues, thin rule lines, and colorful bookshelf objects.

Reflective, structured, and quietly electric.

Primary mode: lightpersonal portfolio and writing sitecontent-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Reflective, structured, and quietly electric.
Density
3
Variance
5
Motion
1
Signals
electric-blue footer · ledger rows · italic literary cues

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Paper White
#F8F8F6
Slate Ink
#34384C
Electric Blue
#0E63FF
Powder Blue
#DCE8FF
Rule Gray
#D9DFEA
Usage rules
Keep the page overwhelmingly white.
Use electric blue as a spark and a deep anchor band, not as a wash everywhere.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
4rem
section_gap
clamp(5rem, 10vw, 8rem)
panel_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

sm
8px
md
14px
lg
20px
xl
26px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
System UI
clean personal essay voice
Body
System UI
clear reading voice
Accent
Iowan Old Style
italic literary cue
Mono
IBM Plex Mono
rare data annotation voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.4rem, 4vw, 3.5rem)/—
Display
H2
clamp(1.4rem, 2.5vw, 1.9rem)/—
H2
H3
1rem/—
H3
Body
1rem/—
Body
Label
0.85rem/—
Label

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Keep body copy calm and long-line readable. · Use italic accents for reflective or literary fragments, not for main structure.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Use radical whitespace and a slow reading rhythm.
Treat rows, lists, and widgets like entries in a ledger.
Let the blue footer or widget field provide the only heavy color band.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Rows ledger row
Base Attributes
Background
transparent
Text
#34384C
Border
0px solid transparent
Radius
0px
Padding
0.9rem 0rem
Shadow
none
Cards soft widget
Feature Card
Component preview content
Base Attributes
Background
#DCE8FF
Text
#34384C
Border
none
Radius
20px
Padding
1.25rem
Shadow
none
Bands electric footer
Base Attributes
Background
#0E63FF
Text
#F8F8F6
Border
none
Radius
0px
Padding
2rem
Shadow
none

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
supportive
Media types
  • -
    book object
  • -
    tiny widget
  • -
    line plot
Subject patterns
  • -
    colorful book spines
  • -
    small charts or workout blocks
  • -
    rule-led metadata
Composition logic
  • -
    Give each object large amounts of whitespace.
  • -
    Let blue fields sit behind one or two quiet information blocks.
Treatment rules
  • -
    Favor physical objects and personal artifacts over polished marketing graphics.
  • -
    Keep illustrations or widgets small and precise.
Generation cues
  • -
    Ask for an off-white personal ledger with electric-blue accents, thin rules, italic cues, and object-like books or widgets.
  • -
    Mention a deep blue footer band and sparse rows.
Avoid
  • -
    No noisy dashboard layouts.
  • -
    No full-page cobalt backgrounds outside the anchor band.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not crowd the page with cards or boxes.
  • -
    Do not reduce the blue to a tiny accent if the footer field disappears.
  • -
    Do not replace the object-based proof with generic screenshots.