Overview
Build a studio system that feels kinetic, engineered, and unmistakably motion-aware. A motion-rich studio system built from deep pine surfaces, acid-lime rectangular controls, translucent nav shells, and spatial gradient cards.
Resonance Studio
Resonance is a brand and product studio helping startups and founders create brands, products, and experiences that resonate. We combine deep AI expertise with world-class design to launch faster and smarter.
3.0
11
Visits
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
Resonance Studio Home design analysis
Build a studio system that feels kinetic, engineered, and unmistakably motion-aware. A motion-rich studio system built from deep pine surfaces, acid-lime rectangular controls, translucent nav shells, and spatial gradient...
Image Direction
Use particle fields, sampler interfaces, spatial motion surfaces, and sprint cards with controlled gradient energy. The visual story should feel studio-built, not template-polished.
Colors
Acid lime marks actions and select highlights. Pine black and off-white do the structural work, while gradient cards can vary by sprint without sacrificing readability.
Typography
Use a clean sans and let motion, spacing, and card variation deliver the personality. Small mono labels can sharpen the shell language.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Acid Pine Motion Studio
A motion-rich studio system built from deep pine surfaces, acid-lime rectangular controls, translucent nav shells, and spatial gradient cards.
kinetic, engineered, and high-contrast
Primary mode: darkcreative studio marketingmotion-studio
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
kinetic, engineered, and high-contrast
Density
4
Variance
4
Motion
4
Signals
deep pine background · acid-lime rectangles · translucent nav shell · spatial gradient sprint cards
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Acid Lime
#CBFF54
Pine Black
#112220
Off White
#EEF1EA
Sampler Gray
#4E6065
Gradient Violet
#B96FB7
Gradient Mint
#557B74
Shell Border
#31423F
Usage rules
Acid lime should signal actions and selective proof, not blanket the page.
Keep the deep pine shell visible through cards, nav, and sections so the system stays cohesive.
Gradient cards can vary by sprint, but the copy must always remain readable against them.
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
4px
md
4px
lg
20px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
studio display voice
Body
Inter
clear motion-support voice
Mono
IBM Plex Mono
tight navigation and micro-label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.2rem/—
Display
H2
2.35rem/—
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 clear modern sans and let motion, space, and color shifts add the drama. · Mono labels can sharpen navigation and utility cues. · Avoid overly thin text on gradient cards or translucent shells.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-320ms
Easing
cubic-bezier(.2,.8,.18,1)
Spring
stiffness 92, damping 17
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-320ms |
easing | cubic-bezier(.2,.8,.18,1) |
spring | stiffness 92, damping 17 |
Layout Principles
Use the translucent nav shell as a constant structural layer over a motion-heavy stage.
Alternate immersive hero or sampler moments with readable sprint cards and testimonial blocks.
Keep dark pine surfaces present even when gradients or white sections appear.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#CBFF54
Text
#112220
Border
1px solid #CBFF54
Radius
4px
Padding
12px 16px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
#112220
Text
#EEF1EA
Border
1px solid #CBFF54
Radius
4px
Padding
12px 16px
Min height
44px
Shadow
none
Typography
body
Cards sprint
Feature Card
Component preview content
Base Attributes
Background
linear-gradient(180deg, #10211F 0%, #557B74 100%)
Text
#EEF1EA
Border
1px solid rgba(238,241,234,0.08)
Radius
20px
Padding
24px
Shadow
none
Cards shell
Feature Card
Component preview content
Base Attributes
Background
rgba(17,34,32,0.8)
Text
#EEF1EA
Border
1px solid #31423F
Radius
4px
Padding
8px
Shadow
none
Navigation shell
OverviewFeaturesDocs
Base Attributes
Background
rgba(17,34,32,0.8)
Text
#EEF1EA
Active text
#EEF1EA
Item padding
6px
Item radius
4px
Badges sampler
Base Attributes
Background
#4E6065
Text
#EEF1EA
Border
1px solid transparent
Radius
4px
Padding
12px 14px
Shadow
none
Inputs field
Base Attributes
Background
#112220
Text
#EEF1EA
Border
1px solid rgba(238,241,234,0.12)
Radius
4px
Padding
12px 16px
Min height
44px
Placeholder
rgba(238,241,234,0.45)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -spatial field
- -gradient sprint card
- -testimonial shell
Subject patterns
- -particle fields, motion samplers, deep pine surfaces, and acid-lime interface accents
Composition logic
- -Use one immersive spatial moment up front, then settle into readable sprint cards and shell-based modules.
- -Let sampler buttons and nav clusters feel like part of the same engineered shell family.
Treatment rules
- -Primary CTAs stay acid-lime with dark text.
- -All shell surfaces need enough translucency and border contrast to stay visible.
Generation cues
- -deep pine motion studio, acid-lime rectangle button, translucent nav shell, gradient sprint card
Avoid
- -No soft rounded pill buttons.
- -No washed-out text on gradient or dark surfaces.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not turn the acid-lime CTA into a dark button with lime text.
- -Do not convert the nav shell into a pill or remove its translucent box quality.
- -Do not place pale text directly over gradients without enough density beneath it.