Refto
Trawelt

Trawelt

Discover Trawelt’s solutions for travel and hospitality. From business consulting to AI-powered tools, we help companies drive growth.

Large TypeHorizontal ScrollingTypographicAgencyAnimationDark
3.0
5
Visits
Visit

Categories

Agency

Available Pages

Home

Version History

Design Analysis

Trawelt Home design analysis

Build the system as an airy editorial page with a mint capsule rail floating at the top. Use one rendered travel-adjacent object to inject personality into each major hero or proof section. Shift to black only when the p...

Key Takeaways

  • Build the system as an airy editorial page with a mint capsule rail floating at the top.
  • Use one rendered travel-adjacent object to inject personality into each major hero or proof section.
  • Shift to black only when the page needs a more advanced or AI-heavy tone.
  • Use studio-lit travel keepsakes, tags, keys, or token objects with strong material presence.
  • Keep the rest of the composition open and editorial around those props.
  • Keep most of the UI in white, black, and gray.

Overview

  • Build the system as an airy editorial page with a mint capsule rail floating at the top.
  • Use one rendered travel-adjacent object to inject personality into each major hero or proof section.
  • Shift to black only when the page needs a more advanced or AI-heavy tone.

Image Direction

  • Use studio-lit travel keepsakes, tags, keys, or token objects with strong material presence.
  • Keep the rest of the composition open and editorial around those props.

Colors

  • Keep most of the UI in white, black, and gray.
  • Use mint as the signature shell and action color.
  • Let lilac and gold live mainly inside rendered props rather than on the interface itself.

Typography

  • Use a high-contrast serif for the biggest statements.
  • Keep the supporting consultancy voice in a clean sans.

Design.md

System Overview

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

Travel Charm Minimal

A travel consultancy language built from mint capsule navigation, editorial serif headlines, object-render hero props, and selective black inversions for AI-focused sections.

Editorial, travel-luxury, airy, and slightly playful.

Primary mode: lighttravel and hospitality consultancy marketingcontent-rich

Theme

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

Visual atmosphere
Summary
Editorial, travel-luxury, airy, and slightly playful.
Density
4
Variance
6
Motion
1
Signals
mint capsule rails · glossy travel tokens · serif-led statements on white or black stages

Colors

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

Palette colors
Paper White
#FFFFFF
Travel Ink
#0B0B0B
Mint Rail
#D6FFBB
Fog Gray
#7A7A7A
Lilac Tag
#A788E8
Coin Gold
#E3C24D
Usage rules
Keep the main field white and editorial.
Use mint to frame navigation and action zones, not to wash the whole page.

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, 6.5rem)
panel_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

sm
14px
md
18px
lg
24px
xl
30px
full
999px

Typography Families

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

Display
Canela
luxury hospitality serif for large statements
Body
Labour Grotesk
plainspoken consultancy sans
Accent
Labour Grotesk
capsule navigation and label voice
Mono
IBM Plex Mono
rare utility support voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 7vw, 5.8rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
H3
clamp(1.3rem, 2vw, 1.8rem)/—
H3
Body
1rem/—
Body
Label
0.92rem/—
Label

Typography Rules

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

Rules
Let serif headlines carry the sense of travel prestige. · Keep the sans voice clean and direct beneath them.

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

Float a mint capsule rail above otherwise open editorial sections.
Pair one large serif statement with one rendered hero object.
Use black inversion selectively to signal a more advanced capability register.

Component Preview

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

Navigation mint capsule
OverviewFeaturesDocs
Base Attributes
Background
#D6FFBB
Text
#0B0B0B
Border
none
Radius
24px
Padding
0.5rem 0.75rem
Shadow
none
Actions primary capsule
Base Attributes
Background
#D6FFBB
Text
#0B0B0B
Border
none
Radius
24px
Padding
0.8rem 1.1rem
Actions dark capsule
Base Attributes
Background
#0B0B0B
Text
#FFFFFF
Border
none
Radius
24px
Padding
0.8rem 1.1rem
Stages editorial card
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#0B0B0B
Border
1px solid rgba(11, 11, 11, 0.06)
Radius
18px
Padding
1.5rem
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    studio object render
  • -
    token prop
  • -
    luxury keepsake
Subject patterns
  • -
    keys, tags, or token-like travel objects
  • -
    clean studio lighting
  • -
    softly saturated prop colors
Composition logic
  • -
    Place one hero object beside a large editorial statement.
  • -
    Let negative space dominate the section around the prop.
Treatment rules
  • -
    Keep renders crisp and tangible.
  • -
    Use a small number of accent colors inside the props rather than the UI chrome.
Generation cues
  • -
    Describe luxury-travel object props with mint, lilac, or gold details on white.
  • -
    Ask for editorial whitespace and one strongly lit hero object.
Avoid
  • -
    No generic beach or airplane stock photos.
  • -
    No overbuilt dashboard mosaics.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not remove the serif voice in favor of generic SaaS sans-only hierarchy.
  • -
    Do not let mint become a heavy background wash.
  • -
    Do not replace the object renders with stock travel photography.