Refto
Attio

Attio

Powerful, flexible and data-driven, Attio makes it easy to build the exact CRM your business needs.

InteractiveScrolling AnimationSaasWeb AppTypographicMarketingAnimationLightClean
4.0
10
Visits
Visit

Available Pages

HomePlatform data

Design Analysis

Attio Home design analysis

Build the experience as a near-white CRM field that feels spacious, exact, and product-led. Let faint guide systems, soft product windows, and crisp black CTAs carry the structure instead of dense feature clutter. Keep t...

Key Takeaways

  • Build the experience as a near-white CRM field that feels spacious, exact, and product-led.
  • Let faint guide systems, soft product windows, and crisp black CTAs carry the structure instead of dense feature clutter.
  • Keep the control language disciplined: the site relies on rounded rectangles, not pills.
  • Use prompt bars, tabbed product windows, workflow surfaces, pricing cards, and structured proof modules as the main visual objects.
  • Keep one product artifact in focus beneath each large statement instead of stacking many equal-weight screenshots.
  • Let guide lines or dot fields remain visible around the product object so the composition still feels governed when it is sparse.

Overview

  • Build the experience as a near-white CRM field that feels spacious, exact, and product-led.
  • Let faint guide systems, soft product windows, and crisp black CTAs carry the structure instead of dense feature clutter.
  • Keep the control language disciplined: the site relies on rounded rectangles, not pills.

Image Direction

  • Use prompt bars, tabbed product windows, workflow surfaces, pricing cards, and structured proof modules as the main visual objects.
  • Keep one product artifact in focus beneath each large statement instead of stacking many equal-weight screenshots.
  • Let guide lines or dot fields remain visible around the product object so the composition still feels governed when it is sparse.

Colors

  • FBFBFB and FFFFFF should dominate the page shell and keep the system airy.
  • 242629 is the anchor for CTAs, top-banner punctuation, and strong text moments.
  • F8F9FA, E4E7EC, and D1D3D6 should define product shells, guides, and quiet outlines without turning gray into a theme.

Typography

  • Use Inter Display for hero statements and major section headlines.
  • Use Inter for body copy, controls, labels, and product-supporting text.
  • Keep the hierarchy clean and product-confident rather than editorially expressive.

Design.md

System Overview

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

Softframe Command Grid

A calm CRM marketing system built from near-white fields, faint structural guides, rounded-rectangle controls, and polished product-window surfaces.

Airy, precise, optimistic, and product-led.

Primary mode: lightCRM product marketingcontent-rich

Theme

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

Visual atmosphere
Summary
Airy, precise, optimistic, and product-led.
Density
4
Variance
5
Motion
1
Signals
near-white canvas with faint guides · Inter-style typography with blue-gray supporting copy · 10px rounded-rectangle controls instead of pills

Colors

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

Palette colors
Anchor Charcoal
#242629
Field White
#FBFBFB
Cloud Surface
#F8F9FA
Guide Gray
#E4E7EC
Outline Gray
#D1D3D6
Blue Gray
#8F99A8
Signal Blue
#266DF0
Usage rules
Keep the page predominantly near-white and let guides do the structural work.
Use charcoal for decisive actions and anchor moments, not as a page-wide theme.
Use blue-gray for calm emphasis and signal blue only for functional punctuation.

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, 7rem)
panel_padding
clamp(1rem, 2vw, 1.5rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
10px
md
16px
lg
20px
xl
24px
full
999px

Typography Families

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

Display
Inter Display
high-clarity product headline voice
Body
Inter
clean CRM and product explanation voice
Accent
Inter
compact control and metadata voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.3rem, 5.8vw, 5.4rem)/—
Display
H2
clamp(2rem, 3vw, 3rem)/—
H2
H3
clamp(1.2rem, 1.8vw, 1.6rem)/—
H3
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Use the display cut of Inter for major product statements and chapter openers. · Keep supporting copy calm and readable, with blue-gray reserved for secondary emphasis. · Use compact label sizing for controls, tabs, and chips rather than oversized button text.

Borders

Border tokens with resolved values.

Fine
1px solid #E4E7EC
Control
1px solid #D1D3D6

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Borders

Resolved border token values.

PropertyValue
fine1px solid #E4E7EC
control1px solid #D1D3D6

Motion

Resolved motion token values.

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

Layout Principles

Lead with a large text statement and one quiet product object rather than with dense feature mosaics.
Keep faint dot or rule guides visible so the page feels structured even when spacious.
Use product windows, prompt bars, tab rails, and pricing cards as the main visual objects.
Treat customer proof and pricing surfaces as extensions of the product language, not as a separate brand mode.

Component Preview

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

Buttons primary
Base Attributes
Background
#242629
Text
#FFFFFF
Border
1px solid #242629
Radius
10px
Padding
0.625rem 0.75rem
Min height
36px
Buttons secondary
Base Attributes
Background
#FBFBFB
Text
#242629
Border
1px solid #D1D3D6
Radius
10px
Padding
0.625rem 0.75rem
Min height
36px
Buttons ghost nav
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#242629
Border
1px solid transparent
Radius
10px
Padding
0.625rem 0.75rem
Min height
36px
Inputs prompt field
Base Attributes
Background
#FFFFFF
Text
#242629
Border
1px solid #E4E7EC
Radius
16px
Padding
0.875rem 1rem
Min height
52px
Shadow
0 6px 18px rgba(36, 38, 41, 0.08)
Placeholder
#B5BFCC
Inputs prompt submit
Base Attributes
Background
#266DF0
Text
#FFFFFF
Border
1px solid #266DF0
Radius
12px
Padding
0.625rem
Min height
32px
Modules product window
Base Attributes
Background
#FFFFFF
Text
#242629
Border
1px solid #E4E7EC
Radius
20px
Padding
1rem
Shadow
0 10px 28px rgba(36, 38, 41, 0.06)
Modules pricing card
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#242629
Border
1px solid #E4E7EC
Radius
20px
Padding
1.25rem
Shadow
none
Modules toggle track
Base Attributes
Background
#F0F1F3
Text
#8F99A8
Border
1px solid #E4E7EC
Radius
14px
Padding
0.25rem
Shadow
none

Image direction

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

Role
supportive
Media types
  • -
    product window
  • -
    workflow surface
  • -
    pricing card
  • -
    customer proof module
Subject patterns
  • -
    soft white application windows framed inside faint guides
  • -
    prompt bars, tabs, tables, and workflow blocks shown as calm product artifacts
  • -
    structured proof modules that keep the same material language as the app surfaces
Composition logic
  • -
    Keep one primary object in focus beneath the headline.
  • -
    Leave structural guide fields visible around the product objects.
  • -
    Let blue accents stay functional and sparse.
Treatment rules
  • -
    Favor crisp white shells, thin borders, and low shadow depth.
  • -
    Use blue-gray for quiet emphasis and bright blue only for utility signals.
  • -
    Preserve rectangular discipline even when corners soften.
Generation cues
  • -
    Describe whether the object is a prompt bar, tabbed product frame, pricing stack, or workflow surface.
  • -
    Specify the amount of white space and how visible the guide pattern remains.
  • -
    Keep controls rounded but not pill-shaped.
Avoid
  • -
    No fully rounded CTA chips as the default button style.
  • -
    No noisy dashboard clutter.
  • -
    No decorative 3D or lifestyle-photo drift.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not round controls into full capsules by default.
  • -
    Do not collapse the system into a dark enterprise dashboard.
  • -
    Do not flood the page with saturated blue panels or gradient drama.
  • -
    Do not hide the guide system behind flat feature blocks.