The selection is the logo.
caretline's identity comes from one live demo: full-screen ASCII art pushed into the real editor, with the brightest cells sent as selections so the frame read in two tones. The wordmark is the word that sat in the middle of the warp field, selected, with the caret after it.
Ink on the void, and one colour.
Everything is starlight on deep space, except the selection. Use the lit colour for what is current: the caret, a selected run, the hottest cells of a frame. Never for decoration.
Void --void
The ground. Deep space with a hair of blue.
#08090D dark · #F5F6F9 light
Starlight --ink
Text and the field’s glyphs.
#DCDFE8 dark · #141720 light
Selection --lit
The one colour. Lit cells, the caret, the current thing.
#A396FF dark · #5338F0 light
Knockout --lit-ink
A glyph cut out of a lit cell.
#08090D dark · #FFFFFF light
Far star --dim
Labels, comments, the status row.
#7D8396 dark · #5D6377 light
Hairline --rule
Frame edges and table rules.
#222634 dark · #DDE0E8 light
Monospace first.
Geist Mono sets the logo, headings, labels, code and every number. Geist sets long prose. Both are free (SIL Open Font License).
The text editor as a state machine.
Every input is a message, and any session can be saved, sent, replayed or shared live with an agent.
Using the logo.
- Keep the caret. It is part of the wordmark. It sits one cell after the band and is never a separate decoration.
- Keep the letter spacing. One cell between letters, exactly as the editor drew it. Don't tighten it into a word.
- One lit thing per view. Next to the selected wordmark, nothing else is lit. Use the plain wordmark beside a lit button.
- Clear space is one cell on every side of the band: the width of one letter.
- Minimum sizes: the selected wordmark at 96 px wide, the plain one at 72 px, the mark at 32 px. Below that, the favicon cut.
- Don't recolour the band, add gradients, glows or shadows, outline the letters, or set the word in another face.
- Animate only on the frame clock. The warp field runs from time, honours reduced motion, and pauses when it is off screen.
- In plain text, write
caretlinein lower case. The caps are for the spaced wordmark.
Download.
SVG, with the letters as outlines, so they need no font.
| File | Use |
|---|---|
| caretline-wordmark-dark.svg | Wordmark, selected, for dark grounds |
| caretline-wordmark-light.svg | Wordmark, selected, for light grounds |
| caretline-wordmark-plain-dark.svg | Wordmark, plain, for dark grounds |
| caretline-wordmark-plain-light.svg | Wordmark, plain, for light grounds |
| caretline-lockup-dark.svg | Wordmark on its own dark tile |
| caretline-lockup-light.svg | Wordmark on its own light tile |
| caretline-mark-dark.svg | Mark on a dark tile (app icon, avatar) |
| caretline-mark-light.svg | Mark on a light tile |
| caretline-mark-bare-dark.svg | Mark, no tile, for dark grounds |
| caretline-mark-bare-light.svg | Mark, no tile, for light grounds |
| favicon.svg | Favicon: fewer, heavier streaks for 16–32 px |