Refto
Antimetal

Antimetal

For everything that happens after you deploy. Antimetal is the AI platform to better understand, manage, and automate your infrastructure.

InteractiveDevelopmentLight ShadowWeb AppCustom CursorAiBig Background ImageClean
4.0
10
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Antimetal Home design analysis

Signal Circuit Diagnostics is an engineering-facing system that balances technical credibility with a slightly elevated editorial tone. The first impression should feel dark, infrastructural, and controlled, while deeper...

Key Takeaways

  • Primary is an acid-lime action signal used only for the highest-intent CTA.
  • Secondary is a deep ink navy used for body text, dark actions, and utility surfaces.
  • Tertiary is an electric blue atmospheric accent, best used in glows, tiny signals, and technical diagram emphasis.
  • Use an editorial serif for the largest statements and key product-section headings.
  • Use a compact grotesk for all operational copy, labels, and UI text.
  • Keep display lines short and deliberate. Keep body copy plainspoken.

Overview

Signal Circuit Diagnostics is an engineering-facing system that balances technical credibility with a slightly elevated editorial tone. The first impression should feel dark, infrastructural, and controlled, while deeper product pages open into pale diagnostic surfaces with faint system diagrams and more operational clarity.

Image Direction

Use abstract technical diagrams, dotted constellations, and clean product UI rather than literal cloud or server photography. Background abstraction should support the message, not overwhelm it.

Colors

  • Primary is an acid-lime action signal used only for the highest-intent CTA.
  • Secondary is a deep ink navy used for body text, dark actions, and utility surfaces.
  • Tertiary is an electric blue atmospheric accent, best used in glows, tiny signals, and technical diagram emphasis.

Typography

  • Use an editorial serif for the largest statements and key product-section headings.
  • Use a compact grotesk for all operational copy, labels, and UI text.
  • Keep display lines short and deliberate. Keep body copy plainspoken.

Design.md

System Overview

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

Signal Circuit Diagnostics

A technical product-marketing system with midnight hero staging, pale operational surfaces, serif display contrast, and acid-lime pill actions.

Precise, infrastructural, and quietly dramatic.

Primary mode: darkengineering toolingui-rich

Theme

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

Visual atmosphere
Summary
Precise, infrastructural, and quietly dramatic.
Density
3
Variance
3
Motion
2
Signals
midnight navy shell · electric blue haze · serif display over grotesk UI · faint system-map diagramming

Colors

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

Palette colors
Midnight Circuit
#09102E
Cloud Surface
#F8F9FC
Ink Navy
#1B2540
Acid Lime
#D0F100
Electric Blue
#2B6FFF
Mist Border
#DDE3EE
Usage rules
Keep dark hero staging and pale product surfaces clearly distinct.
Use lime only for the highest-intent action.
Let blue behave as atmospheric signal rather than button fill.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(5rem, 8vw, 7rem)
card_padding
1.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
panel
24px

Typography Families

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

Display
Noe Display
editorial serif used to elevate technical messaging
Body
ABCDiatype
compact modern grotesk for operational copy

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.6rem, 8vw, 5.8rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.8rem/—
Caption

Typography Rules

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

Rules
Use serif display for the main signal moments only. · Keep body copy straightforward and engineering-friendly.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.22, 1, .36, 1)

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.22, 1, .36, 1)

Layout Principles

Treat the homepage as a dark launch stage and product pages as pale diagnostic workspaces.
Use large centered statements with lots of atmospheric breathing room.
Keep product proof diagrammatic and clean rather than cluttered.

Component Preview

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

Buttons primary
Base Attributes
Background
#D0F100
Text
#1B2540
Border
0px none transparent
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
#1B2540
Text
#F8F9FC
Border
1px solid rgba(255,255,255,0.10)
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
#F8F9FC
Text
#1B2540
Border
1px solid #DDE3EE
Radius
{tokens.radii.panel}->24px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#FFFFFF
Text
#1B2540
Border
1px solid #DDE3EE
Radius
18px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(27, 37, 64, 0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#F8F9FC
Height
44px
Active text
#F8F9FC
Item padding
0.5rem 0.875rem
Item radius
{tokens.radii.control}->999px

Image direction

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

Role
supportive
Media types
  • -
    abstract technical diagram
  • -
    clean product UI
Subject patterns
  • -
    dotted constellations
  • -
    radial system maps
Composition logic
  • -
    Keep diagrams faint enough to support typography rather than dominate it.
  • -
    Prefer technical abstraction over generic cloud stock imagery.
Avoid
  • -
    No photoreal server-room photography.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No multicolor rainbow diagnostics.
  • -
    No blocky rectangular CTAs replacing the capsule system.
  • -
    No dense enterprise dashboard clutter in the hero.