Quire · Style guide
The system behind every page
Colors, type and components used across the help center. Change a style here and it updates everywhere — built dark-first.
01 — Color
Color
Background & border
Canvas
#0B0B0A
Surface
#141413
Raised
#1B1B19
Border
#2A2927
Border strong
#3B3A37
Text & accent
Text primary
#F5F4F0
Text secondary
#CFCCC4
Text muted
#9A978F
Accent
#F3F1EC
Accent subtle
#1B1B19
Categories & states
Green
#6CCB7E
Violet
#B08CF2
Orange
#F0965A
Yellow
#E8C547
Blue
#6FA8F0
Success
#6CCB7E
Warning
#F0965A
Danger
#F07A6E
02 — Typography
Typography
Sizes read Desktop / Tablet / Phone. Change a text style once and every page that uses it updates.
Display XL
Fraunces Regular · 64 / 52 / 40 · LH 1.05 · -0.02em
Answers, not tickets
Display L
Fraunces Regular · 44 / 40 / 32 · LH 1.1 · -0.02em
Authentication
Heading H2
Geist Medium · 28 / 26 / 24 · LH 1.2 · -0.02em
Create your first API key
Heading H2 Doc
Geist Medium · 24 / 22 / 22 · LH 1.25 · -0.015em · articles & changelog
Install with your package manager
Heading H3
Geist Medium · 20 / 20 / 18 · LH 1.3 · -0.01em
Scopes and permissions
Heading H4
Geist SemiBold · 16 · LH 1.4
Rate limits
Body Lead
Geist Regular · 18 / 18 / 17 · LH 1.6 · -0.005em
Everything you need to integrate Tessera into your product, from the first request to production.
Body Default
Geist Regular · 16 · LH 1.65
Each request is authenticated with a secret key sent in the Authorization header. Keys never expire, so rotate them whenever access changes.
Body Small
Geist Regular · 14 · LH 1.5
Updated 3 days ago · 4 min read
Label Mono
Geist Mono Medium · 12 · LH 1.2 · 0.08em
Getting started
Code
Geist Mono Regular · 14 · LH 1.6
curl https://api.tessera.dev/v1/events
03 — Components
Components
Category chip
Getting started
API reference
Guides
Integrations
Security
Sidebar item
Callout
Note
API keys are scoped to a single workspace. Rotate them from Settings → API whenever a teammate leaves.
You're all set
Your webhook endpoint responded with 200 OK. Events will start arriving within a few seconds.
Heads up
Test keys stop working after 90 days of inactivity. Switch to a live key before you launch.
Never expose secret keys
Secret keys grant full access to your workspace. Keep them on the server and out of client-side code.
Code block
terminal
npm install @tessera/sdk npx tessera init --workspace northwind
Tabs
Free
Team
Enterprise
All
New
Improved
Fixed
Changelog tag
NEW
IMPROVED
FIXED
Department chip
ENGINEERING
DESIGN
GROWTH
SUPPORT
Nav dropdown
Get started
Send your first event in five minutes
Guides
Webhooks, retries and going live
API reference
Endpoints, auth and rate limits
BROWSE ALL DOCS
Opens on hover. Edit items inside the Nav Dropdown component; the phone menu lists the same links under DOCS.
FAQ accordion
What counts as an event?
Can I switch plans anytime?
Yes. Upgrades apply right away and are prorated. Downgrades take effect at the next billing cycle.
Back to top
Lives in the Main Layout. Appears after 600px of scroll, bottom right.
Dither portrait
Code component. Drop in any photo; dark backgrounds work best. Dots turn to the hover colour when the card is hovered. Tune Cell, Contrast, Black point, Focus Y and Zoom in the properties panel. On the About page the photo comes from the Team CMS.
Particle text
Code component used on the 404 page. Any short word works. Dots assemble on load, scatter from the cursor and settle back. Respects reduced motion.
Quire Template
from
$79
