ICO Uniforms · Brand Standards

01 · Foundation

The strategic core of the ICO brand

Before colour, typography, and layout, there has to be a clear point of view. This section defines what ICO stands for, how it should be understood, and the ideas every expression of the brand should reinforce.

Overview

ICO should be understood as more than a company that sells uniforms. It is a design-led program partner that helps brands create a more considered, consistent, and operationally sound uniform experience. The strategy section exists to keep that understanding clear before the visual system begins.

If this section is right, the rest of the brand standards becomes easier to apply. Every visual and verbal decision should trace back to the ideas defined here.

Brand position

"The creative partner behind the world's best dressed brands."

ICO is not just supplying garments. ICO designs, builds, and manages uniform programs as complete systems across product, brand, and operations. The value is not only what people wear. It is the experience, structure, and consistency behind it.

Use this line in brand overviews, introductions, pitch decks, and any moment when ICO needs to be understood quickly at a high level. It frames the company as a creative and operational partner, not a commodity vendor.

Brand promise

"A relentless pursuit toward a better uniform experience."

This is the promise behind the work. ICO is always pushing toward something better: better product choices, better styling, better program logic, better rollout, and a better day-to-day experience for the people wearing the uniform. The promise is about continuous improvement, not empty aspiration.

Use this line when the message needs to express commitment, standards, and the experience ICO delivers over time. It works well in sales materials, service language, onboarding, and program narratives.

What ICO is

What ICO is and is not

What ICO is

A design-led uniform program partner that brings together product, styling, rollout, and long-term management into one system.

What ICO is not

Not a fashion brand, not a bid-based vendor, and not a custom-first company that starts from zero every time. ICO has an in-stock foundation that powers every program.

How position and promise work together

The position explains where ICO sits in the market. The promise explains what clients and wearers should feel from the experience. One gives the brand its point of view; the other gives it accountability.

Core belief

Uniforms are never just garments. They shape first impressions, signal brand standards, influence how teams feel in their role, and affect how consistently a program performs at scale.

Why it matters — That is why ICO cannot think only in terms of product. The company has to think about the full uniform experience: the visual impression, the wearer experience, and the operational reality.

Audience

Who the brand needs to speak to

ICO serves more than one audience at once. The brand has to feel credible to decision-makers while staying grounded in the experience of the people wearing the uniform every day.

Brand leaders	Need confidence that the program reflects the brand correctly and feels considered, elevated, and on-brand.
Operators	Need clarity, speed, consistency, and a partner who understands rollout, logistics, and long-term program management.
Ownership / procurement	Need a solution that is scalable, rational, and easier to manage without sacrificing quality or presentation.
Wearers	Need uniforms that feel right in the role, look professional, and support a better day-to-day experience on the job.

Why clients choose ICO

Taste

The work looks considered. ICO brings a sharper eye to fit, styling, and brand alignment than a traditional uniform supplier.

System thinking

Programs are built as systems, not disconnected product choices. Product, rollout, communication, and management are designed to work together.

Speed with structure

ICO's in-stock foundation helps programs move faster without making the outcome feel generic or compromised.

Operational credibility

The company can carry an idea from concept through implementation and ongoing management. The creative story is backed by real execution.

Value proposition

What ICO delivers	A better uniform experience through stronger product choices, clearer program logic, and more thoughtful brand execution.
How ICO is different	ICO combines creative authority and operational rigor in one partner. Most companies lean heavily toward one side. ICO has to do both.
What the client gets	A program that looks more intentional, feels easier to run, and performs more consistently over time.

System over fragments

ICO should always feel cohesive because the business itself is cohesive. The company already thinks in systems: in-stock foundations, curated product assortments, operational rollout, and long-term program management. The brand should express that same discipline everywhere it appears.

Why it matters — When ICO shows up like a system, the creative authority and operational credibility reinforce each other. When it shows up in fragments, it starts to look like everyone else.

02 · Language

How ICO should sound

ICO's tone is direct, confident, and a little irreverent. That means clarity first, authority without posturing, and language that sounds like a real person — not corporate filler or lifestyle puff.

Language patterns

Approved language patterns

Use simple, grounded phrasing that supports the brand without sounding over-written. ICO has creative authority — it doesn't need to announce it.

Approved language patterns

How to apply this

Use this section to train writers, designers, agencies, and sales teams on how ICO should sound in decks, websites, and program documents.

The hero line — The creative partner behind the world's best dressed brands — works because it implies both creative credibility and operational capability in one sentence. That balance should be present in every piece of ICO communication.

Voice pillars

Direct

What it is: "We design and manage uniform programs."
What it isn't: "We provide comprehensive end-to-end apparel solutions."

Short sentences. Clear meanings. No filler language used just to sound impressive. ICO should say what it does in plain terms, without hiding behind corporate language, abstractions, or unnecessary setup. If a sentence can be shorter, make it shorter.

Confident

What it is: "ICO designs and manages uniform programs for teams of every size."
What it isn't: "ICO tries to help brands find a better apparel solution."

State what ICO does without hedging. Do not use 'we try to', 'we aim to', or other language that weakens authority. ICO should sound assured because the business knows what it does well. Confidence here means clarity and conviction, not sales exaggeration.

Irreverent but mature

What it is: "In-stock. In-style."
What it isn't: "We make uniforms fun!"

ICO has personality without being playful. The tone can be dry, sharp, and slightly understated, but it should never become jokey, flippant, or self-conscious. Think intelligent editorial confidence rather than lifestyle branding or startup cleverness.

Operationally credible

What it is: "We can roll out a uniform program across 50,000 employees."
What it isn't: "We handle everything for everyone, everywhere."

The language should reflect that ICO is not just creative, but executable. It should sound like a partner who can actually build, roll out, and manage a program at scale. The tone should balance taste with competence.

Specific, not inflated

What it is: "We design, build, and manage uniform programs."
What it isn't: "We deliver transformative, best-in-class wardrobe ecosystems."

Prefer concrete language over inflated claims. Name the thing, explain the value, and stop. If the copy starts sounding grander than the actual idea, it is probably off-brand. Precision builds more authority than hype.

Human, not casual

What it is: "Clear, confident, and slightly irreverent."
What it isn't: "Hey! We’re so excited to partner with you!"

ICO should sound like a real person with judgment, not a committee or a chatbot. That does not mean slangy, overly friendly, or conversational for its own sake. The tone should feel warm through clarity, not informality.

03 · Logo

Logo rules that scale

This section covers identity usage across digital and print. The goal is consistent variants, strong contrast, and controlled behaviour across documents, decks, web, and portals.

Logo variants

Approved logo variants

Use the full lockup by default. The short ICO mark is for more casual applications such as tags and collateral where the audience already knows the brand. All variants stay monochrome.

Full lockup — black

Default on light backgrounds for websites, decks, documents, and most formal brand applications.

Default

Full lockup — white

Use on dark fields where the full identity needs to read clearly and feel deliberate.

Approved

Short mark — black

For more casual touchpoints like tags and collateral when the client or wearer already knows ICO.

Secondary

Short mark — white

Use the short mark on dark applications only when the context is already familiar and the full lockup is not needed.

Secondary

Logo usage rules

Usage rules

Contrast	Always use the variant that reads immediately. Low-contrast use is off-brand.
Colour	Black or white only. No exceptions for campaigns, portals, or co-branded applications without explicit approval.
Full vs. short mark	Use the full ICO Uniforms lockup by default. Use the short ICO mark only in more casual applications such as tags or collateral where the audience already knows the brand.
Clear space	Maintain breathing room around the mark equal to the height of the 'I' in ICO. Do not crowd it with text or busy image edges.
Minimum size	Digital: 80px wide minimum. Print: 20mm wide minimum.
Stretching	Never distort, skew, outline, add shadows, or otherwise stylize the mark.

Logo do / don't

Do / Don't

Do

Strong contrast, room to breathe

Choose the variant that reads immediately. Give the mark clear space. Use it at a considered size.

White logo on clean dark field Generous clear space No competing elements

Don't

Do not improvise

Avoid low contrast, effects, recolours, or decorative treatments. The logo is not a design element — it is a mark.

Grey logo on busy photo Drop shadow added Outline version Colour fill Stretched proportions

04 · Brand Colours

A neutral system with one warm accent

ICO's palette is primarily black, white, and true neutral greys. The single accent — Cool Stone — adds warmth without tipping into a colour-forward identity. Photography provides all the richness; the palette stays out of the way.

Base palette

Base palette — neutral greys

All greys are true neutral — no warm or cool undertone. This keeps the system clean and lets the photography do the colour work. The slight warmth in the page background (Cream) is intentional — it reads as editorial rather than clinical.

Ink

#141414

Primary text · buttons · dark sections · nav

Charcoal

#444444

Dark supporting text · subtle dark elements

Mid Grey

#676767

Body copy · secondary text · muted labels

Light Grey

#C0C0C0

Dot indicators · inactive states

Hairline

#E8E8E8

All borders · dividers · ghost numbers

Cream

#F4F4F2

Page background

White

#FFFFFF

Card backgrounds · alternate sections

Accent — Cool Stone

Cool Stone is the single accent colour. It appears in eyebrow labels, department tags, step numbers, client name hover states, and secondary CTA elements. It should never appear as a background or as a headline colour. Used sparingly — roughly 5% of surface area — it adds warmth without defining the palette.

Cool Stone

#9A8F84

Eyebrows · labels · hovers · accents only

Background rules

Light and dark background rules

ICO should move between light and dark environments in a controlled way. The system is not flexible in the sense of 'anything goes' — each background mode has a defined role and corresponding text behaviour.

Light mode default	Cream (#F4F4F2) is the default page background. It should carry the majority of the experience because it feels softer, more editorial, and more premium than pure white.
When to use white	White (#FFFFFF) is for cards, inset modules, and moments that need sharper contrast inside a light layout. Do not build whole pages in white unless there is a specific reason.
Text on light backgrounds	Use Ink (#141414) for headlines and primary text, Mid Grey (#676767) for body copy, Hairline (#E8E8E8) for borders, and Cool Stone (#9A8F84) only for labels and accents.
Dark mode usage	Dark sections should use #181818 as the background. Use them intentionally for contrast, emphasis, and pacing — not as the default environment for the whole brand.
Text on dark backgrounds	Use #F4F4F2 for headlines and high-priority text. Supporting copy should be rgba(244,244,242,0.72) or lighter-toned neutral text, not the same value used on light backgrounds.
What to avoid	Do not place Mid Grey body copy on dark backgrounds, do not use pure black as a field colour, and do not introduce tinted or coloured backgrounds outside the approved system.

Colour usage rules

Eyebrow labels	Always Cool Stone (#9A8F84) at 10px, weight 500, ALL CAPS, tracked at 0.22em.
Body text	Mid Grey (#676767) for supporting copy. Never pure black (#000000) for body — use Ink (#141414) only for headlines and primary text.
Light backgrounds	Default to Cream for page fields and White for contained cards or modules. The contrast between the two should stay subtle, not stark.
Borders & dividers	Hairline (#E8E8E8) throughout. Never use a coloured border. 1px only — never thicker except for the active nav indicator (2px Cool Stone).
Dark sections	Background #181818 (slightly off-black, not pure black). Text #F4F4F2 for headlines and rgba(244,244,242,0.72) for supporting copy.
Accent restriction	Cool Stone never appears as a headline, never as a background, and never used decoratively. It is a functional colour for labels and interactive states only.
No additional colours	Do not introduce new colours. Photography provides all the richness. A pitch deck that feels like it needs a colour accent is a deck that needs better photography.

Colour do / don't

Colour discipline

Do

Let the system breathe

Black headlines on cream, grey body copy, hairline borders, stone eyebrow labels. Photography provides colour. The palette stays neutral.

DRESSED BY ICO Kimpton · Marriott · Hilton — body copy in #676767 — hairline borders in #E8E8E8

Don't

Do not add colour

Do not introduce additional accent colours, gradient backgrounds, or coloured section backgrounds. Every colour addition dilutes the system.

Gradient header Coloured cards Multiple accent colours Coloured borders

05 · Contextual Colour

How colour enters the system without becoming the brand

ICO's official palette remains neutral. In select applications, colour may be introduced contextually by sampling from product or photography. This is not an expanded palette. It is a controlled way to add richness while keeping the product as the source of the hue.

Core principle

Photography provides the richness. Colour provides the architectural frame. If colour appears in an ICO composition, it should feel anchored to the product story rather than added as decoration.

Why it matters — This keeps the brand restrained. The product and imagery still carry the emotion. Colour supports the layout, but it never becomes the identity itself.

When to use it

When contextual colour is appropriate

Use it for	Image-led storytelling, product spotlights, campaign moments, lookbooks, landing pages, and collateral where colour helps unify photography and layout.
Do not use it for	Core UI, navigation, standard informational pages, dense decks, tables, forms, or any part of the system that should remain neutral and purely functional.
What it is	A contextual application method that borrows hue from photography or product.
What it is not	Not a secondary brand palette, not a campaign colour system, and not a licence to add arbitrary accent colours.

Sampling rule

The sampling rule

Primary source

Sample from the dominant garment, trim, or product tone in the hero image whenever possible. The product should remain the clearest source of the hue.

Secondary source

If the product is intentionally neutral, sample from the environment only when it strengthens the mood without overpowering the garment.

Tonal shift

A subtle shift of roughly plus or minus 10% in luminosity is acceptable when needed for depth, layering, or legibility. Do not push the sampled hue until it becomes a new colour statement.

One hue at a time

Use one sampled hue per composition. If multiple colours from the image compete for attention, the layout will stop feeling controlled.

Sampling examples

Placeholders below show how sampled colour should stay tied to product or image context. Click any example to enlarge it.

Primary source

Sample from the dominant product tone so the colour reads as a continuation of the garment.

Secondary source

Use the environment only when it supports the mood without overtaking the product.

Tonal shift

A slight shift in luminosity can create depth while still feeling sourced from the image.

One hue at a time

Keep the composition on one sampled hue so the page stays controlled and editorial.

Layout application

Architectural, not decorative

Contextual colour should appear as a field, panel, or grounded surface. It should not show up as random highlights, badges, or ornamental fragments.

Flush to the image

When colour is paired with photography, it should feel physically tied to the image. A sampled colour block should read as part of the composition, not as a separate sticker beside it.

Full field or grid-locked

Use colour blocks only when they span a meaningful field or align cleanly to the layout grid. Avoid awkward partial shapes that feel improvised.

Return to neutral

A colour-led moment should eventually resolve back into the base palette. The neutral system still sets the resting state of the brand.

Layout examples

These placeholders show the difference between contextual colour used as structure and colour used as decoration. Click any example to enlarge it.

Architectural field

Colour appears as a grounded surface, not a floating accent shape.

Flush to the image

The sampled block meets the image cleanly so both elements read as one composition.

Grid-locked field

The colour block aligns exactly to the same spacing logic as the rest of the layout.

Return to neutral

A colour-led moment resolves back into cream, white, hairline, and stone.

Typographic safety

Contextual colour must never compromise the ICO type system. The typography rules stay the same even when the background shifts.

Dark fields	Use Cream (#F4F4F2) for headlines and supporting text on dark sampled backgrounds.
Light fields	Use Ink (#141414) for headlines and Mid Grey (#676767) for body copy on light sampled backgrounds.
Mid-tone exclusion	If a sampled colour sits in the true mid-range and cannot support readable text contrast, use it only as a visual surface without typography on top.
Priority	Legibility beats colour fidelity. If the exact sampled tone fails, adjust slightly or move the text elsewhere.

Type on colour

Type on colour examples

Use typography only where contrast stays disciplined. Mid-tone surfaces can still be used, but not as text fields. Click any example to enlarge it.

Dark field

Cream typography on a dark sampled background keeps the text clear and controlled.

Light field

Ink headlines and Mid Grey body copy are still the default on light samples.

Mid-tone exclusion

A true mid-tone can be used as a visual surface, but the type should move elsewhere.

Legibility first

If the exact sampled tone fails, adjust the tone slightly rather than sacrificing readability.

The litmus test

If you remove the photography and the colour blocks still feel like a self-contained identity, there is too much colour. Without the product, the colour should feel incomplete.

Why it matters — The product must remain the source of the hue. Contextual colour works only when it reinforces what is already present in the imagery.

06 · Typography

Two typefaces. Strict rules.

DM Sans is the primary typeface for all UI, headings, body copy, labels, and buttons. Cormorant Garamond is the display serif used for emphasis and contrast. When serif and sans appear on the same line, Cormorant should be set slightly larger so it reads at the same optical size.

Typefaces

The two typefaces

DM Sans was chosen for its optical-size axis — it renders beautifully at 10px labels and 48px headings alike. It's humanist without being casual. Cormorant Garamond is the companion display serif. Use it in regular by default, with italic reserved for deliberate accent moments, and slightly overscale it when paired directly with DM Sans on the same line.

Primary — DM Sans Weight 300 / 400 / 500 · All UI, headings, body, labels

Uniform programs

We design, build, and manage uniform programs for teams of every size — from single properties to global portfolios.

Display — Cormorant Garamond Weight 300 / 400 · Regular by default · Italic for accent only · Never below 24px

The creative partner behind the world's best dressed brands.

Headline mixing

Approved headline mixing

Font mixing should feel deliberate, not restless. Section headers default to DM Sans only. Mixed headlines are reserved for display moments where a single phrase benefits from contrast and can still read as one line of thought.

Default section header DM Sans only · Default for page and section headlines

Two typefaces. Strict rules.

Approved serif swap One serif phrase · 1.25em inline serif · -0.03em tracking · No italic inside the serif phrase

The strategic core of the ICO brand

Approved italic accent DM Sans only · One italic phrase · No typeface swap

A neutral system with one warm accent

Type scale

Type scale & usage

Every size has one job. Do not repurpose sizes for decoration.

Hero headline	Cormorant Garamond · Regular 300 · clamp(52px, 6.8vw, 108px) · line-height 1.0 · Used once per page maximum.
Section heading H2	DM Sans · Weight 300 · clamp(28px, 3.5vw, 48px) · tracking -0.01em · line-height 1.05. Default all-DM-Sans treatment for page and section headlines.
Card heading H3	DM Sans · Weight 400 · 18–22px · tracking 0 to -0.01em. Regular weight (not light) for legibility at smaller sizes.
Body large	DM Sans · Weight 300 · 16px · line-height 1.8 · color #676767. Hero subcopy, section intros, scale section subtext.
Body standard	DM Sans · Weight 300 · 14px · line-height 1.8 · color #676767. Card descriptions, process steps, proof facts.
Eyebrow / label	DM Sans · Weight 500 · 10px · tracking 0.22em · ALL CAPS · color #9A8F84 (Cool Stone). All section labels, nav items, department tags.
Button / CTA	DM Sans · Weight 500 · 11px · tracking 0.14em · ALL CAPS. Pill shape for primary, outlined pill for secondary, underline for tertiary.
Pull quote	Cormorant Garamond · Regular 300 by default, italic only for emphasis · clamp(20px, 2vw, 30px) · line-height 1.3. Testimonials only. Always in quotation marks.
Mixed-line pairing	When Cormorant appears inline with DM Sans, use the approved serif swap at 1.25em with -0.03em tracking so it reads at the same optical scale and keeps the line continuous.
Single accent move	In a single headline or phrase, use one accent strategy only. If a word is set in italic, keep it in the primary typeface. Do not combine an italic treatment with a typeface swap in the same accented phrase.
Section header default	Section headers should stay in DM Sans only. Reserve mixed-type headlines for selected display moments inside campaigns, editorials, or hero compositions where the phrase can still read as one continuous line.
Approved serif swap	Use the serif swap only in approved display headlines. Keep the serif phrase at 1.25em with -0.03em tracking so it visually matches the DM Sans line rather than shrinking inside it.

Leading

Leading is part of the tone of the brand. ICO typography should feel open, calm, and deliberate, but never so loose that lines drift apart.

Display serif	1.0–1.1 · Keep large Cormorant display settings tight so the line feels elegant and connected.
Section headlines	1.05–1.1 · Use for DM Sans section headings. The line should feel composed and continuous, not airy or stacked by accident.
Body copy	1.75–1.9 · Use generous leading for reading text, adjusting slightly for measure and contrast.
Quotes	1.15–1.3 · Pull quotes and positioning lines should be tighter than body copy, but not compressed.
The test	Crowded → loosen slightly before changing size. Floaty → tighten before adding weight.

Kerning

Kerning & tracking

Spacing inside a word or line changes the voice as much as the typeface itself. ICO typography should feel steady and edited, not mechanically loose or over-corrected.

DM Sans headlines	Slight negative tracking · Use in large DM Sans headlines so the line feels clean and continuous. Never force a line with aggressive tightening.
Inline serif phrases	Tighten slightly · When Cormorant appears inside a DM Sans line, reduce spacing enough that the phrase reads as part of the sentence.
Serif display	Near neutral spacing · Large standalone Cormorant should stay elegant. Tighten only enough to avoid visible gaps.
Labels & UI	Positive tracking · Use for small uppercase labels, eyebrows, and utility text. This is for clarity, not decoration.
The test	Fragmented line → correct spacing before changing typefaces. One phrase jumps forward → reduce tracking contrast first.

Typography rules

The rules

Serif appears twice

Cormorant Garamond is used sparingly as the display serif. Regular is the default. Italic should be reserved for intentional accent moments, not used automatically everywhere the serif appears.

Light weight = confidence

DM Sans weight 300 at large sizes is more striking than weight 600. Do not equate font weight with importance. Keep headlines a little more open so they feel calm and premium rather than compressed.

Italic for rhythm, not decoration

Use italic only when a word truly needs accent. The serif should not default to italic just because it appears inside a heading. Accent is a choice, not the baseline.

Overscale serif inline

When Cormorant appears within a DM Sans line, make it only slightly larger than the surrounding sans text and tighten the serif tracking a touch. The goal is contrast without making the line feel broken into separate parts.

One emphasis method at a time

Do not stack emphasis styles inside the same phrase. A headline can use a serif swap or an italic accent, but not both at once. If a word is italic, it should stay in the current typeface.

Section headers stay calm

Page and section headlines should default to DM Sans only. If a mixed-type line starts to feel fragmented, the safest answer is to remove the typeface swap rather than force the line with spacing tricks.

Serif swap is deliberate

The approved serif swap is a magnified inline move, not a decorative flourish. Use it only when the serif phrase genuinely needs to share a line with DM Sans and still hold its own visually.

Type do / don't

Typography discipline

Do

Controlled hierarchy

Stone eyebrow → light sans heading → grey body copy at 16px → hairline divider. Every level is distinct. Spacing is generous and consistent.

OUR PHILOSOPHY (stone, 10px) Every industry. (sans 300, 36px) Body copy at 16px weight 300, line-height 1.8 in mid grey. ────────────────

Don't

Flat or overcrowded

Avoid pages where all text feels the same size, spacing looks accidental, or Cormorant is used as a decorative heading font throughout.

HEADLINE IN BOLD SERIF Body text same size as heading Another bold serif heading All caps everywhere No breathing room

07 · Photography

Taste, imagery, and art direction

Photography is where the ICO brand lives most visibly. Image selection is one of the biggest sources of brand drift — this section defines what ICO taste looks like in practical terms.

The clothing is always the subject

People and environments create context, but the garment, fit, material, and silhouette should remain the primary point of attention in every image.

Why it matters — If the viewer remembers the scene more than the uniform, the image is not doing its job. ICO photography should make the viewer think 'I want that' or 'that's exactly right' — not 'great location.'

Photography rules

Direction rules

Environment

Use real environments for context and controlled environments for clarity. The environment should be readable at a glance — not a puzzle.

Composition

Natural and intentional. Avoid stiff corporate posing. Avoid fashion poses that overwhelm the clothing. The subject should look like they belong in the uniform.

Lighting

Default to controlled, neutral lighting. Consistency across a set matters more than drama in a single image. If images can't sit next to each other, they are off-brief.

Photography modes

Approved photography modes

Use these as reference buckets when selecting or producing imagery for any ICO touchpoint.

Hotel or property environment Clean but believable Environment supports the role

Operational context

Real locations that explain the role without turning the image into a busy scene.

Neutral backdrop Subject-first framing Garment reads immediately

Controlled editorial

Minimal or neutral backgrounds that clarify design, styling, and silhouette.

Soft top-right light Controlled shadows Works alongside other images

Compositing-ready

Images shot with consistent light direction so they work together in decks and portals.

Texture / trim detail Silhouette crops Material clarity

Detail support

Close crops that explain materials, finishing, and silhouette without becoming abstract.

Image guardrails

Image selection guardrails

Do

Intentional and readable

The uniform reads clearly, the scene supports the clothing, the lighting is consistent, and the subject looks natural in the role.

Relaxed, natural pose Clean consistent light Garment reads first Environment adds context

Don't

Generic or off-taste

Avoid stock-looking images, cluttered scenes, dramatic mixed lighting, or shots that look like lifestyle advertising rather than uniform communication.

Busy scene competes with clothing Over-posed or stiff Harsh or mixed lighting Style overrides substance

08 · Layout

Structured, intentional, never empty

ICO layouts use a small set of repeatable patterns. The goal is consistency and clarity — not novelty. Every section should have a visible purpose.

Spacing system

All spacing uses a base-4 scale. These values are not suggestions — use them consistently.

4px	Base unit — internal component gaps, badge padding.
8px	Tight spacing — eyebrow to headline, card number to card title.
16px	Standard gap — headline to body copy, list items, button groups.
24px	Component gap — body to CTA, between card elements.
40px	Section gutter — horizontal padding throughout (6vw on main content).
72px	Section rhythm — standard vertical padding per section top and bottom.
2–3px	Grid gap between tiles, cards, and photo panels. Creates the 'tight grid' effect without borders.

Layout patterns

Core layout patterns

Use a small number of repeatable structures. The goal is a page that can be understood quickly — not one that demonstrates design creativity.

Kicker (stone, uppercase) H2 heading Description at 16px

Section intro

Opens a chapter with kicker, heading, and description. Always has a border-bottom before content begins.

Photo panel with overlay type Client name bar Text panel: eyebrow + H2 + body

Photo + text duo

58/42 or 50/50 split. Photo on left or right. Ghost overlay text on photo. Client bar at bottom of photo.

Dark bg Left: heading + CTA Right: 2×2 service cards

Dark section

Background #181818. Left column: eyebrow + heading + body + CTA. Right: 2×2 card grid with hairline borders.

Photo cards Stone dept label Italic name in cream

Tile grid

4-column photo card grid with gradient overlay, department label in stone, italic name in cream.

Minimal does not mean empty

Every section should have a visible purpose. Sparse layouts are intentional when they feel complete. Empty layouts that feel unfinished are not a style choice — they are a mistake.

Why it matters — This is one of the most common failures in ICO internal decks. A section with a headline and nothing else is not minimal — it is incomplete.

Layout do / don't

Layout guardrails

Do

Repeatable, intentional structure

Approved patterns make pages easier to build, easier to scan, and easier to keep on-brand. Structure is not a constraint — it is the brand.

Consistent block rhythm Clear hierarchy Eyebrow → heading → body → CTA Hairline borders do the work

Don't

Improvised or hollow

Avoid creating a new visual system for every deck, over-indexing on minimalist emptiness, or placing elements randomly without a structural logic.

Random text placement No section structure Floating elements One-off layouts per slide

09 · Resources

Assets, templates, and escalation

A scalable standard needs to help people get the right files and understand when to ask for help.

Asset library

Use approved files. Do not reconstruct assets from screenshots or memory.

Logo files

Primary mark files for digital, print, and presentation use. Black and white variants included.

SVG · PNG · AI

Download logo pack

Deck templates

Approved presentation structures pre-aligned to these brand standards. Use these as starting points — do not build from scratch.

PPT · Keynote · PDF

Download templates

Photography selects

Approved image sets that define current ICO taste. Use for onboarding presentations and external partner briefs.

JPG · curated library

Access image library

When to escalate

Always escalate	New layout patterns, unusual typography behaviour, non-standard colour use, logo modifications, co-branded applications, or imagery that feels borderline off-taste.
Never escalate	Straightforward use of approved blocks, approved language, standard logo variants, and reference imagery from the approved library.
The test	If you are not sure whether something is on-brand, it probably isn't. Ask rather than guess. A question takes 5 minutes. A rebrand takes longer.