rpiv-pi

Overview

rpiv-pi is a design system for an AI-powered coding agent pipeline that transforms abstract development tasks into structured research, design, and implementation artifacts. The brand embodies "Technical Wabi-Sabi"—a philosophy that celebrates the beauty of imperfection, precision, and natural materials. The aesthetic draws from Japanese craftsmanship traditions (washi paper, ink, natural dyes) merged with monospace typography and minimal geometric forms. The UI evokes a sense of calm clarity: users feel guided through complexity without being overwhelmed. The color palette—deep charcoal (#1c1a17), warm sage (#8a9580), earthy ochre (#a8896c), and cream washi (#ede6d3)—creates an atmosphere of thoughtful, deliberate work. The brand personality is precise yet approachable: never breathless, always grounded. Example sentence in voice: "Start from anything—a vague idea, a messy note—and the pipeline narrows it into a six-step artifact chain, each step a decision point."

Colors

The color system is rooted in natural, muted earth tones that evoke handmade paper and traditional ink. Primary (#8a9580, sage green) is the accent color used on interactive elements, links, and focus states—it represents growth and clarity within the pipeline. Secondary (#a8896c, ochre) provides warmth and is reserved for supporting accents and highlights. Tertiary (#b04a3a, rust-red) is the alert color for errors and critical states. The surface stack uses deep charcoal (#1c1a17) as the base, with raised variants (#252220, #2d2925) creating subtle depth through 1px borders at rgba(0, 0, 0, 0.15) opacity. On-surface text is cream washi (#ede6d3) at 100% opacity for primary content, with muted variants (#a8a29e) for secondary information. All interactive elements use a 0.6s cubic-bezier(0.

Typography

The type system pairs monospace headings (Berkeley Mono / JetBrains Mono at 400 weight, -0.01em letter-spacing) with serif body copy (Iowan Old Style / Georgia at 400 weight, 1.65 line-height). Display (96px, 105px line-height) anchors hero sections with architectural presence. Headline-lg (40px) and headline-md (28px) structure content hierarchy. Body-lg (18px, 30px line-height) and body-md (16px, 26px line-height) maintain readability at 64ch max-width. Labels (13px and 11px) use monospace with 0.18em letter-spacing for UI chrome and metadata. All serif text uses -webkit-font-smoothing: antialiased and text-rendering: optimizeLegibility for crisp rendering. Monospace headings receive a subtle text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) when overlaid on busy backgrounds (e.g., hero section

Layout

The layout uses a 12-column fluid grid with a fixed max-width of 1100px (1200px on screens ≥1200px). Padding is 24px on mobile/tablet, 32px on desktop (using CSS custom properties --space-5 and --space-6). Main sections use 96px vertical padding (--space-9) on desktop, 48px (--space-7) on mobile, creating a rhythm that breathes. The container is centered with margin: 0 auto. White-space is semantic: 64px (--space-8) separates major sections, 24px (--space-5) separates cards within a section, 12px (--space-3) separates inline elements. The gutter (24px) is used consistently for horizontal spacing between grid items. All spacing values are multiples of 4px (the unit), ensuring a coherent scale. Sections with id attributes receive scroll-margin-top: 64px for anchor navigation.

Elevation & Depth

Depth is conveyed through subtle layering rather than aggressive shadows. The base layer (Level 1) is the surface background (#1c1a17) with no shadow. Level 2 (cards, containers) uses a 1px border stack: top/left at outline (#2e2b27), bottom at outline-variant (#3a3631), creating a beveled effect. A radial gradient overlay (radial-gradient(1200px 200px at 30% 0%, rgba(168, 137, 108, 0.04), transparent 60%)) adds subtle ochre light from the top-left, and a second gradient (radial-gradient(800px 200px at 80% 100%, rgba(138, 149, 128, 0.03), transparent 60%)) adds sage light from the bottom-right

Shapes

The shape philosophy is "Architectural Precision with Craft Softness"—corners are minimal and intentional, never rounded to the point of softness. Border-radius uses a 2px base (--radius-sm) for buttons, inputs, and cards, creating a subtle break from perfect rectangles without appearing organic. Chips and badges use 3px (--radius-md) for slightly more visual distinction. Full-width elements (dividers, rules) have 0px radius. The 2px radius is chosen to echo the 1px border weight, creating a proportional relationship: a 1px border with 2px radius feels deliberate, like a precisely cut edge. Al

Components

Action Elements Buttons use a 40px height with 8px vertical and 16px horizontal padding, set in label-md (13px monospace). Primary buttons (#8a9580 background, #1c1a17 text) have a 1px border matching the background. On hover, the background inverts to #1c1a17 with #8a9580 text and border, creating a toggle effect. Secondary buttons are transparent with a 1px #8a9580 border and #8a9580 text, inverting on hover to surface-container-high (#3a3631) background with outline-variant border. All button transitions use 0.6s cubic-bezier(0.23, 0.71, 0.27, 0.98) for a deliberate, unhurried feel. Ghost buttons have no border or background, only text color, and transition text color on hover.

Containers & Surfaces Cards use surface-container-low (#252220) background with a 1px border stack (t

Do's and Don'ts

**Do**

• Do use the sage primary (#8a9580) sparingly on CTAs and focus states—it's the only bright accent and should draw the eye.
• Do maintain 1px borders on all cards and containers; they define the architectural precision of the system.
• Do use the serif font (Georgia, Iowan Old Style) for body copy and the monospace font (Berkeley Mono, JetBrains Mono) for headings and UI labels—never reverse these roles.
• Do apply the radial gradient overlay (ochre + sage light) to cards to create subtle depth without harsh shadows.
• Do use 0.6s cubic-bezier(0.23, 0.71, 0.27, 0.98) transitions on all interactive color and border changes for a deliberate, unhurried feel.
• Do respect the 4px spacing unit; all padding, margins, and gaps should be multiples of 4px (4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192).
• Do use the full Material 3 color token stack (surface-container-lowest through surface-container-highest) to create subtle visual hierarchy without introducing new colors.

**Don't**

• Don't use rounded corners larger than 2px on buttons or inputs; the system prioritizes architectural precision over organic softness.
• Don't apply box-shadow: 0 8px 32px or other aggressive shadows; use the 1px border stack and radial gradient overlay instead.
• Don't introduce new accent colors; the sage (#8a9580), ochre (#a8896c), and rust (#b04a3a) palette is complete and intentional.
• Don't use the serif font for headings or the monospace font for body copy; the pairing is deliberate and should not be reversed.
• Don't apply transitions shorter than 0.32s or longer than 0.6s; the cubic-bezier(0.23, 0.71, 0.27, 0.98) easing is the only approved timing function.
• Don't use pure white (#ffffff) or pure black (#000000) anywhere in the UI; all text and backgrounds use the defined color tokens.
• Don't add blur, backdrop-filter, or glassmorphism effects; clarity and precision are core to the brand aesthetic.