Token Reference

Branding tokens are organized into five groups: colors, borders, typography, widget, and background. All groups are optional. When a token is absent or invalid, Shyntr falls back to the tenant's inherited value, then to the system default.

Tokens are set via the dashboard branding editor or directly through the Admin API. Both paths produce the same stored token set and the same rendered output.

---

colors

Controls the color palette used across all surfaces.

{
  "colors": {
    "primary": "#5B4CF5",
    "background": "#FFFFFF",
    "text": "#1A1A2E",
    "border": "#E2E8F0"
  }
}

Token	Applied to	Fallback
primary	Buttons, links, focus rings	#5B4CF5
background	Page or card background	#FFFFFF
text	Primary text	#1A1A2E
border	Borders when borders.width > 0	#E2E8F0

All color values must be valid CSS hex strings (#RRGGBB or #RGB). RGB, HSL, and named color strings are rejected with a validation error.

---

borders

Controls the visual boundary style applied to cards, inputs, and containers.

{
  "borders": {
    "width": 1,
    "radius": 8
  }
}

borders.width

Property	Type	Range	Default
width	integer	0 – 10	1

• 0 removes all borders. No border element is rendered.
• The value maps directly to pixels — no scaling applied.
• Values outside 0–10 are rejected with a validation error.

borders.radius

Property	Type	Range	Default
radius	integer	0 – 32	4

• 0 produces sharp rectangular corners.
• 32 produces heavily rounded corners.
• Values outside 0–32 are clamped to the nearest bound (not rejected).

---

typography

Controls the font family and semantic weight levels used in all UI text.

{
  "typography": {
    "fontFamily": "Inter, sans-serif",
    "fontWeightNormal": 500,
    "fontWeightBold": 600
  }
}

typography.fontFamily

A CSS font-family string. The font must be available in the runtime environment — either a system font or loaded via a CSP-approved CDN. If the specified font cannot be resolved, the browser falls back to the next family in the stack.

typography.fontWeightNormal and typography.fontWeightBold

Semantic weights only

Shyntr accepts exactly 500 for normal weight and 600 for bold weight. No other values are valid. This constraint is enforced at write time to eliminate weight-mapping ambiguity between the dashboard preview and the auth portal runtime.

Field	Accepted value	Applied to
fontWeightNormal	500	Body text, labels
fontWeightBold	600	Headings, emphasized text

Any other integer is rejected with a validation error. Values are never silently rounded or remapped.

---

widget

Controls the tenant-specific copy and logo rendered inside the login card.

{
  "widget": {
    "loginTitle": "Sign in to Acme",
    "loginSubtitle": "Use your Acme credentials to continue.",
    "logoUrl": "https://cdn.acme.com/logo.svg"
  }
}

Token	Description	Max length	Fallback
loginTitle	Heading at the top of the login card	80 characters	Tenant display name
loginSubtitle	Supporting text below the title	160 characters	Empty (not rendered)
logoUrl	Absolute URL to the tenant logo	2048 characters	Shyntr mascot

Logo fallback: If logoUrl is not set or fails to load, the Shyntr mascot is displayed in its place. This ensures the login card always has a visible identity mark — set logoUrl to override it with your own.

Normalization rules:

• loginTitle and loginSubtitle are HTML-escaped. Markdown and HTML tags are rendered as plain text.
• logoUrl must use the https:// scheme. http://, data:, and relative URLs are rejected.
• Logo dimensions are constrained to 200px × 80px maximum; the image is scaled proportionally within that box.

---

background

Controls the surface behind the login and consent cards.

{
  "background": {
    "color": "#F8F9FF",
    "image": "https://cdn.acme.com/auth-bg.jpg"
  }
}

Token	Description	Fallback
color	Solid background color (CSS hex)	#FFFFFF
image	Absolute https:// URL to a background image	No background image

Fallback logic:

1. If image is set and resolves, it renders as a cover-sized layer over color.
2. If image is set but fails to load, color is shown instead.
3. If neither is set, the system default background color applies.

Setting both color and image is valid and recommended — color acts as the safe fallback when the image is unavailable.

---

Full example

{
  "colors": {
    "primary": "#5B4CF5",
    "background": "#FFFFFF",
    "text": "#1A1A2E",
    "border": "#E2E8F0"
  },
  "typography": {
    "fontFamily": "Inter, sans-serif",
    "fontWeightNormal": 500,
    "fontWeightBold": 600
  },
  "borders": {
    "width": 1,
    "radius": 8
  },
  "widget": {
    "loginTitle": "Sign in to Acme",
    "loginSubtitle": "Use your Acme credentials to continue.",
    "logoUrl": "https://cdn.acme.com/logo.svg"
  },
  "background": {
    "color": "#F8F9FF",
    "image": "https://cdn.acme.com/auth-bg.jpg"
  }
}

---

Validation summary

Token	Behavior on invalid input
borders.width outside 0–10	Rejected — validation error
borders.radius outside 0–32	Clamped to nearest bound
colors.* not a CSS hex string	Rejected — validation error
typography.fontWeightNormal ≠ 500	Rejected — validation error
typography.fontWeightBold ≠ 600	Rejected — validation error
widget.logoUrl not https://	Rejected — validation error
background.image not https://	Rejected — validation error