Refto
N1

N1

N1 Ventures is an early-stage VC partnering with bold founders in AI, healthtech, and frontier tech. We invest from day zero and help teams scale globally across Europe and the US.

AgencyAiSingle PageTransitions
3.0
11
Visits
Visit

Categories

AgencyAi

Sections

Single Page

Available Pages

Home

Version History

Design Analysis

N1 Home design analysis

Build the experience like a warm editorial ledger rather than a glossy technology pitch. Let the grid structure carry trust. Sections should feel ordered, factual, and carefully paced. Use small indigo labels to frame ca...

Key Takeaways

  • Build the experience like a warm editorial ledger rather than a glossy technology pitch.
  • Let the grid structure carry trust. Sections should feel ordered, factual, and carefully paced.
  • Use small indigo labels to frame categories, sections, and proof moments without turning the system colorful.
  • Use rounded proof photography, founder portraits, logo rows, and documentary-style supporting imagery.
  • Keep images disciplined inside the grid rather than letting them float freely.
  • Favor honesty and clarity over spectacle.

Overview

  • Build the experience like a warm editorial ledger rather than a glossy technology pitch.
  • Let the grid structure carry trust. Sections should feel ordered, factual, and carefully paced.
  • Use small indigo labels to frame categories, sections, and proof moments without turning the system colorful.

Image Direction

  • Use rounded proof photography, founder portraits, logo rows, and documentary-style supporting imagery.
  • Keep images disciplined inside the grid rather than letting them float freely.
  • Favor honesty and clarity over spectacle.

Colors

  • F5F0E9 is the main field and should read as warm paper, not cream branding theater.
  • 151515 anchors the type system and serious content.
  • FBF8F3 can soften inset panels and proof cards.

Typography

  • Use a condensed sans for the main headlines so the system feels decisive and editorial.
  • Keep body copy readable, compact, and slightly warm in tone.
  • Use small labels and metadata in a simpler supporting sans with indigo emphasis.

Design.md

System Overview

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

Warm Ledger Venture Grid

A paper-toned venture storytelling system built from ruled editorial grids, indigo labels, rounded proof photography, and a dark closing stage.

Grounded, trustworthy, editorial, and quietly international.

Primary mode: lightventure or capital storytelling sitecontent-rich

Theme

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

Visual atmosphere
Summary
Grounded, trustworthy, editorial, and quietly international.
Density
4
Variance
5
Motion
1
Signals
parchment-like background fields · thin ledger dividers · indigo micro-headings over black editorial type

Colors

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

Palette colors
Parchment
#F5F0E9
Soft Paper
#FBF8F3
Ink Black
#151515
Signal Indigo
#6A6EF4
Ledger Line
#E2D9CE
Afterhours
#171717
Usage rules
Keep the base experience warm and paper-like rather than crisp white.
Use indigo for directional or categorical signaling, not for broad fills.
Reserve the near-black stage for endings, closures, or contrast resets.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3.5rem
section_gap
clamp(4rem, 8vw, 7rem)
panel_padding
clamp(1.25rem, 3vw, 2.25rem)

Token Radii

Corner radii tokens with a live surface sample.

sm
14px
md
22px
lg
28px
xl
40px
full
999px

Typography Families

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

Display
Barlow Condensed
condensed editorial headline with urgency
Body
Inter
readable, low-drama body text
Accent
Inclusive Sans
friendly support voice for labels and small context
Mono
IBM Plex Mono
utility metadata only

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.6rem, 6vw, 5.8rem)/—
Display
H2
clamp(2.3rem, 3.8vw, 3.4rem)/—
H2
H3
clamp(1.5rem, 2.4vw, 2rem)/—
H3
Body
1.05rem/—
Body
Label
0.92rem/—
Label

Typography Rules

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

Rules
Let condensed headlines deliver the main point with confidence. · Keep body copy readable and slightly warm, not hyper-neutral. · Use small indigo labels to separate sections, categories, or proof notes.

Borders

Border tokens with resolved values.

Fine
1px solid #E2D9CE
Dark
1px solid #151515

Motion

Motion tokens rendered as resolved values for timing and personality.

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

Borders

Resolved border token values.

PropertyValue
fine1px solid #E2D9CE
dark1px solid #151515

Motion

Resolved motion token values.

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

Layout Principles

Structure each section as a ledger of text, proof, and image blocks.
Let thin dividers and column boundaries do more work than card shadow or fill.
Alternate quiet text plates with proof photography inside the same grid rhythm.
Use the dark ending stage as a clear cadence break.

Component Preview

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

Grid panel
Base Attributes
Background
#F5F0E9
Text
#151515
Border
1px solid #E2D9CE
Radius
0px
Padding
clamp(1.25rem, 3vw, 2rem)
Shadow
none
Proof card
Feature Card
Component preview content
Base Attributes
Background
#FBF8F3
Text
#151515
Border
1px solid rgba(226, 217, 206, 0.8)
Radius
22px
Padding
1rem
Shadow
none
Buttons quiet pill
Base Attributes
Background
#F0E8DD
Text
#151515
Border
1px solid rgba(21, 21, 21, 0.08)
Radius
999px
Padding
0.7rem 1rem
Accents label text
Base Attributes
Background
transparent
Text
#6A6EF4
Border
none
Radius
0px
Padding
0px
Accents closing stage
Base Attributes
Background
#171717
Text
#FFFFFF
Border
none
Radius
0px
Padding
clamp(2rem, 4vw, 3rem)

Image direction

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

Role
supportive
Media types
  • -
    portrait photography
  • -
    proof photo
  • -
    logo field
Subject patterns
  • -
    founders or operators cropped cleanly inside rounded frames
  • -
    documentary-style proof imagery, not splashy campaign art
  • -
    logo rows aligned to the ledger grid
Composition logic
  • -
    Keep images disciplined inside the grid.
  • -
    Alternate image-heavy and text-heavy cells.
  • -
    Use the dark stage to close, not to dominate.
Treatment rules
  • -
    Preserve warmth and realism.
  • -
    Favor honest photography over polished fantasy.
  • -
    Use rounded corners to soften the editorial grid.
Generation cues
  • -
    Describe the warmth of the background, the amount of grid structure, and how tightly the photo is framed.
  • -
    Ask for proof-oriented human photography rather than abstract tech imagery.
  • -
    Keep logo fields quiet and monochrome.
Avoid
  • -
    No neon investor futurism.
  • -
    No loud 3D renders.
  • -
    No dense dashboard mosaics.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not turn the system into generic investor-tech gradients.
  • -
    Do not replace the warm paper base with cold white UI.
  • -
    Do not over-style panels with heavy shadows or thick cards.
  • -
    Do not use indigo as a dominant background fill.