Visual Identity
Logo V2.1
Main Logo
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.
Minimum Size
Minimum width ~ 74px
Minimum 2cm wide. Readable at 60cm viewing distance.
CS Mark / Favicon
Condensed “CS” lettermark in brand orange (#ec771b) on white. SVG — scales to any size. Used as favicon, app icon, and compact brand mark.
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:
Logo Animation
Animated logo intro for TikTok/IG outro. 2s for social, 3s for long-form. Always the final frame.
Logo Placement
Logo position on layouts follows a 9-zone grid. Each zone creates a different visual mood. Choose placement based on content type and hierarchy.
| Zone | Position | Best For |
|---|---|---|
| 1, 3 | Top corners | Social media posts, IG stories, video watermarks. Most common COCKSTOCK placement. |
| 2 | Top center | Formal documents, certificates, letterheads. Symmetrical authority. |
| 4, 6 | Mid sides | Vertical banners, standees, packaging side panels. |
| 5 | Center | Logo-only layouts, splash screens, loading states, embossed/foil applications. |
| 7, 9 | Bottom corners | Video outros, editorial photos (photo credit position), TikTok end frames. |
| 8 | Bottom center | Print collateral footers, packaging bottoms, business cards. |
Logo Misuse
Typography System V2.3
COCKSTOCK’s type system is an eight-role hierarchy exposed as design tokens. The specimen below is the authoritative reference — scroll down for the live-rendered sample of each role. All roles follow one golden rule: bigger font size = thinner weight. Bold and Black weights are reserved for thumbnails and graphic assets only, never for display typography.
Type Specimen
Vietnamese is the primary language. All brand typefaces must render full Vietnamese diacritics without fallback glyphs. Below is the canonical test set:
Content Type Hierarchy
Eight typographic roles. Every piece of content maps to exactly one role. Each sample below is rendered live from its design token — what you see is what the token exposes. Update a token in tokens.css and this entire page updates.
—type-{role}-* namespace in src/styles/tokens.css. To apply a role anywhere in CSS: font: var(—type-body-weight) var(—type-body-size)/var(—type-body-leading) var(—type-body-family); color: var(—type-body-color);. Update once, propagate everywhere.Font Pairing — Do & Don’t
Two rules govern all COCKSTOCK font pairing:
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:
Use for: chapter hero titles, campaign landings
Use for: section headers, pull quotes (italic)
Alternative — Display Thin 24–48px OPT-IN
An optional Thin (wt 100) display style for titles where Headline 28–36px feels too heavy and Super Display 42–52px feels too loud. Sits between the two ranges — fluid 24–48px by default, with discrete sizes available. Not applied globally — opt in by adding class=“display-thin-alt” (or display-thin-alt size-32 for a fixed step) to any heading or div.
<h2 class=“display-thin-alt”>Title</h2> — fluid 24–48px (clamps to viewport).
<h2 class=“display-thin-alt size-32”>Title</h2> — locked at 32px.
Available step sizes: size-24, size-32, size-40, size-48.
Use when: editorial sub-titles, callout headers, photo captions in hero blocks. Pair with Mallory Medium 14px for body.
Font Downloads
Brand-operational font files for team use. All fonts must support Vietnamese diacritics.
Variable font hỗ trợ tuỳ biến weight (100-900), optical sizing, SOFT axis. Dùng font-variation-settings: “SOFT” 50, “WONK” 0 để có Fraunces Soft.
Decorative Icons — Small Use
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.
Color System LOCKED
Seasonal dynamic palette — the main color theme shifts quarterly following creative direction and trend listening. The neutral palette and key highlight colors (Orange, Clay, Butter) 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:
Persistent Neutral Palette
Each swatch below is rendered live from its primitive token in tokens.css. Change a primitive and every swatch on this page updates. The hex underneath is pulled from the same token — what you see is what the token exposes.
Key Highlight Colors
Brand + accent. Same live-token rule as above — swatches read directly from primitives. V2.3: removed Orange Bright, Neon Orange, Champagne. Added Butter. Renamed Beige Lt → Clay.
Seasonal Warm Tones
Seasonal Cool Tones
Accent Colors (from Figma Library)
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.