Refto
Sequence

Sequence

Sequence automates billing for every custom contract. Get a complete platform for Finance teams to unlock error-free revenue collection at scale. For software companies with custom contracts and hybrid pricing.

Big Background VideoLightCleanFinance
3.0
3
Visits
Visit

Categories

Finance

Available Pages

Home

Version History

Design Analysis

Sequence Home design analysis

Iridescent Revenue Ledger is a financial-operations system that feels composed rather than flashy. It should read like a premium ledger sheet: pale shell, precise grid alignment, charcoal pill actions, serif statements f...

Key Takeaways

  • Primary is charcoal and powers the main CTA.
  • Secondary is a pale neutral support surface.
  • Tertiary is a cool wash accent best used sparingly.
  • Use an editorial serif for the largest revenue and workflow statements.
  • Use a refined sans for all body copy and UI.
  • Keep the overall tone calm and financially literate rather than tech-hyped.

Overview

Iridescent Revenue Ledger is a financial-operations system that feels composed rather than flashy. It should read like a premium ledger sheet: pale shell, precise grid alignment, charcoal pill actions, serif statements for the big ideas, and a faint iridescent wash that keeps the page from feeling sterile.

Image Direction

Use clean document-like product surfaces, invoice or agreement-style panels, and subtle vertical washes of cool pastel color. Keep the proof structured and quiet.

Colors

  • Primary is charcoal and powers the main CTA.
  • Secondary is a pale neutral support surface.
  • Tertiary is a cool wash accent best used sparingly.

Typography

  • Use an editorial serif for the largest revenue and workflow statements.
  • Use a refined sans for all body copy and UI.
  • Keep the overall tone calm and financially literate rather than tech-hyped.

Design.md

System Overview

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

Iridescent Revenue Ledger

A light revenue-operations system with editorial serif display, charcoal pill CTAs, pale ledger-like grids, and faint iridescent wash.

Measured, financial, polished, and gently premium.

Primary mode: lightrevenue operationsui-rich

Theme

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

Visual atmosphere
Summary
Measured, financial, polished, and gently premium.
Density
3
Variance
3
Motion
2
Signals
off-white ledger shell · serif display · charcoal pill CTA · iridescent vertical wash

Colors

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

Palette colors
Ledger White
#FAF8F4
Charcoal Ink
#4F4F4F
Lavender Mist
#DDE5FF
Blush Mist
#F3E6FF
Grid Line
#E6E0D8
Soft Green
#DDE8D8
Usage rules
Keep most UI nearly monochrome.
Use color as a wash or small document accent, not as a hard brand fill.
Let charcoal carry the strongest action.

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
999px
panel
18px

Typography Families

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

Display
Ivar Display
editorial financial serif with composure
Body
TWK Lausanne
clean modern business sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3.8rem, 8vw, 5.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 main revenue or workflow statements. · Keep body copy and UI in a precise, quiet sans.

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

Treat the page like a ledger sheet with calm grid alignment.
Use one centered hero before moving into document-like product proof.
Let sticky walkthroughs support comprehension without overpowering the shell.

Component Preview

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

Buttons primary
Base Attributes
Background
#4F4F4F
Text
#FFFFFF
Border
0px none transparent
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Buttons secondary
Base Attributes
Background
#F0EFEC
Text
#4F4F4F
Border
1px solid #E6E0D8
Radius
{tokens.radii.control}->999px
Padding
0.875rem 1.25rem
Min height
44px
Typography
body
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#4F4F4F
Border
1px dotted #E6E0D8
Radius
{tokens.radii.panel}->18px
Padding
{tokens.spacing.card_padding}->1.5rem
Shadow
none
Inputs default
Base Attributes
Background
#FFFFFF
Text
#4F4F4F
Border
1px solid #E6E0D8
Radius
14px
Padding
0.875rem 1rem
Min height
44px
Placeholder
rgba(79,79,79,0.45)
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#4F4F4F
Height
40px
Active text
#4F4F4F
Item padding
0.5rem 0.875rem
Item radius
{tokens.radii.control}->999px

Scroll motion

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

Role
supportive
Scroll driver
native
Cadence
calm
Patterns
  • -
    sticky feature walkthrough
  • -
    document-led section progression
Page logic
  • -
    Scroll should reveal one revenue workflow idea at a time inside a consistent ledger shell.
Constraints
  • -
    Reduce motion by preserving the same ordered document stack.

Image direction

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

Role
supportive
Media types
  • -
    light product UI
  • -
    soft iridescent wash
Subject patterns
  • -
    invoice surfaces
  • -
    agreement panels
  • -
    grid-aligned document blocks
Composition logic
  • -
    Keep proof document-like, tidy, and lightly washed with color.
Avoid
  • -
    No saturated fintech neon.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No hard black enterprise severity.
  • -
    No bright brand-color flood.
  • -
    No square-corner pricing-card brutality.