Overview
Build a system that feels like a premium interaction library rather than a generic template marketplace. A dark interaction-library system built from charcoal grid fields, bright yellow pill actions, and split light-dark collection cards.
Micro
Ready to use micro interaction library made for Webflow. Copy & paste pre-made interactions into your Webflow projects in one click.
4.0
10
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Micro Home design analysis
Build a system that feels like a premium interaction library rather than a generic template marketplace. A dark interaction-library system built from charcoal grid fields, bright yellow pill actions, and split light-dark...
Image Direction
Use card previews, grid fields, yellow beam accents, and clean interaction shelves. The visuals should feel like curated assets ready to drop into a project.
Colors
Yellow is the conversion color. Dark hero and pricing sections need crisp white text, while the lighter collection shelves should switch to obvious black copy.
Typography
Use a contemporary sans with strong clarity. The page should feel productized and modern rather than ornamental.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Luminous Grid Library
A dark interaction-library system built from charcoal grid fields, bright yellow pill actions, and split light-dark collection cards.
luminous, productized, and highly contrast-aware
Primary mode: darkdesign asset marketinglibrary-marketing
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
luminous, productized, and highly contrast-aware
Density
4
Variance
4
Motion
3
Signals
dark grid hero · yellow beam · pill buttons · light and dark collection cards
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Signal Yellow
#FFE52F
Grid Charcoal
#1A1A22
Soft White
#F5F5F2
Panel Black
#202028
Line Gray
#343440
Ink Black
#111111
Muted Light Text
#EAEAEA
Usage rules
Yellow must be the brightest note on the page and carry the conversion energy.
Dark fields need enough linework and contrast to feel intentional rather than flat.
When the page switches to white sections, use black text immediately and confidently.
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
14px
md
22px
lg
28px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
modern design-library headline voice
Body
Inter
clean support copy voice
Mono
IBM Plex Mono
small interface label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.6rem/—
Display
H2
2.4rem/—
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 sharp sans hierarchy and keep section copy direct. · Let the grid and beam effects add the mood rather than heavy typographic ornament. · Labels can go small and utilitarian inside the component library moments.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-260ms
Easing
cubic-bezier(.2,.82,.2,1)
Spring
stiffness 92, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-260ms |
easing | cubic-bezier(.2,.82,.2,1) |
spring | stiffness 92, damping 18 |
Layout Principles
Use a dark luminous hero, then contrast it with bright white catalog sections and dark pricing resets.
Treat component cards like product shelves that can switch between light and dark modes.
Keep CTA repetition strong but varied through layout and surrounding contrast, not through random color changes.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FFE52F
Text
#111111
Border
1px solid #FFE52F
Radius
999px
Padding
14px 24px
Min height
46px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
transparent
Text
#EAEAEA
Border
1px solid rgba(255,255,255,0.24)
Radius
999px
Padding
14px 24px
Min height
46px
Shadow
none
Typography
body
Cards collection light
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #E5E5E1
Radius
28px
Padding
24px
Shadow
none
Cards collection dark
Feature Card
Component preview content
Base Attributes
Background
#202028
Text
#EAEAEA
Border
1px solid #343440
Radius
28px
Padding
24px
Shadow
none
Navigation pill item
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#EAEAEA
Active text
#FFFFFF
Item padding
8px 12px
Item radius
999px
Badges beam tag
Base Attributes
Background
rgba(255,229,47,0.08)
Text
#FFE52F
Border
1px solid rgba(255,229,47,0.28)
Radius
999px
Padding
8px 14px
Shadow
none
Inputs field
Base Attributes
Background
#202028
Text
#EAEAEA
Border
1px solid #343440
Radius
22px
Padding
12px 16px
Min height
44px
Placeholder
rgba(234,234,234,0.45)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -component card
- -beam effect
- -dark grid field
Subject patterns
- -library preview cards, arrow-link buttons, yellow light streaks, and clean grid backgrounds
Composition logic
- -Let dark and light collection cards sit side by side to prove range.
- -Use beam effects as atmosphere that never overlaps body text.
Treatment rules
- -Preserve a crisp dark grid in hero and pricing sections.
- -Use yellow for primary actions and selective energy cues only.
Generation cues
- -dark grid design library, yellow pill CTA, split light dark component cards
Avoid
- -No muddy charcoal with weak contrast.
- -No square enterprise CTAs.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use black text on dark cards or pale gray text on white cards.
- -Do not make the yellow CTA tiny and visually secondary.
- -Do not remove the rounded pill language from the interaction controls.