Refto
Keeby

Keeby

Satisfying mechanical keyboard sounds for your Mac. Spatial audio, reactive visualizer, customizable switch profiles.

InteractiveHorizontal LayoutScrolling AnimationDesktop AppGradientTechnologyUnusual LayoutBig Background ImageProductLightClean
4.0
22
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Keeby Home design analysis

Build for a consumer Mac utility with a lot of confidence in one single demo scene. Keep the page visually sparse. Empty space is part of the product story. Let the hero feel playful and tangible rather than technical or...

Key Takeaways

  • Build for a consumer Mac utility with a lot of confidence in one single demo scene.
  • Keep the page visually sparse. Empty space is part of the product story.
  • Let the hero feel playful and tangible rather than technical or enterprise-like.
  • Use one oversized Mac or desktop scene as the main visual anchor.
  • Keep the mockup warm, with orange-tinted wallpaper energy and translucent floating menus.
  • Allow small handwritten or sketched cues, but only as light personality markers.

Overview

  • Build for a consumer Mac utility with a lot of confidence in one single demo scene.
  • Keep the page visually sparse. Empty space is part of the product story.
  • Let the hero feel playful and tangible rather than technical or enterprise-like.

Image Direction

  • Use one oversized Mac or desktop scene as the main visual anchor.
  • Keep the mockup warm, with orange-tinted wallpaper energy and translucent floating menus.
  • Allow small handwritten or sketched cues, but only as light personality markers.

Colors

  • Use a pale warm gray as the global page field.
  • Keep text and the main CTA close to black.
  • Use white for utility controls and support surfaces.

Typography

  • Use rounded sans-serif typography throughout.
  • Make the headline feel bold, blunt, and friendly.
  • Keep the rest of the type system quiet so the big hero can breathe.

Design.md

System Overview

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

Keeby Design Language

A sparse product-marketing system that pairs oversized warm device mockups with rounded utility pills and one strong black CTA.

Playful, spacious, and warm.

Primary mode: lightconsumer Mac utilityui-rich

Theme

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

Visual atmosphere
Summary
Playful, spacious, and warm.
Density
2
Variance
4
Motion
2
Signals
huge empty field · orange warmth · rounded SF Pro voice · annotation-like accents

Colors

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

Palette colors
Warm Fog
#F5F5F5
Graphite
#111111
Keeby Orange
#FF922E
Soft White
#FFFFFF
Muted Gray
#6A6A6A
Usage rules
Keep the field pale and uncluttered.
Use orange as warmth and personality, not as a full-page fill.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 9vw, 8rem)
card_padding
1.5rem
hero_gap
2rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
20px
support_card
20px

Typography Families

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

Display
"SF Pro Rounded"
friendly rounded grotesk
Body
"SF Pro Rounded"
soft utility sans
Mono
"SF Mono"
minimal support mono

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.4rem, 6vw, 5.6rem)/—
Display
H2
clamp(1.5rem, 2vw, 2rem)/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Keep headlines bold, rounded, and compact. · Let body copy stay simple and lightly colored.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(0.22, 1, 0.36, 1)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(0.22, 1, 0.36, 1)

Layout Principles

Let one oversized product stage dominate the first screen.
Use asymmetry: large device left, focused copy and CTA right.
Keep support content narrow, centered, and stacked.

Component Preview

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

Buttons primary
Base Attributes
Background
linear-gradient(180deg, #2A2A2A 0%, #0A0A0A 100%)
Text
#FFFFFF
Border
1px solid rgba(255, 255, 255, 0.08)
Radius
{tokens.radii.control}->999px
Padding
1rem 1.75rem
Min height
44px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#5C5C5C
Border
none
Radius
{tokens.radii.control}->999px
Padding
0.8rem 1.25rem
Min height
40px
Shadow
none
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid rgba(0, 0, 0, 0.04)
Radius
{tokens.radii.support_card}->20px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#5C5C5C
Height
40px
Active text
#111111
Item padding
0.8rem 1.25rem
Item radius
{tokens.radii.control}->999px

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
supportive
Media types
  • -
    desktop mockup
  • -
    glass overlay
  • -
    warm wallpaper render
Subject patterns
  • -
    one oversized laptop frame
  • -
    floating utility panels inside the stage
Composition logic
  • -
    Leave large surrounding negative space so the demo object feels oversized.
  • -
    Keep orange warmth concentrated inside the mockup rather than spread across the whole page.
Treatment rules
  • -
    Favor soft gradients and translucent overlays over hard technical diagramming.
  • -
    Use occasional handwritten or sketched cues sparingly.
Generation cues
  • -
    Prompt for a warm desktop scene with translucent menus and a centered Mac frame.
  • -
    Describe the scene as soft, playful, and product-demonstrative rather than illustrative.
Avoid
  • -
    No full-bleed photo backdrops.
  • -
    No corporate flat-vector explainer art.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No dense hero copy blocks.
  • -
    No enterprise dashboard framing.
  • -
    No multicolor palette beyond black, white, warm gray, and orange.