How to use the yop/design identity across websites, apps, dashboards, print and social media. One page for the team, partners and anyone who writes, designs or builds for us.
yop/design builds websites, web & mobile apps and business dashboards — and keeps them running.
Tagline
From website to dashboard — one team.
Descriptor line: Web · Apps · Dashboard
Boilerplate
PT Yopdesign Creative Indonesia (yop/design) helps businesses grow online. Starting as a web creative agency, we now design and build websites, web applications, Android apps and company dashboards, with SEO, hosting and maintenance under one roof. Learn more at yopdesign.com.
Voice — four traits
Clear
Plain words, no jargon. Explain tech by what it does for the client.
Practical
Talk about outcomes: faster sites, fewer manual reports.
Friendly
Warm and polite, like a helpful partner — never stiff.
Confident
Short sentences, active verbs, no over-promising.
We say
"Your sales team will see today's orders in one dashboard."
"We'll keep your site updated and secure every month."
We don't say
"We leverage cutting-edge synergistic solutions."
"The best agency in Indonesia, guaranteed #1."
Write the name as yop/design in visuals and Yopdesign in running text.
02
Logo
One wordmark. One slash.
yopdesignPrimary logo — use it whenever space allows
Anatomy of the slash
pd
Angle
22° from vertical
Width
0.12 × font size
Height
0.80 × font size
Spacing p / d
0.19 / 0.07 × font size
Lockups
yopdesignHorizontal
yopdesignWeb · Apps · Dashboard
With descriptor
yyopdesign
Stacked
yMonogram y/ — app icon, favicon
03
Clear space & minimum size
Give the logo room to breathe.
xxxxyopdesign
x = the height of the letter "o" in the wordmark. Keep at least 1x empty on every side. No text, edges, photos or other logos may enter this area. For the monogram, use 0.25 × the icon width.
WordmarkPrint 25 mm · Screen 96 px wide
With descriptorPrint 40 mm · Screen 160 px wide
Monogram / faviconPrint 6 mm · Screen 16 px (slash only below 24 px)
04
Backgrounds & misuse
Where it may sit — and what never to do.
Approved backgrounds
yopdesign
yopdesign
yopdesign
yopdesign
Don't
yopdesign
Stretch or squash
yopdesign
Use off-palette colors
yopdesign
Flip the slash angle
yop/design
Type a "/" character instead
yopdesign
Change the typeface
yopdesign
Add shadows or effects
yopdesign
Place on low contrast
yopdesign
Rotate the logo
05
Color palette
Ink and paper first. Blue for the slash.
Primary — click a code to copy it
Yop Blue
RGB 26 155 224CMYK 88 31 0 12
Ink
RGB 10 15 26CMYK 62 42 0 90
Paper
RGB 244 245 247CMYK 1 1 0 3
Secondary — sub-brand accents
Mint · yop/apps
RGB 18 184 134 · CMYK 90 0 27 28
Signal · yop/dashboard
RGB 255 106 61 · CMYK 0 58 76 0
Violet · yop/care
RGB 139 124 246 · CMYK 44 50 0 4
Proportion
White & Paper 60%Ink 25%Blue 10%
Blue scale — UI, charts and dashboards
50#E8F5FC
100#CDEAF8
300#6CC0EC
500 · Yop Blue#1A9BE0
700#0B6FA8
900#073E5E
Ink scale — text, borders, surfaces
50 · Paper#F4F5F7
100#E4E7EC
300#A6B0C0
500#4A5566
700#2A3242
900 · Ink#0A0F1A
Text contrast (WCAG 2.2)
Ink on White
19.2 : 1 · AAA — all text
White on Blue 700
5.4 : 1 · AA — buttons, links
Ink on Yop Blue
6.5 : 1 · AA — highlights
Ink 500 on White
7.5 : 1 · AAA — secondary text
Ink on Accents
5.8–7.5 : 1 · AA — Mint, Signal, Violet
White on Yop Blue
2.9 : 1 · Fails — logo slash and decoration only, never text
CMYK values are conversion starting points — confirm with a printed proof before production.
Body & interfaceAaInterRegular 400 · Medium 500 · SemiBold 600 Fallback: system-ui, Arial, sans-serif
Type scale (web, px)
Display 64/68
Build it once
H1 44/50
Our services
H2 32/38
Company dashboards
H3 24/30
Real-time sales overview
Body L 18/28
We design, build and maintain your digital products.
Body 16/24
Default text for websites, proposals and apps.
Small 14/20
Table cells, helper text, captions
Label 12/16
SECTION LABEL · UPPERCASE
Print: body 10–11 pt, headings 18–32 pt. Headings use tight tracking (−2 to −4%); body text uses default tracking. Left-align text; avoid justified paragraphs.
On Ink, dark photos or dark mode, the Ink app tile disappears. Use a Paper tile: the y turns Ink and the slash keeps its colour. Inside dark app UI, an Ink tile with a thin light edge or a lifted Ink 800 tile also works.