Refto
Kaiunta

Kaiunta

Kaiunta offers anonymous audio feedback with no surveys, forms, or friction, giving people a real voice inside teams and organizations.

HrSaasCommunication
3.0
1
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Kaiunta Home design analysis

Build a warm utility shell that feels tactile and lightweight rather than polished and corporate. Let typography and button silhouettes carry personality before introducing graphic effects. Keep the interaction model obv...

Key Takeaways

  • Build a warm utility shell that feels tactile and lightweight rather than polished and corporate.
  • Let typography and button silhouettes carry personality before introducing graphic effects.
  • Keep the interaction model obvious and uncluttered.
  • Use sparse imagery, diagrams, or prop-like product shots instead of dense visual noise.
  • Keep the scene feeling tactile and calm.
  • Base the shell on F7F4EE and keep 1A1A1A as the primary reading color.

Overview

  • Build a warm utility shell that feels tactile and lightweight rather than polished and corporate.
  • Let typography and button silhouettes carry personality before introducing graphic effects.
  • Keep the interaction model obvious and uncluttered.

Image Direction

  • Use sparse imagery, diagrams, or prop-like product shots instead of dense visual noise.
  • Keep the scene feeling tactile and calm.

Colors

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

Typography

  • Use Courier Prime as the display voice. It should read as assertive display sans.
  • Use Courier Prime 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.

Warm Paper Monospace Feedback Tool

A warm paper editorial product shell with typewriter-style display text, hairline dividers, tiny uppercase nav, and only a few dense black controls for commitment moments.

warm, conversational, and lightly retro

Primary mode: lightcommunication tool marketingui-rich

Theme

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

Visual atmosphere
Summary
warm, conversational, and lightly retro
Density
3
Variance
3
Motion
2
Signals
primary background #F7F4EE · primary action #1A1A1A · display font Courier Prime · body font Courier Prime

Colors

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

Palette colors
Primary
#1A1A1A
Secondary
#F7F4EE
Neutral
#F7F4EE
Surface
#F7F4EE
On Surface
#1A1A1A
Usage rules
Keep #1A1A1A reserved for intentional emphasis.
Use #F7F4EE and #D9D2C7 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
Courier Prime
assertive display sans
Body
Courier Prime
monospace utility body

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 roomy paper-like sections and clear left-to-right action flow.
Keep modules readable without relying on card-heavy nesting.

Component Preview

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

Buttons primary
Base Attributes
Background
#1A1A1A
Text
#F7F4EE
Border
1px solid #1A1A1A
Radius
999px
Padding
0 32px
Min height
52px
Shadow
none
Font family
"Courier Prime", monospace
Font size
11.5px
Font weight
400
Letter spacing
0.08em
Text transform
uppercase
Specimen label
Start free
Buttons secondary
Base Attributes
Background
transparent
Text
#444444
Border
1px solid #E0DDD6
Radius
999px
Padding
0 32px
Min height
52px
Shadow
none
Font family
"Courier Prime", monospace
Font size
11.5px
Font weight
400
Letter spacing
0.08em
Text transform
uppercase
Specimen label
See how it works
Cards default
Pricing Block
Component preview content
Base Attributes
Background
transparent
Text
#444444
Border
1px solid #E0DDD6
Radius
0px
Padding
24px
Min width
320px
Shadow
none
Specimen label
Pricing Block
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#6A665F
Height
36px
Active text
#1A1A1A
Item padding
0 12px
Item radius
0px
Specimen label
Get Started
Inputs default
Base Attributes
Background
transparent
Text
#444444
Placeholder color
#444444
Border
1px solid transparent
Radius
50%
Padding
0
Min height
70px
Min width
70px
Outline
2px solid #1A1A1A
Outline offset
-8px
Specimen label
Record

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.