Addverb.ai

Addverb.ai

We develop Physical AI robotics that move industries forward. Explore Trakr quadruped, Syncro cobot, and our humanoid robot - built for real sites and real results.

5.0
19
Visits
Visit

Available Pages

Design Analysis

Addverb.ai Home design analysis

Midnight Robotics Stage is a product-stage system that uses black void space and glossy mechanical renders to make the hardware feel singular and cinematic. The interface should behave like a quiet frame around the robot...

Overview

Midnight Robotics Stage is a product-stage system that uses black void space and glossy mechanical renders to make the hardware feel singular and cinematic. The interface should behave like a quiet frame around the robot, not like a busy software product.

Image Direction

Use studio-lit robot renders, hard material highlights, and close-up hardware forms against black backgrounds. Images should feel premium and precise, with very little environmental clutter or secondary context.

Colors

The palette is almost entirely black, white, and machine gray, with one saturated robotics red. Red should mark active route state, product-chip state, and hardware accents. Most of the rest of the UI should stay restrained so the render stays dominant.

Typography

Use a dense grotesk for major product statements and small micro-label text for utility chrome. Keep the overall tone technical and premium, never cute, editorial, or playful.

Design.md

System Overview

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

Midnight Robotics Stage

A robotics marketing system built from black stage space, hard white type, saturated red machine accents, and glossy product-render hero compositions.

staged, sleek, robotic, and object-first

Primary mode: darkrobotics platform marketingproduct-marketing

Theme

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

Visual atmosphere
Summary
staged, sleek, robotic, and object-first
Density
2
Variance
4
Motion
3
Signals
black void background · saturated robotics red · glossy product render · small pill path controls

Colors

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

Palette colors
Void Black
#000000
Robot Red
#D92D20
Machine Gray
#191919
Steel White
#F3F3F3
Muted Gray
#777777
Soft Panel
#EFEFEF
Usage rules
Let the black stage dominate the experience.
Use red for active route state, brand signals, and object accents only.
Keep most type white or gray so renders stay central.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
6px
sm
10px
md
16px
lg
24px
section
96px

Token Radii

Corner radii tokens with a live surface sample.

sm
12px
md
24px
lg
40px
full
999px

Typography Families

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

Display
Archivo
dense, modern grotesk built for technical impact
Body
Archivo
clean product-marketing body voice
Micro
Helvetica Now Micro Regular
tiny utility labeling and control text

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 6vw, 5rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption

Typography Rules

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

Rules
Keep hero copy large, white, and tightly set over the stage imagery. · Use micro-sized utility labels sparingly in headers and route pills. · Avoid warm editorial or playful finance-style typography.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-300ms
Easing
cubic-bezier(.2,.8,.2,1)
Spring
stiffness 120, damping 18

Motion

Resolved motion token values.

PropertyValue
duration180ms-300ms
easingcubic-bezier(.2,.8,.2,1)
springstiffness 120, damping 18

Layout Principles

Treat each hero as a centered product stage inside a large black void.
Keep navigation and route controls minimal so they frame rather than compete with the robot.
Use a few rounded surface islands against the black field instead of many grids or panels.

Component Preview

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

Buttons primary
Base Attributes
Background
#D92D20
Text
#FFFFFF
Border
0px none #D92D20
Radius
24px
Padding
8px 24px
Min height
36px
Buttons secondary
Base Attributes
Background
#191919
Text
#CFCFCF
Border
0px none #191919
Radius
24px
Padding
8px 16px
Min height
36px
Buttons utility
Base Attributes
Background
#000000
Text
#F3F3F3
Border
0px none #000000
Radius
40px
Padding
0px 16px
Min height
40px
Cards default
Feature Card
Component preview content
Base Attributes
Background
#191919
Text
#F3F3F3
Border
0px none transparent
Radius
12px
Padding
12px
Shadow
none
Cards light tile
Feature Card
Component preview content
Base Attributes
Background
#EFEFEF
Text
#111111
Border
0px none transparent
Radius
12px
Padding
12px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#CFCFCF
Height
40px
Active text
#FF3B2E
Item padding
0px 16px
Item radius
40px
Chips product state
Base Attributes
Background
#D92D20
Text
#FFFFFF
Border
0px none #D92D20
Radius
24px
Padding
8px 20px
Min height
36px

Image direction

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

Summary
Use glossy robot renders, studio-lit hardware closeups, and object-first compositions inside large black voids.
Guidance
  • -
    Keep objects centered or slightly off-centered with a lot of black breathing room.
  • -
    Use red only as a mechanical or active-state accent, not as a background flood.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No bright multicolor gradients or gaming neon.
  • -
    No soft cream surfaces dominating the page.
  • -
    No verbose navigation or dashboard card clutter.
  • -
    No flat 2D illustration replacing the product render.