Overview
Use a playful creative-development system: huge flexible type, centered black nav, lime membership actions, mono ticker strips, split-axis layouts, tilted resource cards, and confident light/dark mode shifts.
Osmo
Unlock the Osmo Vault packed with Webflow & HTML resources. Get exclusive access to the elements, techniques and code behind award-winning work. The toolkit for creative developers.
4.0
11
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Osmo Home design analysis
Use a playful creative-development system: huge flexible type, centered black nav, lime membership actions, mono ticker strips, split-axis layouts, tilted resource cards, and confident light/dark mode shifts.
Colors
Use off-white and soft black as the main pair. Use lime for membership and action infrastructure. Use purple for expressive emphasis and highlighted pricing. Red can appear only as handwritten annotation.
Typography
Use huge smooth sans type. Hero text can reach 100px, with mega titles around 133px. Use compact mono for ticker strips, labels, and utility metadata.
Layout
Use a persistent centered control bar. Divide hero compositions along a vertical center axis. Let cards rotate, overlap, and feel like draggable resources.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Flex Dev Toolkit
A creative developer toolkit language with giant flexible sans type, central dark nav, lime membership CTAs, mono ticker strips, split-axis layouts, tilted resource cards, and dark/light product modes.
Playful, flexible, sharp, and tool-packed.
Primary mode: mixedcreative development resourcesui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Playful, flexible, sharp, and tool-packed.
Density
5
Variance
5
Motion
4
Signals
central black nav bar · lime join button · mono ticker · oversized split headline · purple asterisk mark · tilted cards · radial tick decoration
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Off White
#F4F4F4
Soft Black
#201D1D
Lime Join
#A1FF62
Flex Purple
#6840FF
Hot Red
#F84131
Mid Gray
#818181
Usage rules
Use lime as membership/action infrastructure.
Use purple as the expressive flex accent, not as the whole palette.
Allow dark product pages, but keep the global nav consistent.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(20px, 10vw, 140px)
nav_padding
6px
section_gap
112px
card_padding
32px
button_padding
12px 22px
Token Radii
Corner radii tokens with a live surface sample.
nav
6px
button
12px
card
18px
pill
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Wide flexible sans
huge, smooth, and elastic
Body
Modern grotesk
clear platform copy
Mono
Compact mono
ticker strips, labels, and product metadata
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
100px/1
Hero
Mega
133px/1
Mega
Section
71px/1.05
Section
Product title
56px/—
Product title
Body large
35px/1.18
Body large
Label
14px/1.1
Label
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 1 |
mega | 1 |
section | 1.05 |
body_large | 1.18 |
label | 1.1 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 400 |
body | 400 |
mono | 400 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use huge display type and center-line compositions. · Use mono for ticker and utility labels only.
Borders
Border tokens with resolved values.
Split
1px solid rgba(32, 29, 29, 0.10)
Dark
1px solid rgba(244, 244, 244, 0.12)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
Card
0 20px 50px rgba(32, 29, 29, 0.18)
None
none
Borders
Resolved border token values.
| Property | Value |
|---|---|
split | 1px solid rgba(32, 29, 29, 0.10) |
dark | 1px solid rgba(244, 244, 244, 0.12) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
card | 0 20px 50px rgba(32, 29, 29, 0.18) |
none | none |
Layout Principles
Use a centered top nav as a persistent control bar.
Split hero layouts on a vertical center axis.
Let resource cards tilt and overlap for energy.
Switch confidently between light and dark product modes.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons join
Base Attributes
Background
#A1FF62
Text
#201D1D
Border
0
Radius
{tokens.radii.button}->12px
Padding
{tokens.spacing.button_padding}->12px 22px
Min height
40px
Typography
body
Buttons login
Base Attributes
Background
#4F4C4C
Text
#F4F4F4
Border
0
Radius
{tokens.radii.pill}->999px
Padding
10px 20px
Min height
40px
Cards resource
Feature Card
Component preview content
Base Attributes
Background
#201D1D
Text
#F4F4F4
Border
{tokens.borders.dark}->1px solid rgba(244, 244, 244, 0.12)
Radius
{tokens.radii.card}->18px
Padding
{tokens.spacing.card_padding}->32px
Shadow
{tokens.shadows.card}->0 20px 50px rgba(32, 29, 29, 0.18)
Transform
small rotation allowed
Cards pricing
Feature Card
Component preview content
Base Attributes
Background
#201D1D
Text
#F4F4F4
Border
0
Radius
{tokens.radii.card}->18px
Padding
52px
Shadow
none
Cards pricing highlight
Feature Card
Component preview content
Base Attributes
Background
#6840FF
Text
#F4F4F4
Border
0
Radius
{tokens.radii.card}->18px
Padding
52px
Navigation control bar
OverviewFeaturesDocs
Base Attributes
Background
#201D1D
Text
#F4F4F4
Border
0
Radius
{tokens.radii.nav}->6px
Padding
{tokens.spacing.nav_padding}->6px
Height
48px
Banners ticker
Base Attributes
Background
#A1FF62
Text
#201D1D
Min height
18px
Typography
mono
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not make the page conventionally corporate.
- -Do not remove the center-axis split or ticker details.
- -Do not make resource cards perfectly static and aligned.
- -Do not use lime as a soft pastel; it should stay bright.