Back to Top
Start learning
Start learning

Branding Identity

These are the visual elements and stories that distinguish our brand. With a set

brand identity, we can avoid getting lost amongst thousands of apps and

forgotten in consumers’ minds.

The logo

The visual aspect of our brand – including our name, logo, and symbols – is a crucial part of how customers and partners can find and trust our product.

Ling Logo 1

Landscape lockup

Placing Ling next to its logotype is essential when collaborating with outside companies who might need to become more familiar with our brand. Include this lockup in press releases, conferences, and other outreach materials.

Ling Logo Clear Space 2

Clear space

The bottom of Ling’s face should align with the bottom of the letters “L”, “i”, and “n.”

The side of his head should align with the height of the letter “L.”

Please don’t place any objects, such as graphics or text, in the clear space shown.

Logo Dont 3

Please don’ts

The bottom of Ling’s face should align with the bottom of the letters “L”, “i”, and “n.”

The side of his head should align with the height of the letter “L.”

Please don’t place any objects, such as graphics or text, in the clear space shown.

Portrait Lockup 4

Portrait lockup

This stacked, vertical version of the logo can be
used in third-party applications. The large size
and more prominent placement help the logo
stand out.
Use this version when supplying logos to third
parties or when you need to place the logo in a
square or tight space.

Portrait Clear Space 5

Clear space

In order for our logotype to stand out, please don’t place any objects, such as graphics or text, in the clear space shown.

Ling Logo Dark Bg Silhouette Scaled 6

Logo Silhouette

A simple and recognizable outline that captures the essence of the character in a bold, minimal form.

Ling Logo White Bg Silhouette Scaled 7

All show have this version that supports a white background. This version can be used for craft applications such as stamps or printing. However, for digital art, we recommend using the rounded version.

Ling Logo Rounded Scaled 8

Logo Rounded

This version of our logo features a rounded shape with a white background enclosing the logo mark inside. It is specifically designed to ensure the logo stands out clearly when placed on various colored or complex photographic backgrounds.

The Icon

Ling Icon Defualt 9

App icon

The visual aspect of our brand – including our
name, logo, and symbols – is a crucial part of how
customers and partners can find and trust our
product.

Thai Dynamic Flag 10

Dynamic

When you want to use the icon for a specific

language, you can use this version.

Ling Campaign Icon 11

Campaign

For special campaigns or festivals, it is sometimes
necessary to change the background color of the
app icon to reflect the mood or theme of the
event. However, it is important to keep Ling
positioned at the center within the designated
safe area to maintain brand consistency and
recognition.

Typography

Poppinsaa 12

Poppins

Our primary display font is Poppins, a modern and geometric sans-serif typeface that brings clarity and emphasis to key informatio

Bold

Large Key Numbers
Used to highlight important user-centric data, such as “2-day streak” or similar metrics. The bold style draws attention and improves readability.

Large Headlines
Ideal when typography is the main visual focus. Use for titles with up to 4 words. Best suited for hero sections or pages where text is central.

Medium Headlines
Can be used in standalone views such as paywalls or text-based screens like articles. This style is used sparingly in the overall product to avoid visual clutter.

Small Headlines
Similar to medium headlines but used in more compact layouts. Also limited to specific views and used with discretion.

Notosans Aa 13

Noto Sans

Body font uses Noto Sans, as described in the typography primitives above. Other scripts should use the fonts specified in the Figma Typography file (also linked below).

Regular

Used for short or longer body text, from short sentences to paragraphs.
The medium size is used for secondary action, support copy, and in smaller components in which Body large would not be the best fit.

SemiBold

Emphasis on words where the “Body large” style is applied.

Bold

Emphasis on words where the “Target large” style is applied.

Typo Dont 14
Typo Dos 15

Color

Our brand colors are what distinguish us from other companies. Here’s how each of our brand colors should be used: Orange: Core color of our brand Midnight and dark grey: Commonly used for typography White: Most commonly used as a background color

Orange
#FF9900
Neutrals Dark
#FF9900
Midnight
#FF9900
White
#FFFFFF

Illustration Color

The illustration uses a carefully curated color palette to reflect the mood, tone, and personality of the characters. Each color is chosen with intention.

Warm tones suggest friendliness and energy, while cooler tones bring a sense of calm and balance. The palette is designed to ensure visual harmony and consistency across the entire artwork. Shadows and highlights are subtly applied to add depth without overpowering the overall composition. The use of color also supports storytelling, helping to guide the viewer’s eye and emphasize key elements in each scene.

Cyan-Blue
#0A0D10
#141B1F
#1F282E
#29353D
#3D505C
#526B7A
#5C788A
#668599
#7692A3
#859EAD
#A3B6C2
#C2CED6
#E0E7EB
#F0F3F5
#F9FAFB
Bluish Cyan
#001F33
#002F4C
#003F66
#005E99
#006EB2
#007ECC
#008EE6
#009DFF
#1AA9FF
#33B2FF
#66C3FF
#99D8FF
#CCEBFF
#E6F5FF
#F5FBFF
Brand
#331F00
#4C2E00
#663D00
#995C00
#B26B00
#CC7A00
#E58A00
#FF9900
#FFA31A
#FFAD33
#FFC266
#FFD699
#FFEBCC
#FFF5E5
#FFFBF5
Green
#082B15
#0B411F
#0F572A
#17823E
#1A9848
#1EAE53
#22C45D
#26D968
#3BDD77
#51E186
#7DE8A4
#A8F0C3
#D4F7E1
#E9FBF0
#F6FDF9
Red
#2F0404
#460606
#5E0808
#8D0C0C
#A40E0E
#BC1010
#D31212
#EB1414
#ED2C2C
#EF4444
#F37272
#F7A1A1
#FBD0D0
#FDE8E8
#FEF3F3
Yellow
#2D2306
#43330A
#564310
#806519
#A17A11
#C2910A
#F2BC26
#FFCC00
#F7D44A
#FFD971
#FFE59F
#FFE7A6
#FFEDBD
#FFF4D9
#FFFAEC
Purple
#200D31
#301449
#401A62
#51217B
#612893
#8135C4
#8135C4
#913BDD
#AB57F5
#BA6BFF
#CC94FF
#DAB1FF
#E3C6FC
#ECD9FD
#F6ECFE
Orange Salmon
#27170E
#3A2314
#4E2E1B
#613A22
#744629
#995124
#AB6336
#C27444
#C88257
#CE9069
#D49E7C
#E1BAA2
#F2CDB6
#F3E3DA
#F9F1EC
Pastel Magenta
#301E28
#482C3C
#603B50
#784A64
#905978
#A8688C
#C076A0
#F094C8
#F29FCE
#F3A9D3
#F5B4D9
#F6BFDE
#F7CFE5
#FCEAF4
#FEF4FA
Orange Sherbet
#33281F
#66503D
#7F644D
#98775C
#B28B6B
#CB9F7A
#E5B38A
#FEC799
#FECDA3
#FED2AD
#FED8B8
#FEDDC2
#FFE3CC
#FFF4EB
#FFF9F5

Illustration and Shapes

Using consistent shapes is how people will recognize us, even at times when our logo isn’t visible.

Construction

Most of Ling’s illustrations are made from either a circle, rectangle, or square. You can then use Pathfinder to create any additional parts.

Shape Dos 16
Shape Dont 17

Simplicity

Each illustration should use between 10-20 shapes.

Icon Dos 18
Icon Dont 19
Illustration Do 20
Illustration Dont 21