Resurf
resurf.so · 2 days ago
SaveUnofficial A style guide made by SiteStyleGuide from firstdata.com’s public web pages. Not affiliated with or endorsed by Merchant Services. The real site is firstdata.com ↗
Unofficial style guide
Merchant Servicesstyle guide
Merchant Services’s website (firstdata.com) uses Univers Fiserv Light for its headings and body text. Its palette is led by Orange Red (#FF6600), Forest Green (#228800) and Light Steel Blue (#2E8BC9), with #212529 text on #FFFFFF. Captured from the live site on 25 October 2026.
- Website
- firstdata.com
- Typefaces
- Univers Fiserv Light, Univers Fiserv Regular, Univers Fiserv Bold
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 25 Oct 2026 · added by @sitestyleguide
https://merchants.fiserv.com/en-us/
Screenshot
firstdata.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Merchant Services | Payment Processing Enterprise Solutions | Fiserv
- ▲ 68 / 60 characters
- Meta description
- As the leader in small business merchant services and enterprise solutions for payments, Fiserv creates new experiences to take your business to the next level.
- ● 160 / 160 characters
- Language
- en-US
In search results
Merchant Serviceshttps://merchants.fiserv.com/en-us/
Merchant Services | Payment Processing Enterprise Solutions |…
As the leader in small business merchant services and enterprise solutions for payments, Fiserv creates new experiences to take your business to the next level.
When shared
firstdata.com
Merchant Services | Payment Processing Enterprise Solutions | Fiserv
As the leader in small business merchant services and enterprise solutions for payments, Fiserv creates new e…
Logo & favicons
Found as: image in the header. SVG, 197 × 63.
Logo
On white
On black
On Orange Red
Favicons
1 found-
Merchant Services | Payment Processing Enterprise Solutions | Fiserv
Light browser tab
Merchant Services | Payment Processing Enterprise Solutions | Fiserv
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#212529) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 44.2%
- Light Charcoal 13.7%
- Orange Red 11.2%
- Black 8.2%
- Deep Charcoal 4.2%
- Forest Green 2.7%
- Light Steel Blue 2.7%
- Deep Steel Blue 2.7%
- Steel Blue 1.9%
- Cornflower Blue 1.5%
- Gold 1.3%
- Dark Slate Blue 1.3%
- Dark Green 1.2%
- Crimson 1.2%
- Medium Sea Green 1.1%
- Dark Orange 1.1%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 15.43:1 AAA
- On white
- —
Text, background, border · .cmp-section-accordians-container.cmp-section-accordians-container--blue-bg .cmp, .cmp-section-accordians-container.cmp-section-accordians-container--dark-bg .cmp
-
Light Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 80
- On text
- 1.22:1 Fail
- On white
- 12.63:1 AAA
Text, background, border · .cmp-section-container__informative-thought-leadership.cmp-section-container__in, .cmp-section-container__inner .cmp-section-container__content .cmp-section-conta
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.36:1 Fail
- On white
- 21.00:1 AAA
Text, background, border · .cmp-solution-offering-grid-container--style1 .cmp-solution-grid-box.cmp-solutio, .clover-header-component .clover_footer h5
-
Deep Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 84
- On text
- 1.06:1 Fail
- On white
- 14.55:1 AAA
Text, background, border · .cmp-section-accordians-container .cmp-section-accordion.cmp-section-accordion ., .cmp-section-accordians-container.cmp-section-accordians-container--grey-bg .con
Colours
Brand colours and accents, most used first-
Orange Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 60 100 0
- On text
- 5.25:1 AA
- On white
- 2.94:1 Fail
Text, background, border · .cmp-section-accordians-container .cmp-section-accordion__item .cmp-section-acco, .cmp-subscribe__main .modal-body form.cmp-subscribeForm button
-
Forest Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 75 0 100 47
- On text
- 3.37:1 AA large
- On white
- 4.58:1 AA
Background, text, border · .clover .cmp-carat-contact-us__sticky app-button .cmp-form-module .btn--bg-orang, .clover-header-component.new_nav--bar .button--variant-primary--3itEX
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 77 31 0 21
- On text
- 4.15:1 AA large
- On white
- 3.72:1 AA large
Background, text, border · .carat-multi-tile-gradient__items .aem-Grid .aem-GridColumn .carat-multi-tile-gr, .cmp-section-accordians-container .cmp-section-accordion.cmp-section-accordion .
-
Deep Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 81 33 0 28
- On text
- 3.41:1 AA large
- On white
- 4.52:1 AA
Text, border, background · .cmp-carat-contact-us__bluebtn .cmp-carat-contact-us__form .form-wrapper:not(.fo, .cmp-carat-contact-us__bluebtn .cmp-carat-contact-us__sticky .cmp-carat-contact-
-
Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 52 0 0
- On text
- 3.88:1 AA large
- On white
- 3.98:1 AA large
Background, text, border · .btn-primary, .btn-primary.disabled
-
Cornflower Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 50 25 0 20
- On text
- 5.14:1 AA
- On white
- 3.00:1 AA large
Text, border · .cmp-carat-contact-us__bluebtn .cmp-carat-contact-us__sticky .cmp-carat-contact-, .cmp-section-container--custom.fullwidth-bgColor.darkShade .cmp-section-containe
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 24 97 0
- On text
- 9.46:1 AAA
- On white
- 1.63:1 Fail
Background, border, text · .btn-warning, .btn-warning.disabled
-
Dark Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 95 35 0 62
- On text
- 1.41:1 Fail
- On white
- 10.96:1 AAA
Text, border, background · .cardpointe .search-result__header #search-result-form button, .callout-component .cards .card--title
-
Dark Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 100 73
- On text
- 1.34:1 Fail
- On white
- 11.50:1 AAA
Text, graphic, border · .product-slider-component .swiper-section .right-slider .content-box h4, .showcase-slider-component .swiper-card-title h2
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 76 69 14
- On text
- 3.41:1 AA large
- On white
- 4.53:1 AA
Background, text, border · .btn-danger, .btn-danger.disabled
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 76 0 59 35
- On text
- 4.92:1 AA
- On white
- 3.13:1 AA large
Background, text, border · .btn-success, .btn-success.disabled
-
Dark Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 52 100 0
- On text
- 5.94:1 AA
- On white
- 2.60:1 Fail
Background, text, border · .cmp-header__mobile .cmp-header_search-mobile .cmp-header_search-mobile-group .c, .cmp-herobanner .cmp-herobanner__content .cmp-herobanner__action-container .cmp-
Gradients
-
linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 65%)
-
linear-gradient(top, rgba(247, 247, 247, 0.95) 0%, rgba(255, 255, 255, 0) 65%)
-
linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
Univers Fiserv Light
Aa
300
Aa
700
Univers Fiserv Light
Self-hosted · weights 300, 400, 500, 600, 700 · headings, buttons, body · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Univers Fiserv Regular
Self-hosted · weights 400, 700 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
600
Univers Fiserv Bold
Self-hosted · weights 400, 600 · headings · shown in a stand-in if you don’t have it
Aa
300
Aa
500
Graphik
System font, or not loaded on this page · weights 300, 400, 500 · headings, buttons · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
2.5rem · 40 px / 1.3
weight 500
Merchant Services
Heading 2
2rem · 32 px / 1.3
weight 500
Merchant Services | Payment Processing Enterpri…
Heading 3
1.75rem · 28 px / 1.5
weight 500
Merchant Services | Payment Processing Enterpri…
Heading 4
1.5rem · 24 px / 1.5
weight 500
Merchant Services | Payment Processing Enterpri…
Heading 5
1.25rem · 20 px / 1.5
weight 500
Merchant Services | Payment Processing Enterpri…
Heading 6
1.125rem · 18 px / 1.7
weight 500
Merchant Services | Payment Processing Enterpri…
Body
100% / 1
weight 300 · Univers Fiserv Light
As the leader in small business merchant services and enterprise solutions for payments, Fiserv creates new experiences to take your busine…
Paragraph
100%
As the leader in small business merchant services and enterprise solutions for payments, Fiserv creates new experiences to take your busine…
Small
100%
weight 400
As the leader in small business merchant services and enterprise solutions for payments, Fiserv creates new experiences to take your busine…
Button
8rem · 128 px / normal
weight 300 · none · altform-light
Get started
Link
100%
weight 400 · Univers Fiserv Light
Read more about Merchant Services
Sizes in use
Most common across the site- 40pxline 1.2 · 45 rules
- 32pxline 1.2 · 41 rules
- 24pxline normal · 31 rules
- 20pxline 1.2 · 86 rules
- 18pxline normal · 78 rules
- 16pxline 1.5 · 169 rules
- 14pxline 1.5 · 130 rules
- 12pxline 20px · 44 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
.cmp-giftcard .cmp-giftcard__form-container .cmp-giftcard__form-action button · #FF6600
Link
Read our latest news today.
a · #007BFF
Corner radius
- 50% · 31×
- 0.25rem · 22×
- 8px · 18×
- 5px · 11×
- 100% · 9×
- 3px · 8×
Shadows
- 0 0 8px #fff
- 0 0 8px #333
- 0 0 0 0.2rem rgba(0, 123, 255, 0.25)
- 0 0 5px #f60
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
320
576
651
767
768
992
1024
1200
On a scale of 0 to 1440 px.
Content widths (max-width)
1440 px
1220 px
1140 px
1080 px
900 px
340 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 68 characters. Google usually cuts titles near 60, so the end may not show in results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Merchant Services use?
- Merchant Services’s website uses three typefaces: Univers Fiserv Light (headings and body text), self-hosted; Univers Fiserv Regular, self-hosted; Univers Fiserv Bold, self-hosted.
- What are Merchant Services’s brand colours?
- The main colours on firstdata.com are Orange Red (#FF6600), Forest Green (#228800), Light Steel Blue (#2E8BC9), Deep Steel Blue (#237CB8), Steel Blue (#007BFF) and Cornflower Blue (#6699CC).
- What colour is Merchant Services’s text and background?
- Body text is #212529 on a #FFFFFF background.
- Where is Merchant Services’s logo from?
- The logo shown in this guide was found on firstdata.com’s homepage. For official logo files and usage rules, check Merchant Services’s own brand or press page.
- Is this Merchant Services’s official style guide?
- No. SiteStyleGuide made it from firstdata.com’s public web pages on 25 October 2026, and isn’t affiliated with Merchant Services. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
firstdata-com-tokens.css
/* firstdata.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/firstdata.com) */
:root {
/* Colours */
--text: #212529;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-light-charcoal: #333333;
--colour-black: #000000;
--colour-deep-charcoal: #292929;
--colour-orange-red: #FF6600;
--colour-forest-green: #228800;
--colour-light-steel-blue: #2E8BC9;
--colour-deep-steel-blue: #237CB8;
--colour-steel-blue: #007BFF;
--colour-cornflower-blue: #6699CC;
--colour-gold: #FFC107;
--colour-dark-slate-blue: #054062;
--colour-dark-green: #004400;
--colour-crimson: #DC3545;
--colour-medium-sea-green: #28A745;
--colour-dark-orange: #FF7B00;
--gradient-1: linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 65%);
--gradient-2: linear-gradient(top, rgba(247, 247, 247, 0.95) 0%, rgba(255, 255, 255, 0) 65%);
--gradient-3: linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
/* Typefaces */
--font-headings: 'Univers Fiserv Light', 'opensans';
--font-buttons: 'Univers Fiserv Light', 'opensans';
--font-body: 'Univers Fiserv Light', 'opensans';
/* Type scale */
--text-h1: 2.5rem;
--leading-h1: 1.3;
--text-h2: 2rem;
--leading-h2: 1.3;
--text-h3: 1.75rem;
--leading-h3: 1.5;
--text-h4: 1.5rem;
--leading-h4: 1.5;
--text-h5: 1.25rem;
--leading-h5: 1.5;
--text-h6: 1.125rem;
--leading-h6: 1.7;
--text-body: 100%;
--leading-body: 1;
--text-p: 100%;
--text-small: 100%;
--text-button: 8rem;
--leading-button: normal;
--text-a: 100%;
/* Shape */
--radius-1: 50%;
--radius-2: 0.25rem;
--radius-3: 8px;
--radius-4: 5px;
--radius-5: 100%;
--radius-6: 3px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 320px;
--breakpoint-2: 576px;
--breakpoint-3: 651px;
--breakpoint-4: 767px;
--breakpoint-5: 768px;
--breakpoint-6: 992px;
--breakpoint-7: 1024px;
--breakpoint-8: 1200px;
--max-width-1: 1440px;
--max-width-2: 1220px;
--max-width-3: 1140px;
--max-width-4: 1080px;
--max-width-5: 900px;
--max-width-6: 340px;
}
{
"site": "firstdata.com",
"source": "https://sitestyleguide.com/firstdata.com",
"text": "#212529",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Light Charcoal",
"hex": "#333333",
"rgb": [
51,
51,
51
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Deep Charcoal",
"hex": "#292929",
"rgb": [
41,
41,
41
]
},
{
"name": "Orange Red",
"hex": "#FF6600",
"rgb": [
255,
102,
0
]
},
{
"name": "Forest Green",
"hex": "#228800",
"rgb": [
34,
136,
0
]
},
{
"name": "Light Steel Blue",
"hex": "#2E8BC9",
"rgb": [
46,
139,
201
]
},
{
"name": "Deep Steel Blue",
"hex": "#237CB8",
"rgb": [
35,
124,
184
]
},
{
"name": "Steel Blue",
"hex": "#007BFF",
"rgb": [
0,
123,
255
]
},
{
"name": "Cornflower Blue",
"hex": "#6699CC",
"rgb": [
102,
153,
204
]
},
{
"name": "Gold",
"hex": "#FFC107",
"rgb": [
255,
193,
7
]
},
{
"name": "Dark Slate Blue",
"hex": "#054062",
"rgb": [
5,
64,
98
]
},
{
"name": "Dark Green",
"hex": "#004400",
"rgb": [
0,
68,
0
]
},
{
"name": "Crimson",
"hex": "#DC3545",
"rgb": [
220,
53,
69
]
},
{
"name": "Medium Sea Green",
"hex": "#28A745",
"rgb": [
40,
167,
69
]
},
{
"name": "Dark Orange",
"hex": "#FF7B00",
"rgb": [
255,
123,
0
]
}
],
"fonts": [
{
"name": "Univers Fiserv Light",
"stack": "\"Univers Fiserv Light\", opensans",
"weights": [
300,
400,
500,
600,
700
],
"source": "Self-hosted"
},
{
"name": "Univers Fiserv Regular",
"stack": "\"Univers Fiserv Regular\", opensans",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "Univers Fiserv Bold",
"stack": "\"Univers Fiserv Bold\", opensans",
"weights": [
400,
600
],
"source": "Self-hosted"
},
{
"name": "Graphik",
"stack": "\"graphik\", sans-serif",
"weights": [
300,
400,
500
],
"source": "System font, or not loaded on this page"
},
{
"name": "RedHatText",
"stack": "\"RedHatText\", opensans",
"weights": [
100,
400,
600
],
"source": "Self-hosted"
},
{
"name": "RedHatDisplay",
"stack": "\"RedHatDisplay\", opensans",
"weights": [
400,
600
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run firstdata.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/firstdata.com" title="Merchant Services style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Merchant Services’s
ICICI Bank
icicibank.com · 4 days ago
Save
orange.fr
orange.fr · 5 days ago
Save
SoundCloud
soundcloud.com · 1 day ago
Save
Captured from firstdata.com on 25 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Merchant Services; this guide describes the public website for reference.