Beanstalk

Beanstalk

The visual control plane for Clawdbot agents. Import templates, manage configurations, and share your AI agents. No more YAML editing.

3.0
3
Visits
Visit

Available Pages

Version History

Design Analysis

Beanstalk Home design analysis

Operator Glow Mesh is a dark product-marketing system that feels controlled rather than flashy. Most of the page lives inside quiet black and charcoal values, while a single green signal color marks activation, status, a...

Key Takeaways

  • Primary ( 4ADE80): action and live-state signal.
  • Secondary ( 12161A): the main raised card and control surface.
  • Tertiary ( 1D2328): secondary infrastructure surface.
  • Display: dense and direct, without decorative flourishes.
  • Body: crisp and readable, with muted secondary contrast.
  • Labels: slightly stronger weight for small UI chrome.

Overview

Operator Glow Mesh is a dark product-marketing system that feels controlled rather than flashy. Most of the page lives inside quiet black and charcoal values, while a single green signal color marks activation, status, and high-intent action.

Colors

This palette works only when restraint is preserved.

  • Primary ( 4ADE80): action and live-state signal.
  • Secondary ( 12161A): the main raised card and control surface.
  • Tertiary ( 1D2328): secondary infrastructure surface.

Typography

Use a strong modern grotesk with large confident headlines and short supporting paragraphs.

  • Display: dense and direct, without decorative flourishes.
  • Body: crisp and readable, with muted secondary contrast.
  • Labels: slightly stronger weight for small UI chrome.

Layout

Use one simple two-column opening composition: message on one side, product-network scene on the other. Preserve generous black space around the central content so the few cards, chips, and links feel intentional. Avoid turning the page into a busy dashboard.

Design.md

System Overview

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

Operator Glow Mesh

A restrained dark operator-marketing system built from charcoal infrastructure and green activation signals.

Calm, technical, and quietly activated.

Primary mode: darkAI tooling / operational SaaS marketingui-rich

Theme

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

Visual atmosphere
Summary
Calm, technical, and quietly activated.
Density
4
Variance
3
Motion
2
Signals
near-black stage · charcoal utility cards · green activation accent · networked product-diagram framing

Colors

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

Palette colors
Void Black
#080A0B
Operator Charcoal
#12161A
Quiet Graphite
#1D2328
Signal Green
#4ADE80
Cold White
#F3F6F4
Muted Fog
rgba(243,246,244,0.64)
Whisper Edge
rgba(255,255,255,0.10)
Usage rules
Keep the page almost entirely dark.
Use green for action and live-state emphasis only.
Prefer value contrast over hue variety.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4rem, 7vw, 6rem)
group_gap
1rem
card_padding
1rem

Token Radii

Corner radii tokens with a live surface sample.

control
0.75rem
component
1rem
container
1.25rem

Typography Families

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

Display
Inter
clean operational grotesk
Body
Inter
direct product-marketing voice
Mono
Inter
mono is unnecessary; keep the system unified

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 6vw, 4.5rem)/—
Display
H2
clamp(1.75rem, 4vw, 2.5rem)/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption

Typography Rules

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

Rules
Use strong weight and size changes instead of decorative type choices. · Keep long copy short and low-contrast. · Avoid serif or editorial gestures.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
140ms-200ms
Easing
cubic-bezier(.2, .8, .2, 1)
Spring
stiffness 120, damping 20

Motion

Resolved motion token values.

PropertyValue
duration140ms-200ms
easingcubic-bezier(.2, .8, .2, 1)
springstiffness 120, damping 20

Layout Principles

Pair a copy column with one diagrammatic product scene.
Let empty black space amplify the few active objects.
Use compact cards and chips instead of oversized feature panels.
Keep the composition centered on control and observability.

Component Preview

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

Buttons primary
Base Attributes
Background
#4ADE80
Text
#08110A
Border
1px solid rgba(74,222,128,0.18)
Radius
{tokens.radii.control}->0.75rem
Padding
0.875rem 1rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
#12161A
Text
#F3F6F4
Border
1px solid rgba(255,255,255,0.10)
Radius
{tokens.radii.control}->0.75rem
Padding
0.75rem 0.875rem
Min height
40px
Typography
caption
Cards default
Feature Card
Component preview content
Base Attributes
Background
#12161A
Text
#F3F6F4
Border
1px solid rgba(255,255,255,0.06)
Radius
{tokens.radii.component}->1rem
Padding
{tokens.spacing.card_padding}->1rem
Shadow
0 12px 36px rgba(0,0,0,0.28)
Cards accent
Feature Card
Component preview content
Base Attributes
Background
#181E23
Text
#F3F6F4
Border
1px solid rgba(74,222,128,0.18)
Radius
{tokens.radii.component}->1rem
Padding
1rem
Shadow
0 0 0 1px rgba(74,222,128,0.10)
Inputs default
Base Attributes
Background
#0E1215
Text
#F3F6F4
Border
1px solid rgba(255,255,255,0.10)
Radius
0.75rem
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(243,246,244,0.35)

Hero stage

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

Summary
Use one networked product scene as the visual counterweight to the headline.

Iconography

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

Summary
Small node, chip, and status glyphs with simple geometric construction.

Responsive guidance

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

  • -
    Collapse the diagram below the copy on small screens without increasing card noise.
  • -
    Keep green accents sparse even when the layout simplifies.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No rainbow neon palette.
  • -
    No glossy SaaS gradients across major surfaces.
  • -
    No playful rounded consumer-UI softness.
  • -
    No white cards dominating the dark stage.
  • -
    No dense dashboard tables on the marketing surface.