Overview
Use a calm studio-width page with soft gray panels, practical copy, editorial commerce photography, compact buttons, and dashed portfolio frames.
Same Same Studio
We are a digital agency based in Vienna, Austria. We create scalable, user-friendly custom Shopify stores with a focus on continued data-driven optimization, acccessibility and maintenance.
5.0
6
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Same Same Studio Home design analysis
Use a calm studio-width page with soft gray panels, practical copy, editorial commerce photography, compact buttons, and dashed portfolio frames.
Colors
Use white as the page canvas and F5F5F5 for most page sections. Use 1F1F1F for text and primary CTAs. Pale lime can mark service modules; keep other tints quiet.
Typography
Use regular-weight DM Sans-style typography. Headings should feel conversational, around 42px for hero copy and 30px for section labels.
Layout
Constrain content to a centered column. Use full-width soft panels, logo chip rows, and two-column case-study grids with dashed frames.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Soft Commerce Studio
A soft e-commerce studio design language with pale gray section cards, rounded navigation, dashed portfolio frames, restrained CTAs, brand-logo chips, and editorial commerce photography.
Friendly, transparent, practical, and agency-editorial without being glossy.
Primary mode: lighte-commerce design studiocontent-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Friendly, transparent, practical, and agency-editorial without being glossy.
Density
5
Variance
3
Motion
2
Signals
soft gray panels · rounded rectangular nav · dashed case-study borders · brand logo chips · pale lime service modules
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Studio Canvas
#FFFFFF
Soft Panel
#F5F5F5
Ink
#1F1F1F
Hairline
#EEEEEE
Service Lime
#F5FFCA
Service Pink
#FBECFF
Muted Gray
#A3A3A3
Usage rules
Use soft gray as the main sectional container, not as a tiny accent.
Use dark CTAs sparingly; most controls can be white.
Let photography and client logos create visual specificity.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(20px, 7vw, 90px)
panel_padding
16px
hero_padding
16px
card_gap
10px
section_gap
12px
button_padding
7px 12px
Token Radii
Corner radii tokens with a live surface sample.
button
10px
panel
10px
card
12px
image
10px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
DM Sans
plain, rounded, and conversational
Body
DM Sans
clear agency prose
Mono
System mono
small tags and process labels
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
42px/1.12
Hero
Page title
42px/—
Page title
Section
30px/1.25
Section
Card title
20px/—
Card title
Body
16px/1.45
Body
Label
12px/1.2
Label
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 1.12 |
section | 1.25 |
body | 1.45 |
label | 1.2 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 400 |
body | 400 |
label | 400 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use regular weight and generous line-height instead of bold hierarchy. · Keep headings sentence-like and practical.
Borders
Border tokens with resolved values.
Dashed
1px dashed rgba(31, 31, 31, 0.30)
Subtle
1px solid #EEEEEE
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
Button
0 2px 4px rgba(0, 0, 0, 0.12)
None
none
Borders
Resolved border token values.
| Property | Value |
|---|---|
dashed | 1px dashed rgba(31, 31, 31, 0.30) |
subtle | 1px solid #EEEEEE |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
button | 0 2px 4px rgba(0, 0, 0, 0.12) |
none | none |
Layout Principles
Constrain the whole page into a centered studio-width column.
Use full-width soft panels instead of floating hero cards.
Place portfolio imagery in dashed frames with direct captions.
Use compact repeated rows for logos, services, and case links.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#1F1F1F
Text
#FFFFFF
Border
0
Radius
{tokens.radii.button}->10px
Padding
{tokens.spacing.button_padding}->7px 12px
Min height
34px
Shadow
{tokens.shadows.button}->0 2px 4px rgba(0, 0, 0, 0.12)
Typography
label
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#1F1F1F
Border
{tokens.borders.subtle}->1px solid #EEEEEE
Radius
{tokens.radii.button}->10px
Padding
{tokens.spacing.button_padding}->7px 12px
Min height
34px
Shadow
{tokens.shadows.button}->0 2px 4px rgba(0, 0, 0, 0.12)
Typography
label
Cards section panel
Feature Card
Component preview content
Base Attributes
Background
#F5F5F5
Text
#1F1F1F
Border
0
Radius
{tokens.radii.panel}->10px
Padding
{tokens.spacing.panel_padding}->16px
Shadow
none
Cards case study
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#1F1F1F
Border
{tokens.borders.dashed}->1px dashed rgba(31, 31, 31, 0.30)
Radius
{tokens.radii.card}->12px
Padding
10px
Shadow
none
Cards service module
Feature Card
Component preview content
Base Attributes
Background
#F5FFCA
Text
#1F1F1F
Border
0
Radius
{tokens.radii.panel}->10px
Padding
16px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#F5F5F5
Text
#000000
Height
54px
Item padding
{tokens.spacing.button_padding}->7px 12px
Item radius
{tokens.radii.button}->10px
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use glossy agency gradients.
- -Do not over-style portfolio cards with heavy shadows.
- -Do not make buttons oversized.
- -Do not remove the dashed portfolio framing.