Cocokind

sideways lowercase on spa-water pastels

cocokind gives each product family one flat, opaque body colour (Electrolyte Aqua #7fcdd8, Ceramide Peach #f4c2a1, AHA Navy, Advanced Black, Beginner Stone, SPF Butter) and prints everything in a single ink on top. A bold lowercase slab-serif wordmark runs vertically up the right edge, while the product name sits low on the left in a bold grotesque, followed by an English benefit line and its French translation and bilingual net contents at the base. A small thin-line icon (water drops, waves, a molecule, a percentage roundel) above the name is the only drawing on the pack. Caps are white or tone-matched and there are no paper labels.

https://cocokind.com Explore the brand

Skincare
Light pack
Clinical minimal
Colour-coded range
Pastel soft-touch

Color Palette

Approximate colours interpreted from photography. These are screen references, not official brand colours or print specifications.

Pack body

Cap White
#f6f2ee
Tall white caps on tubes, dropper collars and the mist pump

Ink

Contrast Ink
#1d1d1d
Wordmark, name, copy and icon on all light bodies
Reverse White
#ffffff
Same type and icon reversed out on the navy and black packs

Range coding

Electrolyte Aqua
#7fcdd8
Body colour of the electrolyte serum, water cream tube, magnesium mist and water-cream can
Ceramide Peach
#f4c2a1
Body colour of the ceramide body oil stick, lip balm jar and soft-glow illuminator
AHA Navy
#1f4e70
Body colour of the KP smoothing stick, printed in white
Advanced Black
#2b2a29
Tube colour for the stronger retinol gel, printed in white
Beginner Stone
#d3cfc8
Tube colour for the gentler retinol gel, the light pair to the black tube
SPF Butter
#f7c64c
Body colour of the daily SPF tube

Typography

Suggested visual alternatives, not confirmed brand typefaces. Any scale below is an illustrative estimate.

The vertical wordmark on the right is the largest element. The product name is the second read, set bold and flush left at about two-thirds down, then a short English benefit line, its French equivalent, and the bilingual net contents centred at the base. Strength tags sit in a tiny outlined pill above the name.

Type scale

Estimated cap size as a share of the panel · Front of the 30 ml retinol gel squeeze tube, about 110 mm tall excluding cap

vertical-wordmark
8% · Bold · Display
tidekind
product-name
4.5% · Bold · Headline
retinol gel
percentage
2.6% · Bold · Label
0.5%
strength-tag
1.8% · Bold · Label
ADVANCED
benefit-en
1.8% · Regular · Body
with aloe and cica
benefit-fr
1.8% · Regular · Body
avec aloès et cica

Fonts

Display
Zilla Slab
Looks like
Clarendon Bold, Courier Prime Bold
Type
Bold slab serif with typewriter character
Weight
Bold
Case
Lowercase
Tracking
Normal
Fallback
Rockwell Bold, Courier New Bold
The wordmark only, rotated 90 degrees to read bottom to top along the right edge.
Headline
Inter
Looks like
Helvetica Neue Bold, Söhne Halbfett
Type
Neo-grotesk sans
Weight
SemiBold, Bold
Case
Lowercase or title case
Tracking
Normal, tight leading
Fallback
Helvetica Neue, Arial
Two-line product name flush left in the lower half.
Body
Inter
Looks like
Helvetica Neue Regular
Type
Neo-grotesk sans, small sizes
Weight
Regular
Case
Sentence case
Tracking
Normal
Fallback
Helvetica, Arial
English benefit line, French translation and the bilingual net contents.
Label
Inter Tight
Looks like
Helvetica Neue Condensed Bold
Type
Compact grotesk for tags
Weight
Bold
Case
Uppercase
Tracking
Open, about +6%
Fallback
Arial Narrow Bold
Strength pills ('ADVANCED', 'BEGINNER'), percentages and format lines such as 'FACIAL MIST'.

Structure & Proportions

Proportions

Purpose	Value	Preview
Wordmark length	About 40% of pack height, running up the right edge
Wordmark position	Starts about 20% from the base, hugging the right margin	—
Text column width	About 60% of pack width, flush left
Text column start	Product name begins about 60% down the front
Side margin	About 8% of pack width on the left
Colours per pack	Two: body colour plus one ink, cap white or matched	—
Density	Empty upper half, compact text block in the lower left	—

Shapes

Element	Value	Preview
Tube	Straight squeeze tube with a tall cylindrical white cap
Stick	Oval-section twist-up stick with a flush lid
Strength tag	Tiny outlined pill
Percentage badge	Small overlapping circles around the strength figure
Wave icon	Three stacked thin wave lines on the AHA stick

Finishes

Matte opaque plastic
Tubes, sticks and airless bottles · matte
Soft satin coating
Stick bodies and illuminator · soft-touch
Coated glass
Dropper serum bottle · matte

Formats and materials


Formats	Twist-up stick, Squeeze tube, Dropper bottle, Spray bottle, Jar, Can, Airless bottle
Materials	Plastic, Glass, Aluminium
Closures	Tall white caps on tubes and serums, white mist pump with clear overcap, colour-matched lids on sticks and the illuminator
Decoration	Single-colour direct print, Thin-line icon, Bilingual text block

Front Panel

Schematic reading order. The diagram’s zone heights do not represent measured artwork proportions.

Direct print in one ink on a flat-coloured body: vertical wordmark up the right edge, a left-aligned text column in the lower half.

Zone	Content
Right edge	Vertical lowercase wordmark
Left, mid	Thin-line icon and optional strength tag
Left, lower	Product name, English benefit line, French benefit line
Base	Bilingual net contents

Range System

Each product or family owns one body colour, while the layout, single ink and type stay identical; strength levels are paired as dark vs light versions of the same tube.

Electrolyte line = aqua bodies with water-drop icons
Ceramide line = peach bodies with a molecule icon
Retinol gels = black tube (advanced) vs stone tube (beginner)
KP stick = navy with a wave icon
Daily SPF = butter yellow

Back of Pack & Shelf

The reverse keeps the same body colour and single ink: a short how-to in English and French, the full INCI list, and a small block of legal marks along the base, all flush left like the front.

Directions in English with French translation
Full INCI ingredient list
Caution line for actives such as retinol or AHA
Barcode printed on the body colour
Period-after-opening symbol, recycling marks and distributor address

On shelf

On shelf the packs read as blocks of flat aqua, peach and navy with the same sideways wordmark repeating down the right edge of every unit, which billboards the brand even when only the edge is visible.

Imagery

No photography or illustration beyond tiny single-weight line icons (drops, waves, molecule hexagons, strength roundels) placed just above the product name.

Guidelines

Do

Give each product family one flat opaque body colour such as Electrolyte Aqua (#7fcdd8) and print in one ink only.
Rotate the bold lowercase slab-serif Display wordmark up the right-hand edge at about 40% of pack height.
Set the product name in the bold Headline grotesk, flush left, starting about 60% down the front.
Print the benefit line in English and French at the same Body size.
Use a single thin-line icon above the name to hint at the active ingredient.
Pair strength variants as dark and light versions of the same pack, e.g. #2b2a29 vs #d3cfc8.

Don't

Don't use gradients, patterns or photographic imagery on the body.
Don't set the product name in the wordmark's slab serif.
Don't centre the text column; it is always flush left.
Don't add paper labels or foil.
Don't use more than one colour of ink on a pack.
Don't run the wordmark horizontally on the front face.

Give your AI
packaging taste

Give your design or image tool a packaging study: palette, type, structure, front panel and principles for an original brief.

Export this style

Free with an email. PACK.md works in Claude, ChatGPT, Cursor and image tools.

More like this

# Cocokind — Pack Style > sideways lowercase on spa-water pastels **Category:** Beauty · **Tier:** Mass · **Origin:** US · **Theme:** light **Source:** https://cocokind.com Colours are estimated from product photography (screen values, not print specifications). Proportions and type scales are visual estimates, not measured manufacturing dimensions. Typefaces are lookalikes, not identified fonts. cocokind gives each product family one flat, opaque body colour (Electrolyte Aqua #7fcdd8, Ceramide Peach #f4c2a1, AHA Navy, Advanced Black, Beginner Stone, SPF Butter) and prints everything in a single ink on top. A bold lowercase slab-serif wordmark runs vertically up the right edge, while the product name sits low on the left in a bold grotesque, followed by an English benefit line and its French translation and bilingual net contents at the base. A small thin-line icon (water drops, waves, a molecule, a percentage roundel) above the name is the only drawing on the pack. Caps are white or tone-matched and there are no paper labels. ## Tokens — Colors | Name | Value | Token | Group | Role | | --- | --- | --- | --- | --- | | Cap White | `#f6f2ee` | `--color-cap-white` | Pack body | Tall white caps on tubes, dropper collars and the mist pump | | Contrast Ink | `#1d1d1d` | `--color-contrast-ink` | Ink | Wordmark, name, copy and icon on all light bodies | | Reverse White | `#ffffff` | `--color-reverse-white` | Ink | Same type and icon reversed out on the navy and black packs | | Electrolyte Aqua | `#7fcdd8` | `--color-electrolyte-aqua` | Range coding | Body colour of the electrolyte serum, water cream tube, magnesium mist and water-cream can | | Ceramide Peach | `#f4c2a1` | `--color-ceramide-peach` | Range coding | Body colour of the ceramide body oil stick, lip balm jar and soft-glow illuminator | | AHA Navy | `#1f4e70` | `--color-aha-navy` | Range coding | Body colour of the KP smoothing stick, printed in white | | Advanced Black | `#2b2a29` | `--color-advanced-black` | Range coding | Tube colour for the stronger retinol gel, printed in white | | Beginner Stone | `#d3cfc8` | `--color-beginner-stone` | Range coding | Tube colour for the gentler retinol gel, the light pair to the black tube | | SPF Butter | `#f7c64c` | `--color-spf-butter` | Range coding | Body colour of the daily SPF tube | ## Tokens — Typography The vertical wordmark on the right is the largest element. The product name is the second read, set bold and flush left at about two-thirds down, then a short English benefit line, its French equivalent, and the bilingual net contents centred at the base. Strength tags sit in a tiny outlined pill above the name. ### Display — Clarendon Bold, Courier Prime Bold · `--font-display` - **Classification:** Bold slab serif with typewriter character - **Free lookalike:** Zilla Slab (Google Fonts) - **Fallback:** Rockwell Bold, Courier New Bold - **Weights:** Bold - **Case:** Lowercase - **Tracking:** Normal - **Role:** The wordmark only, rotated 90 degrees to read bottom to top along the right edge. ### Headline — Helvetica Neue Bold, Söhne Halbfett · `--font-headline` - **Classification:** Neo-grotesk sans - **Free lookalike:** Inter (Google Fonts) - **Fallback:** Helvetica Neue, Arial - **Weights:** SemiBold, Bold - **Case:** Lowercase or title case - **Tracking:** Normal, tight leading - **Role:** Two-line product name flush left in the lower half. ### Body — Helvetica Neue Regular · `--font-body` - **Classification:** Neo-grotesk sans, small sizes - **Free lookalike:** Inter (Google Fonts) - **Fallback:** Helvetica, Arial - **Weights:** Regular - **Case:** Sentence case - **Tracking:** Normal - **Role:** English benefit line, French translation and the bilingual net contents. ### Label — Helvetica Neue Condensed Bold · `--font-label` - **Classification:** Compact grotesk for tags - **Free lookalike:** Inter Tight (Google Fonts) - **Fallback:** Arial Narrow Bold - **Weights:** Bold - **Case:** Uppercase - **Tracking:** Open, about +6% - **Role:** Strength pills ('ADVANCED', 'BEGINNER'), percentages and format lines such as 'FACIAL MIST'. ### Type Scale Sizes are cap height as a share of the reference panel: Front of the 30 ml retinol gel squeeze tube, about 110 mm tall excluding cap. | Role | Font | Weight | Size | Case | Token | | --- | --- | --- | --- | --- | --- | | vertical-wordmark | Display | Bold | 8% of panel height | Lowercase | `--text-vertical-wordmark` | | product-name | Headline | Bold | 4.5% of panel height | Lowercase | `--text-product-name` | | percentage | Label | Bold | 2.6% of panel height | Uppercase | `--text-percentage` | | strength-tag | Label | Bold | 1.8% of panel height | Uppercase | `--text-strength-tag` | | benefit-en | Body | Regular | 1.8% of panel height | Sentence case | `--text-benefit-en` | | benefit-fr | Body | Regular | 1.8% of panel height | Sentence case | `--text-benefit-fr` | | category-line | Body | Regular | 1.5% of panel height | Lowercase | `--text-category-line` | | net-contents | Body | Regular | 1.4% of panel height | Lowercase units | `--text-net-contents` | ## Structure & Materials - **Formats:** Twist-up stick, Squeeze tube, Dropper bottle, Spray bottle, Jar, Can, Airless bottle - **Materials:** Plastic, Glass, Aluminium - **Closures:** Tall white caps on tubes and serums, white mist pump with clear overcap, colour-matched lids on sticks and the illuminator - **Decoration:** Single-colour direct print, Thin-line icon, Bilingual text block ### Proportions | Purpose | Value | | --- | --- | | Wordmark length | About 40% of pack height, running up the right edge | | Wordmark position | Starts about 20% from the base, hugging the right margin | | Text column width | About 60% of pack width, flush left | | Text column start | Product name begins about 60% down the front | | Side margin | About 8% of pack width on the left | | Colours per pack | Two: body colour plus one ink, cap white or matched | | Density | Empty upper half, compact text block in the lower left | ### Shapes | Element | Shape | | --- | --- | | Tube | Straight squeeze tube with a tall cylindrical white cap | | Stick | Oval-section twist-up stick with a flush lid | | Strength tag | Tiny outlined pill | | Percentage badge | Small overlapping circles around the strength figure | | Wave icon | Three stacked thin wave lines on the AHA stick | ### Finishes | Finish | Where | Look | | --- | --- | --- | | Matte opaque plastic | Tubes, sticks and airless bottles | matte | | Soft satin coating | Stick bodies and illuminator | soft-touch | | Coated glass | Dropper serum bottle | matte | ## Pack Elements ### Sideways wordmark **Role:** Brand block Bold lowercase slab serif rotated to read bottom to top, about 40% of pack height, on the right edge in Contrast Ink (#1d1d1d) or white. ### Name column **Role:** Product identity Two-line bold grotesk product name flush left starting about 60% down the front. ### Bilingual benefit **Role:** Regulatory copy English benefit line then the French line at the same small size, directly under the name. ### Ingredient icon **Role:** Active cue Single-weight line drawing (drops, waves, molecule) about 8% of pack width, sitting above the name. ### Strength pill **Role:** Variant signal Outlined pill with 'ADVANCED' or 'BEGINNER' plus a percentage in overlapping circles, used only on paired actives. ### White cap **Role:** Closure Tall Cap White (#f6f2ee) cylinder cap on tubes and serums, kept plain without print. ## Do's and Don'ts ### Do - Give each product family one flat opaque body colour such as Electrolyte Aqua (#7fcdd8) and print in one ink only. - Rotate the bold lowercase slab-serif Display wordmark up the right-hand edge at about 40% of pack height. - Set the product name in the bold Headline grotesk, flush left, starting about 60% down the front. - Print the benefit line in English and French at the same Body size. - Use a single thin-line icon above the name to hint at the active ingredient. - Pair strength variants as dark and light versions of the same pack, e.g. #2b2a29 vs #d3cfc8. ### Don't - Don't use gradients, patterns or photographic imagery on the body. - Don't set the product name in the wordmark's slab serif. - Don't centre the text column; it is always flush left. - Don't add paper labels or foil. - Don't use more than one colour of ink on a pack. - Don't run the wordmark horizontally on the front face. ## Surfaces | Level | Name | Value | Purpose | | --- | --- | --- | --- | | 0 | Electrolyte Aqua | `#7fcdd8` | Pack body carrying all direct print | | 1 | Cap White | `#f6f2ee` | Cap and pump framing the coloured body | ## Front Panel Layout Direct print in one ink on a flat-coloured body: vertical wordmark up the right edge, a left-aligned text column in the lower half. | Zone | Content | | --- | --- | | Right edge | Vertical lowercase wordmark | | Left, mid | Thin-line icon and optional strength tag | | Left, lower | Product name, English benefit line, French benefit line | | Base | Bilingual net contents | ## Range System Each product or family owns one body colour, while the layout, single ink and type stay identical; strength levels are paired as dark vs light versions of the same tube. - Electrolyte line = aqua bodies with water-drop icons - Ceramide line = peach bodies with a molecule icon - Retinol gels = black tube (advanced) vs stone tube (beginner) - KP stick = navy with a wave icon - Daily SPF = butter yellow ## Back of Pack The reverse keeps the same body colour and single ink: a short how-to in English and French, the full INCI list, and a small block of legal marks along the base, all flush left like the front. - Directions in English with French translation - Full INCI ingredient list - Caution line for actives such as retinol or AHA - Barcode printed on the body colour - Period-after-opening symbol, recycling marks and distributor address ## Imagery No photography or illustration beyond tiny single-weight line icons (drops, waves, molecule hexagons, strength roundels) placed just above the product name. ## On Shelf On shelf the packs read as blocks of flat aqua, peach and navy with the same sideways wordmark repeating down the right edge of every unit, which billboards the brand even when only the edge is visible. ## Agent Prompt Guide Quick Color Reference: - Electrolyte Aqua: #7fcdd8 — Body colour of the electrolyte serum, water cream tube, magnesium mist and water-cream can - Ceramide Peach: #f4c2a1 — Body colour of the ceramide body oil stick, lip balm jar and soft-glow illuminator - AHA Navy: #1f4e70 — Body colour of the KP smoothing stick, printed in white - Advanced Black: #2b2a29 — Tube colour for the stronger retinol gel, printed in white - Beginner Stone: #d3cfc8 — Tube colour for the gentler retinol gel, the light pair to the black tube - SPF Butter: #f7c64c — Body colour of the daily SPF tube - Cap White: #f6f2ee — Tall white caps on tubes, dropper collars and the mist pump - Contrast Ink: #1d1d1d — Wordmark, name, copy and icon on all light bodies - Reverse White: #ffffff — Same type and icon reversed out on the navy and black packs Create a matte Electrolyte Aqua (#7fcdd8) squeeze tube with a tall Cap White (#f6f2ee) cylindrical cap, printed in Contrast Ink (#1d1d1d) only. Run an original bold lowercase slab-serif Display wordmark vertically up the right edge, reading bottom to top, about 40% of the tube height. Set a two-line bold Headline product name flush left starting about 60% down, followed by a small English benefit line and the same line in French. Add a single thin-line icon of three water drops above the product name, about 8% of the tube width. Make a matching pair of retinol tubes, one Advanced Black (#2b2a29) printed in white and one Beginner Stone (#d3cfc8) printed in black, each with a tiny outlined strength pill. Image prompt: Product photo of a new skincare brand in a sideways-lowercase pastel style: a matte aqua squeeze tube with a tall white cap, a matte peach twist-up body stick and a matte navy stick. Each body is one flat colour printed in a single ink: an original bold lowercase slab-serif wordmark runs vertically up the right edge, a two-line product name in a bold grotesk sits flush left in the lower half, followed by an English benefit line, the same line in French, and bilingual net contents at the base. A tiny thin-line icon of water drops or a molecule sits above each name. No gradients, no labels. Pure white seamless background, soft even studio light. Invent an original brand name and artwork; do not reproduce existing logos. ## Similar Brands - **The Ordinary** — Shares the clinical one-ink typographic front, but uses white and amber pharmacy packs rather than a flat colour per family. - **Byoma** — Also colour-codes skincare with bold flat bodies and simple type, with a louder, more graphic wordmark. - **Bubble** — Uses saturated single-colour bodies per product for a younger audience, but with rounded playful type instead of a slab. - **Versed** — Pairs soft pastel bodies with plain sans type and minimal icons on accessible skincare. ## Quick Start ### CSS Custom Properties ```css /* Colours are estimated from product photography (screen values, not print specifications). Proportions and type scales are visual estimates, not measured manufacturing dimensions. Typefaces are lookalikes, not identified fonts. */ :root { /* Colors */ --color-electrolyte-aqua: #7fcdd8; --color-ceramide-peach: #f4c2a1; --color-aha-navy: #1f4e70; --color-advanced-black: #2b2a29; --color-beginner-stone: #d3cfc8; --color-spf-butter: #f7c64c; --color-cap-white: #f6f2ee; --color-contrast-ink: #1d1d1d; --color-reverse-white: #ffffff; /* Typography — families (free lookalikes) */ --font-display: 'Zilla Slab', 'Rockwell Bold', 'Courier New Bold'; --font-headline: 'Inter', 'Helvetica Neue', Arial; --font-body: 'Inter', Helvetica, Arial; --font-label: 'Inter Tight', 'Arial Narrow Bold'; /* Typography — illustrative scale, as a share of the panel (Front of the 30 ml retinol gel squeeze tube, about 110 mm tall excluding cap) */ --panel-height: 110mm; --text-vertical-wordmark: calc(var(--panel-height) * 0.08); --text-product-name: calc(var(--panel-height) * 0.045); --text-percentage: calc(var(--panel-height) * 0.026); --text-strength-tag: calc(var(--panel-height) * 0.018); --text-benefit-en: calc(var(--panel-height) * 0.018); --text-benefit-fr: calc(var(--panel-height) * 0.018); --text-category-line: calc(var(--panel-height) * 0.015); --text-net-contents: calc(var(--panel-height) * 0.014); /* Proportions */ --wordmark-length: 40%; --text-column-width: 60%; --text-column-start: 60%; --side-margin: 8%; /* Surfaces */ --surface-electrolyte-aqua: #7fcdd8; --surface-cap-white: #f6f2ee; } ``` ### Tailwind v4 ```css /* Colours are estimated from product photography (screen values, not print specifications). Proportions and type scales are visual estimates, not measured manufacturing dimensions. Typefaces are lookalikes, not identified fonts. */ @theme { /* Colors */ --color-electrolyte-aqua: #7fcdd8; --color-ceramide-peach: #f4c2a1; --color-aha-navy: #1f4e70; --color-advanced-black: #2b2a29; --color-beginner-stone: #d3cfc8; --color-spf-butter: #f7c64c; --color-cap-white: #f6f2ee; --color-contrast-ink: #1d1d1d; --color-reverse-white: #ffffff; /* Typography — families (free lookalikes) */ --font-display: 'Zilla Slab', 'Rockwell Bold', 'Courier New Bold'; --font-headline: 'Inter', 'Helvetica Neue', Arial; --font-body: 'Inter', Helvetica, Arial; --font-label: 'Inter Tight', 'Arial Narrow Bold'; /* Typography — illustrative scale, as a share of the panel (Front of the 30 ml retinol gel squeeze tube, about 110 mm tall excluding cap) */ --panel-height: 110mm; --text-vertical-wordmark: calc(var(--panel-height) * 0.08); --text-product-name: calc(var(--panel-height) * 0.045); --text-percentage: calc(var(--panel-height) * 0.026); --text-strength-tag: calc(var(--panel-height) * 0.018); --text-benefit-en: calc(var(--panel-height) * 0.018); --text-benefit-fr: calc(var(--panel-height) * 0.018); --text-category-line: calc(var(--panel-height) * 0.015); --text-net-contents: calc(var(--panel-height) * 0.014); /* Proportions */ --wordmark-length: 40%; --text-column-width: 60%; --text-column-start: 60%; --side-margin: 8%; /* Surfaces */ } ```