← Hub — Token Export — Every Format
v10.0
01 Token Export Overview Every GFS design token in 8 consumable formats
21
Colors
12
Spacing
10
Type Sizes
3
Radii
4
Shadows
4
Breakpoints
8
Formats

One-click copy for CSS, SCSS, Tailwind, Style Dictionary (Figma), JavaScript, JSON, iOS/Swift, and Android/Kotlin. Each block is complete and ready to paste into your project.

02 CSS Variables 03 SCSS Variables 04 Tailwind Config 05 Figma Tokens 06 JavaScript 07 JSON 08 iOS / Swift 09 Android / Kotlin 10 Reference Table
■ GFS Design System v10.0 — tokens sourced from tokens.json and shared.css
02 CSS Custom Properties Complete :root block — paste into any stylesheet
CSS 
/* GFS Design System v10.0 — CSS Custom Properties */
/* Global Food Solutions, Inc. */

:root {
  /* ── Primary Blues ── */
  --cobalt: #092F64;
  --navy: #1A5799;
  --tufts: #468BE6;
  --jordy: #93BFEF;
  --alice: #E9F5FF;
  --ice: #F4F9FF;
  --midnight: #051B3A;

  /* ── Neutrals ── */
  --black: #1F1F1F;
  --charcoal: #2D2D2D;
  --graphite: #4B5F7A;
  --slate: #6B7280;
  --steel: #9CA3AF;
  --silver: #D9E1EA;
  --fog: #F0F2F5;
  --white: #FFFFFF;

  /* ── Semantic ── */
  --success: #0F766E;
  --success-bg: #F0FDF4;
  --warning: #B45309;
  --warning-bg: #FFFBEB;
  --error: #DC2626;
  --error-bg: #FEF2F2;
  --info: #1A5799;
  --info-bg: #E9F5FF;

  /* ── Spacing ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Typography Scale ── */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;
  --text-6xl: 72px;
  --text-7xl: 96px;

  /* ── Border Radius ── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ── Easing ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Durations ── */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(9, 47, 100, 0.06);
  --shadow-md: 0 2px 8px rgba(9, 47, 100, 0.08);
  --shadow-lg: 0 8px 24px rgba(9, 47, 100, 0.12);
  --shadow-xl: 0 16px 48px rgba(9, 47, 100, 0.16);

  /* ── Breakpoints (reference only — not usable in CSS vars) ── */
  /* sm: 0px | md: 768px | lg: 1024px | xl: 1440px */

  /* ── Semantic Layer (shadcn-inspired) ── */
  --background: var(--white);
  --foreground: var(--black);
  --card: var(--white);
  --card-foreground: var(--black);
  --primary: var(--cobalt);
  --primary-foreground: #FFFFFF;
  --secondary: var(--fog);
  --secondary-foreground: var(--graphite);
  --muted: var(--fog);
  --muted-foreground: var(--slate);
  --accent: var(--alice);
  --accent-foreground: var(--cobalt);
  --destructive: var(--error);
  --destructive-foreground: #FFFFFF;
  --border: var(--silver);
  --input: var(--silver);
  --ring: var(--tufts);
  --radius: 4px;
}
■ Paste into any .css file — all tokens resolve to concrete values
03 SCSS Variables Sass-compatible token definitions
SCSS 
// GFS Design System v10.0 — SCSS Variables
// Global Food Solutions, Inc.

// ── Primary Blues ──
$gfs-cobalt: #092F64;
$gfs-navy: #1A5799;
$gfs-tufts: #468BE6;
$gfs-jordy: #93BFEF;
$gfs-alice: #E9F5FF;
$gfs-ice: #F4F9FF;
$gfs-midnight: #051B3A;

// ── Neutrals ──
$gfs-black: #1F1F1F;
$gfs-charcoal: #2D2D2D;
$gfs-graphite: #4B5F7A;
$gfs-slate: #6B7280;
$gfs-steel: #9CA3AF;
$gfs-silver: #D9E1EA;
$gfs-fog: #F0F2F5;
$gfs-white: #FFFFFF;

// ── Semantic ──
$gfs-success: #0F766E;
$gfs-success-bg: #F0FDF4;
$gfs-warning: #B45309;
$gfs-warning-bg: #FFFBEB;
$gfs-error: #DC2626;
$gfs-error-bg: #FEF2F2;
$gfs-info: #1A5799;
$gfs-info-bg: #E9F5FF;

// ── Spacing ──
$gfs-sp-1: 4px;
$gfs-sp-2: 8px;
$gfs-sp-3: 12px;
$gfs-sp-4: 16px;
$gfs-sp-5: 20px;
$gfs-sp-6: 24px;
$gfs-sp-8: 32px;
$gfs-sp-10: 40px;
$gfs-sp-12: 48px;
$gfs-sp-16: 64px;
$gfs-sp-20: 80px;
$gfs-sp-24: 96px;

// ── Typography Scale ──
$gfs-text-xs: 11px;
$gfs-text-sm: 13px;
$gfs-text-base: 15px;
$gfs-text-lg: 17px;
$gfs-text-xl: 20px;
$gfs-text-2xl: 24px;
$gfs-text-3xl: 32px;
$gfs-text-4xl: 40px;
$gfs-text-5xl: 56px;
$gfs-text-6xl: 72px;
$gfs-text-7xl: 96px;

// ── Typography Families ──
$gfs-font-display: 'Inter', sans-serif;
$gfs-font-body: 'Inter', sans-serif;
$gfs-font-mono: 'IBM Plex Mono', monospace;

// ── Border Radius ──
$gfs-radius-sm: 2px;
$gfs-radius-md: 4px;
$gfs-radius-lg: 8px;

// ── Shadows ──
$gfs-shadow-sm: 0 1px 2px rgba(9, 47, 100, 0.06);
$gfs-shadow-md: 0 2px 8px rgba(9, 47, 100, 0.08);
$gfs-shadow-lg: 0 8px 24px rgba(9, 47, 100, 0.12);
$gfs-shadow-xl: 0 16px 48px rgba(9, 47, 100, 0.16);

// ── Breakpoints ──
$gfs-bp-sm: 0px;
$gfs-bp-md: 768px;
$gfs-bp-lg: 1024px;
$gfs-bp-xl: 1440px;

// ── Easing ──
$gfs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
$gfs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
$gfs-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

// ── Durations ──
$gfs-dur-fast: 120ms;
$gfs-dur-base: 200ms;
$gfs-dur-slow: 400ms;
$gfs-dur-slower: 600ms;
■ All variables prefixed with $gfs- to avoid collisions in multi-brand projects
04 Tailwind Config tailwind.config.js theme extension — drop into any Tailwind project
JavaScript 
// GFS Design System v10.0 — Tailwind Config
// Global Food Solutions, Inc.

module.exports = {
  theme: {
    extend: {
      colors: {
        gfs: {
          cobalt: '#092F64',
          navy: '#1A5799',
          tufts: '#468BE6',
          jordy: '#93BFEF',
          alice: '#E9F5FF',
          ice: '#F4F9FF',
          midnight: '#051B3A',
          black: '#1F1F1F',
          charcoal: '#2D2D2D',
          graphite: '#4B5F7A',
          slate: '#6B7280',
          steel: '#9CA3AF',
          silver: '#D9E1EA',
          fog: '#F0F2F5',
          success: '#0F766E',
          warning: '#B45309',
          error: '#DC2626',
          info: '#1A5799',
        },
        // Semantic background variants
        'success-bg': '#F0FDF4',
        'warning-bg': '#FFFBEB',
        'error-bg': '#FEF2F2',
        'info-bg': '#E9F5FF',
      },
      fontFamily: {
        display: ['Inter', 'sans-serif'],
        body: ['Inter', 'sans-serif'],
        mono: ['IBM Plex Mono', 'monospace'],
      },
      fontSize: {
        'gfs-xs': '11px',
        'gfs-sm': '13px',
        'gfs-base': '15px',
        'gfs-lg': '17px',
        'gfs-xl': '20px',
        'gfs-2xl': '24px',
        'gfs-3xl': '32px',
        'gfs-4xl': '40px',
        'gfs-5xl': '56px',
        'gfs-6xl': '72px',
        'gfs-7xl': '96px',
      },
      spacing: {
        'gfs-1': '4px',
        'gfs-2': '8px',
        'gfs-3': '12px',
        'gfs-4': '16px',
        'gfs-5': '20px',
        'gfs-6': '24px',
        'gfs-8': '32px',
        'gfs-10': '40px',
        'gfs-12': '48px',
        'gfs-16': '64px',
        'gfs-20': '80px',
        'gfs-24': '96px',
      },
      borderRadius: {
        'gfs-sm': '2px',
        'gfs-md': '4px',
        'gfs-lg': '8px',
      },
      boxShadow: {
        'gfs-sm': '0 1px 2px rgba(9, 47, 100, 0.06)',
        'gfs-md': '0 2px 8px rgba(9, 47, 100, 0.08)',
        'gfs-lg': '0 8px 24px rgba(9, 47, 100, 0.12)',
        'gfs-xl': '0 16px 48px rgba(9, 47, 100, 0.16)',
      },
      screens: {
        'gfs-sm': '0px',
        'gfs-md': '768px',
        'gfs-lg': '1024px',
        'gfs-xl': '1440px',
      },
      transitionTimingFunction: {
        'gfs-out': 'cubic-bezier(0.16, 1, 0.3, 1)',
        'gfs-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
        'gfs-spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
      },
      transitionDuration: {
        'gfs-fast': '120ms',
        'gfs-base': '200ms',
        'gfs-slow': '400ms',
        'gfs-slower': '600ms',
      },
    },
  },
};
■ Usage: bg-gfs-cobalt, text-gfs-tufts, p-gfs-4, rounded-gfs-md, shadow-gfs-lg
05 Figma Tokens (Style Dictionary) Import into Figma Tokens plugin or Style Dictionary pipeline
JSON — Style Dictionary 
{
  "color": {
    "primary": {
      "cobalt": { "value": "#092F64", "type": "color" },
      "navy": { "value": "#1A5799", "type": "color" },
      "tufts": { "value": "#468BE6", "type": "color" },
      "jordy": { "value": "#93BFEF", "type": "color" },
      "alice": { "value": "#E9F5FF", "type": "color" },
      "ice": { "value": "#F4F9FF", "type": "color" },
      "midnight": { "value": "#051B3A", "type": "color" }
    },
    "neutral": {
      "black": { "value": "#1F1F1F", "type": "color" },
      "charcoal": { "value": "#2D2D2D", "type": "color" },
      "graphite": { "value": "#4B5F7A", "type": "color" },
      "slate": { "value": "#6B7280", "type": "color" },
      "steel": { "value": "#9CA3AF", "type": "color" },
      "silver": { "value": "#D9E1EA", "type": "color" },
      "fog": { "value": "#F0F2F5", "type": "color" },
      "white": { "value": "#FFFFFF", "type": "color" }
    },
    "semantic": {
      "success": { "value": "#0F766E", "type": "color" },
      "successBg": { "value": "#F0FDF4", "type": "color" },
      "warning": { "value": "#B45309", "type": "color" },
      "warningBg": { "value": "#FFFBEB", "type": "color" },
      "error": { "value": "#DC2626", "type": "color" },
      "errorBg": { "value": "#FEF2F2", "type": "color" },
      "info": { "value": "#1A5799", "type": "color" },
      "infoBg": { "value": "#E9F5FF", "type": "color" }
    }
  },
  "spacing": {
    "sp1": { "value": "4", "type": "spacing" },
    "sp2": { "value": "8", "type": "spacing" },
    "sp3": { "value": "12", "type": "spacing" },
    "sp4": { "value": "16", "type": "spacing" },
    "sp5": { "value": "20", "type": "spacing" },
    "sp6": { "value": "24", "type": "spacing" },
    "sp8": { "value": "32", "type": "spacing" },
    "sp10": { "value": "40", "type": "spacing" },
    "sp12": { "value": "48", "type": "spacing" },
    "sp16": { "value": "64", "type": "spacing" },
    "sp20": { "value": "80", "type": "spacing" },
    "sp24": { "value": "96", "type": "spacing" }
  },
  "fontSize": {
    "xs": { "value": "11", "type": "fontSizes" },
    "sm": { "value": "13", "type": "fontSizes" },
    "base": { "value": "15", "type": "fontSizes" },
    "lg": { "value": "17", "type": "fontSizes" },
    "xl": { "value": "20", "type": "fontSizes" },
    "2xl": { "value": "24", "type": "fontSizes" },
    "3xl": { "value": "32", "type": "fontSizes" },
    "4xl": { "value": "40", "type": "fontSizes" },
    "5xl": { "value": "56", "type": "fontSizes" },
    "6xl": { "value": "72", "type": "fontSizes" },
    "7xl": { "value": "96", "type": "fontSizes" }
  },
  "fontFamily": {
    "display": { "value": "Inter", "type": "fontFamilies" },
    "body": { "value": "Inter", "type": "fontFamilies" },
    "mono": { "value": "IBM Plex Mono", "type": "fontFamilies" }
  },
  "borderRadius": {
    "sm": { "value": "2", "type": "borderRadius" },
    "md": { "value": "4", "type": "borderRadius" },
    "lg": { "value": "8", "type": "borderRadius" }
  },
  "boxShadow": {
    "sm": { "value": "0 1px 2px rgba(9, 47, 100, 0.06)", "type": "boxShadow" },
    "md": { "value": "0 2px 8px rgba(9, 47, 100, 0.08)", "type": "boxShadow" },
    "lg": { "value": "0 8px 24px rgba(9, 47, 100, 0.12)", "type": "boxShadow" },
    "xl": { "value": "0 16px 48px rgba(9, 47, 100, 0.16)", "type": "boxShadow" }
  },
  "breakpoint": {
    "sm": { "value": "0", "type": "other" },
    "md": { "value": "768", "type": "other" },
    "lg": { "value": "1024", "type": "other" },
    "xl": { "value": "1440", "type": "other" }
  }
}
■ Compatible with Figma Tokens plugin, Style Dictionary, and Tokens Studio
06 JavaScript Object ES module export — import into any JS/TS project
JavaScript / ESM 
// GFS Design System v10.0 — JavaScript Token Export
// Global Food Solutions, Inc.

export const gfsTokens = {
  colors: {
    // Primary Blues
    cobalt: '#092F64',
    navy: '#1A5799',
    tufts: '#468BE6',
    jordy: '#93BFEF',
    alice: '#E9F5FF',
    ice: '#F4F9FF',
    midnight: '#051B3A',

    // Neutrals
    black: '#1F1F1F',
    charcoal: '#2D2D2D',
    graphite: '#4B5F7A',
    slate: '#6B7280',
    steel: '#9CA3AF',
    silver: '#D9E1EA',
    fog: '#F0F2F5',
    white: '#FFFFFF',

    // Semantic
    success: '#0F766E',
    successBg: '#F0FDF4',
    warning: '#B45309',
    warningBg: '#FFFBEB',
    error: '#DC2626',
    errorBg: '#FEF2F2',
    info: '#1A5799',
    infoBg: '#E9F5FF',
  },

  spacing: {
    sp1: '4px',
    sp2: '8px',
    sp3: '12px',
    sp4: '16px',
    sp5: '20px',
    sp6: '24px',
    sp8: '32px',
    sp10: '40px',
    sp12: '48px',
    sp16: '64px',
    sp20: '80px',
    sp24: '96px',
  },

  typography: {
    families: {
      display: "'Inter', sans-serif",
      body: "'Inter', sans-serif",
      mono: "'IBM Plex Mono', monospace",
    },
    sizes: {
      xs: '11px',
      sm: '13px',
      base: '15px',
      lg: '17px',
      xl: '20px',
      '2xl': '24px',
      '3xl': '32px',
      '4xl': '40px',
      '5xl': '56px',
      '6xl': '72px',
      '7xl': '96px',
    },
  },

  radii: {
    sm: '2px',
    md: '4px',
    lg: '8px',
  },

  shadows: {
    sm: '0 1px 2px rgba(9, 47, 100, 0.06)',
    md: '0 2px 8px rgba(9, 47, 100, 0.08)',
    lg: '0 8px 24px rgba(9, 47, 100, 0.12)',
    xl: '0 16px 48px rgba(9, 47, 100, 0.16)',
  },

  breakpoints: {
    sm: '0px',
    md: '768px',
    lg: '1024px',
    xl: '1440px',
  },

  easing: {
    out: 'cubic-bezier(0.16, 1, 0.3, 1)',
    inOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
    spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
  },

  durations: {
    fast: '120ms',
    base: '200ms',
    slow: '400ms',
    slower: '600ms',
  },
};
■ Usage: import { gfsTokens } from './gfs-tokens.js' — fully tree-shakeable
07 JSON (Machine-Readable) Complete tokens.json with syntax highlighting
JSON 
{
  "version": "9.0",
  "updated": "2026-05-17",
  "colors": {
    "primary": {
      "cobalt": { "value": "#092F64", "usage": "Primary text, headings, CTAs" },
      "navy": { "value": "#1A5799", "usage": "Hover states, secondary emphasis" },
      "tufts": { "value": "#468BE6", "usage": "Interactive elements, links" },
      "jordy": { "value": "#93BFEF", "usage": "Selected states, accents" },
      "alice": { "value": "#E9F5FF", "usage": "Light backgrounds, tints" },
      "ice": { "value": "#F4F9FF", "usage": "Subtle backgrounds" }
    },
    "neutral": {
      "black": { "value": "#1F1F1F", "usage": "Primary body text" },
      "charcoal": { "value": "#2D2D2D", "usage": "Dark backgrounds" },
      "graphite": { "value": "#4B5F7A", "usage": "Secondary body text" },
      "slate": { "value": "#6B7280", "usage": "Tertiary text, labels" },
      "steel": { "value": "#9CA3AF", "usage": "Placeholder text" },
      "silver": { "value": "#D9E1EA", "usage": "Borders, dividers" },
      "fog": { "value": "#F0F2F5", "usage": "Subtle backgrounds, table rows" },
      "white": { "value": "#FFFFFF", "usage": "Page backgrounds" }
    },
    "semantic": {
      "success": { "value": "#0F766E", "usage": "Delivered, passed, positive" },
      "warning": { "value": "#B45309", "usage": "Pending, expiring, caution" },
      "error": { "value": "#DC2626", "usage": "Alert, failed, negative" }
    }
  },
  "typography": {
    "display": { "family": "Inter", "license": "SIL OFL 1.1", "weights": [700, 800, 900] },
    "body": { "family": "Inter", "license": "SIL OFL 1.1", "weights": [300, 400, 500, 600, 700] },
    "mono": { "family": "IBM Plex Mono", "license": "SIL OFL 1.1", "weights": [400, 500, 600, 700] }
  },
  "spacing": {
    "sp-1": "4px", "sp-2": "8px", "sp-3": "12px", "sp-4": "16px",
    "sp-5": "20px", "sp-6": "24px", "sp-8": "32px", "sp-10": "40px",
    "sp-12": "48px", "sp-16": "64px", "sp-20": "80px", "sp-24": "96px"
  },
  "radii": { "sm": "2px", "md": "4px", "lg": "8px" },
  "shadows": {
    "sm": "0 1px 2px rgba(9,47,100,0.06)",
    "md": "0 2px 8px rgba(9,47,100,0.08)",
    "lg": "0 8px 24px rgba(9,47,100,0.12)"
  },
  "breakpoints": { "sm": "0px", "md": "768px", "lg": "1024px", "xl": "1440px" }
}
■ Mirror of tokens.json — use for build pipelines, CI validation, or API responses
08 iOS / Swift SwiftUI color definitions with hex initializer
Swift 
// GFS Design System v10.0 — SwiftUI Colors
// Global Food Solutions, Inc.

import SwiftUI

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: .alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 6: (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default: (a, r, g, b) = (255, 0, 0, 0)
        }
        self.init(.sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue: Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

struct GFSColors {
    // ── Primary Blues ──
    static let cobalt = Color(hex: "092F64")
    static let navy = Color(hex: "1A5799")
    static let tufts = Color(hex: "468BE6")
    static let jordy = Color(hex: "93BFEF")
    static let alice = Color(hex: "E9F5FF")
    static let ice = Color(hex: "F4F9FF")
    static let midnight = Color(hex: "051B3A")

    // ── Neutrals ──
    static let black = Color(hex: "1F1F1F")
    static let charcoal = Color(hex: "2D2D2D")
    static let graphite = Color(hex: "4B5F7A")
    static let slate = Color(hex: "6B7280")
    static let steel = Color(hex: "9CA3AF")
    static let silver = Color(hex: "D9E1EA")
    static let fog = Color(hex: "F0F2F5")
    static let white = Color(hex: "FFFFFF")

    // ── Semantic ──
    static let success = Color(hex: "0F766E")
    static let successBg = Color(hex: "F0FDF4")
    static let warning = Color(hex: "B45309")
    static let warningBg = Color(hex: "FFFBEB")
    static let error = Color(hex: "DC2626")
    static let errorBg = Color(hex: "FEF2F2")
    static let info = Color(hex: "1A5799")
    static let infoBg = Color(hex: "E9F5FF")
}

struct GFSSpacing {
    static let sp1: CGFloat = 4
    static let sp2: CGFloat = 8
    static let sp3: CGFloat = 12
    static let sp4: CGFloat = 16
    static let sp5: CGFloat = 20
    static let sp6: CGFloat = 24
    static let sp8: CGFloat = 32
    static let sp10: CGFloat = 40
    static let sp12: CGFloat = 48
    static let sp16: CGFloat = 64
    static let sp20: CGFloat = 80
    static let sp24: CGFloat = 96
}

struct GFSRadii {
    static let sm: CGFloat = 2
    static let md: CGFloat = 4
    static let lg: CGFloat = 8
}

struct GFSTypography {
    static let displayFont = "Inter"
    static let bodyFont = "Inter"
    static let monoFont = "IBMPlexMono"

    static let xs: CGFloat = 11
    static let sm: CGFloat = 13
    static let base: CGFloat = 15
    static let lg: CGFloat = 17
    static let xl: CGFloat = 20
    static let xxl: CGFloat = 24
    static let xxxl: CGFloat = 32
}
■ Usage: Text("Hello").foregroundColor(GFSColors.cobalt).padding(GFSSpacing.sp4)
09 Android / Kotlin XML color resources and Compose definitions
XML res/values/colors.xml 
<?xml version="1.0" encoding="utf-8"?>
<!-- GFS Design System v10.0 — Android Color Resources -->
<!-- Global Food Solutions, Inc. -->

<resources>
    <!-- Primary Blues -->
    <color name="gfs_cobalt">#FF092F64</color>
    <color name="gfs_navy">#FF1A5799</color>
    <color name="gfs_tufts">#FF468BE6</color>
    <color name="gfs_jordy">#FF93BFEF</color>
    <color name="gfs_alice">#FFE9F5FF</color>
    <color name="gfs_ice">#FFF4F9FF</color>
    <color name="gfs_midnight">#FF051B3A</color>

    <!-- Neutrals -->
    <color name="gfs_black">#FF1F1F1F</color>
    <color name="gfs_charcoal">#FF2D2D2D</color>
    <color name="gfs_graphite">#FF4B5F7A</color>
    <color name="gfs_slate">#FF6B7280</color>
    <color name="gfs_steel">#FF9CA3AF</color>
    <color name="gfs_silver">#FFD9E1EA</color>
    <color name="gfs_fog">#FFF0F2F5</color>
    <color name="gfs_white">#FFFFFFFF</color>

    <!-- Semantic -->
    <color name="gfs_success">#FF0F766E</color>
    <color name="gfs_success_bg">#FFF0FDF4</color>
    <color name="gfs_warning">#FFB45309</color>
    <color name="gfs_warning_bg">#FFFFFFEB</color>
    <color name="gfs_error">#FFDC2626</color>
    <color name="gfs_error_bg">#FFFEF2F2</color>
    <color name="gfs_info">#FF1A5799</color>
    <color name="gfs_info_bg">#FFE9F5FF</color>
</resources>
Kotlin — Jetpack Compose GFSTheme.kt 
// GFS Design System v10.0 — Jetpack Compose Colors
// Global Food Solutions, Inc.

package com.gfsinc.design

import androidx.compose.ui.graphics.Color

object GFSColors {
    // ── Primary Blues ──
    val Cobalt = Color(0xFF092F64)
    val Navy = Color(0xFF1A5799)
    val Tufts = Color(0xFF468BE6)
    val Jordy = Color(0xFF93BFEF)
    val Alice = Color(0xFFE9F5FF)
    val Ice = Color(0xFFF4F9FF)
    val Midnight = Color(0xFF051B3A)

    // ── Neutrals ──
    val Black = Color(0xFF1F1F1F)
    val Charcoal = Color(0xFF2D2D2D)
    val Graphite = Color(0xFF4B5F7A)
    val Slate = Color(0xFF6B7280)
    val Steel = Color(0xFF9CA3AF)
    val Silver = Color(0xFFD9E1EA)
    val Fog = Color(0xFFF0F2F5)
    val White = Color(0xFFFFFFFF)

    // ── Semantic ──
    val Success = Color(0xFF0F766E)
    val SuccessBg = Color(0xFFF0FDF4)
    val Warning = Color(0xFFB45309)
    val WarningBg = Color(0xFFFFFBEB)
    val Error = Color(0xFFDC2626)
    val ErrorBg = Color(0xFFFEF2F2)
    val Info = Color(0xFF1A5799)
    val InfoBg = Color(0xFFE9F5FF)
}

object GFSSpacing {
    val Sp1 = 4.dp
    val Sp2 = 8.dp
    val Sp3 = 12.dp
    val Sp4 = 16.dp
    val Sp5 = 20.dp
    val Sp6 = 24.dp
    val Sp8 = 32.dp
    val Sp10 = 40.dp
    val Sp12 = 48.dp
    val Sp16 = 64.dp
    val Sp20 = 80.dp
    val Sp24 = 96.dp
}

object GFSRadii {
    val Sm = 2.dp
    val Md = 4.dp
    val Lg = 8.dp
}
■ XML for legacy View system, Kotlin for Jetpack Compose — both ARGB format with FF alpha
10 Token Reference Table Complete visual index of all design tokens
Swatch Name CSS Variable Hex Usage
PRIMARY BLUES
cobalt --cobalt #092F64 Primary text, headings, CTAs
navy --navy #1A5799 Hover states, secondary emphasis
tufts --tufts #468BE6 Interactive elements, links
jordy --jordy #93BFEF Selected states, accents
alice --alice #E9F5FF Light backgrounds, tints
ice --ice #F4F9FF Subtle backgrounds
midnight --midnight #051B3A Darkest brand shade
NEUTRALS
black --black #1F1F1F Primary body text
charcoal --charcoal #2D2D2D Dark backgrounds
graphite --graphite #4B5F7A Secondary body text
slate --slate #6B7280 Tertiary text, labels
steel --steel #9CA3AF Placeholder text
silver --silver #D9E1EA Borders, dividers
fog --fog #F0F2F5 Subtle backgrounds, table rows
white --white #FFFFFF Page backgrounds
SEMANTIC
success --success #0F766E Delivered, passed, positive
success-bg --success-bg #F0FDF4 Success background tint
warning --warning #B45309 Pending, expiring, caution
warning-bg --warning-bg #FFFBEB Warning background tint
error --error #DC2626 Alert, failed, negative
error-bg --error-bg #FEF2F2 Error background tint
info --info #1A5799 Informational messages
info-bg --info-bg #E9F5FF Info background tint
Size Name CSS Variable Value Usage
SPACING
sp-1 --sp-1 4px Tight padding, icon gaps
sp-2 --sp-2 8px Base unit, compact padding
sp-3 --sp-3 12px Inner padding, badge gaps
sp-4 --sp-4 16px Default padding
sp-5 --sp-5 20px Card padding
sp-6 --sp-6 24px Section gaps
sp-8 --sp-8 32px Major breaks
sp-10 --sp-10 40px Large spacing
sp-12 --sp-12 48px Section margins
sp-16 --sp-16 64px Page-level spacing
sp-20 --sp-20 80px Hero spacing
sp-24 --sp-24 96px Maximum spacing
Preview Name CSS Variable Value Usage
TYPOGRAPHY SCALE
Aa text-xs --text-xs 11px Micro labels, legal
Aa text-sm --text-sm 13px Secondary text, captions
Aa text-base --text-base 15px Body text default
Aa text-lg --text-lg 17px Emphasized body, subheads
Aa text-xl --text-xl 20px Section headers
Aa text-2xl --text-2xl 24px Page sub-headers
Aa text-3xl --text-3xl 32px Page titles
Aa text-4xl --text-4xl 40px Hero headlines
Aa text-5xl --text-5xl 56px Display type
Aa text-6xl --text-6xl 72px Large display
Aa text-7xl --text-7xl 96px Maximum display
FONT FAMILIES
Aa Display font-family Inter Headlines, display. Weights 700-900
Aa Body font-family Inter Body, UI text. Weights 300-700
Aa Mono font-family IBM Plex Mono Data, labels, code. Weights 400-700
BORDER RADIUS
radius-sm --radius-sm 2px Buttons, badges, inputs
radius-md --radius-md 4px Cards, panels, default
radius-lg --radius-lg 8px Modals, large containers (max)
SHADOWS
shadow-sm --shadow-sm 0 1px 2px ... Subtle lift, hover cards
shadow-md --shadow-md 0 2px 8px ... Dropdowns, tooltips
shadow-lg --shadow-lg 0 8px 24px ... Modals, dialogs
shadow-xl --shadow-xl 0 16px 48px ... Popovers, spotlight
BREAKPOINTS
sm @media (min-width: 0px) 0px Mobile first, base
md @media (min-width: 768px) 768px Tablet, 2-column layouts
lg @media (min-width: 1024px) 1024px Desktop, full layouts
xl @media (min-width: 1440px) 1440px Wide desktop, dashboards
EASING / DURATIONS
ease-out --ease-out cubic-bezier(0.16,1,0.3,1) Exits, reveals
ease-in-out --ease-in-out cubic-bezier(0.65,0,0.35,1) Movement, transitions
spring --spring cubic-bezier(0.34,1.56,0.64,1) Bouncy micro-interactions
dur-fast --dur-fast 120ms Hover, micro feedback
dur-base --dur-base 200ms Default transitions
dur-slow --dur-slow 400ms Panel slides, reveals
dur-slower --dur-slower 600ms Page transitions, hero
■ Click any hex/value to copy it directly. 56 tokens total across 8 categories.
← Back to Hub · GFS Design System v10.0 · Global Food Solutions, Inc. · Edgewood, NY