GFS Design System — Design Token Pipeline

02Token ArchitectureSource → Transform → Output

All GFS design decisions live in a single tokens.json file. Style Dictionary reads this source, applies platform-specific transforms (naming conventions, unit conversions, format wrappers), and generates native output files for every target platform. Change one value in the source; every platform updates automatically.

tokens.json

Single Source of Truth

Style Dictionary

Transform · Format · Build

{ }CSS Variables

shared.css

JSJavaScript Constants

tokens.js / tokens.ts

iOS Colors

GFSTokens.swift

⚄Android Colors

colors.xml / dimens.xml

◆Figma Tokens

figma-tokens.json

✉Email Inline Styles

email-tokens.json

NSNetSuite SuiteScript

ns-tokens.js

▦Print CMYK

print-tokens.json

Single source, zero drift. Every color, spacing value, font stack, and shadow in the GFS system originates from tokens.json. Platform teams never hardcode values. If a token does not exist in the source, the value does not belong in the system.

03Token CategoriesColor / Spacing / Typography / Effects

Color Tokens

Token

CSS

JavaScript

iOS (Swift)

Android (Kotlin)

cobalt

var(--cobalt)

GFS.colors.cobalt

UIColor.gfsCobalt

R.color.gfs_cobalt

navy

var(--navy)

GFS.colors.navy

UIColor.gfsNavy

R.color.gfs_navy

tufts

var(--tufts)

GFS.colors.tufts

UIColor.gfsTufts

R.color.gfs_tufts

jordy

var(--jordy)

GFS.colors.jordy

UIColor.gfsJordy

R.color.gfs_jordy

alice

var(--alice)

GFS.colors.alice

UIColor.gfsAlice

R.color.gfs_alice

ice

var(--ice)

GFS.colors.ice

UIColor.gfsIce

R.color.gfs_ice

midnight

var(--midnight)

GFS.colors.midnight

UIColor.gfsMidnight

R.color.gfs_midnight

success

var(--success)

GFS.colors.success

UIColor.gfsSuccess

R.color.gfs_success

warning

var(--warning)

GFS.colors.warning

UIColor.gfsWarning

R.color.gfs_warning

error

var(--error)

GFS.colors.error

UIColor.gfsError

R.color.gfs_error

Spacing Tokens

Token

CSS

JavaScript

iOS (Swift)

Android (Kotlin)

sp-1 (4px)

var(--sp-1)

GFS.spacing.sp1

GFSSpacing.sp1 // 4

R.dimen.gfs_sp_1

sp-2 (8px)

var(--sp-2)

GFS.spacing.sp2

GFSSpacing.sp2 // 8

R.dimen.gfs_sp_2

sp-4 (16px)

var(--sp-4)

GFS.spacing.sp4

GFSSpacing.sp4 // 16

R.dimen.gfs_sp_4

sp-6 (24px)

var(--sp-6)

GFS.spacing.sp6

GFSSpacing.sp6 // 24

R.dimen.gfs_sp_6

sp-8 (32px)

var(--sp-8)

GFS.spacing.sp8

GFSSpacing.sp8 // 32

R.dimen.gfs_sp_8

sp-12 (48px)

var(--sp-12)

GFS.spacing.sp12

GFSSpacing.sp12 // 48

R.dimen.gfs_sp_12

sp-16 (64px)

var(--sp-16)

GFS.spacing.sp16

GFSSpacing.sp16 // 64

R.dimen.gfs_sp_16

sp-24 (96px)

var(--sp-24)

GFS.spacing.sp24

GFSSpacing.sp24 // 96

R.dimen.gfs_sp_24

Typography Tokens

Token

CSS

JavaScript

iOS (Swift)

Android (Kotlin)

font-display

font-family: 'Inter'

GFS.fonts.display

UIFont.gfsDisplay

R.font.gfs_inter

font-mono

font-family: 'IBM Plex Mono'

GFS.fonts.mono

UIFont.gfsMono

R.font.gfs_plex_mono

weight-bold

font-weight: 700

GFS.weights.bold

.bold // UIFont.Weight

Typeface.BOLD

weight-semibold

font-weight: 600

GFS.weights.semibold

.semibold

FontWeight.SemiBold

text-xs (11px)

var(--text-xs)

GFS.sizes.xs

GFSSize.xs // 11

R.dimen.gfs_text_xs

text-sm (13px)

var(--text-sm)

GFS.sizes.sm

GFSSize.sm // 13

R.dimen.gfs_text_sm

text-base (15px)

var(--text-base)

GFS.sizes.base

GFSSize.base // 15

R.dimen.gfs_text_base

text-2xl (24px)

var(--text-2xl)

GFS.sizes.xxl

GFSSize.xxl // 24

R.dimen.gfs_text_2xl

text-5xl (56px)

var(--text-5xl)

GFS.sizes.display

GFSSize.display // 56

R.dimen.gfs_text_5xl

Shadows, Radii & Breakpoints

Token

CSS

JavaScript

iOS (Swift)

Android (Kotlin)

shadow-sm

var(--shadow-sm)

GFS.shadows.sm

GFSShadow.sm

@style/GFS.Shadow.Sm

shadow-md

var(--shadow-md)

GFS.shadows.md

GFSShadow.md

@style/GFS.Shadow.Md

shadow-lg

var(--shadow-lg)

GFS.shadows.lg

GFSShadow.lg

@style/GFS.Shadow.Lg

radius-sm (2px)

var(--radius-sm)

GFS.radii.sm

GFSRadius.sm // 2

R.dimen.gfs_radius_sm

radius-md (4px)

var(--radius-md)

GFS.radii.md

GFSRadius.md // 4

R.dimen.gfs_radius_md

radius-lg (8px)

var(--radius-lg)

GFS.radii.lg

GFSRadius.lg // 8

R.dimen.gfs_radius_lg

breakpoint-md

@media (min-width:768px)

GFS.breakpoints.md

GFSBreakpoint.md // 768

sw768dp

breakpoint-lg

@media (min-width:1024px)

GFS.breakpoints.lg

GFSBreakpoint.lg // 1024

sw1024dp

breakpoint-xl

@media (min-width:1440px)

GFS.breakpoints.xl

GFSBreakpoint.xl // 1440

sw1440dp

04Build PipelineJSON → CSS Custom Properties → shared.css

The build pipeline transforms tokens.json into platform-native files. For web, the primary output is shared.css, which contains all CSS custom properties consumed by every GFS HTML page. Changing a single value in the source JSON regenerates every downstream artifact.

1

Source: tokens.json

All design decisions stored in a flat, human-readable JSON structure. Colors, spacing, typography, shadows, radii, and breakpoints.

// tokens.json (source of truth)
{
  "colors": {
    "primary": {
      "cobalt": { "value": "#092F64" },
      "tufts":  { "value": "#468BE6" }
    }
  },
  "spacing": {
    "sp-4": "16px",
    "sp-6": "24px"
  }
}

2

Transform: Style Dictionary

Style Dictionary reads the JSON, applies naming conventions (kebab-case for CSS, camelCase for JS, PascalCase for Swift), converts units, and wraps output in the correct format for each platform.

// style-dictionary.config.json
{
  "source": ["tokens.json"],
  "platforms": {
    "css":     { "transformGroup": "css",     "buildPath": "build/css/"     },
    "js":      { "transformGroup": "js",      "buildPath": "build/js/"      },
    "ios":     { "transformGroup": "ios",     "buildPath": "build/ios/"     },
    "android": { "transformGroup": "android", "buildPath": "build/android/" }
  }
}

3

Output: shared.css (CSS Custom Properties)

The web build generates :root custom properties consumed by every GFS page. All values are references, never hardcoded hex values in component stylesheets.

/* shared.css (auto-generated) */
:root {
  --cobalt: #092F64;
  --navy: #1A5799;
  --tufts: #468BE6;
  --jordy: #93BFEF;
  --alice: #E9F5FF;
  --ice: #F4F9FF;
  --sp-1: 4px;
  --sp-4: 16px;
  --sp-6: 24px;
  --text-sm: 13px;
  --shadow-sm: 0 1px 2px rgba(9,47,100,0.06);
}

Cascade: Change Once, Update Everywhere

Example: updating the cobalt value in tokens.json automatically cascades to every platform output.

tokens.json

cobalt: "#092F64"
Change to "#0A3572"

→

Style Dictionary

Rebuild triggered
All 8 platforms

→

All Outputs Updated

CSS, JS, Swift, Kotlin,
Figma, Email, NS, Print

Regenerate CSS. Run npx style-dictionary build after any tokens.json change. The build is deterministic and idempotent. CI/CD pipelines should include token validation and automated visual regression tests.

05Platform Export ReferenceEvery Token × Every Format

Complete reference table showing every GFS token with its value in CSS, JavaScript, Swift, Kotlin, SCSS, Less, and raw JSON.

Token	Value	CSS	JavaScript	Swift	Kotlin	SCSS	Less
Primary Colors
cobalt	#092F64	var(--cobalt)	GFS.colors.cobalt	UIColor.gfsCobalt	R.color.gfs_cobalt	$gfs-cobalt	@gfs-cobalt
navy	#1A5799	var(--navy)	GFS.colors.navy	UIColor.gfsNavy	R.color.gfs_navy	$gfs-navy	@gfs-navy
tufts	#468BE6	var(--tufts)	GFS.colors.tufts	UIColor.gfsTufts	R.color.gfs_tufts	$gfs-tufts	@gfs-tufts
jordy	#93BFEF	var(--jordy)	GFS.colors.jordy	UIColor.gfsJordy	R.color.gfs_jordy	$gfs-jordy	@gfs-jordy
alice	#E9F5FF	var(--alice)	GFS.colors.alice	UIColor.gfsAlice	R.color.gfs_alice	$gfs-alice	@gfs-alice
ice	#F4F9FF	var(--ice)	GFS.colors.ice	UIColor.gfsIce	R.color.gfs_ice	$gfs-ice	@gfs-ice
midnight	#051B3A	var(--midnight)	GFS.colors.midnight	UIColor.gfsMidnight	R.color.gfs_midnight	$gfs-midnight	@gfs-midnight
Neutrals
black	#1F1F1F	var(--black)	GFS.colors.black	UIColor.gfsBlack	R.color.gfs_black	$gfs-black	@gfs-black
graphite	#4B5F7A	var(--graphite)	GFS.colors.graphite	UIColor.gfsGraphite	R.color.gfs_graphite	$gfs-graphite	@gfs-graphite
slate	#6B7280	var(--slate)	GFS.colors.slate	UIColor.gfsSlate	R.color.gfs_slate	$gfs-slate	@gfs-slate
steel	#9CA3AF	var(--steel)	GFS.colors.steel	UIColor.gfsSteel	R.color.gfs_steel	$gfs-steel	@gfs-steel
silver	#D9E1EA	var(--silver)	GFS.colors.silver	UIColor.gfsSilver	R.color.gfs_silver	$gfs-silver	@gfs-silver
fog	#F0F2F5	var(--fog)	GFS.colors.fog	UIColor.gfsFog	R.color.gfs_fog	$gfs-fog	@gfs-fog
white	#FFFFFF	var(--white)	GFS.colors.white	UIColor.gfsWhite	R.color.gfs_white	$gfs-white	@gfs-white
Semantic Colors
success	#0F766E	var(--success)	GFS.colors.success	UIColor.gfsSuccess	R.color.gfs_success	$gfs-success	@gfs-success
warning	#B45309	var(--warning)	GFS.colors.warning	UIColor.gfsWarning	R.color.gfs_warning	$gfs-warning	@gfs-warning
error	#DC2626	var(--error)	GFS.colors.error	UIColor.gfsError	R.color.gfs_error	$gfs-error	@gfs-error
Spacing
sp-1	4px	var(--sp-1)	GFS.spacing.sp1	GFSSpacing.sp1	R.dimen.gfs_sp_1	$gfs-sp-1	@gfs-sp-1
sp-2	8px	var(--sp-2)	GFS.spacing.sp2	GFSSpacing.sp2	R.dimen.gfs_sp_2	$gfs-sp-2	@gfs-sp-2
sp-3	12px	var(--sp-3)	GFS.spacing.sp3	GFSSpacing.sp3	R.dimen.gfs_sp_3	$gfs-sp-3	@gfs-sp-3
sp-4	16px	var(--sp-4)	GFS.spacing.sp4	GFSSpacing.sp4	R.dimen.gfs_sp_4	$gfs-sp-4	@gfs-sp-4
sp-6	24px	var(--sp-6)	GFS.spacing.sp6	GFSSpacing.sp6	R.dimen.gfs_sp_6	$gfs-sp-6	@gfs-sp-6
sp-8	32px	var(--sp-8)	GFS.spacing.sp8	GFSSpacing.sp8	R.dimen.gfs_sp_8	$gfs-sp-8	@gfs-sp-8
sp-12	48px	var(--sp-12)	GFS.spacing.sp12	GFSSpacing.sp12	R.dimen.gfs_sp_12	$gfs-sp-12	@gfs-sp-12
sp-16	64px	var(--sp-16)	GFS.spacing.sp16	GFSSpacing.sp16	R.dimen.gfs_sp_16	$gfs-sp-16	@gfs-sp-16
sp-24	96px	var(--sp-24)	GFS.spacing.sp24	GFSSpacing.sp24	R.dimen.gfs_sp_24	$gfs-sp-24	@gfs-sp-24
Typography
font-display	Inter	'Inter', sans-serif	GFS.fonts.display	UIFont(name:"Inter")	R.font.gfs_inter	$gfs-font-display	@gfs-font-display
font-mono	IBM Plex Mono	'IBM Plex Mono', mono	GFS.fonts.mono	UIFont(name:"IBMPlexMono")	R.font.gfs_plex_mono	$gfs-font-mono	@gfs-font-mono
Shadows
shadow-sm	0 1px 2px rgba(9,47,100,.06)	var(--shadow-sm)	GFS.shadows.sm	GFSShadow.sm	@style/GFS.Shadow.Sm	$gfs-shadow-sm	@gfs-shadow-sm
shadow-md	0 2px 8px rgba(9,47,100,.08)	var(--shadow-md)	GFS.shadows.md	GFSShadow.md	@style/GFS.Shadow.Md	$gfs-shadow-md	@gfs-shadow-md
shadow-lg	0 8px 24px rgba(9,47,100,.12)	var(--shadow-lg)	GFS.shadows.lg	GFSShadow.lg	@style/GFS.Shadow.Lg	$gfs-shadow-lg	@gfs-shadow-lg
Radii
radius-sm	2px	var(--radius-sm)	GFS.radii.sm	GFSRadius.sm	R.dimen.gfs_radius_sm	$gfs-radius-sm	@gfs-radius-sm
radius-md	4px	var(--radius-md)	GFS.radii.md	GFSRadius.md	R.dimen.gfs_radius_md	$gfs-radius-md	@gfs-radius-md
radius-lg	8px	var(--radius-lg)	GFS.radii.lg	GFSRadius.lg	R.dimen.gfs_radius_lg	$gfs-radius-lg	@gfs-radius-lg
Breakpoints
bp-sm	0px	@media (min-width:0)	GFS.breakpoints.sm	GFSBreakpoint.sm	sw0dp	$gfs-bp-sm	@gfs-bp-sm
bp-md	768px	@media (min-width:768px)	GFS.breakpoints.md	GFSBreakpoint.md	sw768dp	$gfs-bp-md	@gfs-bp-md
bp-lg	1024px	@media (min-width:1024px)	GFS.breakpoints.lg	GFSBreakpoint.lg	sw1024dp	$gfs-bp-lg	@gfs-bp-lg
bp-xl	1440px	@media (min-width:1440px)	GFS.breakpoints.xl	GFSBreakpoint.xl	sw1440dp	$gfs-bp-xl	@gfs-bp-xl

Platform teams: never hardcode. Always reference the token. If a value does not appear in this table, it does not belong in the system. Request a new token through the design operations channel before introducing any new value.