Skip to content

Color

Every color marks something: an error, a warning, a success, information, the AI’s work or something you can click. None is there to make something stand out. Five colors and a neutral, each checked for contrast in light and dark mode.

Roles

Six roles from five hues: the interactive role’s fill and ring are ink, its text and tint the same green as success. Each shows its text on the canvas, its solid fill with the text that sits on it, and its tint.

interactive

Light

Aa

text-interactiveivy-700, 6.23:1

Aa

fill-interactiveledger-950, text ledger-50 at 16.39:1

Aa

bg-interactiveivy-500 / 8%

Dark

Aa

text-interactiveivy-400, 7.84:1

Aa

fill-interactiveledger-50, text ledger-950 at 16.39:1

Aa

bg-interactiveivy-500 / 10%

danger

Light

Aa

text-dangervermilion-700, 7.15:1

Aa

fill-dangervermilion-700, text ledger-50 at 7.15:1

Aa

bg-dangervermilion-500 / 8%

Dark

Aa

text-dangervermilion-400, 6.95:1

Aa

fill-dangervermilion-600, text ledger-50 at 5.33:1

Aa

bg-dangervermilion-500 / 10%

warning

Light

Aa

text-warningochre-700, 6.74:1

Aa

fill-warningochre-500, text ledger-950 at 4.89:1

Aa

bg-warningochre-500 / 10%

Dark

Aa

text-warningochre-400, 7.24:1

Aa

fill-warningochre-400, text ledger-950 at 7.24:1

Aa

bg-warningochre-500 / 10%

success

Light

Aa

text-successivy-700, 6.23:1

Aa

fill-successivy-700, text ledger-50 at 6.23:1

Aa

bg-successivy-500 / 8%

Dark

Aa

text-successivy-400, 7.84:1

Aa

fill-successivy-600, text ledger-50 at 4.59:1

Aa

bg-successivy-500 / 10%

agent

Light

Aa

text-agentorchid-700, 7.13:1

Aa

fill-agentorchid-700, text ledger-50 at 7.13:1

Aa

bg-agentorchid-500 / 8%

Dark

Aa

text-agentorchid-400, 6.96:1

Aa

fill-agentorchid-600, text ledger-50 at 5.30:1

Aa

bg-agentorchid-500 / 10%

info

Light

Aa

text-infofederal-700, 6.75:1

Aa

fill-infofederal-700, text ledger-50 at 6.75:1

Aa

bg-infofederal-500 / 8%

Dark

Aa

text-infofederal-400, 7.31:1

Aa

fill-infofederal-600, text ledger-50 at 4.97:1

Aa

bg-infofederal-500 / 10%

Neutral

The ledger ramp: paper at the light end, blue-black ink at the dark end. Every surface, border and reading colour.

Light

  • canvasledger-50

  • surfaceledger-50

  • surface-raisedledger-50

  • borderledger-200

  • border-strongledger-300

  • text-disabledledger-400

  • Headings, figures

    text-primaryledger-950, 16.39:1

  • Body text

    text-bodyledger-900, 12.38:1

  • Everything else that’s read

    text-secondaryledger-700, 6.64:1

  • Placeholders and non-text marks only

    text-tertiaryledger-600, 4.89:1

Dark

  • canvasledger-950

  • surfaceledger-950

  • surface-raised

  • borderledger-800

  • border-strongledger-700

  • text-disabledledger-600

  • Headings, figures

    text-primaryledger-50, 16.39:1

  • Body text

    text-bodyledger-100, 15.01:1

  • Everything else that’s read

    text-secondaryledger-300, 10.15:1

  • Placeholders and non-text marks only

    text-tertiaryledger-400, 7.37:1

Surfaces and elevation

Depth is a surface step and a 1px rule. Only an overlay adds the sheet: a second ruled page 4px below it, never a blur.

Light

  • Inline

    surface, border

  • Raised

    surface-raised, border-strong

  • Overlay

    surface-raised, border-strong, the overlay sheet

Dark

  • Inline

    surface, border

  • Raised

    surface-raised, border-strong

  • Overlay

    surface-raised, border-strong, the overlay sheet

Ramps

The Riso Ledger palette: seven ramps on one shared lightness curve, so a step number means the same contrast in every hue. Generated, never typed.

  • ledger (the neutral)

    1. 50
    2. 100
    3. 200
    4. 300
    5. 400
    6. 500
    7. 600
    8. 700
    9. 800
    10. 900
    11. 950

  • ivy

    1. 50
    2. 100
    3. 200
    4. 300
    5. 400
    6. 500
    7. 600
    8. 700
    9. 800
    10. 900
    11. 950

  • vermilion

    1. 50
    2. 100
    3. 200
    4. 300
    5. 400
    6. 500
    7. 600
    8. 700
    9. 800
    10. 900
    11. 950

  • ochre

    1. 50
    2. 100
    3. 200
    4. 300
    5. 400
    6. 500
    7. 600
    8. 700
    9. 800
    10. 900
    11. 950

  • federal

    1. 50
    2. 100
    3. 200
    4. 300
    5. 400
    6. 500
    7. 600
    8. 700
    9. 800
    10. 900
    11. 950

  • orchid

    1. 50
    2. 100
    3. 200
    4. 300
    5. 400
    6. 500
    7. 600
    8. 700
    9. 800
    10. 900
    11. 950

  • teal (chart series only)

    1. 50
    2. 100
    3. 200
    4. 300
    5. 400
    6. 500
    7. 600
    8. 700
    9. 800
    10. 900
    11. 950