Code & Terminals
Code & Terminals
Commands & code always sit on navy, read top to bottom like a real session, & copy with one click.
Terminal
For step-by-step commands. Each line copies on its own; comments explain the steps.
# Install the Sprites CLI
# Log in
# Create a new sprite
# Run a command in it
Code Blocks
For API calls & SDK snippets. Tabs switch language; the block keeps the same palette in every one.
# Create a new sprite
curl -X PUT https://api.sprites.dev/v1/sprites/my-sprite \
-H "Authorization: Bearer $SPRITES_TOKEN"
# Execute a command
curl -X POST https://api.sprites.dev/v1/sprites/my-sprite/exec \
-H "Authorization: Bearer $SPRITES_TOKEN" \
-d '{"command": "echo hello"}'import { SpritesClient } from '@fly/sprites';
const client = new SpritesClient(process.env.SPRITES_TOKEN!);
const sprite = client.sprite('my-sprite');
// Run a command!
const { stdout } = await sprite.exec('echo hello');import "github.com/superfly/sprites-go"
client := sprites.New("your-auth-token")
sprite := client.Sprite("my-sprite")
// Run a command, just like exec.Command
output, err := sprite.Command("echo", "hello").Output()Syntax Colors
The whole palette. Every snippet uses these & nothing else.
- $Promptemerald-400 · #34D399
- spriteCommandwhite · #FFFFFF
- importKeywordviolet-300 · #C4B5FD
- exec()Function & typesky-300 · #7DD3FC
- 'my-sprite'Stringemerald-300 · #6EE7B7
- $SPRITES_TOKENVariable & literalamber-300 · #FCD34D
- # Log inCommentnavy-400 · #A39AC1
- -s my-spritePlain textnavy-100 · #F4F3FB
- Surface
- navy-900, 12 px radius, 1 px inset ring of white at 10%, small shadow
- Title bar
- white at 5% with a white/10 bottom border; three 10 px navy-600 dots
- Pills
- Fragment Mono 10 px, uppercase, tracked; active is emerald-400/15 with emerald-300 text
- Type
- Fragment Mono 13–14 px, leading 1.6
- Comments
- Their own line, # in navy-400, never selectable
- Commands
- emerald-400 $, white first word, navy-100 arguments; the whole line copies
- Tabs
- Mono uppercase pills above the block; active is violet-600 with white text
- Terminals & code blocks are always navy-900, even in light mode.
- Every command is real & runnable. Don’t abbreviate or fake output.
- Explain steps with # comment lines, not prose between blocks.
- Make each command copyable on its own, without the $ prompt.
- Offer platform variants (macOS / Linux, Windows) when the commands differ.
- Only the syntax colors above; no theme-specific highlighting.