Tokens

Tokens are the core building blocks of the design system, describing colors and font sizes.

  1. Body XS
    10px → 12px
    var(--text-body-xs)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  2. Body S
    12px → 14px
    var(--text-body-s)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  3. Body M
    14px → 16px
    var(--text-body-m)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  4. Body L
    16px → 18px
    var(--text-body-l)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  5. Body XL
    18px → 22px
    var(--text-body-xl)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  6. Headline XS
    16px → 20px
    var(--text-headline-xs)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  7. Headline S
    18px → 24px
    var(--text-headline-s)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  8. Headline M
    20px → 32px
    var(--text-headline-m)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  9. Headline L
    26px → 40px
    var(--text-headline-l)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  10. Headline XL
    32px → 54px
    var(--text-headline-xl)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  11. Headline 2XL
    38px → 80px
    var(--text-headline-2xl)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  12. Headline 3XL
    52px → 88px
    var(--text-headline-3xl)
    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
  1. background-default
    var(--color-background-default)
  2. background-light
    var(--color-background-light)
  3. background-faint
    var(--color-background-faint)
  4. background-inverted
    var(--color-background-inverted)
  5. background-card
    var(--color-background-card)
  6. background-alert
    var(--color-background-alert)
  7. text-default
    var(--color-text-default)
  8. text-secondary
    var(--color-text-secondary)
  9. text-tertiary
    var(--color-text-tertiary)
  10. text-inverted-default
    var(--color-text-inverted-default)
  11. accent-default
    var(--color-accent-default)
  12. accent-hover
    var(--color-accent-hover)
  13. accent-subdued
    var(--color-accent-subdued)
  14. text-on-color
    var(--color-text-on-color)
  15. text-alert
    var(--color-text-alert)
  16. border
    var(--color-border)
  17. border-subdued
    var(--color-border-subdued)
  18. border-accent
    var(--color-border-accent)
  19. overlay
    var(--color-overlay)
  20. input-border
    var(--color-input-border)
  21. border-alert
    var(--color-border-alert)
  22. input-border-alert
    var(--color-input-border-alert)
  23. table-border
    var(--color-table-border)
  24. table-stripe
    var(--color-table-stripe)
  25. teal
    var(--color-teal)
  26. teal-hover
    var(--color-teal-hover)
  27. salmon
    var(--color-salmon)
  28. salmon-hover
    var(--color-salmon-hover)
  29. salmon-dark
    var(--color-salmon-dark)
  30. yellow
    var(--color-yellow)
  31. yellow-hover
    var(--color-yellow-hover)
  32. purple
    var(--color-purple)
  33. purple-hover
    var(--color-purple-hover)
  34. alert
    var(--color-alert)
  35. success
    var(--color-success)

Blocks

Blocks are the sections a page is made of. These are the components that you use in Sanity to build pages using the block array.

See below for a structured lists of available blocks and their variations.

Typography

Other

Listings

Layout

Product Feature Display

Media Block

Media with Text

Hero

Components

Components are the atoms that are used to build the blocks. You rarely interact with these directly unless you are developing a new block.

See below for a structured lists of available blocks and their variations.

undefined

Icons

A set of custom icons can be used to communicate abstract ideas and product features.

webhooks
visibility
users
uptime
tag
support
success
stop
speed
selfservice
rules
proxy
nativetooling
lock
formats
fixes
distribution
dependencies
costs
cloud
check
cli
bindings
availability
api

Illustrations

Brand illustration set the visual tone. They are used to convey the notion of the product, its features and values.

They can also be used to communicate high level abstract concepts, that cannot be easily represented by stylized product UI.

Automate
Centralize
Collaborate
Control
Edge
Elasticity
Experience
FormatHeader
Formats
Homepage
HomepageAnimated
Latency
Meta
MultiFormat
NavigatorCallToAction
NavigatorEntry
NavigatorTeaser
Network
Secure
SecureSupplyChain
Shipped
Simple
Speed
Upstream
CallToActionPurple

Explainers

Explainers are used as graphic elements that explain specific topics, features, or themes. They are often stylized UI elements that animate when they appear on the screen.

file:3d9897cfe027ecc7cbdb16e74a676ed143725ea2d08dbb0dde…/bin/sh -c set -eux; groupadd -r -g 999 redis; useradd…/bin/sh -c set -eux; apt-get update; apt-get install -…file:3d9897cfe027ecc7cbdb16e74a676ed143725ea2d08dbb0dde…file:3d9897cfe027ecc7cbdb16e74a676ed143725ea2d08dbb0dde…
SwiftRuby GemsPythonNPMMavenDockerBitbucket CI/CDBuildkiteGitHub ActionsTerraform ProviderTerraform ProviderGitHub ActionsBuildkiteBitbucket CI/CDDockerMavenNPMPythonRuby GemsSwift
tensorflow/tensorflowjunit-jupiter-api@5.11.4tf-training-data.zipnumpy@2.2.2lodash@4.17.21opencv@0.5.0Production5Packages123MB
0MB100MB200MB300MB400MB500MB
Scanning...Vulnerabilities found
LondonUKSao PaoloBrazilOhioUSAMumbaiIndiaTokyoJapanNorthern VirginiaUSAFrankfurtGermanyCaliforniaUSASingaporeSingaporeSydneyAustraliaOregonUSADublinIreland
Jerôme Rodrigues@laffertyishJack Grenouille@jgrenouille
ProductionStaging
Platform SDKPublic760190KBROADCAST
ConditionsActionsPackagesQuarantineVulnerabitiyCVE Severity - Critical1234567891011121314 policy
 rego.v1
max_cvss := cve_allowlist :=   match := match  target  input.v0.security_scan
packageimportdefaultfalseifsomesomein# maximum allowed CVSS score# array containing IDs of CVEs that have been explicitly allowed6}{[]"CVE-2023-32681"
pipeline.serviceGETSYSTEMCLEANUP_UPSTREAM_CACHESadmin.userDELETEpipeline.servicePATCHpipeline.serviceGETpipeline.serviceGETUSEREVENT
DocumentationGuidesAPI ReferenceCommunityGetting startedMigration to CloudsmithSupported FormatsIntegrationsTroubleshooting
a9f3d7e2b6c1g8h5i4j0k2m7n9p3q6 READ ONLYmN7pQ5rT3vW1xZ9bC4F6H8J0K2LXYMREAD ONLYeyJhbGciOiJIUzI1NiIsInR5cCI6IkREAD ONLYSflKxwRJSMeKKF2QT4fwpMeJf36POk6READ ONLY
0%90-DAY UPTIME
 

Third Party Logos

Logos of supported formats and integrations are kept as SVGs, which makes them easy to inline and re-style.

Below is a list of all logos currently available as inline SVGs.

zapier
vagrant
unity
travis
terraform
teams
swift
slack
semaphore
sbt
rust
rubygems
ruby
roadie
redhat
python
puppet
powershell
pingfederate
php
onelogin
okta
octopus
nuget
npm
myob
microsoft
maven
lua
kong
jumpcloud
jenkins
isc
hex
helm
harness
ha
gradle
google
go
gitlab
github
eclipse
drone
docker
dependabot
debian
datadog
cran
conda
conan
composer
codefresh
cocoapods
circleci
chocolatey
chef
chainguard
buildkite
bitbucket
binary
azuredevops
awscode
argo
ansible
alpine