AngelList

AngelList

AngelList builds the infrastructure that powers the startup economy—providing investors and innovators with the tools to grow.

3.0
17
Visits
Visit

Available Pages

Design Analysis

AngelList Home design analysis

Private Capital Editorial is a finance-marketing system that feels institutional without feeling stale. Large pale display type sits on deep teal stages, while documentary proof blocks, muted taupe sections, and compact...

Key Takeaways

  • Primary ( 002B31): the main authority-setting stage.
  • Secondary ( F6F7F4): light surface and high-legibility text.
  • Tertiary ( D9D4F7): pale display highlight for large type on dark fields.
  • Display: very large, low-drama weight, and tightly tracked.
  • Body: precise and calm, never salesy.
  • Labels: compact and neutral, supporting navigation and metadata.

Overview

Private Capital Editorial is a finance-marketing system that feels institutional without feeling stale. Large pale display type sits on deep teal stages, while documentary proof blocks, muted taupe sections, and compact capsule navigation keep the system credible and modern.

Image Direction

Use photography and product screenshots as evidence. Images should feel observed and practical rather than aspirational. They belong inside proof rows, testimonial sections, or product modules, where they support claims instead of becoming the entire visual identity.

Colors

The palette is mature and tightly controlled.

  • Primary ( 002B31): the main authority-setting stage.
  • Secondary ( F6F7F4): light surface and high-legibility text.
  • Tertiary ( D9D4F7): pale display highlight for large type on dark fields.

Typography

Use a refined modern sans with oversized display moments and restrained body text.

  • Display: very large, low-drama weight, and tightly tracked.
  • Body: precise and calm, never salesy.
  • Labels: compact and neutral, supporting navigation and metadata.

Design.md

System Overview

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

Private Capital Editorial

A restrained finance-marketing system built from deep teal stages, pale display text, pill navigation, and disciplined proof blocks.

Institutional, composed, and quietly contemporary.

Primary mode: darkfinancial services marketingmarketing-rich

Theme

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

Visual atmosphere
Summary
Institutional, composed, and quietly contemporary.
Density
5
Variance
4
Motion
1
Signals
deep teal canvas · lilac display type · capsule navigation · documentary proof imagery

Colors

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

Palette colors
Capital Teal
#002B31
Pale Lilac
#D9D4F7
Off White
#F6F7F4
Taupe Proof
#84704A
Soft Sage Gray
#F3F4F2
Deep Ink
#162126
Quiet Border
rgba(255,255,255,0.14)
Usage rules
Use the teal stage for authority-setting sections.
Reserve lilac for large type, not generic buttons.
Let taupe appear as a mature counterweight, not a full-page canvas.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

section_gap
clamp(4.5rem, 8vw, 8rem)
group_gap
1rem
card_padding
1.25rem

Token Radii

Corner radii tokens with a live surface sample.

control
999px
component
0.875rem
container
1rem

Typography Families

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

Display
Instrument Sans
elegant modern grotesk with large editorial presence
Body
Instrument Sans
precise and calm
Mono
Instrument Sans
no separate mono voice needed

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4.5rem, 10vw, 7rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption

Typography Rules

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

Rules
Create authority with size and line breaks, not ornate typefaces. · Keep support text compact and low-drama. · Use lighter display color to soften the dark stage.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
140ms-200ms
Easing
cubic-bezier(.22, .8, .22, 1)
Spring
stiffness 110, damping 22

Motion

Resolved motion token values.

PropertyValue
duration140ms-200ms
easingcubic-bezier(.22, .8, .22, 1)
springstiffness 110, damping 22

Layout Principles

Alternate between dark authority sections and lighter proof sections.
Use wide editorial rows instead of playful card mosaics.
Let documentary proof blocks sit underneath large strategic statements.
Keep navigation floating and compact.

Component Preview

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

Buttons primary
Base Attributes
Background
#F6F7F4
Text
#162126
Border
1px solid rgba(22,33,38,0.06)
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
transparent
Text
#F6F7F4
Border
1px solid rgba(255,255,255,0.18)
Radius
{tokens.radii.control}->999px
Padding
0.75rem 0.875rem
Min height
40px
Typography
caption
Cards proof
Feature Card
Component preview content
Base Attributes
Background
#00343B
Text
#F6F7F4
Border
1px solid rgba(255,255,255,0.10)
Radius
{tokens.radii.component}->0.875rem
Padding
0
Shadow
none
Cards metric
Feature Card
Component preview content
Base Attributes
Background
#84704A
Text
#EAF0D9
Border
none
Radius
0
Padding
2rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#00343B
Text
rgba(246,247,244,0.72)
Active text
#F6F7F4
Item padding
0.625rem 0.875rem
Item radius
{tokens.radii.control}->999px

Image direction

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

Summary
Use documentary photography and product screenshots as proof, not as cinematic spectacle.

Responsive guidance

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

  • -
    Keep the hero display large on mobile but shorten line length aggressively.
  • -
    Stack proof cards in clean rows instead of shrinking them into tiny tiles.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No bright fintech blue gradients.
  • -
    No soft startup illustration style.
  • -
    No oversized shadows or glossy cards.
  • -
    No playful consumer-marketplace icon clutter.
  • -
    No dense dashboard chrome on the main marketing surface.