Get to the Point.

Design system · Chisel highlighter

Get to the Point design system. The highlighted point.

Highlighter ink is the only color, and it marks the point, the drift and the score.

A personal conversational clarity trainer. You commit to one sentence your listener should repeat back, deliver it by voice or by typing, and see where the point landed and where you drifted.

Color

Paper, ink-black and one hairline, plus three highlighter inks. Each ink keeps one meaning in both modes; dark pushes the inks to neon.

Paper and ink

Everything that is not a mark.

Light

  • Paper#faf7ef
  • Ink-black#26231f
  • Secondary#57524a
  • Hairline#cecac0

Dark

  • Ground#1d1c19
  • Text#ece8df
  • Secondary#bbb7af
  • Hairline#413f3c

Green ink

The point, where it lands, 80 and up.

Light

  • Ink#c9f46a
  • AaText on ink11.61 : 1

Dark

  • Neon ink#86f23a
  • AaText on ink13.16 : 1

Yellow ink

Fair scores, 55 to 79.

Light

  • Ink#ffee6e
  • AaText on ink12.38 : 1

Dark

  • Neon ink#fff52e
  • AaText on ink16.35 : 1

Pink ink

Drift, scores under 55, the error label.

Light

  • Ink#ffa6d5
  • AaText on ink8.17 : 1

Dark

  • Neon ink#ff66c7
  • AaText on ink7.11 : 1

Type

  • Literata813 · 642 · 400Logo, headers, the point and all prose.
  • Sarabun500 onlyLabels, navigation and buttons.

  • Heading · Literata 813 · 1.5rem

    Who is listening?

  • Point · Literata 642 · 1.1875rem

    I need a call on scope by Friday.

  • Reading · Literata 400 · 1.1875rem / 1.7

    So, quick update on the vendor.

  • Label · Sarabun 500 · 12px caps, 0.08em

    Step 3 of 3 · Deliver

  • Navigation · Sarabun 500 · 15px

    PracticeDrillsProgressHelp

Components

Buttons · 46px, square, stacked

Score · number, word, arrow, then ink

69/ 100

Fair

  • Audience fitStrong84
  • DriftWeak52

Signature · chisel, double pass, lands tag

Analysis failed

Also, the laptop took all Monday.2 It is two weeks late. Point lands · 0:32

Accessibility

  • Contrast

    A 7:1 gate for all text in both modes. Lowest measured pairs: 7.11 : 1 near-black on the dark pink ink, 7.26 : 1 secondary text on paper. axe AA and AAA: 0 violations on 56 captures; no glyph under ink below 7:1. Focus ring 4.37 : 1.

  • Touch targets

    44px minimum; buttons 46px, stacked on phones.

  • Reduced motion

    One motion, the analyzing sweep every 3.2s. Under reduce it holds still and “Working” appears.

  • Never color alone

    Every score carries its number, verdict word and an arrow.

Do and don't

  • DoShow every score as number, verdict word and arrow, with the ink as a fourth signal on top.
  • DoKeep text on ink at 7:1 or better: ink-black on the light inks, #14120e on the dark neon inks.
  • DoDraw every highlight with the chisel streak and its fixed-seed filters, and use the double pass for the small single-line marks.
  • Don'tSet error text in pink or red.
  • Don'tHighlight more than the point, the landing, drift, errors and scores. A page where everything is highlighted has no point.

From DESIGN.md, section 6.