Refto
Macfolio

Macfolio

Discover the best software, hardware, workspace setups, books, videos, and posts for the Mac ecosystem.

InteractiveDevelopmentTechnologyProductLightClean
4.0
58
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Macfolio Home design analysis

Build for a bright editorial catalog rather than a dark software landing page. Keep the shell quiet and spacious so the curation, not the chrome, defines the first impression. Mix practical browsing controls with more li...

Key Takeaways

  • Build for a bright editorial catalog rather than a dark software landing page.
  • Keep the shell quiet and spacious so the curation, not the chrome, defines the first impression.
  • Mix practical browsing controls with more literary article moments. The interface should feel like a thoughtful publication that also happens to route users to products.
  • Use real product screenshots, device images, and object photography as the main visual language.
  • Frame assets with white space and soft card edges rather than dramatic effects.
  • Hero modules can carry one larger poster-like image, while downstream rails use repeatable thumbnail crops.

Overview

  • Build for a bright editorial catalog rather than a dark software landing page.
  • Keep the shell quiet and spacious so the curation, not the chrome, defines the first impression.
  • Mix practical browsing controls with more literary article moments. The interface should feel like a thoughtful publication that also happens to route users to products.

Image Direction

  • Use real product screenshots, device images, and object photography as the main visual language.
  • Frame assets with white space and soft card edges rather than dramatic effects.
  • Hero modules can carry one larger poster-like image, while downstream rails use repeatable thumbnail crops.

Colors

  • Use white as the page field and near-white panels for softer modules.
  • Keep primary text close to black.
  • Use one clean blue as the main state accent for selected filters and compact CTAs.

Typography

  • Use a clean sans-serif for navigation, metadata, labels, and browsing flows.
  • Reserve a serif display voice for editorial headlines and article titles.
  • Let type contrast come from family and scale, not from decorative color shifts.

Design.md

System Overview

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

Macfolio Design Language

A bright editorial discovery system with restrained commerce controls, serif article moments, and image-led content rails.

Airy, editorial, and quietly premium.

Primary mode: lightcurated product publishingcontent-rich

Theme

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

Visual atmosphere
Summary
Airy, editorial, and quietly premium.
Density
4
Variance
3
Motion
2
Signals
white page field · faint bordered cards · blue state accents · serif article titles

Colors

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

Palette colors
Paper White
#FFFFFF
Soft Panel
#F6F8FC
Ink
#171717
Signal Blue
#458CF7
Faint Border
#E8EBF0
Usage rules
Keep most surfaces white or near-white.
Use blue as a stateful accent, not a blanket promotional wash.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(3.5rem, 6vw, 5.5rem)
card_padding
1.5rem
rail_gap
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
16px
hero
18px

Typography Families

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

Display
"Georgia"
editorial serif
Body
Geist
clean UI sans
Mono
"SF Mono"
utility support mono

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.7rem, 5vw, 4rem)/—
Display
H2
clamp(1.5rem, 2vw, 2rem)/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Use sans-serif for navigation, metadata, and product browsing. · Reserve serif display for article and editorial title moments.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
140ms-200ms
Easing
cubic-bezier(.4, 0, .2, 1)

Motion

Resolved motion token values.

PropertyValue
duration140ms-200ms
easingcubic-bezier(.4, 0, .2, 1)

Layout Principles

Use a broad category row followed by one dominant split hero module.
Organize discovery in horizontal rails and clearly separated content bands.
Pair a main article column with a compact support rail on editorial pages.

Component Preview

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

Buttons primary
Base Attributes
Background
#458CF7
Text
#FFFFFF
Border
none
Radius
{tokens.radii.control}->999px
Padding
0.55rem 0.9rem
Min height
32px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#171717
Border
1px solid #E8EBF0
Radius
{tokens.radii.control}->999px
Padding
0.55rem 0.9rem
Min height
32px
Shadow
none
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#171717
Border
1px solid #E8EBF0
Radius
{tokens.radii.component}->16px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
0 4px 18px rgba(17, 23, 35, 0.04)
Cards hero
Feature Card
Component preview content
Base Attributes
Background
#F6F8FC
Text
#171717
Border
1px solid #E8EBF0
Radius
{tokens.radii.hero}->18px
Padding
0
Shadow
0 8px 24px rgba(17, 23, 35, 0.05)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
rgba(23, 23, 23, 0.72)
Height
32px
Active text
#FFFFFF
Item padding
0.5rem 0.9rem
Item radius
{tokens.radii.control}->999px

Image direction

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

Role
supportive
Media types
  • -
    product screenshot
  • -
    object photography
  • -
    editorial crop
Subject patterns
  • -
    one featured subject per module
  • -
    clean supporting thumbnails in repeatable rails
Composition logic
  • -
    Let white space frame the image rather than decorative chrome.
  • -
    Use one dominant poster-like asset in hero modules and smaller repeatable crops elsewhere.
Treatment rules
  • -
    Keep image borders quiet and corners softly rounded.
  • -
    Allow only subtle glow or blur around promoted imagery.
Generation cues
  • -
    Prompt for real product screenshots or object photography on a clean field.
  • -
    Keep art direction precise and minimal instead of atmospheric.
Avoid
  • -
    No noisy collage assemblies.
  • -
    No full-bleed abstract gradient art.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No dark-mode hero takeover.
  • -
    No loud gradient marketing backgrounds.
  • -
    No equal-weight card carpets without rail hierarchy.