Refto
Duna

Duna

Meet the modern platform that accelerates business onboarding, automates manual work and grows revenue.

Large TypeAiMarketingBig Background ImageMinimalLightClean
4.0
3
Visits
Visit

Categories

AiMarketing

Available Pages

Home

Version History

Design Analysis

Duna Home design analysis

Pastel Trust Landscape is a calm compliance-platform system that pairs rigorous messaging with unusually gentle art direction. The UI itself should stay crisp, white, and minimal, while trust and warmth arrive through pa...

Key Takeaways

  • Primary is a deep cocoa used for major text and CTA fill.
  • Secondary is a clean white used for cards and supporting surfaces.
  • Tertiary is a lilac wash accent reserved for image atmosphere.
  • Use one plain grotesk throughout.
  • Keep display large and direct.
  • Let images provide the softness so the type can remain precise.

Overview

Pastel Trust Landscape is a calm compliance-platform system that pairs rigorous messaging with unusually gentle art direction. The UI itself should stay crisp, white, and minimal, while trust and warmth arrive through painterly pastel imagery and small abstract washes.

Image Direction

Use painterly landscapes, airy pastel horizons, and soft abstract washes. Imagery should feel stabilizing and trustworthy rather than aspirational or corporate.

Colors

  • Primary is a deep cocoa used for major text and CTA fill.
  • Secondary is a clean white used for cards and supporting surfaces.
  • Tertiary is a lilac wash accent reserved for image atmosphere.

Typography

  • Use one plain grotesk throughout.
  • Keep display large and direct.
  • Let images provide the softness so the type can remain precise.

Design.md

System Overview

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

Pastel Trust Landscape

A calm compliance-platform marketing system built from painterly pastel trust imagery, white surfaces, dark pill actions, and plain confident type.

Calm, trustworthy, airy, and slightly art-directed.

Primary mode: lightcompliance platformmarketing-rich

Theme

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

Visual atmosphere
Summary
Calm, trustworthy, airy, and slightly art-directed.
Density
2
Variance
3
Motion
1
Signals
painterly pastel hero · minimal white shell · dark pill CTA

Colors

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

Palette colors
Paper White
#F8F6F1
Deep Cocoa
#16100C
Peach Mist
#F5D6C3
Lilac Wash
#DCC8F2
Meadow Tint
#B9D78E
Quiet Border
#EAE4DA
Usage rules
Keep the core UI almost monochrome.
Let pastel color live mostly in painterly image fields.
Use dark cocoa for the clearest action.

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
999px
panel
20px

Typography Families

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

Display
Inter
plain confident grotesk without flourish
Body
Inter
calm operational text

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.8rem, 8vw, 5.8rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.85rem/—
Caption

Typography Rules

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

Rules
Keep typography direct and unornamented. · Let the image system provide softness.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Use large white fields with one calm statement and one dark pill action.
Let painterly imagery operate as a trust atmosphere rather than product proof.
Keep product and trust pages open, wide, and uncluttered.

Component Preview

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

Buttons primary
Base Attributes
Background
#16100C
Text
#F8F6F1
Border
0px none transparent
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#16100C
Border
1px solid #EAE4DA
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#16100C
Border
1px solid #EAE4DA
Radius
{tokens.radii.panel}->20px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#FFFFFF
Text
#16100C
Border
1px solid #EAE4DA
Radius
16px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(22, 16, 12, 0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#16100C
Height
40px
Active text
#16100C
Item padding
0px
Item radius
0px

Image direction

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

Role
supportive
Media types
  • -
    painterly landscape
  • -
    soft abstract wash
Subject patterns
  • -
    pastel natural scene
  • -
    light canvas-textured color field
Composition logic
  • -
    Use large open horizons and soft color transitions.
  • -
    Keep imagery calming and trust-oriented rather than dramatic.
Avoid
  • -
    No stock corporate handshake photography.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No black-tech shell as the dominant surface.
  • -
    No sharp rectangular action geometry.
  • -
    No cold grayscale imagery replacing the painterly trust layer.