Refto
Ugur Turgut

Ugur Turgut

My work involves assisting clients in creating impactful, informed, and authentic digital identities, along with innovative user experiences.

SaasDesignBlack WhitePortfolioSingle PageLightClean
4.0
5
Visits
Visit

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Ugur Turgut Home design analysis

Soft Monochrome Partner Capsule should feel like a highly disciplined one-person practice that never needs to shout. The shell is almost entirely pearl white, the type is soft graphite rather than harsh black, and the ma...

Key Takeaways

  • Use pearl white as the default field.
  • Keep graphite as the main text and dark-action color.
  • Use soft mist for pills and neutral panels.
  • Use one rounded grotesk family across the system.
  • Keep display type large, open, and lightly weighted.
  • Avoid compressed headings or aggressive weight jumps.

Overview

Soft Monochrome Partner Capsule should feel like a highly disciplined one-person practice that never needs to shout. The shell is almost entirely pearl white, the type is soft graphite rather than harsh black, and the main visual identity comes from detached capsule controls, broad rounded panels, and one carefully staged object per section.

Image Direction

Use original portraiture, project boards, or service visuals that sit inside generous white space with soft edge treatment. The imagery should feel deliberate and isolated, with enough calm around it that the typography and pill controls stay legible and composed.

Colors

  • Use pearl white as the default field.
  • Keep graphite as the main text and dark-action color.
  • Use soft mist for pills and neutral panels.

Typography

  • Use one rounded grotesk family across the system.
  • Keep display type large, open, and lightly weighted.
  • Avoid compressed headings or aggressive weight jumps.

Design.md

System Overview

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

Soft Monochrome Partner Capsule

A restrained solo-partner marketing system with pearl-white space, graphite typography, powder-blue support panels, and oversized capsule geometry.

Calm, polished, airy, and highly controlled.

Primary mode: lightdesign partner / subscription serviceui-rich

Theme

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

Visual atmosphere
Summary
Calm, polished, airy, and highly controlled.
Density
3
Variance
2
Motion
2
Signals
pearl-white field · graphite low-contrast type · floating capsule navigation · powder-blue support cards

Colors

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

Palette colors
Pearl Canvas
#FBFBFA
Graphite Smoke
#4A4A4A
Soft Mist
#EFEFEF
Powder Blue
#7FA9BF
Pure White
#FFFFFF
Fog Border
#E4E4E1
Usage rules
Stay in the white-to-graphite range by default.
Use powder blue as a calm support field, not a bright accent stripe.
Favor softened contrast over hard black-white punch.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

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

Token Radii

Corner radii tokens with a live surface sample.

control
999px
panel
2rem

Typography Families

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

Display
Atyp Display
rounded modern grotesk with light-footed scale
Body
Atyp Display
same-family consistency with a softer UI tone

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4rem, 7vw, 6.2rem)/—
Display
H2
clamp(2.4rem, 4vw, 3.6rem)/—
H2
Body
1rem/—
Body
Caption
0.78rem/—
Caption

Typography Rules

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

Rules
Use weight restraint and generous line breaks before adding visual noise. · Let large type feel rounded and breathable, never compressed.

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

Keep the shell mostly white and let one large central object carry each section.
Use floating or detached capsule elements instead of full-width hard bars.
Make service explanations read as broad, soft panels rather than tight enterprise cards.

Component Preview

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

Buttons primary
Base Attributes
Background
#4A4A4A
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1.5rem
Min height
48px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#EFEFEF
Text
#4A4A4A
Border
0px none transparent
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1.5rem
Min height
48px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
#EFEFEF
Text
#4A4A4A
Border
1px solid #E4E4E1
Radius
{tokens.radii.panel}->2rem
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Cards accent
Feature Card
Component preview content
Base Attributes
Background
#7FA9BF
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.panel}->2rem
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#FFFFFF
Text
#4A4A4A
Border
1px solid #E4E4E1
Radius
{tokens.radii.control}->999px
Padding
0.85rem 1rem
Min height
48px
Placeholder
rgba(74,74,74,0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#EFEFEF
Text
#4A4A4A
Height
72px
Active text
#4A4A4A
Item padding
0.5rem 1rem
Item radius
{tokens.radii.control}->999px

Image direction

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

Role
supportive
Media types
  • -
    high-key portrait
  • -
    large showcase board
  • -
    clean service still
Subject patterns
  • -
    one isolated portrait or hero figure
  • -
    one large framed project board per section
  • -
    quiet panel illustrations or icons
Composition logic
  • -
    Keep the main visual object large, centered, and highly isolated.
  • -
    Use very soft edge treatment and a controlled white surround.
Treatment rules
  • -
    Prefer pale tones, soft shadowing, and low-drama contrast.
  • -
    Let blue panels support the system without taking over the shell.
Generation cues
  • -
    Describe isolation, corner softness, and pale contrast before adding subject detail.
  • -
    Generate original boards or portraits that keep the same controlled calm.
Avoid
  • -
    No busy agency collage treatment.
  • -
    No dark moody portfolio noir.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No severe true-black chrome.
  • -
    No square-corner cards or segmented dashboard density.
  • -
    No flashy gradient or neon accent logic.