/ tanka·design

Relay

Web Relay, distilled. Tokens, components and patterns lifted straight from web.relay.tanka.ai.

By ShineZhong · captured 2026-05-18
$curl -O https://shinezhong0626.github.io/relay-designsystem/relay-design.md Download relay-design.md
Web · 1440 × 820
Relay 2026 home — 1440×820 design reference
01·Color

Palette

The file

↓ download .md 
# relay-design.md — Relay 2026 DLS (2026-05-18)

name:        Relay
source:      web.relay.tanka.ai
description: Soft pastel palette — sky blue + peach orange.
             Two-card onboarding rhythm.

colors:
  # Brand · Primary (sky, "you" CTA)
  brand-primary:         "#B0E4FE"
  brand-primary-hover:   "#89D2F8"
  brand-primary-pressed: "#5FC6F6"
  brand-primary-text:    "#014261"

  # Brand · Accent (peach, "teammate" CTA — paired with primary)
  brand-accent:          "#F8C9AE"
  brand-accent-hover:    "#F3B991"
  brand-accent-pressed:  "#EDA877"
  brand-accent-text:     "#7C3A1E"

  # Ink (neutral)
  ink:           "#07191E"
  surface:       "#FFFFFF"
  bg-page:       "#F7F8FB"

  # Functional
  danger:        "#E5484D"
  danger-hover:  "#DC3E42"
  success:       "#0EC46C"
  warning:       "#FFBB20"

typography:
  family-ui:      "Poppins"
  family-doc:     "Inter"
  family-serif:   "Source Serif 4"
  family-display: "Abhaya Libre"

radius:
  button-md:      12
  segmented:      12   # container
  segmented-tile: 10   # active inner
  modal:          16
  pill:           999

components:
  Button:            primary · accent · secondary · danger · 3 sizes
  TabSwitcher:       pill tabs · slot icons · top-level nav
  SegmentedControl:  sliding white tile · form-level choice

Tokens

Color Token Value
Semantic
color-brand-primary#B0E4FE
color-brand-cta-subtle#FFE4D5
color-background#FFFFFF
color-surface#F6F8F8
color-surface-muted#F1F5F6
color-fill-normal#F3F3F4
color-fill-pressed#EBEDED
color-line-normal#E2E8EB
color-line-light#EAEFF1
color-text-primary#07191E
color-text-secondary#5C6B73
color-text-tertiary#99A1AF
color-text-disabled#A7B0B5
Blue · scale
color-blue-15#0F294D
color-blue-25#014261
color-blue-55#5BA4E5
color-blue-65#5FC6F6
color-blue-75#89D2F8
color-blue-85#B0E4FE
color-blue-95#EEF7FF
Orange · scale
color-orange-40#B66100
color-orange-45#C24A00
color-orange-50#E55700
color-orange-85#FFC4A2
color-orange-90#FFD5BD
color-orange-95#FFE4D5
Ink · scale
color-ink-90#07191E
color-ink-80#102028
color-ink-60#5C6B73
color-ink-50#6D7574
color-ink-40#99A1AF
color-ink-30#A7B0B5
color-ink-20#D1D5DC
color-ink-15#E2E8EB
Functional
color-success#1D9A5C
color-warning#D27B00
color-danger#E5484D
color-info#5FC6F6
Vendor · quarantined
color-vendor-slack#ECB22E
color-vendor-google#FBBC04
color-vendor-gitlab#FC6D26
Typography
stackPoppins · Inter
body16 · 22
btn14 · 20 · 500
title24 · 500
largeTitle38 · 500
detail12
Radii
4681216999
Spacing
481216202432404864
Layout
canvas1440 × 820
topNav80
authCard392 × 496
button44h × 12r
choiceCard416 × 134
Stroke
subtleink / 8
controlink / 12-20
shadowmodal-only
02·Component

Button — sizes & variants.

Three sizes, four variants. Loading and disabled built in.

Size · 58 / 44 / 32
Variants
Button
3 sizes · 4 variants · loading · disabled
03·Component

Tab — pill, no shadow.

Active item picks up a neutral gray fill, inactive items sit flat. Icons via named slots.

Default · with icons (click to switch)
Tab
pill style · icon slots · click to switch · hover state
04·Component

SegmentedControl — sliding indicator.

A sliding gray pill animates between options. Use for binary or ternary choices inside a form or settings panel.

Default · with icons (click to switch)
SegmentedControl
sliding indicator · built-in icons · form-level choice
RelayButton.vue