UserJot is feedback board software for SaaS teams. Beautiful boards where users submit ideas and vote, roadmaps that sync automatically, and changelogs that write themselves.
Design Analysis
This design language is for a transparent SaaS product that proves itself by showing the actual interface. It uses a white canvas, compact black pill actions, warm orange signals, and large framed product-window previews...
This design language is for a transparent SaaS product that proves itself by showing the actual interface. It uses a white canvas, compact black pill actions, warm orange signals, and large framed product-window previews. The page should feel calm and product-led. Copy introduces the promise, and the screenshot or terminal preview provides the proof.
Use white as the default canvas. Use F8F7F5 for preview backplates and soft bands. Use 282624 for headings and 474645 for body copy. Use 171717 for primary CTAs. Orange FF7A59 should stay editorial: feature eyebrows, announcement labels, command accents, and small product signals. Do not use it as a broad page background.
Use Inter or a system grotesk. Headings are medium weight, not heavy: hero text around 44px / 48px, section titles around 40px / 44px, and body copy around 18px / 28px. Use uppercase orange eyebrows for feature categories. Use mono text only in terminal or agent preview surfaces.
Use a centered content width around 992px, with hero text left-aligned. Lead with copy and CTAs, then show a large product-frame preview below. Repeat this rhythm across feature pages. Product windows should be large enough to inspect. They are proof, not decoration. Keep surrounding whitespace generous and avoid splitting the hero into many columns.
Core identity and authoring metadata from the refto.one design model.
A calm SaaS product language with warm off-white spacing, black pill actions, orange editorial signals, and large framed product-window previews.
Transparent, calm, product-led, and editorially restrained.
Fields outside the primary renderer remain visible here as structured fallback content.
Primitive palettes and resolved token colors for the active preview mode.
Spacing scales rendered as tokens with a simple length specimen.
Corner radii tokens with a live surface sample.
Font families from the current design YAML, including fallback stacks and usage character.
Top-level typography scale rendered as live text specimens.
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 48px |
section_title | 44px |
subhead | 38px |
body | 28px |
control | 20px |
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
heading | 500 |
card_title | 600 |
body | 400 |
control | 500 |
Fields outside the primary renderer remain visible here as structured fallback content.
Border tokens with resolved values.
Shadow tokens with resolved values and shadow samples where applicable.
Motion tokens rendered as resolved values for timing and personality.
Resolved border token values.
| Property | Value |
|---|---|
hairline | 1px solid #E8E5E1 |
soft | 1px solid rgba(232, 229, 225, 0.80) |
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
preview | 0 24px 80px rgba(40, 38, 36, 0.10) |
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 150ms |
duration_base | 200ms |
easing | cubic-bezier(.4, 0, .2, 1) |
Low-complexity component tokens rendered as design-system specimens.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Compact list of patterns the design system explicitly avoids.