Refto
Speed Dial

Speed Dial

Premium design support for early-stage startups to raise faster, build 0–1 sooner, and make an impact

DesignPortfolioSingle PageLightClean
4.0
4
Visits
Visit

Categories

DesignPortfolio

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Speed Dial Home design analysis

Let the system feel credible, spacious, and lightly climate-coded. Balance one quiet intro rail against a long proof strip. Use green as a commitment signal, not as a theme wash. Mix calm device renders with renewable en...

Key Takeaways

  • Let the system feel credible, spacious, and lightly climate-coded.
  • Balance one quiet intro rail against a long proof strip.
  • Use green as a commitment signal, not as a theme wash.
  • Mix calm device renders with renewable energy photography and simple data cards.
  • Keep images lightly colored and editorial rather than cinematic.
  • Keep the page mostly pale and airy.

Overview

  • Let the system feel credible, spacious, and lightly climate-coded.
  • Balance one quiet intro rail against a long proof strip.
  • Use green as a commitment signal, not as a theme wash.

Image Direction

  • Mix calm device renders with renewable energy photography and simple data cards.
  • Keep images lightly colored and editorial rather than cinematic.

Colors

  • Keep the page mostly pale and airy.
  • Use green only for decisive actions and tiny emphasis moments.
  • Let peach and sky appear only in contained proof tiles.

Typography

  • Use a clean grotesk that stays understated rather than loud.
  • Keep body copy narrow and measured so the proof strip can breathe.

Design.md

System Overview

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

Climate Card Ledger

A restrained climate-founder portfolio language built from pale editorial space, deep green pill actions, soft product cards, and a tall case-study strip balanced against a quiet intro rail.

Calm, credible, and quietly climate-forward.

Primary mode: lightdesign portfolio marketingcontent-rich

Theme

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

Visual atmosphere
Summary
Calm, credible, and quietly climate-forward.
Density
4
Variance
5
Motion
2
Signals
green pill · split rail layout · pastel proof tiles

Colors

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

Palette colors
Mist Paper
#FCFBFC
Forest Green
#00714D
Graphite Ink
#111111
Soft Sand
#F2F1ED
Peach Glow
#FFD0B4
Sky Air
#D9EEF6
Usage rules
Keep the shell nearly white and low-noise.
Use green for the small number of commitment actions, not as a global wash.

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(3.5rem, 8vw, 5.5rem)
panel_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

sm
10px
md
16px
lg
22px
xl
28px
full
999px

Typography Families

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

Display
Soehne
quietly modern grotesk
Body
Soehne
direct but understated body copy
Accent
Soehne
caption and stat voice
Mono
IBM Plex Mono
rare data or axis voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.8rem, 5vw, 4rem)/—
Display
H2
clamp(1.6rem, 3vw, 2.3rem)/—
H2
H3
1.1rem/—
H3
Body
0.98rem/—
Body
Label
0.88rem/—
Label

Typography Rules

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

Rules
Keep the voice measured and low-drama. · Do not over-weight the copy; let whitespace do the emphasis.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Use a split desktop layout with an intro rail and a proof strip.
Keep each proof object simple and isolated.
Let environmental photography appear as a calm support layer, not as the whole brand.

Component Preview

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

Actions green pill
Base Attributes
Background
#00714D
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.8rem 1.2rem
Cards proof tile
Feature Card
Component preview content
Base Attributes
Background
#F2F1ED
Text
#111111
Border
1px solid rgba(17,17,17,0.06)
Radius
16px
Padding
1.25rem
Shadow
none
Cards peach tile
Feature Card
Component preview content
Base Attributes
Background
#FFD0B4
Text
#111111
Border
none
Radius
16px
Padding
1.25rem
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    device card
  • -
    dashboard crop
  • -
    environment photo
Subject patterns
  • -
    clean hardware mockups
  • -
    wind or solar imagery
  • -
    simple data cards
Composition logic
  • -
    Anchor one quiet intro on the left and a tall strip of proof on the right.
  • -
    Alternate environmental photography with product cards to keep the page grounded.
Treatment rules
  • -
    Keep the imagery softly lit and low-contrast.
  • -
    Favor climate infrastructure and tools over abstract green symbolism.
Generation cues
  • -
    Ask for a pale climate portfolio with one green CTA, soft product tiles, and clean energy photography.
  • -
    Mention a left intro rail and a tall right proof strip.
Avoid
  • -
    No neon eco gradients.
  • -
    No cluttered dashboard density.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not turn the page into a loud activist poster.
  • -
    Do not add glossy startup chrome or dark-mode defaults.
  • -
    Do not remove the left-rail calm that makes the strip readable.