Refto
tiny.SUPPLY

tiny.SUPPLY

Express Custom Avatar Service - A pleasure to own and use a tiny circle that imitates oneself in a simple and minimalistic style. Order yours now.

IllustrativeDesignAnimationMinimalPersonalSingle PageLightClean
4.0
3
Visits
Visit

Categories

DesignPersonal

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

tiny.SUPPLY Home design analysis

Design this system as a tiny, deliberate stack of cards in the middle of a large white page. The main idea is restraint: one narrow column, soft fog-gray surfaces, clear black copy, and just enough color to mark the main...

Overview

Design this system as a tiny, deliberate stack of cards in the middle of a large white page. The main idea is restraint: one narrow column, soft fog-gray surfaces, clear black copy, and just enough color to mark the main action. It should feel more like a carefully tended profile utility than a loud startup landing page. The first surface should immediately establish the pattern: rounded card, repeated avatar texture, one highlighted subject, then short copy and one obvious purchase decision. The page becomes weaker if it starts behaving like a full-width marketing spread.

Image Direction

Use avatar illustration as the image language. Repeat small profile heads to build a field, then isolate one larger avatar to focus attention. Keep the drawing clean, mostly black and white, and let color appear only in tiny accents or in the CTA lane. The imagery should feel collectible and tidy, not chaotic.

Colors

Most of the palette is white, fog-gray, and black. The one loud move is the blue-to-lilac primary action. Treat that gradient as special and do not repeat it across the rest of the interface. Soft coral can appear in tiny status chips or badges, but only in small doses. This is not a low-contrast minimalism system. Black text should stay readable and grounded.

Typography

Use a plain contemporary UI sans without drama. Headlines can be bold and compact, but they should still feel small enough to belong inside a mobile-width card. Labels and chips should stay crisp and understated. Avoid heroic display typography. The system works because the content feels tiny, clear, and self-contained.

Design.md

System Overview

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

Soft Avatar Ledger

A centered single-column service system built from soft gray cards, small rounded tags, and one vivid blue purchase accent.

Quiet, tiny, approachable, and carefully constrained.

Primary mode: lightavatar serviceui-light

Theme

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

Visual atmosphere
Summary
Quiet, tiny, approachable, and carefully constrained.
Density
2
Variance
2
Motion
1
Signals
single narrow centered column · fog-gray soft cards · capsule CTAs · avatar-mosaic hero

Colors

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

Palette colors
White Space
#FFFFFF
Fog Card
#F3F3F3
Ink
#111111
Signal Blue
#1E63FF
Signal Lilac
#AFA9FF
Soft Coral
#FF7A7A
Usage rules
Keep the page mostly white and fog-gray; the blue gradient should appear only on the highest-priority action.
Use black text generously and avoid low-contrast fashion minimalism.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(2.5rem, 5vw, 4rem)
card_padding
1.75rem
chip_gap
0.5rem

Token Radii

Corner radii tokens with a live surface sample.

tile
12px
card
24px
control
30px

Typography Families

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

Display
Inter
plainspoken contemporary UI
Body
Inter
friendly readable service copy
Label
Inter
small utility label

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(1.75rem, 3vw, 2.4rem)/—
Display
H2
1.5rem/—
H2
Body
1rem/—
Body
Label
0.75rem/—
Label

Typography Rules

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

Rules
Keep copy compact and direct. · Use small labels and badges without over-stylizing them.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
140ms-180ms
Easing
cubic-bezier(.3, .7, .4, 1)

Motion

Resolved motion token values.

PropertyValue
duration140ms-180ms
easingcubic-bezier(.3, .7, .4, 1)

Layout Principles

Constrain all core content to a narrow centered column even on large viewports.
Stack sections as calm cards rather than spreading them into a desktop grid.
Use repeated small avatar units as texture inside one dominant card.

Component Preview

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

Buttons primary
Base Attributes
Background
linear-gradient(135deg, #1E63FF, #AFA9FF)
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.control}->30px
Padding
0 1.25rem
Min height
48px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#E6E6E6
Text
#666666
Border
0px none transparent
Radius
{tokens.radii.control}->30px
Padding
0 1.25rem
Min height
48px
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#F3F3F3
Text
#111111
Border
0px none transparent
Radius
{tokens.radii.card}->24px
Padding
{tokens.spacing.card_padding}->1.75rem
Shadow
none
Cards compact
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(17, 17, 17, 0.08)
Radius
{tokens.radii.tile}->12px
Padding
0.75rem
Shadow
none
Tags default
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(17, 17, 17, 0.22)
Radius
20px
Padding
0.375rem 0.625rem
Typography
label
Icon tiles sponsor
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(17, 17, 17, 0.06)
Radius
{tokens.radii.tile}->12px
Padding
0.5rem
Shadow
none

Hero stage

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

Summary
A single rounded card uses an avatar mosaic and one large heading to establish the service instantly.

Image direction

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

Role
supportive
Media types
  • -
    avatar illustration
  • -
    cutout portrait mosaic
Subject patterns
  • -
    small repeated profile heads
  • -
    one larger selected or highlighted avatar inside the field
Composition logic
  • -
    Use repetition to build texture, then isolate one focal avatar for emphasis.
  • -
    Keep the imagery inside softly rounded card bounds rather than letting it bleed edge to edge.
Treatment rules
  • -
    Favor clean black-and-white drawing with occasional small color accents.
  • -
    Use edge fades or density falloff to keep the mosaic from becoming noisy.
Generation cues
  • -
    Describe avatar style, crop discipline, repetition density, and highlight strategy.
  • -
    Keep the illustration system playful but minimal.
Avoid
  • -
    No photoreal portrait mixes.
  • -
    No chaotic sticker collage.

Responsive guidance

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

  • -
    Keep the narrow card width readable on mobile by reducing side padding before changing the overall structure.
  • -
    Preserve the CTA as a full, obvious capsule even when cards collapse vertically.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No full-width desktop hero spreads.
  • -
    No heavy shadows or luxury gloss.
  • -
    Do not introduce a second loud accent color to compete with the blue CTA.