Design
Understand the intricacies of our visual language and learn how to express the Argyle brand consistently and effectively
Logo
There is nothing that manifests the Argyle brand as much as our logo. The simple typographic shape is ubiquitous and indispensable to our communication. The current rendering of our wordmark was introduced in early 2013 and has completely custom letter shapes that are carefully organized into a taut and effective composition.
Logo shades
In most cases, we use the white logo against dark backgrounds. For light-themed materials we use the logo in Misty 80 (#313A49).
Logo usage
Thoughtful, careful, and consistent usage of our logo in communication ensures its recognition and establishes a cohesive and professional brand image. The following rules will help you maintain logo integrity and be effective with its application.
Clear space
Co-branding
Sub-branding
Invalid use
It is essential to provide sufficient clear space around the Argyle logo. The clear space ensures that the logo has enough breathing room and is not crowded or visually cluttered by other elements. Use the letter “e” from the logo to determine the appropriate amount of clear space.
Color
The careful selection and consistent use of colors play a vital role in defining our brand identity and creating a memorable visual experience. Harmonious and effective use of color can ignite an emotional connection and build a bond between the Argyle brand and our audience.
Argyle Misty
Misty
5
F7F8FA
Misty
10
EFF1F5
Misty
15
E6ECF0
Misty
20
DFE6EC
Misty
30
CFDAE2
Misty
40
A6B3C4
Misty
50
94A0B2
Misty
60
6A778A
Misty
70
4E5B6E
Misty
80
313A49
Argyle Misty serves as the primary ambiance color for most of the applications. The shades of Misty provide a rich and memorable environment for our assets so that the content we feature on it feels bright, sparkly, and intentional. Using Misty makes it easy to create assets that feel distinctly Argyle from the get-go.
Color palette
The complete Argyle color palette provides you with a wide selection of shades and hues for every occasion. Stick with Green 70 as your primary accent and functional color, while using the rest of the palette for nuanced and specialized design scenarios.
Color coding
Use these colors as the standard for defining hyperlinks, calls to action, hover + active states, and errors in your interfaces.
Hyperlink
CTA
Hover + Active
Error
Purple
5
F5F3F9
Purple
10
E8DEF9
Purple
15
DED7EB
Purple
20
DAC9FE
Purple
25
CEB7FE
Purple
30
C3A5FF
Purple
40
B083F0
Purple
50
9C63DD
Purple
60
7D40BC
Purple
70
5C2D92
Purple
80
44206F
Blue
5
F4F8FF
Blue
10
DBE9FF
Blue
15
CFE2FF
Blue
20
C2DAFF
Blue
25
B2CEFF
Blue
30
A2C3FF
Blue
40
8BAEF8
Blue
50
5F88E6
Blue
60
4C67D4
Blue
70
2D4CAB
Blue
80
1B387F
Cyan
5
F3FBFF
Cyan
10
DFF3FC
Cyan
15
CFEEFB
Cyan
20
BFE8FA
Cyan
25
AFDFF6
Cyan
30
9FD5F2
Cyan
40
75C2E5
Cyan
50
5EAEDD
Cyan
60
3295C8
Cyan
70
1F6D9F
Cyan
80
0E4E73
Green
5
F4FDF7
Green
10
DCFEEF
Green
15
D0FFE5
Green
20
C4FFDB
Green
25
A9F1C6
Green
30
8DEAB2
Green
40
63D095
Green
50
40AC74
Green
60
22905F
Green
70
176A48
Green
80
125737
Olive
5
FAFFE6
Olive
10
F1FBCB
Olive
15
E7F8B7
Olive
20
DDF5A3
Olive
25
CEEB8B
Olive
30
BFE073
Olive
40
A5CD4E
Olive
50
87B335
Olive
60
669515
Olive
70
4A7010
Olive
80
38520B
Yellow
5
FFF7E2
Yellow
10
FFF4CC
Yellow
15
FFEFB5
Yellow
20
FFEA9E
Yellow
25
FFDE8A
Yellow
30
FFD875
Yellow
40
FFCE4F
Yellow
50
FFB72C
Yellow
60
E09700
Yellow
70
846406
Yellow
80
846406
Orange
5
FFF5EB
Orange
10
FFEBDD
Orange
15
FFDEC2
Orange
20
FFD4A9
Orange
25
FFC38E
Orange
30
FFB574
Orange
40
FF9444
Orange
50
F26B1C
Orange
60
DA5000
Orange
80
B83E00
Orange
80
992E00
Red
5
FFF1F2
Red
10
FFE6E9
Red
15
FAD0D5
Red
20
FFB8C2
Red
25
FFA3B0
Red
30
FF8E9D
Red
40
FF5E74
Red
50
F03456
Red
60
D2123C
Red
70
A20E2B
Red
80
801022
Grayscale
Gray
4
F5F5F5
Gray
8
EBEBEB
Gray
10
E6E6E6
Gray
15
D9D9D9
Gray
20
CCCCCC
Gray
30
B3B3B3
Gray
40
999999
Gray
50
808080
Gray
60
666666
Gray
70
4E5B6E
Gray
80
333333
Gray
90
1A1A1A
Alpha
Black
4
0 @ 4%
Black
8
0 @ 8%
Black
12
0 @ 12%
Black
16
0 @ 16%
Black
20
0 @ 20%
Black
30
0 @ 30%
Black
40
0 @ 40%
Black
50
0 @ 50%
Black
60
0 @ 60%
Black
70
0 @ 70%
Black
80
0 @ 80%
Black
90
0 @ 90%
Black
000000
White
10
F @ 10%
White
20
F @ 20%
White
30
F @ 30%
White
40
f @ 40
White
50
f @ 50
White
60
f @ 60
White
70
f @ 70
White
80
f @ 80
White
90
f @ 88
White
FFFFFF
Gradients
Gradients add depth, dimension, and a touch of modernity to our design assets. Use them modestly as backdrops for important sections to draw attention and bring visual diversity to your composition.
Typography
Typography is a fundamental element of our design system. Consistent and thoughtful typography ensures clear and impactful communication and is key to establishing a distinct brand voice. We use Lineto Circular in product design and marketing. Its monospaced version Circular Mono is used for code snippets.
Circular “is a geometric sans serif marrying purity with warmth. Striking a balance between functionality and measured idiosyncrasy”.
Circular
Text styles
We have codified our text styles for headlines, body text, captions, and code snippets as a strong typographic foundation. This library of font sizes, line heights, and letter spacing is provided to maintain consistency and legibility across mediums.
Text styles usage
➀ ➁ ➂
Avoid using more than 3 text styles within a single asset, interface, or document. A limited number of styles will help establish visual clarity and hierarchy.
Headlines
Regular 72px; Line: 84px; Letter: -1%
The quick brown fox jumps over the lazy dog
Regular 56px; Line: 64px; Letter: -1%
The quick brown fox jumps over the lazy dog
Regular 48px; Line: 56px; Letter: -1%
The quick brown fox jumps over the lazy dog
Regular 36px, Line: 40px; Letter:-1%
The quick brown fox jumps over the lazy dog
Regular 28px; Line: 36px
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Regular 24px; Line: 32px
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Body and caption
Regular 18px; Line: 28px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with unparalleled finesse, evoking a sense of wonder and admiration in those fortunate
Regular 16px; Line: 24px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping
Regular 14px; Line: 20px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with unparalleled finesse,
Regular 12px; Line: 16px; Letter: 1%
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with unparalleled finesse, evoking a sense
Medium 11px; Line: 16px; Letter: 5%; Uppercase
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG, SWIFTLY NAVIGATING THE INTRICATE MAZE WITH AGILITY AND GRACE, DEMONSTRATING ITS REMARKABLE ACROBATIC PROWESS WHILE LEAVING BEHIND A TRAIL OF MYSTIFYING FOOTPRINTS, CAPTIVATING THE CURIOUS MINDS OF ONLOOKERS WHO STAND IN AWE OF ITS DEXTERITY AND AUDACITY, AS THE FOX
Code
Mono 18px; Line: 28px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with unparalleled finesse, evoking a
Mono 16px; Line: 24px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing
Mono 14px; Line: 20px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who
Mono 12px; Line: 16px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with
Punctuation
Always use curly quotes and apostrophes instead of straight quotes to elevate the visual style of your message. Compared to straight quotes, curly quotes are more legible on the page and match the other characters better.
Mac
Windows
‘
opening single quote
⌥ + ]
Alt 0145
’
closing single quote
⌥ + ⇧ + ]
Alt 0146
“
opening double quote
⌥ + [
Alt 0147
”
closing double quote
⌥ + ⇧ + [
Alt 0148
Use en dashes (–) to mark ranges and em dashes (—) to separate extra information or mark a break in a sentence.
Mac
Windows
–
en dash
⌥ + -
Alt 0150
—
em dash
⌥ + ⇧ + -
Alt 0151
Spacing
To maintain visual order, harmony, and coherence we adhere to the predefined system of spacing values that are multiples of 4.
Your can update your Figma nudge settings to have 4 (instead of 10) as your preferred big nudge in the app.
Graphics
The use of graphics makes our brand manifestation interesting and engaging while preventing it from looking dry and characterless. Combined with other brand elements such as the logo, colors, and typography, it plays a vital role in creating captivating and immersive experiences for our audience.
Illustration direction
The illustration direction in this style emphasizes smooth gradients, translucent layering, and soft, diffused lighting—elements that create a calm yet forward-thinking atmosphere. With subtle green, misty tones the visuals convey both technological sophistication and human connection. Ideal for user onboarding flows, profile verification steps, and trust-building moments, this style supports clarity while suggesting a high level of security, care, and design precision.
Iconography
In addition to the unique Argyle icon system we extensively use the Google Material Symbols with the following settings:
Weight: 200
Fill: Off
Grade: Normal
Avatars
Our avatars are one of the most unique features of the Argyle design language. While maintaining uniformity and stylistic coherency, they possess an inherent individuality that is instantly recognizable. The avatars play a significant role in fostering a sense of belonging, community, and inclusivity among our employees and stakeholders.
Download avatars
Application
Explore the practical implementation of our brand elements across various real-life contexts and touchpoints. Allow these examples to shape your future design choices.
