--- version: alpha name: ServiceNow description: Now Design System — enterprise workflow platform rendered in signature forest green and deep navy, ServiceNow Sans custom typeface, 8px spatial grid, and a purposeful tiered elevation system that keeps complex SaaS density readable. colors: # Surface / canvas background: "#ffffff" surface: "#f0f4f4" surface-dark: "#032d42" # Text / ink ink: "#293e40" ink-secondary: "#617074" on-background: "#293e40" on-surface: "#293e40" on-dark: "#ffffff" # Brand accent — ServiceNow green primary: "#62d84e" primary-dark: "#3dba2b" primary-tint: "#e8f9e5" on-primary: "#032d42" # Interactive / links link: "#0066cc" link-hover: "#004f9e" # Navy (second brand hue — hero/dark sections, CTAs) navy: "#032d42" navy-mid: "#0a4a6e" navy-light: "#e8f0f7" # State focus-ring: "#005fcc" text-hover: "#1a2f31" # was rgba(41,62,64,0.88) — Google format requires hex # Semantic success: "#2e7d32" warning: "#e65100" error: "#c62828" info: "#0066cc" # Borders border: "#c5d0d1" border-subtle: "#e4eaeb" # Shadow tints (opaque approximations) shadow-soft: "#c8d4d5" # was rgba(41,62,64,0.18) — Google format requires hex shadow-medium: "#b5c5c7" # was rgba(41,62,64,0.28) — Google format requires hex typography: display-hero: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 56px fontWeight: 300 lineHeight: 1.07 letterSpacing: -0.5px display: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 44px fontWeight: 300 lineHeight: 1.1 letterSpacing: -0.25px heading-section: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px heading-sub: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0px heading-card: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0px body-large: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0px body: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-small: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px nav-link: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0px button-ui: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0.25px caption: fontFamily: "ServiceNow Sans, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0.4px mono: fontFamily: "ServiceNow Sans Mono, SFMono-Regular, Consolas, Liberation Mono, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px 5xl: 128px rounded: none: 0px sm: 4px md: 8px lg: 16px xl: 24px pill: 9999px components: # Primary CTA — navy fill, green-tinted text treatment on dark sections button-primary: backgroundColor: "{colors.navy}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px button-primary-hover: backgroundColor: "{colors.navy-mid}" textColor: "{colors.on-dark}" button-primary-focus: backgroundColor: "{colors.navy}" textColor: "{colors.on-dark}" outline: "2px solid {colors.focus-ring}" # Green CTA — brand green for high-emphasis dark-background sections button-green: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px button-green-hover: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" # Secondary / outlined button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.navy}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 13px 27px button-secondary-hover: backgroundColor: "{colors.navy-light}" textColor: "{colors.navy}" # Ghost / text button-ghost: backgroundColor: "transparent" textColor: "{colors.link}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 16px button-ghost-hover: backgroundColor: "{colors.navy-light}" textColor: "{colors.link-hover}" # Card card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 32px card-hover: backgroundColor: "{colors.background}" textColor: "{colors.ink}" outline: "1px solid {colors.primary}" # Feature card (solution/product tile) card-feature: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px # Input input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" outline: "2px solid {colors.focus-ring}" # Navigation (sticky top bar) nav-bar: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" padding: 0px 32px # Badge / tag badge: backgroundColor: "{colors.primary-tint}" textColor: "{colors.navy}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px # Dark hero section section-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" padding: 96px 32px # Tooltip tooltip: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.body-small}" rounded: "{rounded.sm}" padding: 8px 12px --- # ServiceNow Design System ## Overview ServiceNow's visual language is enterprise design operating at maximum intentionality. The Now Design System governs one of the world's most complex SaaS platforms — ITSM, HRSD, CSM, and platform tooling across hundreds of enterprise workflows — and it does so through a disciplined polarity: deep navy (`{colors.surface-dark}`) anchors the brand in institutional gravitas, while signature forest green (`{colors.primary}`) punches through as the most vivid hue on any given screen. This green-on-navy pairing is ServiceNow's most recognizable brand move, deployed across hero sections and product illustrations with consistency that borders on corporate law. The custom typeface — **ServiceNow Sans** — ships in Light, Medium, and Bold weights with a paired `ServiceNow Sans Mono` for technical content. At display sizes, weight 300 (Light) gives headlines an unexpectedly open, airy quality for such a large-scale enterprise product. At medium hierarchy levels, weight 500 carries section labels without veering into corporate density. It is a bespoke workhorse: not particularly expressive, but precisely calibrated to remain readable at the dense information loads enterprise UIs demand. The fallback to `Helvetica Neue, Arial` maintains visual continuity when the custom face fails to load — a practical concession to enterprise IT environments that may block external font requests. What makes the Now Design System architecturally coherent is its layered surfaces. White (`{colors.background}`) carries the bulk of content; a gray-teal `{colors.surface}` tints alternate sections; and `{colors.surface-dark}` navy sections frame hero content and primary CTAs. This tri-layer rhythm structures the page vertically, creating visual cadence without relying on dramatic photography or gradients. Cards on `{colors.background}` use subtle `{colors.border}` outlines at rest, activating to `{colors.primary}` green on hover — a quietly effective technique that ties interaction feedback to brand identity. **Key Characteristics:** - ServiceNow Sans custom typeface in Light (300), Medium (500), Bold (700) — self-hosted `.woff2` - ServiceNow Sans Mono for code and technical labels - Signature `{colors.primary}` forest green (#62d84e) — used exclusively for high-emphasis CTAs and brand moments - Deep `{colors.surface-dark}` navy (#032d42) as the hero/dark-section canvas - Pill-shaped buttons (`{rounded.pill}`) — rounded fully, a distinct softening for enterprise - 8px spatial grid with generous `{spacing.2xl}` / `{spacing.3xl}` section breathing room - Card hover-to-green-outline: `1px solid {colors.primary}` as the interaction signature - Font Awesome Light (fa-light-300) for iconography — system-wide, not decorative - Semantic status palette (success/warning/error/info) kept strictly separate from brand green - Dark navy nav bar making the top chrome feel anchored and premium ## Colors ### Primary Surfaces - **White** (`{colors.background}`): Default page canvas — clean, clinical enterprise feel. - **Gray-Teal** (`{colors.surface}`): Alternating section backgrounds, card fills in feature grids. The slight blue-gray tint distinguishes it from a generic warm gray. - **Deep Navy** (`{colors.surface-dark}`): Hero sections, dark CTAs, navigation bar, footer. The gravitational pole of the brand. ### Text - **Dark Teal-Charcoal** (`{colors.ink}`): Primary text — not pure black, but a dark teal-derived charcoal that bridges into brand vocabulary. - **Gray-Blue** (`{colors.ink-secondary}`): Secondary text, metadata, captions. - **White** (`{colors.on-dark}`): All text on dark navy surfaces. ### Brand Accent - **ServiceNow Green** (`{colors.primary}`): The brand signature. Primary CTAs on dark backgrounds, active nav indicators, card hover borders, check-mark icons. High-saturation, vivid — unmistakably ServiceNow. - **Primary Dark** (`{colors.primary-dark}`): Hover/active state for green buttons. Deepens without muddying. - **Green Tint** (`{colors.primary-tint}`): Badge backgrounds, subtle callout fills. ### Navy Tones - **Navy** (`{colors.navy}`): Primary buttons on light backgrounds, heading text on dark sections. - **Navy Mid** (`{colors.navy-mid}`): Navy button hover state. - **Navy Light** (`{colors.navy-light}`): Hover fill for secondary/ghost buttons — a pale blue tint. ### Interactive - **Link Blue** (`{colors.link}`): In-text links and secondary interactive elements — a conventional WCAG-compliant blue kept distinct from the green brand accent. - **Focus Ring** (`{colors.focus-ring}`): Keyboard navigation — blue, consistent with WCAG 2.1 AA requirements. ### Semantic - **Success** (`{colors.success}`): Positive states, confirmation indicators. - **Warning** (`{colors.warning}`): Caution states. - **Error** (`{colors.error}`): Destructive actions, form validation. - **Info** (`{colors.info}`): Informational badges, tooltips. ## Typography ### Font Family - **Primary**: `ServiceNow Sans`, fallbacks `Helvetica Neue, Arial, sans-serif` - **Monospace**: `ServiceNow Sans Mono`, fallbacks `SFMono-Regular, Consolas, Liberation Mono, monospace` - Both are self-hosted `.woff2` files — no Google Fonts or Adobe Fonts dependency. - **Icons**: Font Awesome Light (fa-light-300) — icon font, not inline SVG. ### Hierarchy The complete type scale is declared in the `typography:` token block above. | Token | Use | |---|---| | `display-hero` | Hero headlines — 56px weight 300, open and confident | | `display` | Secondary hero, major page sections — 44px weight 300 | | `heading-section` | Section H2 headings — 32px weight 500 | | `heading-sub` | Sub-section H3 — 24px weight 500 | | `heading-card` | Card titles, product names — 20px weight 700 | | `body-large` | Intro paragraphs, feature descriptions — 18px | | `body` | Standard content — 16px weight 400 | | `body-small` | Secondary content, helper text — 14px | | `nav-link` | Top navigation items — 15px weight 500 | | `button-ui` | All button labels — 16px weight 700, slight tracking | | `caption` | Labels, timestamps, meta — 12px with 0.4px tracking | | `mono` | Code snippets, API references, technical strings | ### Principles - **Light weight at scale**: Weight 300 at 44–56px creates the airy authority that enterprise hero sections need — heavy weight at this size would feel oppressive. - **Bold for action**: `{typography.button-ui}` uses weight 700 — the heaviest weight in the system, reserved for interactive labels where legibility under brief attention is critical. - **Modest tracking**: Only `{typography.caption}` uses positive letter-spacing (0.4px). Display and body text avoid tracking, keeping the custom typeface reading naturally. - **Mono for credibility**: `{typography.mono}` anchors technical content — API endpoints, code examples, system identifiers — with a reading texture that signals precision. ## Layout ### Spacing System The complete spacing scale lives in the `spacing:` token block above. Base unit: **8px**. ServiceNow's layout breathes generously. Hero sections use `{spacing.4xl}` (96px) vertical padding, section transitions use `{spacing.3xl}` (64px), and card grids use `{spacing.lg}` (24px) gap. For an enterprise product whose application UIs are famously dense, the marketing site compensates with open structure — a visual counterweight to the complexity within the platform. ### Grid & Container - Max content width: 1260px - 12-column responsive grid - Column gutter: 24px - Lateral page margins: 32px (desktop), 16px (mobile) - Feature grids: 3-up on desktop, 2-up on tablet, 1-up on mobile ### Whitespace Philosophy - **Section breathing**: 96px top/bottom on hero blocks — no crowding the message. - **Card density**: 32px internal padding on primary cards; 24px on feature tiles. Both feel spacious relative to IBM or SAP equivalents. - **Dark-section contrast**: Navy sections create hard visual edges that organize long-scroll pages into clear thematic chapters. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, white or teal-gray surface | Default content surface | | Card (Level 1) | `0 2px 8px {colors.shadow-soft}` | Resting cards, info panels | | Elevated (Level 2) | `0 4px 16px {colors.shadow-medium}` | Dropdown menus, hover-state cards | | Dialog (Level 3) | `0 8px 32px {colors.shadow-medium}` | Modal dialogs, side panels | | Focus | `0 0 0 2px {colors.focus-ring}` | Keyboard focus ring | **Shadow Philosophy**: ServiceNow's shadow system is conservative. The navy-derived shadow tints (`{colors.shadow-soft}`, `{colors.shadow-medium}`) give shadows a slightly cool, brand-coherent tone rather than generic black transparency. Cards use subtle level-1 shadows at rest; the primary depth signal is the teal-gray alternate surface color rather than shadow layering. This restraint keeps the UI reading as clean and credible — enterprise procurement teams distrust anything that looks too decorative. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Full-width section dividers, table cells | | `sm` | 4px | Tooltips, small chips, inner form elements | | `md` | 8px | Input fields, secondary badges, dropdowns | | `lg` | 16px | Content cards, feature tiles, modals | | `xl` | 24px | Large hero cards, testimonial panels | | `pill` | 9999px | All buttons — the defining shape gesture | Pill-shaped buttons are ServiceNow's distinctive shape choice. In an enterprise SaaS landscape dominated by 4–8px rounded buttons, the full pill reads as approachable and polished — a deliberate signal that the platform has evolved past the utilitarian roots of ITSM. Cards use `{rounded.lg}` as the workhorse; the pill is reserved strictly for interactive controls. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — Navy fill, white text, full pill radius. The standard light-background CTA. Hover deepens to `{colors.navy-mid}`. - **`button-green`** — ServiceNow green fill, navy text. Reserved for high-emphasis moments on dark navy sections — the green pops against `{colors.surface-dark}` with unmistakable brand clarity. - **`button-secondary`** — White fill with navy border and text, pill radius. Clean secondary action. - **`button-ghost`** — Transparent fill, link-blue text. Tertiary actions, inline navigational prompts. ### Cards - **`card`** — White, `{rounded.lg}` (16px), 32px padding. Hover state activates a `1px solid {colors.primary}` green outline — the interaction signature that ties card engagement to brand color. - **`card-feature`** — Teal-gray surface (`{colors.surface}`), `{rounded.lg}`. Used for product/solution grids where content grouping needs a contained fill rather than a floating white card. ### Inputs - **`input`** — White background, `{colors.border}` outline, `{rounded.md}` (8px). Clean and conventional. Focus switches to `2px solid {colors.focus-ring}` — no ambiguity about keyboard position. ### Navigation - **`nav-bar`** — Deep navy (`{colors.surface-dark}`) sticky top bar. White nav links, ServiceNow green hover/active. Vertical divider lines separate nav clusters. The dark nav creates authoritative page framing. ### Badges - **`badge`** — Green tint background, navy text, pill shape. Used for product labels, category tags, status chips. Inherits brand identity without demanding the full saturated primary. ### Dark Sections - **`section-dark`** — Navy canvas (`{colors.surface-dark}`), white text, 96px vertical padding. Used for hero, primary CTA, and closing sections. Green CTAs (`button-green`) live here. ## Do's and Don'ts ### Do - Use `{colors.primary}` green for primary CTAs on dark navy backgrounds — the high-contrast pairing is the brand's visual signature - Apply `{rounded.pill}` to all buttons — it is ServiceNow's differentiating shape within enterprise SaaS - Use `{typography.display-hero}` at weight 300 for hero headlines — light weight reads as confident and open, not weak - Use `{colors.surface-dark}` navy as the hero/closing section canvas — it anchors long marketing pages with visual authority - Use card hover-to-green outline (`1px solid {colors.primary}`) consistently — it ties interaction to brand without adding new color vocabulary - Default link color to `{colors.link}` (blue) — keep it separate from `{colors.primary}` green to avoid semantic ambiguity - Self-host fonts — enterprise environments may block external font CDNs ### Don't - Don't use `{colors.primary}` green for body links or decorative accents — its role is CTAs and active indicators, not general UI color - Don't apply `{rounded.pill}` to cards or input fields — pills are for buttons only - Don't use weight 400 for button labels — `{typography.button-ui}` weight 700 is required for legibility under quick scanning - Don't mix the semantic palette (success/error/warning) with the brand green — these are entirely separate systems - Don't use navy (`{colors.surface-dark}`) for more than 30-40% of a page — it is for emphasis and framing, not content-dense background - Don't introduce gradients on marketing sections — the three flat surface layers provide all the visual rhythm needed - Don't use Font Awesome Regular or Solid weights — the design uses Light (300) weight exclusively for a consistent icon character - Don't reduce section padding below `{spacing.2xl}` for desktop hero sections — density reads as cramped at enterprise scale --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <768px | Single column, hamburger nav, 16px margins, stacked hero | | Tablet | 768–1024px | 2-column content grids, condensed nav | | Desktop | 1024–1260px | 3-column grids, full horizontal nav visible | | Large Desktop | >1260px | Max content width 1260px, centered with auto margins | ### Touch Targets - Buttons: 48px minimum height (pill-shaped, generous target) - Navigation items: 48px row height on mobile - Cards as interactive targets: full card tappable with 16px internal padding - Icon buttons: 44×44px minimum ### Collapsing Strategy - Hero text: 56px → 36px → 28px across breakpoints - Navigation: full horizontal masthead → hamburger with slide-out drawer - Feature grids: 3-up → 2-up → 1-up stacked - Dark hero sections: maintain full-width backgrounds, condense padding from 96px to 48px to 32px - Footer columns: 4-up → 2-up → 1-up with accordion on mobile ### Image Behavior - Product platform screenshots scale proportionally with `max-width: 100%` - Hero product UI illustrations switch from side-by-side to stacked below text on tablet - Dark section background illustrations reposition from decorative right-side placement to behind-text on mobile --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Alternate surface: `{colors.surface}` - Dark hero: `{colors.surface-dark}` - Primary text: `{colors.ink}` - Secondary text: `{colors.ink-secondary}` - Brand green: `{colors.primary}` - Navy: `{colors.navy}` - Border: `{colors.border}` - Link: `{colors.link}` - Focus ring: `{colors.focus-ring}` ### Example Component Prompts - "Create a ServiceNow-style hero section: `{colors.surface-dark}` navy background, 96px vertical padding. Headline at 56px ServiceNow Sans weight 300, line-height 1.07, letter-spacing -0.5px, color `{colors.on-dark}`. Subhead at 18px weight 400, line-height 1.55, color `{colors.on-dark}`. Two pill-shaped CTAs: primary using `{colors.primary}` background with `{colors.on-primary}` text (16px weight 700, 14px 28px padding), secondary using transparent background with white border and white text." - "Build a ServiceNow feature card: `{colors.background}` white background, 1px solid `{colors.border}` border at rest, 16px border-radius, 32px padding, `0 2px 8px {colors.shadow-soft}` shadow. Card title at 20px ServiceNow Sans weight 700, color `{colors.ink}`. Body at 16px weight 400, line-height 1.5, color `{colors.ink-secondary}`. Hover: border transitions to `1px solid {colors.primary}`." - "Create a primary nav bar: `{colors.surface-dark}` navy full-width, sticky. Logo left-aligned. Nav links at 15px ServiceNow Sans weight 500, color `{colors.on-dark}`, 24px horizontal padding per item. Active/hover: `{colors.primary}` green text. Right-aligned: `button-secondary` outlined white pill CTA." - "Design a product badge/tag: `{colors.primary-tint}` background, `{colors.navy}` text, 12px ServiceNow Sans weight 400, letter-spacing 0.4px, 4px 12px padding, full pill radius. Use for solution category labels." - "Build a form input field: `{colors.background}` white fill, 1px solid `{colors.border}` border, 8px border-radius, 12px 16px padding, 16px ServiceNow Sans weight 400, line-height 1.5, color `{colors.ink}`. Placeholder at `{colors.ink-secondary}`. Focus: 2px solid `{colors.focus-ring}` outline." - "Create a ServiceNow-style stat callout card: `{colors.surface}` teal-gray background, 16px radius, 24px padding. Stat number at 44px ServiceNow Sans weight 300, color `{colors.navy}`. Label at 14px weight 400, color `{colors.ink-secondary}`. Optional green accent bar: 4px left border in `{colors.primary}`." ### Iteration Guide 1. Start with the tri-layer canvas: `{colors.background}` white for content, `{colors.surface}` gray-teal for alternating sections, `{colors.surface-dark}` navy for hero and closing. This three-surface rhythm is the structural backbone. 2. Brand green (`{colors.primary}`) is high-value and scarce — apply to primary CTAs on dark backgrounds and card hover-borders. It reads right only when surrounded by navy or white. 3. Buttons are always pills (`{rounded.pill}`) — this is non-negotiable. Cards use `{rounded.lg}` (16px). Inputs use `{rounded.md}` (8px). Three levels, cleanly separated. 4. ServiceNow Sans Light (300) at display sizes is the typographic signature — resist the urge to increase weight for "more impact"; the lightness is the impact. 5. Use `{colors.link}` (blue) for text links and `{colors.primary}` (green) for interactive controls — these two are deliberately separate color systems. 6. Shadow is conservative — `{colors.shadow-soft}` at rest, `{colors.shadow-medium}` on elevated states. Never add dramatic drop shadows; the brand reads as clean enterprise, not decorative. 7. Section padding: minimum `{spacing.3xl}` (64px) vertical on any content block; hero sections use `{spacing.4xl}` (96px). Never compress to feel "modern and tight" — ServiceNow's scale demands breathing room. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by ServiceNow. Brand names and trademarks belong to their respective owners.