Refto
Picmal

Picmal

Batch convert and compress your images, videos and audios offline on your Mac.

Desktop AppMinimalSingle PageClean
3.0
11
Visits
Visit

Categories

Desktop App

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Picmal Home design analysis

Treat the system like a clean utility manual: direct, efficient, and screenshot-led. Use blue actions to point the way without over-branding the shell. Let docs, changelog, and marketing all feel like one family. Use app...

Key Takeaways

  • Treat the system like a clean utility manual: direct, efficient, and screenshot-led.
  • Use blue actions to point the way without over-branding the shell.
  • Let docs, changelog, and marketing all feel like one family.
  • Use app windows, file tables, and clean lists as the dominant visual language.
  • Keep proof literal and legible rather than atmospheric.
  • Keep the page snow-white with faint gray structure.

Overview

  • Treat the system like a clean utility manual: direct, efficient, and screenshot-led.
  • Use blue actions to point the way without over-branding the shell.
  • Let docs, changelog, and marketing all feel like one family.

Image Direction

  • Use app windows, file tables, and clean lists as the dominant visual language.
  • Keep proof literal and legible rather than atmospheric.

Colors

  • Keep the page snow-white with faint gray structure.
  • Use blue only for actions and a few support sparks.
  • Let gray borders and fills do the organizational work.

Typography

  • Use a native-adjacent system sans throughout.
  • Keep labels and button copy short and efficient.

Design.md

System Overview

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

Blue Utility Manual

A crisp utility-product language built from snow-white space, faint gray strokes, App Store blue action bars, dense screenshot mosaics, and an equally clean docs rail.

Efficient, clean, and native-adjacent.

Primary mode: lightutility app marketing and docscontent-rich

Theme

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

Visual atmosphere
Summary
Efficient, clean, and native-adjacent.
Density
5
Variance
4
Motion
1
Signals
blue action bars · faint border strokes · dense screenshot proof

Colors

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

Palette colors
Snow White
#FBFBFB
Ink 85
#171717
Utility Blue
#1B5BFF
Stroke Gray
#EDEDED
Soft Fill
#F5F5F5
Usage rules
Keep the shell bright and low-noise.
Use saturated blue only for actions and a few supporting signals.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

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

Token Radii

Corner radii tokens with a live surface sample.

sm
4px
md
8px
lg
16px
xl
24px
full
999px

Typography Families

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

Display
System UI
efficient utility voice
Body
System UI
clear native-style body copy
Accent
System UI
labels and doc nav
Mono
SF Mono
shortcut and docs code voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.8rem, 5vw, 4.4rem)/—
Display
H2
clamp(1.8rem, 3vw, 2.6rem)/—
H2
H3
1rem/—
H3
Body
1rem/—
Body
Label
0.88rem/—
Label

Typography Rules

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

Rules
Keep the voice native-adjacent and unpretentious. · Let short labels and button copy stay compact.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Center one clear hero proof window before expanding into feature proof.
Keep changelog and docs surfaces as first-class expressions of the same system.
Use borders, not decoration, to structure the page.

Component Preview

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

Actions blue button
Base Attributes
Background
#1B5BFF
Text
#FFFFFF
Border
none
Radius
8px
Padding
0.8rem 1.2rem
Actions quiet button
Base Attributes
Background
#F5F5F5
Text
#171717
Border
1px solid #EDEDED
Radius
8px
Padding
0.8rem 1.2rem
Surfaces screenshot frame
Base Attributes
Background
#FFFFFF
Text
#171717
Border
1px solid #EDEDED
Radius
8px
Padding
1rem
Shadow
none
Surfaces docs search
Base Attributes
Background
#F5F5F5
Text
#171717
Border
1px solid #EDEDED
Radius
8px
Padding
0.75rem 1rem
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    app screenshot
  • -
    table crop
  • -
    docs rail
Subject patterns
  • -
    file tables
  • -
    dark utility windows
  • -
    clean docs lists
Composition logic
  • -
    Use one clear app window above the fold, then prove the utility with straightforward screenshot tiles.
  • -
    Let docs and changelog columns stay structurally visible.
Treatment rules
  • -
    Keep the proof matter-of-fact and legible.
  • -
    Use borders and white space instead of decorative frames.
Generation cues
  • -
    Ask for a clean utility-product page with blue action buttons, faint gray strokes, and screenshot-heavy proof.
  • -
    Mention a docs rail and native-feeling controls.
Avoid
  • -
    No gradient brand fog.
  • -
    No oversized rounded pills for the main actions.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not turn the site into a playful illustration brand.
  • -
    Do not soften the border system with glows or big shadows.
  • -
    Do not switch primary actions to pills.