UI Style Guide

Static copy of the John Deere UI standards / guidelines image shared in Slack, preserved here as a durable ForgeFX team URL. Use this page when the team needs the standard Deere colors, typography, and interface styling reference without depending on Slack file retention.

Source Image Open original Slack message

John Deere UI style guide showing color palette, typography, iconography, buttons, fields, and interface examples

Related Downloads Verified in SharePoint via Microsoft Graph

PDF Official Deere visual guidance DeereVisual Guidelines.pdf Official Deere visual guidelines covering colors, typography, logo usage, and visual standards. 4.9 MB PDF Digital interface standards JDDigital Standards.pdf John Deere digital standards reference for web and application interface work. 1.4 MB ZIP Font package JD Sans.zip John Deere Sans font files referenced by the UI / Visual Design folder. 2.1 MB PPTX Overlay guide JDC Overlay Guide 24 (3).pptx Large PowerPoint overlay guide from the same John Deere UI / Visual Design folder. 178.9 MB

These buttons point to verified files in the ForgeFX John Deere SharePoint site. ForgeFX Microsoft sign-in may be required.

Programmer Style Data Extracted from the image; unreadable values are marked

Download style data as text Open code block

John Deere UI style data extracted from image

COLORS
Panel/background: #1b1b1b / rgb(27,27,27)
Panel inset: #000000 / rgb(0,0,0)
Titles / accent yellow: #f2a900 / rgb(242,169,0)
Button dark: #333333 / rgb(51,51,51)
Text / icon off / light gray: #dddddd / rgb(221,221,221)
Green / progress complete: #1eda00 / rgb(30,218,0)
Blue / info: #005db1 / rgb(0,93,177)
Red / warning/prohibited: #c21020 / rgb shown as 194,16,21; exact RGB inconsistent with hex
Toggle off button/knob: #666666 / rgb(102,102,102)
Toggle off channel: #333333 / rgb(51,51,51)
Toggle on button/knob: #f2a900 / rgb(242,169,0)
Toggle on channel: #dddddd / rgb(221,221,221)
List item normal: #333333 / rgb(51,51,51)
List item hover/active: #666666 / rgb(102,102,102)
Toggle on text: #1b1b1b / rgb(27,27,27)
Toggle off text: #dddddd / rgb(221,221,221)
CTA text: #1b1b1b / rgb(27,27,27)
CTA button: #f2a900 / rgb(242,169,0)

TYPOGRAPHY
Title: JD Sans Bold; color #f2a900
Step heading: Open Sans Bold; color #dddddd
Body/content text: Open Sans Regular; color #dddddd; size/leading shown as 25/35 pt
Other font sizes: unreadable
Other weights: unreadable

BUTTONS / INPUTS / STATES
Default dark button: background #333333
Icon off: #dddddd
Icon on / active icon: #f2a900

Toggle switch off:
- Channel/track: #333333
- Button/knob: #666666
- Text: #dddddd

Toggle switch on:
- Channel/track: #dddddd
- Button/knob: #f2a900
- Text: #1b1b1b when on yellow

Segmented toggle:
- Selected segment background: #f2a900
- Selected text: #1b1b1b
- Unselected segment/button background: #333333
- Unselected text: #dddddd

List items:
- Normal background: #333333
- Hover/active background: #666666
- Active/selected item text: #f2a900
- Normal item text: #dddddd

CTA button:
- Background: #f2a900
- Text: #1b1b1b
- Avoid: white text on yellow

STATUS / ICON NOTES
Progress complete bar: #1eda00
Info icon: #005db1
Prohibited/error icon: #c21020
Active/on icons use #f2a900
Inactive/off icons use #dddddd

SPACING / SHAPE / STYLE NOTES
Primary UI uses dark panel background #1b1b1b with black inset panels #000000.
Buttons, toggles, and panels appear rounded; radius values unreadable.
List items are stacked rectangular rows with dark separators; exact spacing unreadable.
Progress bar is horizontal with rounded ends; exact dimensions unreadable.
Exact padding, margins, icon sizes, line heights besides body 25/35 pt: unreadable.