Refto
Aaavatar

Aaavatar

Aaavatar creates one consistent look for every team portrait.

Scrolling AnimationPhotographyParallaxDesignGradientAnimationColorfulBig Background ImageProductSingle PageLightClean
4.0
8
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Aaavatar Home design analysis

Build a selective studio shell where type, spacing, and media carry most of the brand weight. Keep interfaces visually quiet so case-study imagery or hero moments stay primary. Let one accent or one tonal inversion punct...

Key Takeaways

  • Build a selective studio shell where type, spacing, and media carry most of the brand weight.
  • Keep interfaces visually quiet so case-study imagery or hero moments stay primary.
  • Let one accent or one tonal inversion punctuate the flow instead of decorating every module.
  • Favor hero imagery or portfolio frames that feel art-directed rather than stock-driven.
  • Use bold crops, asymmetric composition, or isolated objects before adding ornamental UI chrome.
  • Base the shell on FFFFFF and keep 111111 as the primary reading color.

Overview

  • Build a selective studio shell where type, spacing, and media carry most of the brand weight.
  • Keep interfaces visually quiet so case-study imagery or hero moments stay primary.
  • Let one accent or one tonal inversion punctuate the flow instead of decorating every module.

Image Direction

  • Favor hero imagery or portfolio frames that feel art-directed rather than stock-driven.
  • Use bold crops, asymmetric composition, or isolated objects before adding ornamental UI chrome.

Colors

  • Base the shell on FFFFFF and keep 111111 as the primary reading color.
  • Use 111111 as the main emphasis color and keep it scarce enough to preserve hierarchy.
  • Let F7F7F7 and D9D9D9 separate secondary surfaces without introducing noisy ornament.

Typography

  • Use Gilroy Bold as the display voice. It should read as assertive display sans.
  • Use sans-serif for body copy, controls, and supporting metadata.
  • Let scale and spacing create emphasis before adding extra font families or decorative effects.

Design.md

System Overview

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

Transparency Mockup Avatar Product

A product-marketing system built on white space, black app chrome, checkerboard transparency motifs, rounded portrait cards, and warm orange-pink halo accents.

editorial, selective, and image-led

Primary mode: lightcreative software marketingui-rich

Theme

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

Visual atmosphere
Summary
editorial, selective, and image-led
Density
3
Variance
4
Motion
2
Signals
primary background #FFFFFF · primary action #111111 · display font Gilroy Bold · body font sans-serif

Colors

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

Palette colors
Primary
#111111
Secondary
#FFFFFF
Neutral
#FFFFFF
Surface
#F7F7F7
On Surface
#111111
Usage rules
Keep #111111 reserved for intentional emphasis.
Use #F7F7F7 and #D9D9D9 to separate layers without over-framing them.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.5rem
section_gap
clamp(4rem, 8vw, 7rem)

Token Radii

Corner radii tokens with a live surface sample.

control
12px
card
18px
full
999px

Typography Families

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

Display
Gilroy Bold
assertive display sans
Body
sans-serif
practical UI sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
4.5rem/—
Display
H2
2.75rem/—
H2
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

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

Rules
Keep the display voice dominant in headlines only. · Use the body family consistently for UI and supporting text.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
150ms-220ms
Easing
cubic-bezier(.3,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration150ms-220ms
easingcubic-bezier(.3,0,.2,1)

Layout Principles

Alternate spacious editorial sections with a few denser proof modules.
Treat navigation as a thin strip, not a boxed dashboard control surface.
Use wide image blocks and controlled typographic contrast instead of busy grids.

Component Preview

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

Buttons primary
Base Attributes
Background
#F1F1F1
Text
#111111
Border
1px solid rgba(17,17,17,0.08)
Radius
999px
Padding
2px 14px 2px 4px
Min height
32px
Shadow
none
Font family
"Inter", system-ui, sans-serif
Font size
12px
Font weight
500
Specimen label
Download for Mac
Buttons secondary
Base Attributes
Background
#111111
Text
#FFFFFF
Border
none
Radius
16px
Padding
0 18px
Min height
38px
Shadow
none
Font family
"Inter", system-ui, sans-serif
Font size
12px
Font weight
600
Specimen label
Try AAvatar
Cards default
Editor Mockup
Component preview content
Base Attributes
Background
#111111
Text
#FFFFFF
Border
1px solid rgba(17,17,17,0.06)
Radius
28px
Padding
24px
Min width
280px
Shadow
0 18px 60px rgba(0,0,0,0.14)
Specimen label
Editor Mockup
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#111111
Height
28px
Active text
#111111
Item padding
0 8px
Item radius
0px
Specimen label
Features
Inputs default
Base Attributes
Background
linear-gradient(45deg, #F3F3F3 25%, transparent 25%), linear-gradient(-45deg, #F3F3F3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #F3F3F3 75%), linear-gradient(-45deg, transparent 75%, #F3F3F3 75%)
Text
#111111
Placeholder color
rgba(17,17,17,0.45)
Border
1px solid rgba(17,17,17,0.08)
Radius
20px
Padding
0 16px
Min height
56px
Font family
"Inter", system-ui, sans-serif
Font size
14px
Placeholder
Transparent export
Specimen label
Transparent export

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not promote default browser blue links into the canonical palette.
  • -
    Do not treat low-confidence DOM wrappers as polished component evidence.
  • -
    Do not add extra accent colors that were not visually supported by the source.