Refto
Studio Nika

Studio Nika

We design and develop fast, clear websites in Framer for founders, startups, and businesses. 40+ websites shipped with a simple process and daily updates.

SaasHorizontal ScrollingDesignPersonalSingle PageCleanTransitions
3.0
7
Visits
Visit

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

Studio Nika Home design analysis

Build the interface as a mostly white field with just enough diagonal texture to keep it from feeling empty. Let type scale and capsule shape do the heavy lifting. The experience should feel direct, not decorated. Keep t...

Key Takeaways

  • Build the interface as a mostly white field with just enough diagonal texture to keep it from feeling empty.
  • Let type scale and capsule shape do the heavy lifting. The experience should feel direct, not decorated.
  • Keep the system operationally confident. Pricing, contact, and booking modules should feel native to the same language as the hero.
  • Use product screenshots, small human proof moments, and functional embeds as supporting media.
  • Keep imagery inside white shells with generous space around it.
  • Let the black pills and large headline remain the first read.

Overview

  • Build the interface as a mostly white field with just enough diagonal texture to keep it from feeling empty.
  • Let type scale and capsule shape do the heavy lifting. The experience should feel direct, not decorated.
  • Keep the system operationally confident. Pricing, contact, and booking modules should feel native to the same language as the hero.

Image Direction

  • Use product screenshots, small human proof moments, and functional embeds as supporting media.
  • Keep imagery inside white shells with generous space around it.
  • Let the black pills and large headline remain the first read.

Colors

  • FAFAF7 is the base field. It should read as soft paper white rather than stark app white.
  • 111111 is the anchor tone for major headlines, filled actions, and strong outlines.
  • F1F1EB and D9D9D1 should quietly define texture, separation, and light utility chrome.

Typography

  • Use a bold modern grotesk for major statements and short section headings.
  • Keep supporting copy compact, neutral, and clearly secondary.
  • Use mono or utility-style text only for small operational labels or metadata.

Design.md

System Overview

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

Stripefield Capsule Studio

A pale, startup-studio design language driven by diagonal stripe fields, bold black headlines, and ultra-rounded capsule controls.

Quiet, direct, optimistic, and extremely reductionist.

Primary mode: lightsmall studio marketing sitecontent-rich

Theme

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

Visual atmosphere
Summary
Quiet, direct, optimistic, and extremely reductionist.
Density
2
Variance
4
Motion
1
Signals
bare paper-white field with faint diagonal texture · high-contrast black capsule punctuation · subtle green accents used as reassurance rather than branding

Colors

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

Palette colors
Ink Black
#111111
Paper White
#FAFAF7
Stripe Mist
#F1F1EB
Cloud Border
#D9D9D1
Signal Green
#59B64C
Muted Graphite
#6F6F68
Usage rules
Keep the canvas nearly white and let contrast come from black text and filled pills.
Use green only for reassurance, not as a broad brand wash.
Avoid adding colorful panels or heavy gradients into the core system.

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(4.5rem, 8vw, 7rem)
panel_padding
clamp(1.25rem, 3vw, 2rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
16px
md
24px
lg
36px
xl
56px
full
999px

Typography Families

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

Display
Geist
clean grotesk with startup sharpness
Body
Inter
neutral and compact for explanatory copy
Accent
Geist
small all-purpose UI label voice
Mono
Geist Mono
light operational metadata voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4rem, 8vw, 6.5rem)/—
Display
H2
clamp(2.4rem, 4vw, 3.6rem)/—
H2
H3
clamp(1.5rem, 2.4vw, 2rem)/—
H3
Body
1.0625rem/—
Body
Label
0.95rem/—
Label

Typography Rules

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

Rules
Let headline scale do most of the work. · Keep paragraphs short and gray enough to feel secondary. · Use mono only for timing, utility, or operational metadata.

Borders

Border tokens with resolved values.

Fine
1px solid #D9D9D1
Strong
2px solid #111111

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Borders

Resolved border token values.

PropertyValue
fine1px solid #D9D9D1
strong2px solid #111111

Motion

Resolved motion token values.

PropertyValue
duration140ms-180ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Use one dominant statement at a time and let the rest of the interface recede.
Keep sections wide, centered, and quiet rather than grid-dense.
Treat large rounded wells as both interaction zones and compositional anchors.
Let faint stripe texture give the page just enough atmosphere without counting as content.

Component Preview

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

Header capsule rail
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(17, 17, 17, 0.06)
Radius
999px
Padding
0.35rem 0.5rem
Buttons primary pill
Base Attributes
Background
#111111
Text
#FFFFFF
Border
1px solid #111111
Radius
999px
Padding
0.8rem 1.2rem
Buttons outline pill
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #111111
Radius
999px
Padding
0.8rem 1.2rem
Panels quiet card
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #D9D9D1
Radius
24px
Padding
1.25rem
Shadow
0 8px 16px rgba(17, 17, 17, 0.03)
Panels large well
Base Attributes
Background
#FFFFFF
Text
#111111
Border
2px solid #111111
Radius
56px
Padding
clamp(1rem, 2vw, 1.5rem)
Shadow
none
Utility trust chip
Base Attributes
Background
rgba(89, 182, 76, 0.08)
Text
#59B64C
Border
1px solid rgba(89, 182, 76, 0.18)
Radius
999px
Padding
0.45rem 0.8rem

Image direction

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

Role
supportive
Media types
  • -
    product screenshot
  • -
    lightweight portrait
  • -
    operational embed
Subject patterns
  • -
    clean screenshots inside white cards with room to breathe
  • -
    small human signals used as proof rather than as the hero
  • -
    tools and embeds framed like first-class content blocks
Composition logic
  • -
    Keep imagery secondary to type scale.
  • -
    Use white shells and thin borders around media.
  • -
    Preserve wide margins around any product or scheduling artifact.
Treatment rules
  • -
    Stay restrained and airy.
  • -
    Let black pills and green details do the signaling.
  • -
    Avoid image clutter or saturated collage behavior.
Generation cues
  • -
    Describe white space, border softness, and the scale relationship to the headline.
  • -
    Ask for minimal but crisp product scenes rather than decorative lifestyle photography.
  • -
    Frame utility widgets with the same radii and restraint as the rest of the system.
Avoid
  • -
    No oversized gradients.
  • -
    No heavy drop shadows.
  • -
    No dense illustration fields.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not flood the layout with many equal-weight cards.
  • -
    Do not introduce glossy gradients, glass panels, or rich color backgrounds.
  • -
    Do not reduce the pill language into standard small-radius buttons.
  • -
    Do not let utility widgets visually outrun the main headline.