Main logotype: COCKSTOCK · Alternative logotype: ♥PIERCING (same dimensions as main logotype, used for branding purposes)
Clear Space
The clear space around the main logo is defined by a square with side d, where d = ½ the height of the letter “T” in the logotype.
Clear space unitd = ½ × height of “T” in COCKSTOCK logotype
Applies toAll sides — top, bottom, left, right. No other element may enter this zone.
Minimum Size
Digital
Minimum width ~ 74px
Print
Minimum 2cm wide. Readable at 60cm viewing distance.
74px — minimum digital size
CS Mark / Favicon
Condensed “CS” lettermark in brand orange (#E66419) on white. SVG — scales to any size. Used as favicon, app icon, and compact brand mark.
80 · 48 · 32 PX
Sub-Brand & Program Logos
CS AFTERCARE
CSFRIENDS
CS Aftercare: Aftercare department logo. Appears on all aftercare content/touchpoints. · CSFriends: KOL/KOC/models partner program logo.
Product Line Logos
TITANIUM F136
STAINLESS STEEL 316L
925 SILVER
Product line logos appear on material-specific content, Shopee listings, and product packaging. Each logo identifies the material tier in product photography and social media posts.
Logo Color Combinations
Approved logo-on-background pairings that maintain brand consistency:
White on Key
Key on Off White
Off Black on Off White
Key on Off Black
White on Off Black
NEVER: Off Black (#4D4A49) logo on Key Orange (#E66419) background — insufficient contrast, violates brand mood.
Logo Animation
Animated logo intro for TikTok/IG outro. 2s for social, 3s for long-form. Always the final frame.
Thời gian ổn định khoảng 2-3 tháng. Bắt đầu với các vị trí nền tảng như Lobe, sau đó mở rộng lên Helix và Conch khi lỗ xỏ đã lành.
MALLORY COMPACT · BOOK 400 · 14px — Body text, paragraphs, descriptions
Aftercare · Equipment · Consultation · Knowledge Base
MALLORY COMPACT · MEDIUM 500 · 11px UPPERCASE — Labels, navigation, UI elements
Titanium F136 ASTM — Piercing cho làn da nhạy cảm nhất
FF MORE PRO · LIGHT 300 · 18px — Editorial authority, medical/clinical headlines
Rule: Bigger font size = thinner weight. 42px uses Thin 100. 28px uses ExtraLight 200. 20px uses Light 300. Never use Bold/Black weights for display — those are reserved for thumbnails and graphic assets only.
Type Specimen
Vietnamese is the primary language. All brand typefaces must render full Vietnamese diacritics without fallback glyphs. Below is the canonical test set:
Àáâãăắằẵặấầẩẫậèéêẹẻẽếềểễệ
FRAUNCES SOFT · EXTRALIGHT 200 — Vietnamese vowels with diacritics (A, E group)
Ìíĩỉịòóôõơớờởỡợốồổỗộùúũưứừữửự
FRAUNCES SOFT · EXTRALIGHT 200 — Vietnamese vowels (I, O, U group)
Đ đ Ý ỳ ỷ ỹ ỵ
FRAUNCES SOFT · THIN 100 · 36px — Đ (D-bar) and Y with tonal marks
Xỏ khuyên chuyên nghiệp · Chăm sóc sau xỏ · Khuyên tai đẹp · Phối khuyên cá nhân hoá · Titanium F136 cho da nhạy cảm
MALLORY COMPACT · BOOK 400 · 14px — Body text with real COCKSTOCK vocabulary
Content Type Hierarchy
Every piece of content maps to one of these typographic roles. Context determines which font and weight to use — never mix roles within the same hierarchy level.
Pair by contrast. Fraunces (display) + Mallory (body) = strong hierarchy. The serif/sans contrast creates clear visual separation. Keep minimum 22% size difference between paired fonts.
Bigger = thinner. As font size increases, decrease weight. This maintains visual balance — a 42px Thin heading pairs naturally with 14px Book body. The eye reads size before weight.
Never use heavy weights for display. Thin 100 for hero, ExtraLight 200 for headlines, Light 300 for sub-heads. Bold/Black reserved for thumbnails and graphic assets only.
Never use Bold/Black display weights for titles. Fraunces Bold/Black is reserved for thumbnails and graphic assets only. In editorial typography, thin wins.
Correct Pairing
Xỏ Khuyên An Toàn
Kim xỏ Precision COATED từ Mỹ. Hấp tiệt trùng Statim 2000E. Khuyên Titanium F136 cho da nhạy cảm.
Kim xỏ Precision COATED từ Mỹ. Hấp tiệt trùng Statim 2000E. Khuyên Titanium F136 cho da nhạy cảm.
Fraunces Bold 24px + Fraunces Light 14px — same family, no contrast, heavy display weight
Body / Common TitlesMallory Compact Book & Medium (Frere-Jones Type). Primary workhorse typeface for all standard text.
Micro / ButtonsMallory MP Compact. Tight spacing for UI elements, navigation, small labels.
Display / StylisticFraunces. Soft Thin for display titles. 28pt Bold on TikTok thumbnails.
Display / Soft MoodFraunces Soft. Thin/ExtraLight/Light for titles (bigger = thinner). Skinny, soft, sensual demeanor. The Lover/Aesthete voice.
DisplayFraunces Soft — the only display typeface. Thin 100 (hero), ExtraLight 200 (headlines), Light 300 (sub-heads, editorial). Variable font available via Google Fonts for designer flexibility.
Legacy HeadingMallory Condensed Bold. Carried from V0.3 heading system.
Vietnamese SupportAll typefaces must fully support Vietnamese diacritics. Vietnamese is the primary language — test every font with the full diacritics specimen above before approving for brand use.
Display Font — Dual Mood System
COCKSTOCK is a fashion brand with dynamic typographic needs. Two display typefaces serve two archetype voices — choose based on campaign mood, platform context, or creative direction:
Thumbnail Typography: Mallory Medium ALL CAPS + Fraunces 28pt Bold. Priority tones: orange/yellow. TikTok thumbnails use subtle vignette + strategic title positioning to highlight cast.
Font Downloads
Brand-operational font files for team use. All fonts must support Vietnamese diacritics.
15 decorative SVG icons cho các use case nhỏ: info boxes, badges, UI accents, social media graphics, generative art. Tất cả viewBox 48×48, single-color fill.
Seasonal dynamic palette — the main color theme shifts quarterly following creative direction and trend listening. The neutral palette and key highlight colors (Orange, Champagne) remain constant year-round. Full seasonal palette of 35+ colors extracted from COCKSTOCK Figma Library.
Color philosophy: Hot orange evokes “mới” (new), joy, and excitement — the energy of a fresh piercing. Nude tones connect to the body language of piercing. Off White grounds backgrounds; Off Black anchors neutrals. The key color leads with optimism; the accent warms.
Color Pairing Method
Every COCKSTOCK collateral uses 2 color groups:
Background1 color — the dominant surface tone
Content2 colors — for text, accents, and foreground elements
Light Pairing
White/cream/light background + dark content colors
Dark Pairing
Deep/dark background + light or Key content colors
Persistent Neutral Palette
Off White
#F5F2EB
Cream
#E8E6E1
Sand
#E2DBD4
Stone
#CCC5BE
Beige Lt
#D8C495
Beige
#A89066
Off Blk Lt
#6F6863
Off Black
#4D4A49
Deep Blk
#000000
Pure Wht
#FFFFFF
Key Highlight Colors
Orange Deep
#E66419
Orange Bright
#FF7A1D
Neon Orange
#E2A879
Champagne
#CCAB6C
Champ. Lt
#D8C495
Seasonal Warm Tones
#E66419
#D4552E
#C75B3A
#B8692B
#D09A5C
#E8C17A
#F0D8A0
#C4884A
Seasonal Cool Tones
#5B8C7A
#4A7A6B
#6B9E8C
#8AB5A5
#3D6B5E
#7ABAAA
#2D5B50
#9BCABB
Accent Colors (from Figma Library)
Neon Pink
#F6A1CA
Plus 24+ additional accent colors across Neon Green, Neon Blue, Neon Yellow, Red (3 tints), Pink (3 tints), Green (3 tints), Teal (3 tints), Blue (3 tints), Purple (3 tints) in the Figma Library — these form the seasonal rotation palette.
Photography Styleguide PENDING
⏳ Photography Styleguide
Photography direction, mood references, and shooting guidelines. Detailed photography standards moved to Chapter H (Photography).
Video Styleguide PENDING
⏳ Video Styleguide
Video direction, editing style, and motion graphics guidelines. Detailed video formats moved to Chapter G (Short Video).
CS AFTERCARE 
CSFRIENDS 
TITANIUM F136 
STAINLESS STEEL 316L 
925 SILVER 
