Overview
Build a service-page system that feels clear, dependable, and quietly premium. A clean Webflow-operator system built from white space, black call-to-action blocks, blue atmospheric blur, and oversized case panels.
Available Pages
Version History
Workflow Collections
Design Analysis
Div Block Studio Home design analysis
Build a service-page system that feels clear, dependable, and quietly premium. A clean Webflow-operator system built from white space, black call-to-action blocks, blue atmospheric blur, and oversized case panels.
Image Direction
Use large rounded case-study panels, site mockups, and soft blur atmospherics. Proof should feel specific and dimensional without turning glossy.
Colors
White and black do most of the work. Blue and lavender should show up as atmospheric proof-stage color, not as default copy or navigation color.
Typography
Use a strong direct sans. The voice should feel execution-focused and commercially literate, not whimsical or overly editorial.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Blurred Operator Portfolio
A clean Webflow-operator system built from white space, black call-to-action blocks, blue atmospheric blur, and oversized case panels.
practical, polished, and quietly sales-led
Primary mode: lightdesign and Webflow studio marketingservice-portfolio
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
practical, polished, and quietly sales-led
Density
4
Variance
3
Motion
2
Signals
white space · black CTA blocks · blue blur atmospherics · large rounded case panels
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Operator Black
#111111
Studio White
#FFFFFF
Cloud Blue
#8ED0FF
Lavender Blue
#7A75FF
Moss Field
#6D8A5D
Soft Border
#E9E9E9
Body Gray
#565656
Usage rules
Keep most of the interface white so the case-study panels and blue blur can stage the energy.
Black should own the decision points and strongest headlines.
Use blur and gradient color as atmosphere inside or behind proof, not on top of copy.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
96px
Token Radii
Corner radii tokens with a live surface sample.
sm
12px
md
18px
lg
28px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
high-clarity agency headline voice
Body
Inter
plainspoken operator copy voice
Mono
IBM Plex Mono
tiny support label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.1rem/—
Display
H2
2.3rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use a bold sans hierarchy and keep the copy direct. · Let large case-study cards deliver the richness rather than adding typographic flourish. · Use small labels sparingly and keep them secondary to the main proposition.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
160ms-240ms
Easing
cubic-bezier(.22,.8,.2,1)
Spring
stiffness 98, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 160ms-240ms |
easing | cubic-bezier(.22,.8,.2,1) |
spring | stiffness 98, damping 18 |
Layout Principles
Open with plainspoken operator messaging, then use large image-heavy case panels to prove the promise.
Let the left navigation feel like a stable table of contents for a long sales page.
Keep white breathing room around every dense proof panel.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#111111
Text
#FFFFFF
Border
1px solid #111111
Radius
12px
Padding
12px 20px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#F4F4F4
Text
#111111
Border
1px solid #F4F4F4
Radius
12px
Padding
12px 20px
Min height
44px
Shadow
none
Typography
body
Cards case study
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.08)
Radius
28px
Padding
24px
Shadow
0 18px 40px rgba(17,17,17,0.08)
Cards info
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E9E9E9
Radius
18px
Padding
24px
Shadow
0 10px 24px rgba(17,17,17,0.04)
Navigation side link
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#111111
Active text
#111111
Item padding
8px 0px
Item radius
0px
Badges tag
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E9E9E9
Radius
999px
Padding
8px 12px
Shadow
none
Inputs field
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E9E9E9
Radius
12px
Padding
12px 16px
Min height
44px
Placeholder
rgba(17,17,17,0.42)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -case-study panel
- -web mockup
- -soft blur atmosphere
Subject patterns
- -large rounded project cards, device mockups, and cool gradient or blur backdrops
Composition logic
- -Make case-study panels the dominant proof surfaces.
- -Use blur as a halo or backdrop, not as the surface itself.
Treatment rules
- -Keep black CTA blocks crisp against white space.
- -Use large card radii only on the major proof containers.
Generation cues
- -clean white agency site, big rounded case study cards, blue blur background
Avoid
- -No tiny cramped proof panels.
- -No weak gray text on white.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not make the CTA system soft gray or low-contrast.
- -Do not flatten the case-study panels into generic white cards.
- -Do not let the atmospheric blur sit behind body text where it hurts legibility.