Jotform Design System Deep Dive

1. Brand Overview

Jotform’s visual language is exactly what you’d expect from a productivity SaaS that’s been around the block: clean, functional, with just enough personality to feel human. They’re not chasing avant-garde trends, but they’re also not stuck in 2010 flat design purism. The vibe is “business-friendly with a friendly handshake” — bold CTAs and clear hierarchy, but softened with rounded corners and approachable typography.

This is a tool for people building forms fast: marketers, HR managers, educators, SMB owners. The design system reflects that. No overcomplicated patterns, no art-for-art’s-sake layouts. Everything is about clarity, legibility, and quick actions.

Their primary palette leans into deep navy and warm orange — a safe, trusted base with energy injected through accents. The typography choice, Circular, is a well-known geometric sans that communicates modernity without alienating non-designers. It’s paired with an 8px spacing scale that keeps layouts consistent across a complex product ecosystem.

There’s a pragmatic responsiveness at play — breakpoints span from 340px up to 1900px, which tells me they’ve tuned for mobile micro-screens all the way to widescreen dashboards. Components feel modular and portable: the same button styles reappear in header nav, marketing pages, and product UI, with consistent state management. Hover/focus states are deliberate — they don’t just shift color; some rotate icons or move elements for micro-interaction delight.

If I had to summarize Jotform’s design philosophy: “Make it easy, keep it friendly, and never break the grid.” This is a design system built for scaling a complex product without losing visual cohesion. I love that they’ve resisted the temptation to throw shadows everywhere — depth is used sparingly, often replaced by subtle borders. That restraint keeps the interface feeling light and controlled.

2. Color System

2.1 Primary Colors

The hero color is a warm orange (rgb(255, 97, 0) / #ff6100) — used for sign-up CTAs, key buttons, and primary actions. It’s energetic, but not neon; you could call it “trustworthy urgency.” It works well against their deep navy (#0a1551) and whites.

Secondary accents include deep navy blues (#0a1551, #24356a, #01105c) for text and backgrounds, and a bright blue (#0000ee) for links. That link blue is a browser default throwback — surprising in a modern brand, but it fits their utilitarian ethos.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally high. Primary orange (#ff6100) on white exceeds WCAG AAA for large text and AA for normal text. Deep navy text (#0a1551) on white is very safe. The link blue (#0000ee) is standard browser blue — high contrast but a tad aggressive; they’ve opted out of underline, so hover color changes are important for accessibility cues.

Dark mode isn’t evident in the extracted data — palette is tuned for light backgrounds.

2.4 Usage Guide

Combinations that work:

• Primary Orange + Navy Text — Energetic but grounded.
• Navy + White — Classic readability.
• Bright Blue Hover on Navy Elements — Keeps interaction visible.

Avoid:

• Orange on Navy for body text — contrast drops below ideal for small text.
• Link Blue + Pale Lavender backgrounds — low contrast.

3. Typography

3.1 Font Families

Primary: Circular — geometric sans with approachable curves.
Fallbacks: -apple-system, system-ui, Segoe UI, roboto, oxygen-sans, ubuntu, cantarell, Helvetica Neue in most contexts.
Some headings/links use a slightly different stack including emoji support: system-ui, Helvetica, -apple-system, Segoe UI, Roboto, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol.

No Google/Adobe fonts in sources — likely self-hosted Circular.

3.2 Type Scale

3.3 Hierarchy

Headline sizes jump dramatically (56 → 38 → 34 → 28px) giving strong visual separation. Using Circular at multiple weights keeps hierarchy clear without swapping fonts. Body at 16px is safe for accessibility. Captions drop to 12px and 10px — good for metadata, but should be used sparingly for legibility.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

4.2 Layout

Breakpoints from 340px → 1900px. This span covers micro-mobile to wide desktop dashboards. Likely a fluid grid with container max widths around 1440px for content-heavy pages.

5. Visual Elements

Border Radius: Mix of small radii (2px, 4px, 7px) for buttons/inputs, up to 9998px for pill buttons. Consistent rounding — no sharp corners unless functional.

Shadows: Minimal. Examples:

• rgb(210, 219, 242) 0px 3px 0px — subtle edge highlight.
• rgba(0, 0, 0, 0.5) 0px 0px 16px 4px — rare, strong modal shadow.

Borders: 1px solid in soft grays (#c8ceed, #f3f3f3) for separation. Often used instead of shadows for depth.

6. Components

6.1 Buttons

Primary (Orange)

Default: #ff6100 bg, white text, padding 12px 20px, radius 4px.
Hover: color variable, border 1px solid #615568.
Active: #ee5b00 bg.
Focus: transparent bg, rotated icon transform — playful micro-interaction.

Secondary (Yellow)

Default: #ffb629 bg, navy text, padding 12px 37px, radius 4px.
Hover: same transform as primary.
Active: #ee5b00 bg.

Outline / Surface

White bg, black text, padding 24px, radius 10px, 1px solid #c8ceed.

Trio Buttons (Blue / Dark Gray)

Bg #0070f3 or #2e2e2e, white text, padding 12px 22px, radius 7px.

Icon Pills

Bg #fb7041, black text, padding 0 6px, radius 9998px.

6.2 Links

Default link blue (#0000ee) or navy (#0a1551), no underline.
Hover: changes to var(--jf-text-hover).

6.3 Forms

Text inputs: Transparent bg, navy text, no border.
Selects: White bg, navy text, 1px solid #d5ddf9, radius 4px, padding 4px 5px 4px 9px.

6.4 Cards

White bg, 10px radius, 1px solid #c8ceed, subtle shadow rgb(210,219,242) 0px 3px.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-deep-navy: #24356a;
  --color-link-blue: #0000ee;
  --color-muted-indigo: #454e80;
  --color-primary-navy: #0a1551;
  --color-white: #ffffff;
  --color-soft-lavender: #6f76a7;
  --color-dark-gray-blue: #2c3345;
  --color-pale-lavender: #939bc5;
  --color-deep-blue: #01105c;
  --color-burnt-brown: #6a1c00;
  --color-medium-blue: #005fcc;
  --color-bright-blue: #0075e3;
  --color-light-gray: #f7f7f9;
  --color-swiper-theme-blue: #007aff;

  /* Typography */
  --font-primary: 'Circular', -apple-system, system-ui, Segoe UI, roboto, oxygen-sans, ubuntu, cantarell, 'Helvetica Neue';
  --font-secondary: system-ui, Helvetica, -apple-system, Segoe UI, Roboto, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-64: 64px;
  --space-90: 90px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;
  --radius-xl: 10px;
  --radius-pill: 9998px;

  /* Shadows */
  --shadow-subtle: rgb(210, 219, 242) 0px 3px 0px 0px;
  --shadow-strong: rgba(0, 0, 0, 0.5) 0px 0px 16px 4px;
}

8. AI Coding Assistant Prompt

# Jotform Design System Specification

You are a Jotform design expert. Build UIs matching their visual language exactly.

## Brand Context
Jotform’s design is functional and approachable. It uses geometric sans typography, a friendly color palette with navy blues and warm oranges, and an 8px spacing grid. Interactions are clear and often playful, with micro-transforms on hover.

## Color Palette
- Black: #000000 — Text, icons
- Deep Navy: #24356a — Secondary navigation
- Link Blue: #0000ee — Hyperlinks
- Muted Indigo: #454e80 — Secondary text
- Primary Navy: #0a1551 — Primary text, action links
- White: #ffffff — Backgrounds, text on dark
- Soft Lavender: #6f76a7 — Sub-menu items
- Dark Gray Blue: #2c3345 — Chat UI
- Pale Lavender: #939bc5 — Secondary text
- Deep Blue: #01105c — Backgrounds
- Burnt Brown: #6a1c00 — Decorative underline
- Medium Blue: #005fcc — Hover/focus accents
- Bright Blue: #0075e3 — Hover/focus accents
- Light Gray: #f7f7f9 — Backgrounds
- Swiper Theme Blue: #007aff — Slider components

## Typography
Font family: 'Circular', -apple-system, system-ui, Segoe UI, roboto, oxygen-sans, ubuntu, cantarell, 'Helvetica Neue'  
Secondary stack for emoji support.

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1-lg | 56px | 700 | 1.15 | Page titles |
| H1-md | 38px | 700 | 1.42 | Section titles |
| H1-alt | 34px | 700 | 1.15 | Subsections |
| H1-light | 28px | 400 | 1.21 | Intro text |
| H1-bold | 28px | 700 | 1.15 | Key labels |
| Body | 16px | 400 | 1.15 | Main content |
| Button | 16px | 500 | 1.00 | CTAs |
| Caption | 14px | 400 | 1.14 | Metadata |

## Spacing & Grid
Base: 8px grid.  
Scale: 4px, 8px, 10px, 12px, 16px, 24px, 40px, 64px, 90px.  
Use multiples for padding/margins.

## Border Radius
- sm: 2px — Inputs
- md: 4px — Buttons
- lg: 7px — Large buttons
- xl: 10px — Cards
- pill: 9998px — Pills, avatars

## Shadows
- subtle: rgb(210, 219, 242) 0px 3px
- strong: rgba(0, 0, 0, 0.5) 0px 0px 16px 4px

## Component Specifications

### Primary Button
Default: bg #ff6100, color #ffffff, padding 12px 20px, radius 4px, no border.  
Hover: bg var(--buttonHoverBg), transform translateX(-8px) rotate(180deg), border 1px solid #615568.  
Active: bg #ee5b00.  
Focus: transparent bg, no border.

```css
.btn-primary {
  background: #ff6100;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: var(--buttonHoverBg);
  transform: translateX(-8px) rotate(180deg);
  border: 1px solid #615568;
}

Navigation Link

Default: color #0000ee, no underline.
Hover: color var(--jf-text-hover).

Input Field

White bg, navy text, 1px solid #d5ddf9, radius 4px, padding 4px 5px 4px 9px.
Focus: no change.

Layout & Responsive Rules

Max content width implied ~1440px.
Breakpoints: 340px, 375px, 768px, 1024px, 1440px, 1900px.

Interaction Rules

Transitions ~150ms ease.
Hover transforms on buttons.
No focus outline — replaced by micro-transform.

DO List

• Use ONLY colors from palette.
• Maintain 8px grid — spacing in multiples.
• Use Circular for all text.
• Keep hover transforms consistent.
• Use navy for text on light backgrounds.

DON'T List

• Introduce new colors.
• Mix sharp and rounded corners.
• Add heavy shadows arbitrarily.
• Underline links unless accessibility requires.

Code Examples

Primary Button:

.btn-primary { background:#ff6100; color:#fff; padding:12px 20px; border-radius:4px; }
.btn-primary:hover { background:#ee5b00; }

Card:

.card { background:#fff; border-radius:10px; border:1px solid #c8ceed; padding:24px; }

Input:

.input { border:1px solid #d5ddf9; border-radius:4px; padding:4px 9px; background:#fff; color:#0a1551; }

---

## 9. Summary

**TL;DR** — Jotform’s design system is built on a navy + orange palette, Circular type, and an 8px grid. Corners are consistently rounded, shadows are rare, and hover states always have intent.

**Brand Keywords**  
- friendly-functional  
- navy-orange-trust  
- grid-disciplined  
- micro-interaction-savvy