Refto
Stripe Dot Dev

Stripe Dot Dev

Learn how to build web and mobile applications to accept payments, send payouts, and manage your business online with Stripe.

InteractiveDevelopmentIllustrativeParallaxTypographicBlack WhiteUnusual LayoutLightFinance
4.0
7
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Stripe Dot Dev Home design analysis

Terminal Broadsheet Grid is a technical poster system for a developer-facing portal. It replaces the usual docs-site blandness with giant grotesk display, thin editorial rules, mono labels, and diagram modules that feel...

Key Takeaways

  • Primary ( 111111): headline, body, and rule color.
  • Secondary ( F1F1ED): muted module surface.
  • Tertiary ( BEBEB7): diagram and utility support color.
  • Display: oversized and poster-like.
  • Body: concise and structured, not chatty.
  • Utility: mono labels, tags, and section annotations.

Overview

Terminal Broadsheet Grid is a technical poster system for a developer-facing portal. It replaces the usual docs-site blandness with giant grotesk display, thin editorial rules, mono labels, and diagram modules that feel printed, tagged, and archived.

Image Direction

Use diagram art, line studies, and wireframe-like technical posters instead of lifestyle photography. Visual content should feel indexed, labeled, and structurally related to the surrounding grid.

Colors

Keep color nearly monochrome.

  • Primary ( 111111): headline, body, and rule color.
  • Secondary ( F1F1ED): muted module surface.
  • Tertiary ( BEBEB7): diagram and utility support color.

Typography

Use one clean grotesk for the main voice and a tiny mono layer for labels.

  • Display: oversized and poster-like.
  • Body: concise and structured, not chatty.
  • Utility: mono labels, tags, and section annotations.

Design.md

System Overview

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

Terminal Broadsheet Grid

A developer-portal system built from warm gray paper, oversized black display type, mono utility labels, and ruled poster modules.

Experimental, technical, and strongly gridded.

Primary mode: lightdeveloper portal / ecosystem publishingcontent-rich

Theme

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

Visual atmosphere
Summary
Experimental, technical, and strongly gridded.
Density
6
Variance
4
Motion
2
Signals
warm gray field · giant black grotesk · micro mono chrome · diagram poster modules

Colors

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

Palette colors
Warm Gray Paper
#E8E8E8
Near Black
#111111
Fog Surface
#F1F1ED
Wire Gray
#BEBEB7
Quiet White
#FAFAF7
Signal Ink
#2A2A2A
Usage rules
Keep the system mostly monochrome.
Let rules and type do more work than color.
Use contrast through scale and grid, not through saturated accents.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

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

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
0.75rem
container
0

Typography Families

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

Display
Sohne
clean grotesk with editorial punch
Body
Sohne
technical but readable
Mono
"SF Mono"
tiny system label voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4rem, 10vw, 6.5rem)/—
Display
H2
clamp(2.25rem, 5vw, 3.5rem)/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption

Typography Rules

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

Rules
Use oversized type as the main dramatic device. · Let mono labels frame sections, tags, and utility controls. · Keep body copy short and structured.

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Motion

Resolved motion token values.

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

Layout Principles

Work inside a ruled poster grid.
Mix giant headline slabs with smaller technical panels.
Use utility tags to annotate modules.
Preserve generous empty margins around diagrams.

Component Preview

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

Buttons primary
Base Attributes
Background
#FAFAF7
Text
#111111
Border
1px solid rgba(17,17,17,0.25)
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1rem
Min height
40px
Typography
body
Buttons secondary
Base Attributes
Background
transparent
Text
#111111
Border
1px solid rgba(17,17,17,0.20)
Radius
{tokens.radii.control}->999px
Padding
0.75rem 0.875rem
Min height
36px
Typography
caption
Cards diagram
Feature Card
Component preview content
Base Attributes
Background
#F1F1ED
Text
#111111
Border
1px solid rgba(17,17,17,0.16)
Radius
{tokens.radii.component}->0.75rem
Padding
0.75rem
Shadow
none
Cards feed
Feature Card
Component preview content
Base Attributes
Background
transparent
Text
#111111
Border
none
Radius
0
Padding
0
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
rgba(17,17,17,0.72)
Active text
#111111
Item padding
0.25rem 0.375rem
Item radius
0

Image direction

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

Summary
Use diagrams, line studies, and technical poster modules as visual content.

Responsive guidance

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

  • -
    On mobile, preserve the poster logic by stacking full-width modules instead of shrinking the grid into tiny columns.
  • -
    Keep mono labels visible but secondary.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No colorful developer gradients.
  • -
    No soft bento-card SaaS layouts.
  • -
    No oversized rounded app chrome.
  • -
    No decorative illustration mascots.
  • -
    No collapsed tiny type that breaks the poster hierarchy.