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
0
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.
SpacePlay/Pause←→Seek 1sShift←→Seek 10s