Synapse
Esc
  • Docs
    Make your first request↵
  • Streaming
  • Function calling
  • Errors and rate limits
  • Pages
    Home
  • Models
  • Pricing and cost calculator
  • Rate limits by tier
  • Enterprise, SOC 2 and data retention
  • Changelog

design system

Dark neon, readable first.

Light is the accent: glows mark importance the way colour fills would on a light site. Every token below is a CSS custom property on :root, so a light theme can redefine them without touching components.

tokens

Colour

No pure white or pure black text pairs, to reduce halation for readers with astigmatism. Body text is #EDEDF2 on #07070B.

accessibility

Contrast, checked on every build

The same list runs in npm run check:contrast before next build. Neon violet is only used for borders, dots and glows, so it is held to the 3:1 non-text rule.

Colour pairings and contrast ratios
SamplePairUseRatio
Aa 200text on bgPrimary text17.2:1 pass
Aa 200text-mute on bgSecondary text, labels7.3:1 pass
Aa 200neon-cyan on bgLinks11.1:1 pass
Aa 200neon-lime on bgSuccess, 200 OK, keys13.3:1 pass
Aa 200neon-violet-soft on bgAccent labels, step numbers8.8:1 pass
Aa 200danger on bgErrors7.5:1 pass
Aa 200text on surface-1Primary text16.5:1 pass
Aa 200text-mute on surface-1Secondary text, labels7.0:1 pass
Aa 200neon-cyan on surface-1Links10.6:1 pass
Aa 200neon-lime on surface-1Success, 200 OK, keys12.8:1 pass
Aa 200neon-violet-soft on surface-1Accent labels, step numbers8.4:1 pass
Aa 200danger on surface-1Errors7.1:1 pass
Aa 200text on surface-2Primary text15.4:1 pass
Aa 200text-mute on surface-2Secondary text, labels6.5:1 pass
Aa 200neon-cyan on surface-2Links9.9:1 pass
Aa 200neon-lime on surface-2Success, 200 OK, keys11.9:1 pass
Aa 200neon-violet-soft on surface-2Accent labels, step numbers7.9:1 pass
Aa 200danger on surface-2Errors6.7:1 pass
Aa 200prose on bgDocs body copy13.0:1 pass
Aa 200on-light on textPrimary button label17.2:1 pass
Aa 200neon-violet on bgAccent borders, dots, glows (non-text)4.7:1 pass
Aa 200neon-violet on surface-1Accent borders on cards (non-text)4.5:1 pass
Aa 200syntax.foreground on surface-1Code token16.5:1 pass
Aa 200syntax.comment on surface-1Code token7.0:1 pass
Aa 200syntax.keyword on surface-1Code token8.4:1 pass
Aa 200syntax.string on surface-1Code token12.8:1 pass
Aa 200syntax.func on surface-1Code token10.6:1 pass
Aa 200syntax.constant on surface-1Code token10.9:1 pass
Aa 200syntax.property on surface-1Code token15.4:1 pass
Aa 200syntax.type on surface-1Code token10.4:1 pass
Aa 200syntax.punctuation on surface-1Code token9.4:1 pass

typography

Geist and Geist Mono

Display · Geist 600 · 40 → 96px · gradient with solid fallback

Speed of thought.

H2 · Geist 600 · 28 → 52px

Everything a production workload needs.

Body · Geist 400 · 16 → 18px

One API for eight models. First streamed token in about 120 milliseconds, and prices you can read without a sales call.

Code, labels, numbers · Geist Mono 400 · 13 → 15px

p50 182ms · $0.10 / 1M · 128K ctx

components

Components

Buttons · tab to see the focus ring (2px cyan + 4px glow)

Metric pills

p50 latency 180ms endpoint unavailable

Icon tiles

Spotlight card · move a mouse over it

The border follows the pointer.

A radial gradient in a masked ::before. One document-level pointer listener drives every card. Off on touch screens and with reduced motion.

code block · Shiki, synapse-neon theme
// Every token colour passes 4.5:1 on --surface-1
const res = await fetch("https://api.synapse.example/v1/models", {
  headers: { Authorization: `Bearer ${process.env.SYNAPSE_API_KEY}` },
});
const { data } = await res.json();
console.log(data.length, true, null);
bash: first request

Example request: $ curl api.synapse.example/v1/chat \ -H "Authorization: Bearer $SYNAPSE_KEY" \ -d '{"model": "syn-flash", "stream": true, "messages": [{"role": "user", "content": "Explain latency in 8 words"}]}'. Response: HTTP 200, first token in 112 milliseconds, streamed text: Latency: the pause between asking and knowing.

>Latency: the pause between asking and knowing.

motion

Motion