Brand tokens

The /tokens subpath of @singi-labs/sifa-sdk (currently 0.9.18) bundles the cross-platform brand primitives a third-party Sifa-aware client needs to feel native: colors, typography stacks, and the icon-library convention. None of them depend on Tailwind or any specific framework. None of them touch the network.

This page renders the live values straight from the SDK. If the palette updates or the typography conventions change, the page changes on the next docs build.

Colors

Sifa's primary and secondary brand colors come from the Flexoki palette.

Type

interface Colors {
  /** Flexoki Blue: Sifa's primary accent. */
  primary: string
  /** Flexoki Purple: secondary accent, shared across Singi Labs products. */
  secondary: string
}

Exported as a const object at runtime, so TypeScript narrows the values to their literal string types. Updates to the palette propagate via pnpm update @singi-labs/sifa-sdk, no find-and-replace required.

Usage

/**
 * Read brand color tokens from the SDK.
 *
 * Compiles against the pinned sifa-sdk version on every CI run.
 */

import { colors } from '@singi-labs/sifa-sdk/tokens'

// Use in a React component, a Canvas drawing, a CLI ANSI escape, etc.
const primaryFill = colors.primary // Flexoki Blue
const secondaryStroke = colors.secondary // Flexoki Purple

console.log({ primaryFill, secondaryStroke })

// Or build a CSS variable map for a stylesheet.
const cssVars = Object.fromEntries(
  Object.entries(colors).map(([key, value]) => [`--sifa-${key}`, value])
)

console.log(cssVars)

If you're styling with CSS, reference the same hex values as variables. Sifa Web and Sifa Docs both expose them as CSS variables (--brand-blue-solid, etc.). The full variable set isn't published outside the sifa-web source tree, but the names mirror the SDK constants: --brand-blue-solid maps to colors.primary, --brand-purple-solid to colors.secondary.

Typography

Three font families with explicit fallback chains. Brand fonts are self-hosted (Sifa Web ships the WOFF2 files; a mobile app would bundle equivalents). The SDK encodes the names and stacks; consumers handle font loading.

Types

/** Font family names (without fallbacks). */
interface Fonts {
  /** Body text. */
  sans: string
  /** Headings (h1, h2, h3), wordmark. */
  display: string
  /** Code / monospace. */
  mono: string
}

/** Full font-family strings with fallback chains, paste-ready into CSS. */
interface FontFallbackStacks {
  sans: string
  display: string
  mono: string
}

Usage

/**
 * Apply Sifa's font tokens in any styling layer.
 *
 * The SDK exports the font names and the full fallback stacks. Consumers
 * load the actual WOFF2 files themselves (Sifa Web does this via
 * `next/font`; mobile apps would bundle the files).
 *
 * Compiles against the pinned sifa-sdk version on every CI run.
 */

import { fonts, fontFallbackStacks } from '@singi-labs/sifa-sdk/tokens'

// In CSS-in-JS or React Native:
const headingStyle = {
  fontFamily: fontFallbackStacks.display,
  fontWeight: 700,
}

const bodyStyle = {
  fontFamily: fontFallbackStacks.sans,
  fontWeight: 400,
}

const codeStyle = {
  fontFamily: fontFallbackStacks.mono,
  fontSize: 14,
}

console.log({ headingStyle, bodyStyle, codeStyle })

// In Tailwind's theme config (next/font handles the variable swap):
const tailwindFontFamily = {
  display: [fonts.display, 'system-ui', 'sans-serif'],
  sans: [fonts.sans, 'system-ui', 'sans-serif'],
  mono: [fonts.mono, 'ui-monospace', 'monospace'],
}

console.log(tailwindFontFamily)

The fallback stacks include Noto Sans subsets (Arabic, Devanagari, Thai, Hebrew) and OS-installed CJK fonts. Sifa deliberately doesn't ship CJK web fonts: every CJK user already has an OS-level CJK font and vendoring them would add 14+ MB.

Icons

Sifa uses Phosphor Icons across every product. The convention is single-library; mixing icon families within a product is forbidden by convention. The SDK encodes the convention and a weight system so consumers know which Phosphor weight to pick in each context.

Types

/** The icon-library identifier the SDK endorses. */
type IconSet = 'phosphor'

/** Phosphor weight mapping per UI context. */
interface IconWeights {
  /** UI chrome: buttons, nav, default state. */
  uiChrome: 'regular'
  /** Interactive / active states: selected items, primary buttons. */
  interactive: 'bold'
  /** Decorative / illustration: empty states, hero sections. */
  decorative: 'duotone'
}

Usage

/**
 * Use the Sifa icon-set convention to pick a Phosphor weight in context.
 *
 * The SDK doesn't bundle icon SVGs (Phosphor is its own package). It
 * documents the convention so consumers know which weight to render in
 * which UI context.
 *
 * Compiles against the pinned sifa-sdk version on every CI run.
 */

import { iconSet, iconWeights, type IconWeights } from '@singi-labs/sifa-sdk/tokens'

console.log(`Icon library: ${iconSet}`)

// Map a UI context to its conventional Phosphor weight.
function weightForContext(context: keyof IconWeights): string {
  return iconWeights[context]
}

// In a React app using @phosphor-icons/react:
const buttonIconWeight = weightForContext('uiChrome') // 'regular'
const activeNavWeight = weightForContext('interactive') // 'bold'
const heroIconWeight = weightForContext('decorative') // 'duotone'

console.log({ buttonIconWeight, activeNavWeight, heroIconWeight })

// Example usage (pseudo-JSX, written as a comment to keep this file
// dependency-free for the typecheck):
//
//   import { House } from '@phosphor-icons/react'
//   <House weight={iconWeights.uiChrome} size={20} />

The weight conventions are guidance, not enforced. Tooling that wants to lint icon usage can reference the constants directly.

Logos and press assets

The SDK doesn't ship logos. Logos are static SVG assets, not tokens. If you're building a Sifa-aware client and want the logo:

• For runtime rendering (an <img src="..."> or React Native <Image>), grab the SVG from sifa-docs: sifa-logo-light.svg and sifa-logo-dark.svg. Hotlinking is fine; if you'd rather vendor, copy the SVG into your own assets.
• For press contexts (longer-form articles, conference programs, banners), use the higher-resolution variants from the Singi Labs press kit. The press kit also covers brand-usage guidelines (clearspace, minimum size, what backgrounds the wordmark works on).
• For other Atmosphere app logos (Bluesky, Tangled, Leaflet, Smoke Signal, Grain, Semble, and others, when your client renders records from those apps), atmologos is the community-curated source of truth, maintained by @cozylittle.house. SVG logomarks in colour and monochrome. Confirm each app's individual brand-usage policy before redistributing.

Why no client-render component?

Sifa's full design system (spacing, motion, the complete typography scale) lives in Singi Labs / brand and is not part of the SDK. The /tokens subpath only exposes the cross-platform primitives a third-party client needs to render a Sifa-flavoured UI without depending on Tailwind or any specific framework. Each consumer translates the constants into whatever their styling layer expects.