GFS Design System — Cross-Platform Color Reference

02Master Color Table17 Colors / 9 Columns / Every Format

Complete specification for every GFS color in every format. Click any value to copy. This is the single source of truth for all color reproduction across digital, print, and industrial applications.

	Token	HEX	RGB	HSL	CMYK	Pantone	RAL	CSS Variable	Tailwind
Primary Blues
	Midnight	#051B3A	5, 27, 58	215, 84%, 12%	91, 53, 0, 77	296 C	5004	var(--midnight)	text-midnight
	Cobalt	#092F64	9, 47, 100	215, 83%, 21%	91, 53, 0, 61	289 C	5013	var(--cobalt)	text-cobalt
	Navy	#1A5799	26, 87, 153	211, 71%, 35%	83, 43, 0, 40	7685 C	5015	var(--navy)	text-navy
	Tufts	#468BE6	70, 139, 230	214, 75%, 59%	70, 40, 0, 10	2727 C	5012	var(--tufts)	text-tufts
	Jordy	#93BFEF	147, 191, 239	211, 72%, 76%	38, 20, 0, 6	2717 C	5024	var(--jordy)	text-jordy
	Alice	#E9F5FF	233, 245, 255	207, 100%, 96%	9, 4, 0, 0	656 C	9003	var(--alice)	bg-alice
	Ice	#F4F9FF	244, 249, 255	213, 100%, 98%	4, 2, 0, 0	663 C	9003	var(--ice)	bg-ice
Neutrals
	Eerie Black	#1F1F1F	31, 31, 31	0, 0%, 12%	0, 0, 0, 88	Black 6 C	9005	var(--black)	text-black
	Charcoal	#2D2D2D	45, 45, 45	0, 0%, 18%	0, 0, 0, 82	Black 5 C	7021	var(--charcoal)	text-charcoal
	Graphite	#4B5F7A	75, 95, 122	214, 24%, 39%	38, 22, 0, 52	7545 C	7031	var(--graphite)	text-graphite
	Slate	#6B7280	107, 114, 128	220, 9%, 46%	16, 11, 0, 50	Cool Gray 9 C	7037	var(--slate)	text-slate
	Steel	#9CA3AF	156, 163, 175	218, 11%, 65%	11, 7, 0, 31	Cool Gray 6 C	7040	var(--steel)	text-steel
	Silver	#D9E1EA	217, 225, 234	212, 24%, 88%	7, 4, 0, 8	Cool Gray 2 C	7047	var(--silver)	border-silver
	Fog	#F0F2F5	240, 242, 245	216, 14%, 95%	2, 1, 0, 4	Cool Gray 1 C	9018	var(--fog)	bg-fog
	White	#FFFFFF	255, 255, 255	0, 0%, 100%	0, 0, 0, 0	—	9010	var(--white)	bg-white
Semantic
	Success	#0F766E	15, 118, 110	175, 77%, 26%	87, 0, 7, 54	3295 C	6026	var(--success)	text-success
	Warning	#B45309	180, 83, 9	26, 90%, 37%	0, 54, 95, 29	1525 C	8023	var(--warning)	text-warning
	Error	#DC2626	220, 38, 38	0, 72%, 51%	0, 83, 83, 14	1797 C	3020	var(--error)	text-error

■ This table is the canonical reference. When values conflict between documents, this table takes precedence. All values verified against Pantone Color Bridge and RAL K7 swatch book.
Click any value to copy. Pantone values are "C" (coated) series. For uncoated stock, consult the Pantone Color Bridge Uncoated guide.

03Print Color ProofingScreen vs Print / Spot vs Process

Screen colors (RGB) differ from printed colors (CMYK). These proofing cards show the approximate shift. For critical color accuracy, always request a press proof and specify Pantone spot colors.

RGB

CMYK*

Midnight

Spot: PMS 296 C
Process: 91/53/0/77
Paper: Coated preferred
Note: Very dark; appears near-black on uncoated

RGB

CMYK*

Cobalt (Primary)

Spot: PMS 289 C
Process: 91/53/0/61
Paper: Coated for vibrancy
Note: Use spot color for logo and primary marks. Process CMYK acceptable for body text.

RGB

CMYK*

Navy

Spot: PMS 7685 C
Process: 83/43/0/40
Paper: Both coated/uncoated
Note: Good CMYK reproduction. Spot color optional for large fill areas.

RGB

CMYK*

Tufts

Spot: PMS 2727 C
Process: 70/40/0/10
Paper: Coated for full saturation
Note: Bright blue loses vibrancy in CMYK. Use spot for critical brand moments.

RGB

CMYK*

Jordy

Spot: PMS 2717 C
Process: 38/20/0/6
Paper: Either stock
Note: Reproduces well in process. Spot not required except for large solid fills.

■ *CMYK simulation: The "CMYK" swatch above is an on-screen approximation of how the color shifts when converted to process printing. Actual printed output depends on press, ink, and paper stock. Always request a contract proof.
Spot color rule: Use Pantone spot colors for: GFS logo, any color block larger than 4 sq inches, and any application where brand fidelity is critical.

04Digital Platform Reference8 Platforms / Cobalt Primary

Color values formatted for every platform and tool GFS uses. All values shown for the primary color Cobalt #092F64. The same pattern applies to all 17 colors using the Master Color Table values.

{}

Web / CSS

CSS Variablevar(--cobalt)

Hex#092F64

RGBrgb(9, 47, 100)

HSLhsl(215, 83%, 21%)

RGBA (80%)rgba(9, 47, 100, 0.8)

Tailwindtext-cobalt / bg-cobalt

@

Email (Inline CSS)

Text Colorstyle="color:#092F64"

Backgroundstyle="background-color:#092F64"

Borderstyle="border:1px solid #092F64"

VML (Outlook)color="#092F64"

NoteNo CSS variables in email

NS

NetSuite (SuiteScript)

SuiteScript'#092F64'

Saved Search#092F64

Advanced PDFcolor: #092F64;

FreeMarkerstyle="color:#092F64"

RESTlet JSON"color":"#092F64"

MS

Microsoft Office

RGB InputRGB(9, 47, 100)

Hex Input#092F64

VBARGB(9, 47, 100)

Theme XML642F09 (BGR)

NoteOffice theme XML uses BGR order

G

Google Workspace

Sheets/Docs#092F64 (custom color)

Apps Script'#092F64'

Slides Theme#092F64

Data Studio#092F64

F

Figma

Hex#092F64

Style NameGFS/Primary/Cobalt

Variablecobalt

Figma Tokencolor.primary.cobalt

#

Social Media Tools

Canva#092F64

Buffer / Hootsuite#092F64

Adobe Express#092F64

Brand kit hex092F64 (no hash)

A

Android / iOS

iOS UIColorUIColor(r:0.035 g:0.184 b:0.392)

SwiftUIColor(r:0.035 g:0.184 b:0.392)

Android XML#FF092F64 (ARGB)

ComposeColor(0xFF092F64)

FlutterColor(0xFF092F64)

■ Platform consistency rule: Always use HEX values as the input format where possible. HEX is universal and eliminates rounding errors from RGB-to-HSL or CMYK-to-RGB conversions.
Warning: Microsoft Office theme XML files use BGR byte order, not RGB. The value 642F09 is Cobalt in BGR. Double-check before embedding in .thmx files.

05Gradient ReferenceApproved Gradients / Multi-Platform

All approved GFS gradients with values for CSS, SVG, and design tools. Only these gradients are sanctioned for use. No custom gradients without brand approval.

Cobalt to Navy

CSS: background: linear-gradient(135deg, #092F64, #1A5799);
SVG: <linearGradient> stop #092F64 0% / #1A5799 100%
Figma: Linear 135deg Cobalt > Navy
Use: Headers, primary CTAs, premium hero areas

Navy to Tufts

CSS: background: linear-gradient(135deg, #1A5799, #468BE6);
SVG: <linearGradient> stop #1A5799 0% / #468BE6 100%
Figma: Linear 135deg Navy > Tufts
Use: Secondary buttons, progress bars, interactive elements

Tufts to Jordy

CSS: background: linear-gradient(135deg, #468BE6, #93BFEF);
SVG: <linearGradient> stop #468BE6 0% / #93BFEF 100%
Figma: Linear 135deg Tufts > Jordy
Use: Charts, data visualizations, soft backgrounds

Full Spectrum (Cobalt to Ice)

CSS: background: linear-gradient(90deg, #092F64, #1A5799, #468BE6, #93BFEF, #F4F9FF);
Use: Scale indicators, heat maps, range sliders, progress bars spanning full brand range

Dark Mode (Midnight to Cobalt)

CSS: background: linear-gradient(135deg, #051B3A, #092F64);
SVG: <linearGradient> stop #051B3A 0% / #092F64 100%
Use: Dark mode backgrounds, hero sections, footer areas, overlay surfaces

Dark Mode Accent

CSS: background: linear-gradient(135deg, #0A1929, #1A3A5C);
Use: Dark mode card surfaces, panels, elevated containers in dark theme

■ Gradient rules: Direction is always 135deg (top-left to bottom-right) unless used as a horizontal bar (then 90deg). Never use radial gradients for brand applications.
Print: Gradients must be tested at 300dpi. CMYK gradients may band — specify "anti-banding" or "smooth shading" in print files. For critical pieces, use spot color solids instead.

06Color Accessibility MatrixWCAG 2.1 / Contrast Ratios

Every foreground/background combination tested against WCAG 2.1 contrast requirements. AAA = 7:1+ (ideal). AA = 4.5:1+ (required for normal text). AA-lg = 3:1+ (acceptable for large text and UI components only). Fail = below 3:1.

FG ↓ / BG →	White #FFFFFF	Fog #F0F2F5	Alice #E9F5FF	Ice #F4F9FF	Cobalt #092F64
Midnight	16.7:1 AAA	15.2:1 AAA	15.6:1 AAA	15.9:1 AAA	1.5:1 Fail
Cobalt	11.4:1 AAA	10.4:1 AAA	10.7:1 AAA	10.9:1 AAA	1.0:1 —
Navy	7.0:1 AAA	6.4:1 AA	6.5:1 AA	6.7:1 AA	1.6:1 Fail
Tufts	3.5:1 AA-lg	3.2:1 AA-lg	3.3:1 AA-lg	3.3:1 AA-lg	3.3:1 AA-lg
Jordy	1.9:1 Fail	1.8:1 Fail	1.8:1 Fail	1.9:1 Fail	5.9:1 AA
Eerie Black	16.0:1 AAA	14.6:1 AAA	15.0:1 AAA	15.3:1 AAA	1.4:1 Fail
Graphite	6.2:1 AA	5.7:1 AA	5.8:1 AA	5.9:1 AA	1.8:1 Fail
Slate	4.6:1 AA	4.2:1 AA-lg	4.3:1 AA-lg	4.4:1 AA-lg	2.5:1 Fail
Steel	2.8:1 Fail	2.5:1 Fail	2.6:1 Fail	2.7:1 Fail	4.1:1 AA-lg
Success	5.5:1 AA	5.0:1 AA	5.2:1 AA	5.3:1 AA	2.1:1 Fail
Warning	4.8:1 AA	4.4:1 AA-lg	4.5:1 AA	4.6:1 AA	2.4:1 Fail
Error	4.0:1 AA-lg	3.6:1 AA-lg	3.7:1 AA-lg	3.8:1 AA-lg	2.9:1 Fail
White	1.0:1 —	1.1:1 Fail	1.1:1 Fail	1.0:1 Fail	11.4:1 AAA

■ Key findings:
Cobalt on White = 11.4:1 AAA — Excellent. Primary heading and text color on light backgrounds.
Tufts on White = 3.5:1 AA-lg only — Use Tufts only for large text (18px+), icons, and UI components on white. Never for body text.
Jordy on White = 1.9:1 Fail — Never use Jordy as text on light backgrounds. Jordy is a background/decorative color only.
White on Cobalt = 11.4:1 AAA — Excellent. Primary text color on dark/cobalt backgrounds.
Rule: All body text must achieve AA (4.5:1) minimum. All interactive elements and large text must achieve AA-lg (3:1) minimum. Target AAA where possible.

07Print Specification SheetReady-to-Send / Printer Reference

Send this specification sheet directly to any print vendor. It contains everything a printer needs to reproduce GFS brand materials accurately.

Global Food Solutions, Inc.

Brand Color & Print Specification Sheet

          Version 9.0

          May 2026

          GFS-SPEC-PRINT-2026

Company Information

            Company: Global Food Solutions, Inc.

            Address: 131 Heartland Blvd, Edgewood, NY 11717

            Contact: Brand & Marketing Department

            Website: www.globalfoodsolutions.co

Print Specifications

            Paper (Standard): 100# Gloss Text

            Paper (Premium): 80# Matte Cover

            Bleed: 3mm all sides

            Safe Zone: 6mm from trim

            Resolution: 300dpi minimum

            Color Profile: US Web Coated (SWOP) v2

Primary Brand Colors

            COBALT (Primary)

            PMS 289 C

            CMYK 91 / 53 / 0 / 61

            HEX #092F64

            RGB 9 / 47 / 100

            NAVY

            PMS 7685 C

            CMYK 83 / 43 / 0 / 40

            HEX #1A5799

            RGB 26 / 87 / 153

            TUFTS

            PMS 2727 C

            CMYK 70 / 40 / 0 / 10

            HEX #468BE6

            RGB 70 / 139 / 230

            JORDY

            PMS 2717 C

            CMYK 38 / 20 / 0 / 6

            HEX #93BFEF

            RGB 147 / 191 / 239

            ALICE

            PMS 656 C

            CMYK 9 / 4 / 0 / 0

            HEX #E9F5FF

            RGB 233 / 245 / 255

Typography

            Primary Font: Inter (Google Fonts)

            Mono Font: IBM Plex Mono (Google Fonts)

            License: SIL Open Font License 1.1

            Availability: Open source, free for commercial use

            Download: fonts.google.com

Logo Specifications

            Minimum Logo Size: 24mm wide

            Clear Space: 1x logo height all sides

            Primary Color: Cobalt PMS 289 C

            Reverse: White on Cobalt background

            File Formats: EPS, SVG, PDF, PNG @2x

Spot Color Instructions

        When to use Pantone spot: Logo reproduction, business cards, letterhead, any color fill >4 sq inches, premium collateral

        When process CMYK is acceptable: Body text, small accent elements, digital printing, large-run publications

        Critical note: For logo reproduction, always specify PMS 289 C (coated) or PMS 289 U (uncoated). Do not substitute process CMYK for the logo without written approval from the brand team.

Paper Stock Reference

Application	Paper Stock	Finish	Notes
Business Cards	130# Cover	Matte + Soft Touch	Spot UV on logo optional
Letterhead	70# Text	Linen or Smooth	Must be laser/inkjet compatible
Brochures	100# Gloss Text	Gloss or Satin	AQ coating for durability
Presentations	80# Matte Cover	Matte	Premium feel, writable surface
Certificates	80# Matte Cover	Matte	Consider foil stamping for logo
Envelopes	70# Text	Smooth	Match letterhead stock

          © 2026 Global Food Solutions, Inc.  •  This specification sheet is confidential and intended for authorized print vendors only.
        

          GFS-SPEC-PRINT-2026 v10.0
        

■ Sending to printers: Print or PDF this section and include it with every print job submission. The printer should match all colors to the Pantone references listed above. Request a contract proof (wet or digital) before approving any run of 500+ pieces.
File prep: Deliver files as press-ready PDF/X-4 with fonts embedded and images at 300dpi. Include bleed marks and trim marks. Color space: CMYK using US Web Coated (SWOP) v2 profile.

08Color Blindness SimulationProtanopia / Deuteranopia / Tritanopia

Approximately 8% of males and 0.5% of females have some form of color vision deficiency. GFS designs must be tested against all three major types. Below shows how our primary and semantic colors appear to users with each condition.

Color	Normal Vision	Protanopia (no red cones)	Deuteranopia (no green cones)	Tritanopia (no blue cones)
Cobalt #092F64
Tufts #1E6FD9
Success #16A34A
Warning #B45309
Error #DC2626

Accessibility Strategies

Use shape + color. Success = green + checkmark icon. Error = red + X icon. Never rely on color alone to convey meaning.

Use patterns in charts. Add stripes, dots, or dashes to data series so colorblind users can distinguish them by pattern.

Label directly. Put text labels on chart elements rather than relying on color-coded legends that require matching.

Testing requirement. All new UI components must be tested in Chrome DevTools Rendering > Emulate vision deficiencies before approval. The GFS blue palette (Cobalt, Tufts, Navy) maintains excellent distinguishability across all CVD types. Red-green distinction is the primary concern — always pair with icons.

09Color in Email ClientsClient Rendering / Safe Colors / Dark Mode

Email clients render colors inconsistently. Outlook uses Word's rendering engine. Gmail strips certain CSS. Apple Mail handles CSS well but dark mode inverts colors unpredictably. This reference shows safe color usage for GFS emails.

Client	CSS Colors	Gradients	CSS Vars	Dark Mode	Notes
Apple Mail	Yes	Yes	No	Partial	Dark mode inverts light backgrounds; use meta tag
Gmail (web)	Yes	No	No	Partial	Strips class/id selectors; inline styles only
Outlook 365	Yes	No	No	Yes	Word rendering engine; use VML for backgrounds
Outlook.com	Yes	No	No	Yes	Supports [data-ogsb] for dark mode targeting
Yahoo Mail	Yes	No	No	No	Prefixes class names; inline styles safest

Email-Safe GFS Colors

Primary CTA button: #092F64
Link text: #1E6FD9
Body text: #3D4F65
Background: #F6F8FA

Dark Mode Email Rules

Always add: meta name="color-scheme" content="light dark"
Avoid pure white (#FFFFFF) backgrounds
Use #F6F8FA so dark mode has something to invert
Test in Litmus/Email on Acid before send
Button: use bulletproof VML for Outlook

Email color rule: Always use inline hex colors in emails. Never use CSS custom properties, rgba(), or hsl(). Test every campaign in at least 4 clients: Apple Mail, Gmail, Outlook 365, and one mobile client. For dark mode, provide explicit [data-ogsc] overrides.

10Dark Mode Color Mapping — ExpandedComponent-Level Token Mapping / Before-After

Beyond the base color swaps, dark mode requires component-level adjustments. Shadows become lighter (not darker), borders become more visible, and status colors shift to maintain vibrancy against dark backgrounds.

Component	Property	Light Value	Dark Value	Notes
Page background	background-color	#FFFFFF	#0D1117	Near-black, not pure black
Card background	background-color	#FFFFFF	#161B22	Elevated surface slightly lighter
Card shadow	box-shadow	0 1px 3px rgba(0,0,0,.1)	0 1px 3px rgba(0,0,0,.5)	Heavier shadow in dark mode
Primary button	background	#092F64	#1F6FEB	Brighter blue for contrast
Primary button text	color	#FFFFFF	#FFFFFF	Same in both modes
Input border	border-color	#CED4DA	#2D333B	Subtle but visible
Input background	background	#FFFFFF	#0D1117	Matches page background
Table header	background	#F0F6FD	#161B22	Slightly elevated from base
Table row hover	background	#F6F8FA	#1C2128	Subtle hover indication
Success badge bg	background	#F0FDF4	rgba(63,185,80,.15)	Transparent tint in dark
Error badge bg	background	#FEF2F2	rgba(248,81,73,.15)	Transparent tint in dark
Topbar	background	#092F64	#161B22	Dark neutral, not brand color

Light Mode Card

Order #58042

Empire State Foods - 24 cases

Delivered

Dark Mode Card

Order #58042

Empire State Foods - 24 cases

Delivered

Dark mode implementation. Use CSS custom properties with [data-theme="dark"] selector to remap tokens. Test every screen in both modes. Focus on contrast ratios: minimum 4.5:1 for body text, 3:1 for large text. Status colors (success/warning/error) use transparent overlays in dark mode to avoid washed-out backgrounds.

11Color Token CSS Custom PropertiesComplete Variable Inventory / Copy-Ready

Every GFS color is available as a CSS custom property defined in shared.css. Below is the complete inventory organized by category, ready to copy into any project.

Brand Colors

          --cobalt: #092F64;

          --tufts: #1E6FD9;

          --navy: #0A1E3D;

          --jordy: #7AB3EF;

          --alice: #E8F2FC;

          --ice: #F0F6FD;

Neutral Colors

          --black: #0F172A;

          --graphite: #3D4F65;

          --slate: #4B5F7A;

          --steel: #8696A7;

          --silver: #CED4DA;

          --fog: #F6F8FA;

          --white: #FFFFFF;

Semantic Colors

          --success: #16A34A;

          --success-bg: #F0FDF4;

          --warning: #B45309;

          --warning-bg: #FFFBEB;

          --error: #DC2626;

          --error-bg: #FEF2F2;

Shadow & Radius Tokens

          --shadow-sm: 0 1px 2px rgba(0,0,0,.05);

          --shadow-md: 0 4px 6px rgba(0,0,0,.07);

          --shadow-lg: 0 10px 15px rgba(0,0,0,.1);

          --radius-sm: 2px;

          --radius-md: 4px;

          --radius-lg: 8px;

Platform Export Formats

iOS / Swift

            UIColor(red: 9/255,

              green: 47/255,

              blue: 100/255,

              alpha: 1.0)

            // Cobalt #092F64

Android / Kotlin

            Color(0xFF092F64)

            // Cobalt

            Color(0xFF1E6FD9)

            // Tufts

            Color(0xFF16A34A)

            // Success

Figma Tokens

            brand/cobalt: #092F64

            brand/tufts: #1E6FD9

            neutral/graphite: #3D4F65

            semantic/success: #16A34A

            semantic/error: #DC2626

Token usage rules. Always reference colors by CSS custom property name, never by raw hex value. This ensures dark mode, theming, and future brand updates propagate automatically. When exporting for native platforms (iOS, Android), use the Figma token plugin to generate platform-specific constants. Keep color token files in version control alongside code.