Refto
Making Software

Making Software

A reference manual for people who design and build software.

DevelopmentIllustrativeTypographicEducationAnimationLightClean
3.0
3
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Making Software Home design analysis

This system should feel like a digital reference manual rather than a marketing site. The page needs the calm authority of print: bright paper background, black serif reading, strong column structure, and obvious section...

Overview

This system should feel like a digital reference manual rather than a marketing site. The page needs the calm authority of print: bright paper background, black serif reading, strong column structure, and obvious sectional rules. Blue enters as technical ink, not as generic branding. The design becomes memorable when diagrams and reading move together. Every major explanation should feel paired with an artifact, sketch, cutaway, curve, or schematic. Mono elements act like instrumentation around that reading experience.

Image Direction

Use diagrams as the visual identity. Draw subjects like technical teaching artifacts: exploded objects, gridded letterforms, curves, cutaways, and annotated systems. Keep the linework crisp, mostly blue, and set against clean paper fields with visible construction logic. The illustrations should teach, not merely decorate.

Colors

Most of the experience should stay black on paper-white. Blueprint blue is the only strong accent and should appear in diagrams, labels, progress bars, and selective metadata. Pale blue fills and rule gray can support that structure, but they should remain quiet. Avoid additional warm accents, gradients, or UI flourish. The system depends on restraint.

Typography

Use a literary serif for all meaningful reading, including body copy and section titles. It should feel like a well-set reference text rather than a product interface. Mono should appear as instrumentation: labels, progress states, tiny controls, index metadata, and structured responses. Do not let mono take over long-form reading. The contrast between readable serif prose and technical mono support is one of the system's strongest assets.

Design.md

System Overview

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

Blueprint Reference Manual

A manual-like editorial system that combines serif reading columns with electric blueprint diagrams and compact mono instrumentation.

Curious, precise, archival, and technical.

Primary mode: lighteducational publishingui-light

Theme

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

Visual atmosphere
Summary
Curious, precise, archival, and technical.
Density
4
Variance
3
Motion
2
Signals
paper-white reading field · electric blue diagram lines · serif editorial body · mono utility instrumentation

Colors

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

Palette colors
Paper White
#FBFBFB
Ink Black
#111111
Blueprint Blue
#315BFF
Grid Mist
#DCE4FF
Rule Gray
#CFCFCF
Usage rules
Keep the page mostly black on paper-white; blue exists to signal diagrams, labels, and progress.
Do not introduce extra accent colors that compete with the blueprint logic.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4rem, 7vw, 7rem)
figure_gap
1.5rem
card_padding
1rem

Token Radii

Corner radii tokens with a live surface sample.

control
4px
panel
0px
media
0px

Typography Families

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

Display
Arizona
editorial serif
Body
Arizona
book-like reading voice
Mono
departureMono
instrumentation and technical caption layer

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 5vw, 4.75rem)/—
Display
H2
clamp(1.8rem, 3vw, 2.5rem)/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Use the serif family for all real reading. · Reserve mono for controls, data, labels, and reference markers.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
120ms-180ms
Easing
linear

Motion

Resolved motion token values.

PropertyValue
duration120ms-180ms
easinglinear

Layout Principles

Structure the page like a printed manual, with strong columns and obvious sectional rules.
Pair each major text block with one diagram or schematic rather than generic supporting cards.
Let tables of contents, progress bars, and captions behave like reference instrumentation.

Component Preview

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

Buttons utility
Base Attributes
Background
rgba(255, 255, 255, 0.5)
Text
#111111
Border
1px solid rgba(0, 0, 0, 0.5)
Radius
{tokens.radii.control}->4px
Padding
0 0.5rem
Min height
28px
Shadow
inset 2px 2px 0 rgba(255,255,255,0.75), inset -2px -2px 0 rgba(0,0,0,0.10)
Typography
label
Chapter rows default
Base Attributes
Background
transparent
Text
#111111
Border
0px none transparent
Radius
{tokens.radii.panel}->0px
Padding
0
Typography
body
Figures blueprint
Base Attributes
Background
#FBFBFB
Text
#315BFF
Border
0px none transparent
Radius
{tokens.radii.media}->0px
Padding
0
Shadow
none
Inputs subscribe
Base Attributes
Background
#FBFBFB
Text
#111111
Border
1px solid rgba(0, 0, 0, 0.35)
Radius
{tokens.radii.control}->4px
Padding
0 0.625rem
Min height
28px
Placeholder
rgba(0, 0, 0, 0.45)

Scroll motion

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

Role
supportive
Scroll driver
native
Cadence
measured
Patterns
  • -
    sticky chapter
  • -
    scroll progress
Page logic
  • -
    Persistent navigation or progress instruments should stay visible while long-form reading advances.
  • -
    Motion exists to preserve orientation, not to dramatize the page.
Constraints
  • -
    Keep the reading layout legible when sticky behavior collapses.
  • -
    Do not introduce ornamental parallax.
Reduced motion
  • -
    Preserve the chapter structure and progress context without sticky transitions.

Image direction

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

Role
load-bearing
Media types
  • -
    technical illustration
  • -
    diagram
Subject patterns
  • -
    exploded object view
  • -
    curve, grid, or schematic figure paired with explanatory text
Composition logic
  • -
    Set diagrams on bright paper fields with obvious breathing room.
  • -
    Align labels, arrows, and construction marks to a precise underlying grid.
Treatment rules
  • -
    Keep linework crisp and predominantly blue.
  • -
    Use pale blue fills and graph-paper texture as support, never as noise.
Generation cues
  • -
    Describe the object, cutaway style, label strategy, and grid treatment before adding embellishment.
  • -
    Favor explainability and structural clarity over photorealism.
Avoid
  • -
    No generic vector-icon style.
  • -
    No mixed photo-and-diagram language inside one chapter.

Iconography

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

Summary
Mono and blueprint symbols should feel like labels in a technical manual.

Responsive guidance

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

  • -
    Collapse wide chapter tables into one column while preserving dotted rules and mono metadata.
  • -
    Let diagrams scale large enough to remain readable instead of shrinking them to thumbnail size.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No glossy SaaS polish.
  • -
    No rounded consumer-app cards.
  • -
    Do not replace diagrams with stock photography.