Refto
Openable

Openable

Openable helps users import, run, and edit AI-generated projects in Cursor without Node.js, terminal commands, or configuration.

DevelopmentIllustrativeWeb AppGradientAiWhitelistGlassBig Background VideoDarkSingle Page
3.0
3
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Openable Home design analysis

Build a technical product shell with one clear signal accent and a disciplined content hierarchy. Let the product frame, proof panels, or code-adjacent motifs carry credibility instead of decorative gradients. Use motion...

Key Takeaways

  • Build a technical product shell with one clear signal accent and a disciplined content hierarchy.
  • Let the product frame, proof panels, or code-adjacent motifs carry credibility instead of decorative gradients.
  • Use motion as a guide for sequence and focus, not as ambient noise.
  • Favor product screenshots, diagrams, or restrained interface mockups over generic lifestyle photography.
  • When using illustration or spatial motifs, keep them subservient to legibility and proof.
  • Prefer product proof and interface framing over generic hero stock.

Overview

  • Build a technical product shell with one clear signal accent and a disciplined content hierarchy.
  • Let the product frame, proof panels, or code-adjacent motifs carry credibility instead of decorative gradients.
  • Use motion as a guide for sequence and focus, not as ambient noise.

Image Direction

  • Favor product screenshots, diagrams, or restrained interface mockups over generic lifestyle photography.
  • When using illustration or spatial motifs, keep them subservient to legibility and proof.
  • Prefer product proof and interface framing over generic hero stock.

Colors

  • Base the shell on 101010 and keep F2ECE3 as the primary reading color.
  • Use C17812 as the main emphasis color and keep it scarce enough to preserve hierarchy.
  • Let 1A1A1A and 2B2B2B separate secondary surfaces without introducing noisy ornament.

Typography

  • Use Host Grotesk Variable as the display voice. It should read as assertive display sans.
  • Use Host Grotesk Variable for body copy, controls, and supporting metadata.
  • Let scale and spacing create emphasis before adding extra font families or decorative effects.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Amber Developer Runtime Landing

A dark developer-marketing system with warm amber signals, dense charcoal surfaces, and calm product framing around a centered application demo.

precise, technical, and signal-driven

Primary mode: darkdeveloper tools marketingui-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
precise, technical, and signal-driven
Density
3
Variance
3
Motion
2
Signals
primary background #101010 · primary action #C17812 · display font Host Grotesk Variable · body font Host Grotesk Variable

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Primary
#C17812
Secondary
#F1ECE3
Neutral
#101010
Surface
#1A1A1A
On Surface
#F2ECE3
Usage rules
Keep #C17812 reserved for intentional emphasis.
Use #1A1A1A and #2B2B2B to separate layers without over-framing them.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.5rem
section_gap
clamp(4rem, 8vw, 7rem)

Token Radii

Corner radii tokens with a live surface sample.

control
14px
card
18px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Host Grotesk Variable
assertive display sans
Body
Host Grotesk Variable
practical UI sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
4.5rem/—
Display
H2
2.75rem/—
H2
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Keep the display voice dominant in headlines only. · Use the body family consistently for UI and supporting text.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
150ms-220ms
Easing
cubic-bezier(.3,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration150ms-220ms
easingcubic-bezier(.3,0,.2,1)

Layout Principles

Use strong section rhythm with a readable hero, proof band, and deeper detail modules.
Let cards read as functional containers rather than soft consumer tiles.
Reserve denser grid moments for product explanation or comparisons.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#C17812
Text
#F8F1E5
Border
none
Radius
999px
Padding
0 18px
Min height
36px
Shadow
0 0 0 1px rgba(255,255,255,0.02), 0 10px 30px rgba(193,120,18,0.18)
Font family
"Inter", system-ui, sans-serif
Font size
12px
Font weight
500
Specimen label
Join waiting list
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.02)
Text
rgba(242,236,227,0.9)
Border
1px solid rgba(255,255,255,0.1)
Radius
999px
Padding
0 16px
Min height
36px
Shadow
none
Font family
"Inter", system-ui, sans-serif
Font size
12px
Font weight
400
Specimen label
Overview
Cards default
Feature Panel
Component preview content
Base Attributes
Background
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)), #1A1A1A
Text
#F2ECE3
Border
1px solid rgba(255,255,255,0.06)
Radius
18px
Padding
22px
Min width
280px
Shadow
0 18px 50px rgba(0,0,0,0.28)
Specimen label
Feature Panel
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
rgba(255,255,255,0.03)
Text
rgba(242,236,227,0.75)
Height
30px
Active text
#FFFFFF
Item padding
0 12px
Item radius
999px
Specimen label
Join waiting list
Inputs default
Base Attributes
Background
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015))
Text
#F2ECE3
Placeholder color
rgba(245,241,234,0.55)
Border
1px solid rgba(255,255,255,0.06)
Radius
999px
Padding
0 18px
Min height
40px
Shadow
inset 0 1px 0 rgba(255,255,255,0.03)
Font family
"Inter", system-ui, sans-serif
Font size
12px
Placeholder
Enter your email
Specimen label
Enter your email

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not promote default browser blue links into the canonical palette.
  • -
    Do not treat low-confidence DOM wrappers as polished component evidence.
  • -
    Do not add extra accent colors that were not visually supported by the source.

Related Sites