Get a GFS-branded page running in under 2 minutes. Follow these four steps in order.
<link rel="stylesheet" href="shared.css"> <link rel="stylesheet" href="print.css" media="print">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:opsz,wght@14..32,100..900&display=swap" rel="stylesheet">
<div class="topbar">
<div class="topbar-l">
<span class="dot-live"></span>
<a href="index.html" style="color:inherit;text-decoration:none;">← Hub</a>
<span style="opacity:.4">—</span>
<span>Your Page Title</span>
</div>
<div class="topbar-r">
<span>v10.0</span>
<button class="topbar-btn" onclick="toggleTheme()">◔ Mode</button>
</div>
</div>
<div class="page">
<div class="s" id="s01-dup-x0">
<div class="s-head">
<span class="s-num">01</span>
<span class="s-title">Section Title</span>
<span class="s-meta">Category / Subcategory</span>
</div>
<div class="s-body">
<!-- Your content here -->
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GFS Design System — Page Title</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:opsz,wght@14..32,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="shared.css">
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
<div class="topbar">
<div class="topbar-l">
<span class="dot-live"></span>
<a href="index.html" style="color:inherit;text-decoration:none;">← Hub</a>
<span style="opacity:.4">—</span>
<span>Page Title</span>
</div>
<div class="topbar-r">
<span>v10.0</span>
<button class="topbar-btn" onclick="toggleTheme()">◔ Mode</button>
</div>
</div>
<div class="page">
<div class="s" id="s01-dup-x1">
<div class="s-head"><span class="s-num">01</span><span class="s-title">Section Title</span><span class="s-meta">Description</span></div>
<div class="s-body">
<p>Content goes here.</p>
</div>
</div>
</div>
<div style="text-align:center;padding:24px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);border-top:1px solid var(--silver);margin-top:32px;">
<a href="index.html" style="color:var(--tufts);text-decoration:none;">← Back to Hub</a> · GFS Design System v10.0 · Global Food Solutions, Inc.
</div>
<script>
function toggleTheme(){var h=document.documentElement,d=h.getAttribute('data-theme')==='dark';h.setAttribute('data-theme',d?'':'dark');localStorage.setItem('gfs-theme',d?'light':'dark');}
(function(){var s=localStorage.getItem('gfs-theme');if(s==='dark')document.documentElement.setAttribute('data-theme','dark');})();
</script>
</body>
</html>
Every CSS custom property in shared.css, organized by category. Click any row's Copy button to grab the variable declaration.
| Token | Light Value | Dark Value | Usage |
|---|
Copy-pasteable HTML for the 10 most-used GFS components. Each has a live preview and the exact markup needed.
Apply the GFS design system to NetSuite Suitelet pages. Since Suitelets render server-side HTML, inject styles directly.
NetSuite Suitelets cannot link external CSS from Cloudflare. Instead, embed critical GFS variables and component styles in a <style> block at the top of your Suitelet HTML output.
/**
* @NApiVersion 2.1
* @NScriptType Suitelet
*/
define(['N/ui/serverWidget'], function(serverWidget) {
function onRequest(context) {
var form = serverWidget.createForm({ title: 'GFS Shipment Tracker' });
// Inject GFS design system variables + base styles
var htmlField = form.addField({
id: 'custpage_gfs_styles',
type: serverWidget.FieldType.INLINEHTML,
label: ' '
});
htmlField.defaultValue = [
'<style>',
':root {',
' --cobalt:#092F64; --navy:#1A5799; --tufts:#468BE6;',
' --jordy:#93BFEF; --alice:#E9F5FF; --ice:#F4F9FF;',
' --black:#1F1F1F; --graphite:#4B5F7A; --slate:#6B7280;',
' --steel:#9CA3AF; --silver:#D9E1EA; --fog:#F0F2F5;',
' --success:#0F766E; --warning:#B45309; --error:#DC2626;',
' --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;',
'}',
'body { font-family: "Inter", Arial, sans-serif; }',
'.uir-page-title-secondline { color: var(--cobalt); }',
'#main_form td.listtexthl { background: var(--ice) !important; }',
'#main_form .bglt { background: var(--fog) !important; }',
'.btn_secondarymini, .btn_secondary {',
' font-family: "IBM Plex Mono", monospace !important;',
' font-size: 11px !important;',
' letter-spacing: .06em;',
' text-transform: uppercase;',
'}',
'</style>'
].join('\\n');
// Add your Suitelet fields here
form.addField({
id: 'custpage_vendor',
type: serverWidget.FieldType.TEXT,
label: 'Vendor'
});
context.response.writePage(form);
}
return { onRequest: onRequest };
});
For complete control, write raw HTML to the response. This bypasses NetSuite's form builder and gives you full GFS styling.
function onRequest(context) {
var html = [];
html.push('<!DOCTYPE html>');
html.push('<html lang="en"><head>');
html.push('<meta charset="UTF-8">');
html.push('<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">');
html.push('<style>');
html.push(' :root { --cobalt:#092F64; --tufts:#468BE6; --fog:#F0F2F5; --silver:#D9E1EA; }');
html.push(' body { font-family:"Inter",sans-serif; margin:0; padding:32px; background:var(--white); }');
html.push(' .gfs-header { background:var(--cobalt); color:#fff; padding:12px 24px;');
html.push(' font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }');
html.push(' .gfs-table { width:100%; border-collapse:collapse; margin-top:24px; }');
html.push(' .gfs-table th { background:var(--fog); padding:10px 16px; text-align:left;');
html.push(' font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;');
html.push(' letter-spacing:.08em; text-transform:uppercase; color:#4B5F7A; border-bottom:2px solid var(--cobalt); }');
html.push(' .gfs-table td { padding:10px 16px; border-bottom:1px solid var(--fog); font-size:14px; }');
html.push('</style>');
html.push('</head><body>');
html.push('<div class="gfs-header">GFS Shipment Tracker</div>');
html.push('<table class="gfs-table"><thead><tr><th>PO</th><th>Vendor</th><th>Weight</th><th>Status</th></tr></thead>');
html.push('<tbody><!-- Render rows dynamically --></tbody></table>');
html.push('</body></html>');
context.response.write(html.join('\\n'));
}
@media print { .gfs-header { background:#fff !important; color:#092F64 !important; border-bottom:2px solid #092F64; } } to ensure headers print cleanly without background color issues.
Email clients strip <style> blocks and ignore CSS variables. All styling must be inline. Use table-based layout for Outlook compatibility.
| Name | Hex | |
|---|---|---|
| Cobalt | #092F64 | |
| Tufts | #468BE6 | |
| Black | #1F1F1F | |
| Graphite | #4B5F7A | |
| Fog | #F0F2F5 | |
| Success | #0F766E | |
| Error | #DC2626 |
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GFS Notification</title>
<!--[if mso]><style>table{border-collapse:collapse;}td{font-family:Arial,sans-serif;}</style><![endif]-->
</head>
<body style="margin:0;padding:0;background-color:#F0F2F5;font-family:Arial,Helvetica,sans-serif;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background-color:#F0F2F5;">
<tr><td align="center" style="padding:32px 16px;">
<table role="presentation" width="600" cellspacing="0" cellpadding="0" style="background-color:#FFFFFF;border:1px solid #D9E1EA;">
<!-- HEADER -->
<tr><td style="background-color:#092F64;padding:20px 24px;text-align:center;">
<span style="font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:bold;letter-spacing:0.15em;color:#FFFFFF;text-transform:uppercase;">GLOBAL FOOD SOLUTIONS</span>
</td></tr>
<!-- BODY -->
<tr><td style="padding:32px 24px;">
<h1 style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:bold;color:#092F64;">Subject Line Here</h1>
<p style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.7;color:#4B5F7A;">
Body text goes here. Use #4B5F7A (Graphite) for paragraph text, #092F64 (Cobalt) for headings.
</p>
<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0">
<tr><td style="background-color:#092F64;padding:12px 24px;">
<a href="#" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:bold;letter-spacing:0.06em;text-transform:uppercase;color:#FFFFFF;text-decoration:none;">View Details</a>
</td></tr>
</table>
</td></tr>
<!-- FOOTER -->
<tr><td style="padding:16px 24px;border-top:1px solid #D9E1EA;text-align:center;">
<p style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#9CA3AF;">
Global Food Solutions, Inc. · 131 Heartland Blvd, Edgewood, NY 11717
</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Check off each accessibility requirement as you verify it. Progress is tracked and persisted in localStorage.