Refto
Affinity

Affinity

Powerful, precise, and free forever. Discover Affinity — the next generation of professional photo, design, and layout software built for creative freedom.

InteractiveDesktop AppParallaxDesignDrag DropAnimationBig Background ImageDark
4.0
10
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Affinity Home design analysis

Creative Monolith Stage is an art-led software system that treats the page like a black gallery wall. It should feel oversized, theatrical, and unmistakably visual: massive serif display type, vivid artwork intrusions, a...

Key Takeaways

  • Primary is an acid green reserved for the main action.
  • Secondary is a warm stone support surface for secondary action.
  • Tertiary is a showcase accent that can appear in creative proof blocks.
  • Use a dramatic high-contrast serif for the largest statements.
  • Use a simple UI sans for everything operational.
  • Keep the display type huge enough to compete with the artwork.

Overview

Creative Monolith Stage is an art-led software system that treats the page like a black gallery wall. It should feel oversized, theatrical, and unmistakably visual: massive serif display type, vivid artwork intrusions, and one acid-green action that cuts through the darkness.

Image Direction

Use oversized poster crops, luminous illustration or photo-art mashups, and bold artboard-like proofs. Artwork should feel curated and high-contrast rather than generic.

Colors

  • Primary is an acid green reserved for the main action.
  • Secondary is a warm stone support surface for secondary action.
  • Tertiary is a showcase accent that can appear in creative proof blocks.

Typography

  • Use a dramatic high-contrast serif for the largest statements.
  • Use a simple UI sans for everything operational.
  • Keep the display type huge enough to compete with the artwork.

Design.md

System Overview

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

Creative Monolith Stage

A black creative-software system with oversized serif display type, acid-green CTAs, vivid artwork collage, and load-bearing pinned showcase progression.

Loud, art-led, editorial, and unapologetically high-contrast.

Primary mode: darkcreative softwaremarketing-rich

Theme

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

Visual atmosphere
Summary
Loud, art-led, editorial, and unapologetically high-contrast.
Density
4
Variance
4
Motion
4
Signals
black monolith shell · huge high-contrast serif · acid-green action · vivid artwork collage

Colors

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

Palette colors
Pure Black
#000000
Signal Green
#A7F175
Warm Stone
#E0DCD6
Gallery White
#F8F7F2
Cyan Panel
#79D3DE
Violet Panel
#A066C4
Quiet Border
#2A2A2A
Usage rules
Keep the shell black and let artwork or showcase blocks provide color.
Use acid green only for the highest-intent action.
Allow cyan and violet inside showcase modules, not across the whole shell.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 8vw, 7rem)
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
8px
panel
24px

Typography Families

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

Display
Canela
oversized high-contrast serif with dramatic interior curves
Body
Canva Sans
simple modern UI sans that yields to the display type

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4.5rem, 10vw, 7rem)/—
Display
H2
clamp(2.2rem, 5vw, 3.5rem)/—
H2
Body
1rem/—
Body
Caption
0.85rem/—
Caption

Typography Rules

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

Rules
Make the display type massive and central. · Keep UI text plain and secondary.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-260ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration180ms-260ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Treat the homepage as a pinned creative stage rather than a standard feature page.
Let artwork and display type compete together in a controlled way.
Use product or showcase blocks as bold editorial chapters.

Component Preview

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

Buttons primary
Base Attributes
Background
#A7F175
Text
#0E1318
Border
0px none transparent
Radius
{tokens.radii.control}->8px
Padding
0.875rem 1.25rem
Min height
48px
Typography
body
Buttons secondary
Base Attributes
Background
#E0DCD6
Text
#0E1318
Border
0px none transparent
Radius
{tokens.radii.control}->8px
Padding
0.875rem 1.25rem
Min height
48px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
#1F1F1F
Text
#F8F7F2
Border
1px solid #2A2A2A
Radius
{tokens.radii.panel}->24px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#1F1F1F
Text
#F8F7F2
Border
1px solid #2A2A2A
Radius
12px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(248,247,242,0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#F8F7F2
Height
40px
Active text
#F8F7F2
Item padding
0px
Item radius
0px

Scroll motion

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

Role
load-bearing
Scroll driver
native
Cadence
bold
Patterns
  • -
    pinned showcase progression
  • -
    chaptered creative proof
Page logic
  • -
    Scroll should advance through strong creative chapters rather than a conventional article flow.
Constraints
  • -
    The page must still read as a sequence of strong static compositions when motion is reduced.

Image direction

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

Role
load-bearing
Media types
  • -
    editorial artwork
  • -
    creative software proof
Subject patterns
  • -
    luminous poster crops
  • -
    bold artboard stills
  • -
    photography-illustration mashups
Composition logic
  • -
    Keep artwork oversized and high-contrast against black.
Avoid
  • -
    No bland stock imagery.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No generic SaaS blue-purple shell.
  • -
    No pill actions.
  • -
    No timid display scale.