Color Palette
Brand Colors
The MDS brand centers on a bold red primary, with blue as a secondary accent. These two colors carry almost all interactive and structural meaning across the site.
Brand Primary
--color-brand-primary
Hex: #AF2626
RGB: 175, 38, 38
RGB: 175, 38, 38
Borders, buttons, accents, utility bar, links
Brand Primary Hover
--color-brand-primary-hover
Hex: #7D0D0D
RGB: 125, 13, 13
RGB: 125, 13, 13
Hover/active states on primary elements
Brand Secondary
--color-brand-secondary
Hex: #136294
RGB: 19, 98, 148
RGB: 19, 98, 148
Secondary links, accents, informational elements
Brand Secondary Hover
--color-brand-secondary-hover
Hex: #555555
RGB: 85, 85, 85
RGB: 85, 85, 85
Hover states on secondary elements
Text Colors
Text Dark
--color-text-dark
Hex: #444444
RGB: 68, 68, 68
RGB: 68, 68, 68
Body text, headings, primary content
Text Medium
--color-text-medium
Hex: #666666
RGB: 102, 102, 102
RGB: 102, 102, 102
Secondary text, placeholders, metadata
White
--color-white
Hex: #FFFFFF
RGB: 255, 255, 255
RGB: 255, 255, 255
Text on dark backgrounds, page background
Neutral / Background Colors
Light
--color-light
Hex: #EFEFEB
RGB: 239, 239, 235
RGB: 239, 239, 235
Stripe backgrounds, nav panels, side blocks
Light-Medium
--color-light-medium
Hex: #C7C8C3
RGB: 199, 200, 195
RGB: 199, 200, 195
Footer background
Medium-Light
--color-medium-light
Hex: #DEDED7
RGB: 222, 222, 215
RGB: 222, 222, 215
Card backgrounds, input borders, inactive regions
Medium
--color-medium
Hex: #70705A
RGB: 112, 112, 90
RGB: 112, 112, 90
Badges, secondary elements, olive-gray accents
Dark
--color-dark
Hex: #555555
RGB: 85, 85, 85
RGB: 85, 85, 85
Dark UI elements, hover states
Black Shadow
--color-black-shadow
RGBA: 0, 0, 0, 0.2
Drop shadows, overlay effects
Regional Section Colors
MDS uses distinct hues to identify its four geographic sections. Each region’s color is applied to section-specific navigation, badges, and content stripe accents.
Pan American
Hex: #0F8484
RGB: 15, 132, 132
RGB: 15, 132, 132
European
Hex: #377852
RGB: 55, 120, 82
RGB: 55, 120, 82
Africa
Hex: #8C4975
RGB: 140, 73, 117
RGB: 140, 73, 117
Asia Oceanian
Hex: #256BA4
RGB: 37, 107, 164
RGB: 37, 107, 164
Additional Colors Referenced in CSS
#333333
Dark backgrounds, text
#7E7E71
Social button text
#ACACAC
Table borders
#EAF3F5
Pale blue-gray backgrounds
#FFFABD
Yellow activity highlight
Typography
MDS uses Lato as its sole typeface across all contexts — headings, body, navigation, buttons, and UI labels. The font is loaded from Google Fonts at four weights.
font-family: Lato, Arial, Helvetica, sans-serif;
/* Loaded via Google Fonts: weights 300, 400, 700, 900 */
Font Weight Specimens
Lato Light — 300
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
Lato Regular — 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
Lato Bold — 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
Lato Black — 900
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
Heading Scale
H1 — 3.2rem / bold (900) / line-height 1.3
Movement Disorder Society
H2 — 2.6rem / bold (900) / line-height 1.3
Clinical Practice Guidelines
H3 — 2.2rem / bold (900) / line-height 1.3
Education & Training Programs
H4 — 1.8rem / bold (900) / line-height 1.3
Research Grants & Fellowships
Body & Secondary Text
Body Text — 1.6rem (16px) / 400 / line-height 1.4
The Movement Disorder Society (MDS) is an international professional society of clinicians, scientists, and other healthcare professionals who are interested in Parkinson’s disease, related neurodegenerative and neurodevelopmental disorders, hyperkinetic movement disorders, and abnormalities in muscle tone and motor control.
Secondary Text — 1.3rem (13px) / 400
Published March 2026 • International Parkinson and Movement Disorder Society • ISSN 0885-3185
Font Size Variables
| Variable | Value | Usage |
|---|---|---|
--fontsize-primary |
1.6rem (~16px) | Nav, labels, body text in stripes |
--fontsize-secondary |
1.3rem (~13px) | Small text, footer, metadata |
--fontsize-mainBody |
1rem | Base rem unit |
--fontweight-regular |
400 | Body text, default weight |
--fontweight-medium |
600 | Emphasized text, labels |
--fontweight-bold |
900 | Headings, buttons, strong emphasis |
--lineheight-mainBody |
1.2 | Compact text blocks |
--lineheight-titanBody |
1.4 | Main body content |
Buttons
Primary Button
The primary button uses MDS Red with a 2px border, 4px border-radius, and bold (900) Lato text. On hover, the fill inverts to white with red text and border.
Default
Hover (interact to see)
padding: 6px 20px;
background: var(--color-brand-primary); /* #AF2626 */
border: 2px solid var(--color-brand-primary);
border-radius: 4px;
color: white;
font-weight: bold (900);
transition: all 0.1s ease;
/* Hover */
background: white;
color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
Outline & Secondary Variants
Outline (Inverted Primary)
Secondary (Blue)
Component Patterns
Aggregation Card
Cards use #DEDED7 backgrounds with a heavy 10px brand-red top border. Padding is 30px.
Standard Card
International Congress 2026
Join thousands of movement disorder specialists at the premier annual gathering for clinical research and education.
Side Column Block
Quick Links
Access membership tools, education resources, and research opportunities.
/* Aggregation Card */
background: #DEDED7; /* --color-medium-light */
border-top: 10px solid #AF2626; /* --color-brand-primary */
padding: 30px;
/* Side Column Block */
background: #EFEFEB; /* --color-light */
border-top: 3px solid #AF2626; /* --color-brand-primary */
Form Inputs
Standard inputs use a 20px border-radius (rounded). The search bar uses a full pill shape at 50px border-radius. All borders are #DEDED7.
Standard Input
Search Bar (pill)
/* Standard Input */
background: white;
border: 1px solid #DEDED7;
border-radius: 20px;
padding: 5px 15px 6px;
/* Search Bar */
border-radius: 50px;
padding: 8px 20px;
Links
Standard Link (hover to see underline)
color: var(--color-brand-primary); /* #AF2626 */
text-decoration: none;
/* Hover: */
text-decoration: underline;
Utility Bar
The utility bar sits at the very top of every page with a solid MDS Red background and white text links.
Utility Bar
#utilityArea {
background: var(--color-brand-primary); /* #AF2626 */
padding: 1rem 0;
color: white;
}
Spacing & Layout
Breakpoints
| Variable | Value | Target |
|---|---|---|
--breakpoint-phone |
600px | Small phones |
--breakpoint-tablet |
768px | Tablet portrait |
--breakpoint-tablet-landscape |
1024px | Tablet landscape |
--breakpoint-desktop |
1200px | Desktop |
--breakpoint-widescreen |
1600px | Large monitors |
--siteBoundsWidth |
1175px | Max content width |
Spacing Variables
| Variable | Value | Usage |
|---|---|---|
--padding-stripe-top |
5rem | Top padding on content stripes |
--padding-stripe-bottom |
5rem | Bottom padding on content stripes |
--margin-block-bottom |
15px | Spacing below content blocks |
--margin-element-bottom |
12px | Spacing below individual elements |
--margin-FloatLeft |
1rem 3rem 2rem 0 | Margins for left-floated media |
--margin-FloatRight |
1rem 0 2rem 3rem | Margins for right-floated media |
--flex-block-spacing |
1rem | Gap between flex children |
--filtergrid-spacing |
3rem | Gap in filter/grid layouts |
Borders & Shadows
Border Styles
Standard Border —
Used for general content separation, input fields, table cells.
1px solid #ccc or var(--color-medium-light)Used for general content separation, input fields, table cells.
Accent Border (3px) —
Header bottom, footer top, side column blocks.
3px solid #AF2626Header bottom, footer top, side column blocks.
Heavy Accent Border (10px) —
Card top borders, major content aggregation blocks.
10px solid #AF2626Card top borders, major content aggregation blocks.
Table Border —
Table cells and table-like data grids.
1px solid #acacacTable cells and table-like data grids.
Box Shadow
Standard Box Shadow —
Applied to elevated cards, dropdowns, and floating panels.
0 3px 6px rgba(0,0,0,.16)Applied to elevated cards, dropdowns, and floating panels.
/* Border reference */
Standard: 1px solid #ccc | var(--color-medium-light)
Accent: 3px solid #AF2626
Heavy accent: 10px solid #AF2626
Table: 1px solid #acacac
/* Shadow */
--standard-box-shadow: 0 3px 6px rgba(0,0,0,.16)
Header & Footer Reference
Header Structure
The MDS header consists of three stacked zones: a utility bar (MDS Red), a logo/navigation area (white with red bottom border), and the main navigation. Desktop header height is 183px.
#headerArea {
background: white;
border-bottom: 3px solid #AF2626;
height: 183px; /* desktop */
}
#utilityArea {
background: #AF2626; /* var(--color-brand-primary) */
padding: 1rem 0;
color: white;
}
Footer Structure
The footer uses a warm medium-gray background with a red accent border on top. Text is dark gray (#444) at the secondary font size (13px).
footer {
background: #C7C8C3; /* var(--color-light-medium) */
border-top: 3px solid #AF2626; /* var(--color-brand-primary) */
color: #444444; /* var(--color-text-dark) */
font-size: 1.3rem; /* var(--fontsize-secondary) */
}