Refto
Rig

Rig

Rig is a local-first AI coding assistant that executes entirely on your machine with no API calls, usage caps, or cloud dependency.

InteractiveDevelopmentGridLarge TypeIllustrativeDesktop AppAiWhitelistAnimationDarkCleanTransitions
4.0
4
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Rig 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 111111 and keep F0EDE6 as the primary reading color.
  • Use D55C33 as the main emphasis color and keep it scarce enough to preserve hierarchy.
  • Let 181818 and 343434 separate secondary surfaces without introducing noisy ornament.

Typography

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

Red Signal Local-First Developer System

A dark, forceful developer brand with bone text, chamfered controls, red-orange signal color, and grid-backed product proof.

precise, technical, and signal-driven

Primary mode: darkdeveloper tools marketingmotion-rich

Theme

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

Visual atmosphere
Summary
precise, technical, and signal-driven
Density
3
Variance
3
Motion
2
Signals
primary background #111111 · primary action #D55C33 · display font Chalet · body font Instrument Sans

Colors

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

Palette colors
Primary
#D55C33
Secondary
#F0EDE6
Neutral
#111111
Surface
#181818
On Surface
#F0EDE6
Usage rules
Keep #D55C33 reserved for intentional emphasis.
Use #181818 and #343434 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
Chalet
assertive display sans
Body
Instrument Sans
practical UI sans

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 strong section rhythm with a readable hero, proof band, and deeper detail modules.
Let cards read as functional containers rather than soft consumer tiles.
Reserve denser grid moments for product explanation or comparisons.

Component Preview

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

Buttons primary
Base Attributes
Background
#F24F34
Text
#111111
Border
none
Radius
0px
Clip path
polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)
Padding
16px 32px
Min height
52px
Shadow
none
Font family
"Instrument Sans", system-ui, sans-serif
Font size
13px
Font weight
700
Letter spacing
0.08em
Text transform
uppercase
Specimen label
Join Waitlist
Buttons secondary
Base Attributes
Background
transparent
Text
#F0EDE6
Border
2px solid rgba(240, 237, 230, 0.18)
Radius
0px
Clip path
polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)
Padding
16px 32px
Min height
52px
Shadow
none
Font family
"Instrument Sans", system-ui, sans-serif
Font size
13px
Font weight
700
Letter spacing
0.08em
Text transform
uppercase
Specimen label
Our Approach
Cards default
Feature Card
Component preview content
Base Attributes
Background
#181818
Text
#F0EDE6
Border
1px solid rgba(240, 237, 230, 0.12)
Radius
0px
Padding
1.25rem
Min width
280px
Shadow
none
Specimen label
Feature Card
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#B8B1A5
Clip path
polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)
Height
52px
Active text
#F0EDE6
Item padding
0.3rem 0.45rem
Item radius
0px
Specimen label
Get Early Access
Inputs default
Base Attributes
Background
rgba(240, 237, 230, 0.04)
Text
#F0EDE6
Placeholder color
rgba(240, 237, 230, 0.55)
Border
1px solid rgba(240, 237, 230, 0.15)
Radius
0px
Clip path
polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)
Padding
13.6px 19.2px
Min height
44px
Font family
"Instrument Sans", system-ui, sans-serif
Font size
12.8px
Specimen label
you@company.com

Spatial layers

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

Role
supportive
Rules
  • -
    Treat spatial layers as supportive atmosphere or proof framing.
  • -
    Maintain full legibility when the 3D layer is absent.

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.