Refto
TypoTab

TypoTab

TypoTab, the ultimate AI writing assistant for macOS. Automate writing, generate content, and refine grammar or tone—works on any app for an efficient workflow.

InteractiveGridScrolling AnimationDesktop AppAiBig Background ImageProductLightClean
4.0
14
Visits
Visit

Available Pages

Home

Version History

Design Analysis

TypoTab Home design analysis

Build for a cheerful consumer writing tool with a strong first-screen personality. Let the hero feel bright, buoyant, and instantly legible. Keep secondary pages calmer and cleaner, but still clearly part of the same fri...

Key Takeaways

  • Build for a cheerful consumer writing tool with a strong first-screen personality.
  • Let the hero feel bright, buoyant, and instantly legible.
  • Keep secondary pages calmer and cleaner, but still clearly part of the same friendly system.
  • Use one large product frame floating inside a bright sky-blue environment.
  • Support the hero with cloud forms and a few simple decorative accents.
  • Below the fold, move to soft white cards with clean UI crops and large preview media.

Overview

  • Build for a cheerful consumer writing tool with a strong first-screen personality.
  • Let the hero feel bright, buoyant, and instantly legible.
  • Keep secondary pages calmer and cleaner, but still clearly part of the same friendly system.

Image Direction

  • Use one large product frame floating inside a bright sky-blue environment.
  • Support the hero with cloud forms and a few simple decorative accents.
  • Below the fold, move to soft white cards with clean UI crops and large preview media.

Colors

  • Use bright sky blue as the main hero color.
  • Keep white prominent for clouds, header pills, and the calm field below.
  • Use near-black for the primary CTA and body text.

Typography

  • Use a rounded display sans for the hero and big section titles.
  • Keep the body voice simple and approachable.
  • Let the type feel friendly instead of precise or severe.

Design.md

System Overview

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

TypoTab Design Language

A bright consumer writing-tool system with a sky-blue hero, rounded display typography, and soft white feature surfaces.

Playful, bright, and easygoing.

Primary mode: lightconsumer writing softwareui-rich

Theme

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

Visual atmosphere
Summary
Playful, bright, and easygoing.
Density
4
Variance
4
Motion
2
Signals
sky-blue hero · cloud framing · rounded display type · soft white cards

Colors

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

Palette colors
Sky Blue
#1999FF
Pure White
#FFFFFF
Ink Black
#1D1D1F
Soft Card White
#F9FBFF
Light Border
#E7EEF7
Usage rules
Use blue most aggressively in the hero and much more lightly below it.
Keep white surfaces clean and uncluttered.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4rem, 7vw, 6rem)
card_padding
1.5rem
hero_gap
2rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
20px
media
24px

Typography Families

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

Display
"Nunito Variable"
rounded display sans
Body
"Nunito Variable"
friendly UI sans
Mono
"SF Mono"
minimal support mono

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.5rem, 6vw, 5.8rem)/—
Display
H2
clamp(2rem, 3vw, 3rem)/—
H2
Body
1rem/—
Body
Label
0.875rem/—
Label

Typography Rules

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

Rules
Keep the display voice large, rounded, and cheerful. · Let body text stay simple and clean.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Center the hero and let one oversized product frame sit inside a decorative blue environment.
Transition to calmer white content bands below the hero.
Use a timeline for release notes rather than dense log tables.

Component Preview

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

Buttons primary
Base Attributes
Background
#000000
Text
#FFFFFF
Border
none
Radius
{tokens.radii.control}->999px
Padding
1rem 1.75rem
Min height
56px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#1999FF
Border
none
Radius
{tokens.radii.control}->999px
Padding
0.65rem 1rem
Min height
33px
Shadow
none
Typography
label
Cards default
Feature Card
Component preview content
Base Attributes
Background
#F9FBFF
Text
#1D1D1F
Border
1px solid #E7EEF7
Radius
{tokens.radii.component}->20px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#FFFFFF
Height
35px
Active text
#FFFFFF
Item padding
0.4rem 0.8rem
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
  • -
    browser mockup
  • -
    cloud-backed hero art
  • -
    timeline preview
Subject patterns
  • -
    single large product frame in a bright sky field
  • -
    soft cropped UI previews in white cards
Composition logic
  • -
    Let the hero feel airy and celebratory, with clouds supporting the frame.
  • -
    Simplify sharply below the fold into white card systems.
Treatment rules
  • -
    Keep edges rounded and colors clean.
  • -
    Use decorative stars or cloud elements only in the hero environment.
Generation cues
  • -
    Prompt for a bright blue hero with rounded white typography and a floating product frame.
  • -
    Describe the product visuals as clean and friendly rather than technical.
Avoid
  • -
    No gritty realism.
  • -
    No serious enterprise styling.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No heavy dark shell below the hero.
  • -
    No severe typography.
  • -
    No muddy neutral palette.