Refto
Hex Security

Hex Security

Hex Security's AI agents find critical vulnerabilities in your systems continuously—not just once a year. Trusted by YC companies. Start your free pentest.

InteractiveSecurityAiBlack WhiteAnimationBig Background VideoSingle PageClean
3.0
8
Visits
Visit

Categories

SecurityAi

Available Pages

Home

Version History

Design Analysis

Hex Security Home design analysis

Forensic Grid Security is a security-marketing system that feels closer to a lab panel than a startup site. It balances formal serif headlines with mono annotation copy, sparse wireframes, and large off-white breathing z...

Key Takeaways

  • Primary ( 000000): Main type, rules, and button outlines.
  • Secondary ( DCDCDC): Map grid, section rules, and supporting wireframes.
  • Tertiary ( FA651E): Rare annotation or proof accent.
  • Use the serif display only for the main conceptual line.
  • All secondary copy, labels, and annotations should be mono.
  • Avoid expressive weight jumps; let spacing and alignment create authority.

Overview

Forensic Grid Security is a security-marketing system that feels closer to a lab panel than a startup site. It balances formal serif headlines with mono annotation copy, sparse wireframes, and large off-white breathing zones.

Colors

  • Primary ( 000000): Main type, rules, and button outlines.
  • Secondary ( DCDCDC): Map grid, section rules, and supporting wireframes.
  • Tertiary ( FA651E): Rare annotation or proof accent.

Typography

  • Use the serif display only for the main conceptual line.
  • All secondary copy, labels, and annotations should be mono.
  • Avoid expressive weight jumps; let spacing and alignment create authority.

Layout

Build large quiet fields around one message and one proof object. Use measurement ticks, edge marks, and thin rules to create structure instead of cards or filled containers.

Design.md

System Overview

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

Forensic Grid Security

A sparse security-marketing language built from editorial serif headlines, mono support copy, and wireframe technical overlays.

Forensic, sparse, and clinical.

Primary mode: lightsecurity software marketingui-rich

Theme

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

Visual atmosphere
Summary
Forensic, sparse, and clinical.
Density
2
Variance
3
Motion
3
Signals
technical grid field · elegant serif display · mono annotation copy · registration-mark graphics

Colors

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

Palette colors
Lab White
#F7F7F7
True Black
#000000
Instrument Gray
#5E5E5E
Case Line
#DCDCDC
Probe Orange
#FA651E
Usage rules
Keep black and off-white dominant.
Treat orange as a single forensic annotation, not a brand flood.
Let texture come from fine lines and dotted fields.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
96px
card_padding
24px

Token Radii

Corner radii tokens with a live surface sample.

control
0px
card
0px
keycap
2px

Typography Families

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

Display
Refined Technical Serif
editorial security statement
Body
IBM Plex Mono
forensic annotation

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
4.5rem/—
Display
H2
2.5rem/—
H2
Body
1rem/—
Body
Label
0.75rem/—
Label

Typography Rules

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

Rules
Use serif only for the main conceptual message. · Use mono for all support copy, UI labels, and evidence language.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-260ms
Easing
cubic-bezier(.2,.7,0,1)

Motion

Resolved motion token values.

PropertyValue
duration180ms-260ms
easingcubic-bezier(.2,.7,0,1)

Layout Principles

Keep the hero almost empty except for one message and one proof object.
Use edge markers, grids, and fine lines to establish structure.
Leave large off-white breathing zones between blocks.

Component Preview

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

Buttons primary
Base Attributes
Background
transparent
Text
#000000
Border
1px solid #000000
Radius
{tokens.radii.control}->0px
Padding
12px 28px
Min height
48px
Shadow
none
Typography
label
Buttons secondary
Base Attributes
Background
#000000
Text
#F7F7F7
Border
1px solid #000000
Radius
{tokens.radii.keycap}->2px
Padding
4px 8px
Min height
24px
Shadow
none
Typography
label
Cards media
Feature Card
Component preview content
Base Attributes
Background
#F7F7F7
Text
#000000
Border
1px solid #DCDCDC
Radius
{tokens.radii.card}->0px
Padding
{tokens.spacing.card_padding}->24px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#000000
Height
40px
Active text
#000000
Item padding
8px 16px
Item radius
{tokens.radii.control}->0px

Three d scene

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

Role
supportive
Integration
hero-object
Behaviors
  • -
    ambient dotted sphere
  • -
    technical field backdrop
Spatial logic
  • -
    Use one sparse dimensional object to anchor the hero.
  • -
    Keep spatial elements diagrammatic rather than photoreal.
Material logic
  • -
    Favor dots, wireframes, and map-like texture over glossy surfaces.
Fallback
Replace live or animated spatial fields with still diagram frames that preserve the same precision.
Reduced motion
Freeze the sphere and field while preserving the forensic layout.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No saturated cyberpunk glow.
  • -
    No rounded SaaS pills as the main interaction language.
  • -
    No heavy card shadows or inflated dashboard density.