Refto
Legora

Legora

Legora is the collaborative AI powering lawyers to review and research faster, draft smarter, and advise with precision. Legora adapts to your ways of working, unlocking team and machine collaboration at scale.

Large TypeMinimalBig Background VideoLegal
3.0
18
Visits
Visit

Categories

Legal

Available Pages

Home

Version History

Design Analysis

Legora Home design analysis

Cinematic Counsel Portrait is a legal-editorial system that sells authority through human presence instead of software spectacle. The first fold should feel like a premium portrait campaign: dark charcoal atmosphere, war...

Key Takeaways

  • Primary is a warm ivory used for major text and bright action surfaces.
  • Secondary is a muted smoky brown for secondary controls.
  • Tertiary is a quiet taupe for muted copy.
  • Use a high-contrast editorial serif for all major statements.
  • Use a clean contemporary sans for body copy and UI.
  • Keep body copy calmer and smaller than the image and headline stage.

Overview

Cinematic Counsel Portrait is a legal-editorial system that sells authority through human presence instead of software spectacle. The first fold should feel like a premium portrait campaign: dark charcoal atmosphere, warm ivory display type, and just enough interface to make the product feel accessible without stealing the emotional center.

Image Direction

Use cinematic portraiture, warm interior stills, and subjects who read as experienced, composed, and high-trust. Avoid generic startup-office imagery.

Colors

  • Primary is a warm ivory used for major text and bright action surfaces.
  • Secondary is a muted smoky brown for secondary controls.
  • Tertiary is a quiet taupe for muted copy.

Typography

  • Use a high-contrast editorial serif for all major statements.
  • Use a clean contemporary sans for body copy and UI.
  • Keep body copy calmer and smaller than the image and headline stage.

Design.md

System Overview

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

Cinematic Counsel Portrait

A premium legal-tech marketing system with cinematic portrait photography, warm serif display type, dark charcoal staging, and restrained rounded CTAs.

Confident, elite, warm, and human-centered.

Primary mode: darklegal AImarketing-rich

Theme

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

Visual atmosphere
Summary
Confident, elite, warm, and human-centered.
Density
3
Variance
2
Motion
1
Signals
dark cinematic photography · warm ivory serif display · quiet legal-premium restraint

Colors

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

Palette colors
Charcoal Velvet
#181514
Warm Ivory
#F1ECE3
Stone Smoke
#4B4540
Quiet Taupe
#9A948B
Night Border
#2A2624
Usage rules
Keep the palette warm and premium.
Avoid bright color accents outside photography.
Let contrast come from ivory versus charcoal.

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
12px
panel
20px

Typography Families

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

Display
Canela
high-contrast editorial serif with authority
Body
Suisse Intl
clean contemporary sans that stays secondary to the display

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(4rem, 8vw, 6rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.85rem/—
Caption

Typography Rules

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

Rules
Use serif display for the emotionally dominant statements. · Keep body copy quiet and widely spaced.

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

Build the first fold around one large portrait with overlaid display type.
Keep navigation and support UI subordinate to the emotional image field.
Use generous empty space instead of busy feature grids.

Component Preview

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

Buttons primary
Base Attributes
Background
#F1ECE3
Text
#181514
Border
0px none transparent
Radius
{tokens.radii.control}->12px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
rgba(75, 69, 64, 0.75)
Text
#F1ECE3
Border
0px none transparent
Radius
{tokens.radii.control}->12px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
#181514
Text
#F1ECE3
Border
1px solid #2A2624
Radius
{tokens.radii.panel}->20px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#201C1A
Text
#F1ECE3
Border
1px solid #2A2624
Radius
12px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(241, 236, 227, 0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#F1ECE3
Height
40px
Active text
#F1ECE3
Item padding
0px
Item radius
0px

Image direction

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

Role
load-bearing
Media types
  • -
    cinematic portrait
  • -
    warm interior still
Subject patterns
  • -
    confident professional subject
  • -
    moody architecture or office backdrop
Composition logic
  • -
    Keep the subject large in frame and emotionally present.
  • -
    Use soft shadow and restrained contrast rather than glossy studio lighting.
Avoid
  • -
    No stock-office genericity.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No loud neon accent palette.
  • -
    No consumer-soft pill system.
  • -
    No generic SaaS dashboard shell dominating the brand.