| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex" /> |
| <title>ICO Uniforms · Brand Standards</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap" rel="stylesheet" /> |
| <style> |
| :root { |
| --cream: #F4F4F2; |
| --white: #FFFFFF; |
| --black: #141414; |
| --dark: #181818; |
| --g1: #E8E8E8; |
| --g2: #C0C0C0; |
| --g3: #676767; |
| --g4: #444444; |
| --stone: #9A8F84; |
| --nav-w: 248px; |
| --content-max: 1180px; |
| --measure: 66ch; |
| --serif: 'Cormorant Garamond', Georgia, serif; |
| --sans: 'DM Sans', system-ui, sans-serif; |
| } |
|
|
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| html { scroll-behavior: auto; } |
|
|
| body { |
| background: var(--cream); |
| color: var(--black); |
| font-family: var(--sans); |
| font-size: 15px; |
| -webkit-font-smoothing: antialiased; |
| display: flex; |
| } |
|
|
| a { color: inherit; text-decoration: none; } |
|
|
| .sidenav { |
| position: fixed; |
| inset: 0 auto 0 0; |
| width: var(--nav-w); |
| background: var(--dark); |
| color: #fff; |
| padding: 0 0 24px; |
| overflow-y: auto; |
| z-index: 20; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .nav-brand { |
| padding: 32px 24px 26px; |
| border-bottom: 1px solid rgba(255,255,255,.07); |
| margin-bottom: 12px; |
| flex-shrink: 0; |
| } |
|
|
| .nav-brand img { width: 150px; display: block; } |
|
|
| .nav-brand-sub { |
| margin-top: 14px; |
| color: rgba(255,255,255,.3); |
| font-size: 11px; |
| text-transform: uppercase; |
| letter-spacing: .18em; |
| font-weight: 400; |
| line-height: 1.5; |
| } |
|
|
| .nav-links { flex: 1; } |
|
|
| .nav-links a { display: block; text-decoration: none; transition: color .15s; } |
|
|
| .nav-group + .nav-group { margin-top: 0; } |
|
|
| .nav-parent { |
| display: flex; |
| align-items: baseline; |
| gap: 10px; |
| padding: 10px 24px; |
| font-size: 12px; |
| font-weight: 500; |
| letter-spacing: .11em; |
| text-transform: uppercase; |
| color: rgba(255,255,255,.45); |
| position: relative; |
| transition: color .15s, background .15s; |
| } |
|
|
| .nav-parent:hover { color: rgba(255,255,255,.85); } |
| .nav-parent.active { |
| color: #fff; |
| background: rgba(255,255,255,.05); |
| box-shadow: inset 2px 0 0 var(--stone); |
| } |
|
|
| .nav-number { |
| font-size: 10px; |
| font-weight: 400; |
| color: rgba(255,255,255,.25); |
| letter-spacing: .08em; |
| flex-shrink: 0; |
| } |
|
|
| .nav-label { |
| flex: 1; |
| } |
|
|
| .nav-parent::after { |
| content: "›"; |
| position: absolute; |
| right: 22px; |
| top: 50%; |
| transform: translateY(-50%); |
| font-size: 14px; |
| color: rgba(255,255,255,.2); |
| opacity: 0; |
| transition: transform .18s ease, opacity .18s ease; |
| } |
|
|
| .nav-group.has-children .nav-parent::after { opacity: 1; } |
| .nav-group.has-children.is-collapsed .nav-parent::after { transform: translateY(-50%) rotate(90deg); } |
|
|
| .nav-children { |
| margin: 0 0 4px; |
| max-height: 600px; |
| overflow: hidden; |
| transition: max-height .22s ease, opacity .18s ease; |
| opacity: 1; |
| } |
|
|
| .nav-group.is-collapsed .nav-children { max-height: 0; opacity: 0; margin-bottom: 0; } |
|
|
| .nav-child { |
| display: block; |
| padding: 6px 24px 6px 42px; |
| color: rgba(255,255,255,.3); |
| font-size: 12px; |
| font-weight: 300; |
| letter-spacing: .02em; |
| line-height: 1.4; |
| transition: color .15s, background .15s; |
| } |
|
|
| .nav-child.active, .nav-child:hover { |
| color: rgba(255,255,255,.8); |
| background: rgba(255,255,255,.04); |
| } |
|
|
| .nav-parent.active::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 2px; |
| height: 16px; |
| background: var(--stone); |
| } |
|
|
| .main { |
| margin-left: var(--nav-w); |
| width: calc(100% - var(--nav-w)); |
| min-width: 0; |
| } |
|
|
| .hero-inner, |
| .section-inner, |
| .footer-inner { |
| width: min(100%, var(--content-max)); |
| margin: 0 auto; |
| } |
|
|
| .hero { |
| padding: 72px 5vw 68px; |
| background: var(--black); |
| color: #fff; |
| position: relative; |
| overflow: hidden; |
| border-bottom: 1px solid rgba(255,255,255,.06); |
| } |
|
|
| .hero-eyebrow { |
| font-size: 10px; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: .22em; |
| color: var(--stone); |
| margin-bottom: 24px; |
| } |
|
|
| .hero h1 { |
| font-family: var(--serif); |
| font-style: normal; |
| font-weight: 300; |
| font-size: clamp(3rem, 6vw, 5.5rem); |
| line-height: .96; |
| letter-spacing: -.01em; |
| color: #fff; |
| max-width: 14ch; |
| margin-bottom: 24px; |
| } |
|
|
| .hero-desc { |
| font-size: 17px; |
| font-weight: 300; |
| line-height: 1.8; |
| color: rgba(255,255,255,.5); |
| max-width: 58ch; |
| margin-bottom: 36px; |
| } |
|
|
| .hero-pills { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .hero-pill { |
| border: 1px solid rgba(255,255,255,.1); |
| background: rgba(255,255,255,.04); |
| border-radius: 999px; |
| padding: 8px 16px; |
| font-size: 11px; |
| font-weight: 400; |
| letter-spacing: .06em; |
| color: rgba(255,255,255,.55); |
| } |
|
|
| section.page { |
| padding: 56px 5vw 72px; |
| border-bottom: 1px solid var(--g1); |
| } |
|
|
| section.page:nth-child(even) { background: var(--white); } |
| section.page:nth-child(odd) { background: var(--cream); } |
|
|
| .section-head { |
| display: grid; |
| gap: 14px; |
| align-items: start; |
| margin-bottom: 38px; |
| padding-bottom: 30px; |
| } |
|
|
| .section-kicker { |
| font-size: 10px; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: .2em; |
| color: var(--stone); |
| padding-top: 6px; |
| } |
|
|
| .section-title { |
| font-size: clamp(1.65rem, 2.6vw, 2.45rem); |
| font-weight: 300; |
| line-height: 1.08; |
| letter-spacing: -.01em; |
| color: var(--black); |
| margin-bottom: 10px; |
| max-width: 54ch; |
| } |
|
|
| .section-title em, |
| .section-title .serif { |
| font-family: var(--serif); |
| font-style: normal; |
| font-weight: 400; |
| font-size: 1.25em; |
| line-height: inherit; |
| letter-spacing: -.03em; |
| } |
|
|
| .section-title em i, |
| .section-title .serif-accent { |
| font-style: italic; |
| } |
|
|
| .section-desc { |
| font-size: 16px; |
| font-weight: 300; |
| line-height: 1.8; |
| color: var(--g3); |
| max-width: 54ch; |
| } |
|
|
| .stack { |
| display: grid; |
| gap: 0; |
| } |
|
|
| .stack > [data-subsection-anchor="true"] { |
| padding-top: 0; |
| margin-top: 42px; |
| scroll-margin-top: 32px; |
| } |
|
|
| .stack > [data-subsection-anchor="true"]:first-child { |
| padding-top: 0; |
| margin-top: 0; |
| } |
|
|
| .block-title { |
| font-size: clamp(1.45rem, 1.6vw, 1.85rem); |
| font-weight: 400; |
| letter-spacing: -.015em; |
| color: var(--black); |
| margin-bottom: 12px; |
| line-height: 1.16; |
| } |
|
|
| .block-text { |
| font-size: 15px; |
| font-weight: 300; |
| line-height: 1.9; |
| color: var(--g3); |
| max-width: var(--measure); |
| } |
|
|
| .block-note { |
| margin-top: 22px; |
| padding-top: 18px; |
| border-top: 1px solid var(--g1); |
| font-size: 13px; |
| font-weight: 300; |
| line-height: 1.75; |
| color: var(--g3); |
| max-width: 62ch; |
| } |
|
|
| .block-note strong { font-weight: 500; color: var(--g4); } |
|
|
| .prose-block { |
| max-width: var(--measure); |
| } |
|
|
| .block-shell-half { |
| max-width: var(--measure); |
| } |
|
|
| .block-shell-full, |
| .block-shell-feature { |
| max-width: none; |
| } |
|
|
| .split-block { |
| display: grid; |
| grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); |
| gap: 36px; |
| align-items: start; |
| } |
|
|
| .split-block.dense { |
| grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); |
| gap: 28px; |
| } |
|
|
| .split-meta { |
| padding-top: 4px; |
| } |
|
|
| .split-label { |
| font-size: 10px; |
| font-weight: 500; |
| letter-spacing: .18em; |
| text-transform: uppercase; |
| color: var(--stone); |
| margin-bottom: 12px; |
| } |
|
|
| .split-copy { |
| max-width: 42ch; |
| } |
|
|
| .split-content { |
| min-width: 0; |
| } |
|
|
| .feature-block { |
| display: grid; |
| gap: 18px; |
| } |
|
|
| .feature-head { |
| max-width: 52ch; |
| } |
|
|
| .quote-block { |
| margin: 10px 0 18px; |
| max-width: 28ch; |
| font-family: var(--serif); |
| font-size: clamp(2rem, 3vw, 2.7rem); |
| line-height: 1.1; |
| letter-spacing: -.015em; |
| color: var(--black); |
| } |
|
|
| .quote-block .quote-mark { |
| color: var(--stone); |
| } |
|
|
| .quote-body { |
| font-size: 15px; |
| font-weight: 300; |
| line-height: 1.9; |
| color: var(--g3); |
| max-width: var(--measure); |
| } |
|
|
| .panel-surface { |
| background: rgba(255,255,255,.56); |
| border: 1px solid var(--g1); |
| padding: 26px; |
| } |
|
|
| section.page:nth-child(even) .panel-surface { |
| background: rgba(244,244,242,.82); |
| } |
|
|
| .rule-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 18px; |
| } |
|
|
| .rule-card { |
| border: 1px solid var(--g1); |
| padding: 22px 22px 24px; |
| background: rgba(255,255,255,.6); |
| } |
|
|
| section.page:nth-child(even) .rule-card { background: rgba(244,244,242,.82); } |
|
|
| .rule-card-title { |
| font-size: 13px; |
| font-weight: 500; |
| letter-spacing: .08em; |
| text-transform: uppercase; |
| color: var(--black); |
| margin-bottom: 10px; |
| } |
|
|
| .rule-card-text { |
| font-size: 14px; |
| font-weight: 300; |
| line-height: 1.75; |
| color: var(--g3); |
| } |
|
|
| .variant-grid { display: grid; gap: 18px; } |
| .variant-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } |
| .variant-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } |
| .variant-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } |
|
|
| .variant-card { |
| border: 1px solid var(--g1); |
| overflow: hidden; |
| background: rgba(255,255,255,.6); |
| } |
|
|
| .variant-visual { |
| aspect-ratio: 4/3; |
| background: var(--black); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 24px; |
| color: rgba(255,255,255,.35); |
| font-size: 12px; |
| font-weight: 300; |
| line-height: 1.6; |
| text-align: center; |
| letter-spacing: .04em; |
| } |
|
|
| .variant-visual img { |
| display: block; |
| max-width: min(100%, 240px); |
| max-height: 82px; |
| width: auto; |
| height: auto; |
| } |
|
|
| .variant-body { padding: 20px 20px 22px; } |
|
|
| .variant-body h4 { |
| font-size: 14px; |
| font-weight: 400; |
| color: var(--black); |
| margin-bottom: 6px; |
| letter-spacing: 0; |
| } |
|
|
| .variant-body p { |
| font-size: 13px; |
| font-weight: 300; |
| line-height: 1.7; |
| color: var(--g3); |
| } |
|
|
| .variant-meta { |
| margin-top: 10px; |
| font-size: 10px; |
| font-weight: 500; |
| color: var(--stone); |
| text-transform: uppercase; |
| letter-spacing: .12em; |
| } |
|
|
| .spec-table { width: 100%; border-collapse: collapse; } |
|
|
| .spec-table th, |
| .spec-table td { |
| text-align: left; |
| padding: 14px 0; |
| border-bottom: 1px solid var(--g1); |
| vertical-align: top; |
| font-size: 15px; |
| } |
|
|
| .spec-table th { |
| width: 30%; |
| font-size: 10px; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: .14em; |
| color: var(--stone); |
| padding-right: 24px; |
| } |
|
|
| .spec-table td { |
| font-weight: 300; |
| line-height: 1.8; |
| color: var(--g3); |
| } |
|
|
| .do-dont-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 18px; |
| } |
|
|
| .compare-card { |
| border: 1px solid var(--g1); |
| overflow: hidden; |
| background: rgba(255,255,255,.6); |
| } |
|
|
| .compare-body { padding: 24px; } |
|
|
| .compare-label { |
| display: inline-flex; |
| margin-bottom: 12px; |
| font-size: 10px; |
| font-weight: 500; |
| letter-spacing: .14em; |
| text-transform: uppercase; |
| padding: 5px 12px; |
| border-radius: 999px; |
| } |
|
|
| .compare-card.good .compare-label { background: #E8F0E8; color: #2A5C2A; } |
| .compare-card.bad .compare-label { background: #F0E8E8; color: #5C2A2A; } |
|
|
| .compare-card h4 { |
| font-size: 15px; |
| font-weight: 400; |
| color: var(--black); |
| margin-bottom: 8px; |
| letter-spacing: -.01em; |
| } |
|
|
| .compare-card p { |
| font-size: 13px; |
| font-weight: 300; |
| line-height: 1.7; |
| color: var(--g3); |
| } |
|
|
| .compare-visual { |
| aspect-ratio: 16/9; |
| background: rgba(244,244,242,.86); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| font-size: 12px; |
| font-weight: 300; |
| line-height: 1.65; |
| color: var(--g3); |
| text-align: center; |
| white-space: pre-line; |
| border-top: 1px solid var(--g1); |
| } |
|
|
| .compare-card.good .compare-visual { background: #F0F4F0; } |
| .compare-card.bad .compare-visual { background: #F4F0F0; } |
|
|
| .gallery-grid { display: grid; gap: 18px; } |
| .gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } |
| .gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } |
| .gallery-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } |
|
|
| .gallery-card { |
| border: 1px solid var(--g1); |
| overflow: hidden; |
| background: rgba(255,255,255,.6); |
| } |
|
|
| .gallery-visual { |
| aspect-ratio: 4/3; |
| background: var(--black); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| color: rgba(255,255,255,.3); |
| font-size: 12px; |
| font-weight: 300; |
| line-height: 1.6; |
| text-align: center; |
| white-space: pre-line; |
| } |
|
|
| .gallery-visual img { |
| display: block; |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| cursor: zoom-in; |
| } |
|
|
| .gallery-visual.has-image { |
| padding: 0; |
| background: transparent; |
| } |
|
|
| .variant-visual img[data-enlargeable="true"] { |
| cursor: zoom-in; |
| } |
|
|
| .gallery-body { padding: 18px 18px 20px; } |
| .gallery-body h4 { font-size: 13px; font-weight: 400; color: var(--black); margin-bottom: 6px; } |
| .gallery-body p { font-size: 12px; font-weight: 300; line-height: 1.7; color: var(--g3); } |
|
|
| .lang-grid { |
| display: grid; |
| grid-template-columns: 1.15fr .85fr; |
| gap: 18px; |
| } |
|
|
| .lang-panel { |
| border: 1px solid var(--g1); |
| padding: 28px; |
| background: rgba(255,255,255,.6); |
| } |
|
|
| section.page:nth-child(even) .lang-panel { background: rgba(244,244,242,.82); } |
|
|
| .lang-panel-note { |
| font-size: 11px; |
| font-weight: 500; |
| letter-spacing: .12em; |
| text-transform: uppercase; |
| color: var(--stone); |
| margin-bottom: 20px; |
| } |
|
|
| .lang-list { display: grid; gap: 0; } |
|
|
| .lang-item { |
| border-bottom: 1px solid var(--g1); |
| padding: 16px 0; |
| } |
|
|
| .lang-item:first-child { padding-top: 0; } |
| .lang-item:last-child { border-bottom: none; padding-bottom: 0; } |
|
|
| .lang-item-label { |
| font-size: 10px; |
| font-weight: 500; |
| letter-spacing: .14em; |
| text-transform: uppercase; |
| color: var(--g3); |
| margin-bottom: 8px; |
| } |
|
|
| .lang-good, |
| .lang-bad { |
| padding: 10px 14px; |
| font-size: 13px; |
| font-weight: 300; |
| line-height: 1.6; |
| } |
|
|
| .lang-good { |
| background: var(--cream); |
| border-left: 2px solid var(--stone); |
| margin-bottom: 6px; |
| color: var(--black); |
| } |
|
|
| section.page:nth-child(even) .lang-good { background: var(--white); } |
|
|
| .lang-bad { |
| background: #F0EEEE; |
| border-left: 2px solid var(--g2); |
| color: var(--g3); |
| } |
|
|
| .lang-aside { |
| font-size: 14px; |
| font-weight: 300; |
| line-height: 1.8; |
| color: var(--g3); |
| } |
|
|
| .resource-grid { display: grid; gap: 18px; } |
| .resource-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } |
| .resource-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } |
|
|
| .resource-card { |
| border: 1px solid var(--g1); |
| padding: 28px; |
| background: rgba(255,255,255,.6); |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| section.page:nth-child(even) .resource-card { background: rgba(244,244,242,.82); } |
|
|
| .resource-card h4 { |
| font-size: 15px; |
| font-weight: 400; |
| color: var(--black); |
| margin-bottom: 8px; |
| letter-spacing: -.01em; |
| } |
|
|
| .resource-card p { |
| font-size: 14px; |
| font-weight: 300; |
| line-height: 1.75; |
| color: var(--g3); |
| flex: 1; |
| } |
|
|
| .resource-meta { |
| margin-top: 16px; |
| font-size: 10px; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: .12em; |
| color: var(--stone); |
| } |
|
|
| .resource-link { |
| display: inline-block; |
| margin-top: 14px; |
| font-size: 11px; |
| font-weight: 500; |
| letter-spacing: .12em; |
| text-transform: uppercase; |
| color: var(--black); |
| border-bottom: 1px solid var(--black); |
| padding-bottom: 2px; |
| width: fit-content; |
| } |
|
|
| .swatch-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } |
| .swatch-row.single { grid-template-columns: 1fr; } |
| .swatch-item { flex: 1; } |
| .swatch-block { height: 80px; } |
| .swatch-row.single .swatch-block { height: 92px; } |
| .swatch-meta { padding: 12px 0 4px; } |
| .swatch-name { font-size: 12px; font-weight: 400; color: var(--black); } |
| .swatch-hex { font-size: 11px; font-weight: 300; color: var(--g3); font-family: monospace; } |
| .swatch-use { font-size: 11px; font-weight: 300; color: var(--g3); margin-top: 3px; line-height: 1.5; } |
|
|
| .type-specimen-block { |
| border: 1px solid var(--g1); |
| overflow: hidden; |
| background: rgba(255,255,255,.6); |
| } |
|
|
| .tsb-header { |
| padding: 16px 24px; |
| border-bottom: 1px solid var(--g1); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .tsb-label { |
| font-size: 10px; |
| font-weight: 500; |
| letter-spacing: .18em; |
| text-transform: uppercase; |
| color: var(--stone); |
| } |
|
|
| .tsb-spec { |
| font-size: 11px; |
| font-weight: 300; |
| color: var(--g3); |
| font-family: monospace; |
| } |
|
|
| .tsb-body { |
| padding: 28px 24px; |
| background: rgba(255,255,255,.6); |
| } |
|
|
| section.page:nth-child(even) .tsb-body { background: rgba(244,244,242,.82); } |
|
|
| .tsb-body.dark, |
| section.page:nth-child(even) .tsb-body.dark { background: var(--black); } |
|
|
| .lightbox { |
| position: fixed; |
| inset: 0; |
| background: rgba(20,20,20,.82); |
| display: none; |
| align-items: center; |
| justify-content: center; |
| padding: 32px; |
| z-index: 60; |
| } |
|
|
| .lightbox.is-open { |
| display: flex; |
| } |
|
|
| .lightbox-inner { |
| width: min(94vw, 1320px); |
| max-height: 92vh; |
| position: relative; |
| } |
|
|
| .lightbox img { |
| display: block; |
| width: 100%; |
| max-height: 92vh; |
| object-fit: contain; |
| background: var(--cream); |
| border: 1px solid rgba(255,255,255,.12); |
| } |
|
|
| .lightbox-close { |
| position: absolute; |
| top: -14px; |
| right: -14px; |
| width: 40px; |
| height: 40px; |
| border-radius: 999px; |
| border: 1px solid rgba(255,255,255,.18); |
| background: rgba(20,20,20,.75); |
| color: #fff; |
| font-size: 22px; |
| line-height: 1; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .footer-note { |
| padding: 28px 5vw 44px; |
| color: var(--g3); |
| font-size: 13px; |
| font-weight: 300; |
| line-height: 1.7; |
| border-top: 1px solid var(--g1); |
| background: var(--white); |
| } |
|
|
| @media (max-width: 1180px) { |
| .split-block, |
| .split-block.dense { |
| grid-template-columns: 1fr; |
| gap: 18px; |
| } |
|
|
| .split-copy { |
| max-width: var(--measure); |
| } |
| } |
|
|
| @media (max-width: 980px) { |
| .sidenav { position: static; width: 100%; } |
| body { display: block; } |
| .main { margin-left: 0; width: 100%; } |
| .hero, section.page, .footer-note { padding-left: 20px; padding-right: 20px; } |
| .section-head, .lang-grid { grid-template-columns: 1fr; } |
| .rule-grid { grid-template-columns: 1fr; } |
| .variant-grid.cols-3, .variant-grid.cols-4, |
| .gallery-grid.cols-3, .gallery-grid.cols-4, |
| .resource-grid.cols-3, .do-dont-grid { grid-template-columns: 1fr; } |
| .variant-grid.cols-2 { grid-template-columns: 1fr; } |
| .resource-grid.cols-2, .gallery-grid.cols-2 { grid-template-columns: 1fr; } |
| .swatch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .spec-table th, .spec-table td { |
| display: block; |
| width: 100%; |
| padding-right: 0; |
| } |
| .spec-table th { |
| padding-bottom: 6px; |
| border-bottom: none; |
| } |
| .spec-table td { |
| padding-top: 0; |
| } |
| .tsb-header { |
| display: block; |
| } |
| .tsb-spec { |
| display: block; |
| margin-top: 6px; |
| } |
| } |
|
|
| @media (max-width: 620px) { |
| .hero h1 { max-width: 10ch; } |
| .hero-desc, |
| .section-desc, |
| .block-text, |
| .split-copy, |
| .prose-block, |
| .block-note { |
| max-width: none; |
| } |
| .swatch-row { grid-template-columns: 1fr; } |
| } |
| </style> |
| </head> |
| <body> |
| <aside class="sidenav"> |
| <div class="nav-brand" id="navBrand"> |
| <img src="https://res.cloudinary.com/ico-uniforms/image/upload/q_auto/f_auto/v1711559046/ICO-LOGO-BOX-WHITE_qg0wr0.svg" alt="ICO Uniforms" /> |
| <div class="nav-brand-sub">Brand Standards 1.0</div> |
| </div> |
| <nav class="nav-links" id="navLinks"><div class="nav-group has-children" data-section-group="foundation"> |
| <a class="nav-parent" href="#foundation"> |
| <span class="nav-number">01</span> |
| <span class="nav-label">Foundation</span> |
| </a> |
| <div class="nav-children"><a class="nav-child" href="#foundation-overview">Overview</a><a class="nav-child" href="#foundation-brand-position">Brand position</a><a class="nav-child" href="#foundation-brand-promise">Brand promise</a><a class="nav-child" href="#foundation-what-ico-is">What ICO is</a><a class="nav-child" href="#foundation-core-belief">Core belief</a><a class="nav-child" href="#foundation-audience">Audience</a><a class="nav-child" href="#foundation-why-clients-choose-ico">Why clients choose ICO</a><a class="nav-child" href="#foundation-value-proposition">Value proposition</a><a class="nav-child" href="#foundation-system-over-fragments">System over fragments</a></div> |
| </div><div class="nav-group has-children is-collapsed" data-section-group="language"> |
| <a class="nav-parent" href="#language"> |
| <span class="nav-number">02</span> |
| <span class="nav-label">Language</span> |
| </a> |
| <div class="nav-children"><a class="nav-child" href="#language-language-patterns">Language patterns</a><a class="nav-child" href="#language-voice-pillars">Voice pillars</a></div> |
| </div><div class="nav-group has-children is-collapsed" data-section-group="logo"> |
| <a class="nav-parent" href="#logo"> |
| <span class="nav-number">03</span> |
| <span class="nav-label">Logo</span> |
| </a> |
| <div class="nav-children"><a class="nav-child" href="#logo-logo-variants">Logo variants</a><a class="nav-child" href="#logo-logo-usage-rules">Logo usage rules</a><a class="nav-child" href="#logo-logo-do-don-t">Logo do / don't</a></div> |
| </div><div class="nav-group has-children is-collapsed" data-section-group="colour"> |
| <a class="nav-parent" href="#colour"> |
| <span class="nav-number">04</span> |
| <span class="nav-label">Brand Colours</span> |
| </a> |
| <div class="nav-children"><a class="nav-child" href="#colour-base-palette">Base palette</a><a class="nav-child" href="#colour-accent-cool-stone">Accent — Cool Stone</a><a class="nav-child" href="#colour-background-rules">Background rules</a><a class="nav-child" href="#colour-colour-usage-rules">Colour usage rules</a><a class="nav-child" href="#colour-colour-do-don-t">Colour do / don't</a></div> |
| </div><div class="nav-group has-children is-collapsed" data-section-group="contextual-colour"> |
| <a class="nav-parent" href="#contextual-colour"> |
| <span class="nav-number">05</span> |
| <span class="nav-label">Contextual colour</span> |
| </a> |
| <div class="nav-children"><a class="nav-child" href="#contextual-colour-core-principle">Core principle</a><a class="nav-child" href="#contextual-colour-when-to-use-it">When to use it</a><a class="nav-child" href="#contextual-colour-sampling-rule">Sampling rule</a><a class="nav-child" href="#contextual-colour-sampling-examples">Sampling examples</a><a class="nav-child" href="#contextual-colour-layout-application">Layout application</a><a class="nav-child" href="#contextual-colour-layout-examples">Layout examples</a><a class="nav-child" href="#contextual-colour-typographic-safety">Typographic safety</a><a class="nav-child" href="#contextual-colour-type-on-colour">Type on colour</a><a class="nav-child" href="#contextual-colour-litmus-test">Litmus test</a></div> |
| </div><div class="nav-group has-children is-collapsed" data-section-group="typography"> |
| <a class="nav-parent" href="#typography"> |
| <span class="nav-number">06</span> |
| <span class="nav-label">Typography</span> |
| </a> |
| <div class="nav-children"><a class="nav-child" href="#typography-typefaces">Typefaces</a><a class="nav-child" href="#typography-headline-mixing">Headline mixing</a><a class="nav-child" href="#typography-type-scale">Type scale</a><a class="nav-child" href="#typography-leading">Leading</a><a class="nav-child" href="#typography-kerning">Kerning</a><a class="nav-child" href="#typography-typography-rules">Typography rules</a><a class="nav-child" href="#typography-type-do-don-t">Type do / don't</a></div> |
| </div><div class="nav-group has-children is-collapsed" data-section-group="photography"> |
| <a class="nav-parent" href="#photography"> |
| <span class="nav-number">07</span> |
| <span class="nav-label">Photography</span> |
| </a> |
| <div class="nav-children"><a class="nav-child" href="#photography-the-clothing-is-the-subject">The clothing is the subject</a><a class="nav-child" href="#photography-photography-rules">Photography rules</a><a class="nav-child" href="#photography-photography-modes">Photography modes</a><a class="nav-child" href="#photography-image-guardrails">Image guardrails</a></div> |
| </div><div class="nav-group has-children is-collapsed" data-section-group="layout"> |
| <a class="nav-parent" href="#layout"> |
| <span class="nav-number">08</span> |
| <span class="nav-label">Layout</span> |
| </a> |
| <div class="nav-children"><a class="nav-child" href="#layout-spacing-system">Spacing system</a><a class="nav-child" href="#layout-layout-patterns">Layout patterns</a><a class="nav-child" href="#layout-minimal-empty">Minimal ≠ empty</a><a class="nav-child" href="#layout-layout-do-don-t">Layout do / don't</a></div> |
| </div><div class="nav-group has-children is-collapsed" data-section-group="resources"> |
| <a class="nav-parent" href="#resources"> |
| <span class="nav-number">09</span> |
| <span class="nav-label">Resources</span> |
| </a> |
| <div class="nav-children"><a class="nav-child" href="#resources-asset-library">Asset library</a><a class="nav-child" href="#resources-when-to-escalate">When to escalate</a></div> |
| </div></nav> |
| </aside> |
| <main class="main"> |
| <header class="hero"> |
| <div class="hero-inner"> |
| <div class="hero-eyebrow">Version 1.0 · 2026-04-20</div> |
| <h1>Brand Standards</h1> |
| <p class="hero-desc">These brand standards define how ICO should appear across every touchpoint — website, decks, portals, proposals, and print. The goal is a brand that stays consistent, sharp, and unmistakably ICO.</p> |
| <div class="hero-pills"><div class="hero-pill">Typography system</div><div class="hero-pill">Colour palette</div><div class="hero-pill">Voice & tone</div><div class="hero-pill">Photography direction</div><div class="hero-pill">Layout rules</div><div class="hero-pill">Component library</div></div> |
| </div> |
| </header> |
| <div id="app"> |
| <section class="page" id="foundation"> |
| <div class="section-inner"> |
| <div class="section-head"> |
| <div class="section-kicker">01 · Foundation</div> |
| <div> |
| <h2 class="section-title">The strategic core of the ICO brand</h2> |
| <div class="section-desc">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.</div> |
| </div> |
| </div> |
| <div class="stack"><div id="foundation-overview" data-subsection-anchor="true"><div class="block-shell block-shell-half"><div class="prose-block"> |
| <h3 class="block-title">Overview</h3> |
| <div class="block-text">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.</div> |
| <div class="block-note">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.</div> |
| </div></div></div><div id="foundation-brand-position" data-subsection-anchor="true"><div class="block-shell block-shell-half"><div class="prose-block"> |
| <h3 class="block-title">Brand position</h3> |
| |
| <div class="quote-block"><span class="quote-mark">"</span>The creative partner behind the world's best dressed brands.<span class="quote-mark">"</span></div> |
| <div class="quote-body">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.</div> |
| |
| <div class="block-note">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.</div> |
| </div></div></div><div id="foundation-brand-promise" data-subsection-anchor="true"><div class="block-shell block-shell-half"><div class="prose-block"> |
| <h3 class="block-title">Brand promise</h3> |
| |
| <div class="quote-block"><span class="quote-mark">"</span>A relentless pursuit toward a better uniform experience.<span class="quote-mark">"</span></div> |
| <div class="quote-body">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.</div> |
| |
| <div class="block-note">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.</div> |
| </div></div></div><div id="foundation-what-ico-is" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">What ICO is</div> |
| <h3 class="block-title">What ICO is and is not</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="rule-grid"> |
| <div class="rule-card"> |
| <div class="rule-card-title">What ICO is</div> |
| <div class="rule-card-text">A design-led uniform program partner that brings together product, styling, rollout, and long-term management into one system.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">What ICO is not</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">How position and promise work together</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="foundation-core-belief" data-subsection-anchor="true"><div class="block-shell block-shell-half"><div class="prose-block"> |
| <h3 class="block-title">Core belief</h3> |
| <div class="block-text">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.</div> |
| <div class="block-note"><strong>Why it matters —</strong> 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.</div> |
| </div></div></div><div id="foundation-audience" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Audience</div> |
| <h3 class="block-title">Who the brand needs to speak to</h3> |
| <div class="block-text split-copy">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.</div> |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>Brand leaders</th><td>Need confidence that the program reflects the brand correctly and feels considered, elevated, and on-brand.</td></tr><tr><th>Operators</th><td>Need clarity, speed, consistency, and a partner who understands rollout, logistics, and long-term program management.</td></tr><tr><th>Ownership / procurement</th><td>Need a solution that is scalable, rational, and easier to manage without sacrificing quality or presentation.</td></tr><tr><th>Wearers</th><td>Need uniforms that feel right in the role, look professional, and support a better day-to-day experience on the job.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="foundation-why-clients-choose-ico" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Why clients choose ICO</div> |
| <h3 class="block-title">Why clients choose ICO</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="rule-grid"> |
| <div class="rule-card"> |
| <div class="rule-card-title">Taste</div> |
| <div class="rule-card-text">The work looks considered. ICO brings a sharper eye to fit, styling, and brand alignment than a traditional uniform supplier.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">System thinking</div> |
| <div class="rule-card-text">Programs are built as systems, not disconnected product choices. Product, rollout, communication, and management are designed to work together.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Speed with structure</div> |
| <div class="rule-card-text">ICO's in-stock foundation helps programs move faster without making the outcome feel generic or compromised.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Operational credibility</div> |
| <div class="rule-card-text">The company can carry an idea from concept through implementation and ongoing management. The creative story is backed by real execution.</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="foundation-value-proposition" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Value proposition</div> |
| <h3 class="block-title">Value proposition</h3> |
| |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>What ICO delivers</th><td>A better uniform experience through stronger product choices, clearer program logic, and more thoughtful brand execution.</td></tr><tr><th>How ICO is different</th><td>ICO combines creative authority and operational rigor in one partner. Most companies lean heavily toward one side. ICO has to do both.</td></tr><tr><th>What the client gets</th><td>A program that looks more intentional, feels easier to run, and performs more consistently over time.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="foundation-system-over-fragments" data-subsection-anchor="true"><div class="block-shell block-shell-half"><div class="prose-block"> |
| <h3 class="block-title">System over fragments</h3> |
| <div class="block-text">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.</div> |
| <div class="block-note"><strong>Why it matters —</strong> 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.</div> |
| </div></div></div></div> |
| </div> |
| </section> |
| <section class="page" id="language"> |
| <div class="section-inner"> |
| <div class="section-head"> |
| <div class="section-kicker">02 · Language</div> |
| <div> |
| <h2 class="section-title">How ICO should sound</h2> |
| <div class="section-desc">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.</div> |
| </div> |
| </div> |
| <div class="stack"><div id="language-language-patterns" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Language patterns</div> |
| <h3 class="block-title">Approved language patterns</h3> |
| <div class="block-text split-copy">Use simple, grounded phrasing that supports the brand without sounding over-written. ICO has creative authority — it doesn't need to announce it.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="lang-grid"> |
| <div class="lang-panel"> |
| <div class="lang-panel-note">Approved language patterns</div> |
| <div class="lang-list"> |
| <div class="lang-item"> |
| <div class="lang-item-label">Positioning</div> |
| <div class="lang-good">We design and manage uniform programs.</div> |
| <div class="lang-bad">Avoid: We provide comprehensive end-to-end apparel solutions.</div> |
| </div> |
| <div class="lang-item"> |
| <div class="lang-item-label">Programs</div> |
| <div class="lang-good">A better uniform experience.</div> |
| <div class="lang-bad">Avoid: A next-generation wardrobe ecosystem.</div> |
| </div> |
| <div class="lang-item"> |
| <div class="lang-item-label">Product</div> |
| <div class="lang-good">In-stock. In-style.</div> |
| <div class="lang-bad">Avoid: Our proprietary assortment architecture.</div> |
| </div> |
| <div class="lang-item"> |
| <div class="lang-item-label">Scale</div> |
| <div class="lang-good">5 employees or 50,000 — we have a program for you.</div> |
| <div class="lang-bad">Avoid: We serve clients across the full organizational spectrum.</div> |
| </div> |
| <div class="lang-item"> |
| <div class="lang-item-label">Tone</div> |
| <div class="lang-good">Clear, confident, and slightly irreverent.</div> |
| <div class="lang-bad">Avoid: Over-polished, vague, or full of superlatives.</div> |
| </div> |
| </div> |
| </div> |
| <div class="lang-panel"> |
| <div class="lang-panel-note">How to apply this</div> |
| <div class="lang-aside">Use this section to train writers, designers, agencies, and sales teams on how ICO should sound in decks, websites, and program documents.</div> |
| <div class="block-note" style="margin-top:20px;padding-top:20px">The hero line — <em>The creative partner behind the world's best dressed brands</em> — works because it implies both creative credibility and operational capability in one sentence. That balance should be present in every piece of ICO communication.</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="language-voice-pillars" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Voice pillars</div> |
| <h3 class="block-title">Voice pillars</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="rule-grid"> |
| <div class="rule-card"> |
| <div class="rule-card-title">Direct</div> |
| <div class="rule-card-text"><strong>What it is:</strong> "We design and manage uniform programs."<br><strong>What it isn't:</strong> "We provide comprehensive end-to-end apparel solutions."<br><br>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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Confident</div> |
| <div class="rule-card-text"><strong>What it is:</strong> "ICO designs and manages uniform programs for teams of every size."<br><strong>What it isn't:</strong> "ICO tries to help brands find a better apparel solution."<br><br>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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Irreverent but mature</div> |
| <div class="rule-card-text"><strong>What it is:</strong> "In-stock. In-style."<br><strong>What it isn't:</strong> "We make uniforms fun!"<br><br>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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Operationally credible</div> |
| <div class="rule-card-text"><strong>What it is:</strong> "We can roll out a uniform program across 50,000 employees."<br><strong>What it isn't:</strong> "We handle everything for everyone, everywhere."<br><br>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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Specific, not inflated</div> |
| <div class="rule-card-text"><strong>What it is:</strong> "We design, build, and manage uniform programs."<br><strong>What it isn't:</strong> "We deliver transformative, best-in-class wardrobe ecosystems."<br><br>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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Human, not casual</div> |
| <div class="rule-card-text"><strong>What it is:</strong> "Clear, confident, and slightly irreverent."<br><strong>What it isn't:</strong> "Hey! We’re so excited to partner with you!"<br><br>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.</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div></div> |
| </div> |
| </section> |
| <section class="page" id="logo"> |
| <div class="section-inner"> |
| <div class="section-head"> |
| <div class="section-kicker">03 · Logo</div> |
| <div> |
| <h2 class="section-title">Logo rules that scale</h2> |
| <div class="section-desc">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.</div> |
| </div> |
| </div> |
| <div class="stack"><div id="logo-logo-variants" data-subsection-anchor="true"><div class="block-shell block-shell-feature"><div class="feature-block"> |
| |
| <div class="feature-head"> |
| <div class="split-label">Logo variants</div> |
| <h3 class="block-title">Approved logo variants</h3> |
| <div class="block-text">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.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="variant-grid cols-4"> |
| <div class="variant-card"> |
| <div class="variant-visual has-image" style="background:#F4F4F2;"><img src="https://res.cloudinary.com/ico-uniforms/image/upload/q_auto/f_auto/v1711559053/ICO-LOGO-BOX-BLACK_ietobw.svg" alt="ICO full lockup black" /></div> |
| <div class="variant-body"> |
| <h4>Full lockup — black</h4> |
| <p>Default on light backgrounds for websites, decks, documents, and most formal brand applications.</p> |
| <div class="variant-meta">Default</div> |
| </div> |
| </div> |
| <div class="variant-card"> |
| <div class="variant-visual has-image" style="background:#181818;"><img src="https://res.cloudinary.com/ico-uniforms/image/upload/q_auto/f_auto/v1711559046/ICO-LOGO-BOX-WHITE_qg0wr0.svg" alt="ICO full lockup white" /></div> |
| <div class="variant-body"> |
| <h4>Full lockup — white</h4> |
| <p>Use on dark fields where the full identity needs to read clearly and feel deliberate.</p> |
| <div class="variant-meta">Approved</div> |
| </div> |
| </div> |
| <div class="variant-card"> |
| <div class="variant-visual has-image" style="background:#F4F4F2;"><img src="https://res.cloudinary.com/ico-uniforms/image/upload/q_auto/f_auto/v1711559073/ICO-LOGO-SHORT-BLACK_qkbcup.svg" alt="ICO short mark black" /></div> |
| <div class="variant-body"> |
| <h4>Short mark — black</h4> |
| <p>For more casual touchpoints like tags and collateral when the client or wearer already knows ICO.</p> |
| <div class="variant-meta">Secondary</div> |
| </div> |
| </div> |
| <div class="variant-card"> |
| <div class="variant-visual has-image" style="background:#181818;"><img src="https://res.cloudinary.com/ico-uniforms/image/upload/q_auto/f_auto/v1711559066/ICO-LOGO-SHORT-WHITE_tgbm33.svg" alt="ICO short mark white" /></div> |
| <div class="variant-body"> |
| <h4>Short mark — white</h4> |
| <p>Use the short mark on dark applications only when the context is already familiar and the full lockup is not needed.</p> |
| <div class="variant-meta">Secondary</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="logo-logo-usage-rules" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Logo usage rules</div> |
| <h3 class="block-title">Usage rules</h3> |
| |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>Contrast</th><td>Always use the variant that reads immediately. Low-contrast use is off-brand.</td></tr><tr><th>Colour</th><td>Black or white only. No exceptions for campaigns, portals, or co-branded applications without explicit approval.</td></tr><tr><th>Full vs. short mark</th><td>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.</td></tr><tr><th>Clear space</th><td>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.</td></tr><tr><th>Minimum size</th><td>Digital: 80px wide minimum. Print: 20mm wide minimum.</td></tr><tr><th>Stretching</th><td>Never distort, skew, outline, add shadows, or otherwise stylize the mark.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="logo-logo-do-don-t" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Logo do / don't</div> |
| <h3 class="block-title">Do / Don't</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="do-dont-grid"> |
| <div class="compare-card good"> |
| <div class="compare-body"> |
| <div class="compare-label">Do</div> |
| <h4>Strong contrast, room to breathe</h4> |
| <p>Choose the variant that reads immediately. Give the mark clear space. Use it at a considered size.</p> |
| </div> |
| <div class="compare-visual">White logo on clean dark field |
| Generous clear space |
| No competing elements</div> |
| </div> |
| <div class="compare-card bad"> |
| <div class="compare-body"> |
| <div class="compare-label">Don't</div> |
| <h4>Do not improvise</h4> |
| <p>Avoid low contrast, effects, recolours, or decorative treatments. The logo is not a design element — it is a mark.</p> |
| </div> |
| <div class="compare-visual">Grey logo on busy photo |
| Drop shadow added |
| Outline version |
| Colour fill |
| Stretched proportions</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div></div> |
| </div> |
| </section> |
| <section class="page" id="colour"> |
| <div class="section-inner"> |
| <div class="section-head"> |
| <div class="section-kicker">04 · Brand Colours</div> |
| <div> |
| <h2 class="section-title">A neutral system with one warm accent</h2> |
| <div class="section-desc">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.</div> |
| </div> |
| </div> |
| <div class="stack"><div id="colour-base-palette" data-subsection-anchor="true"><div class="block-shell block-shell-feature"><div class="split-block"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Base palette</div> |
| <h3 class="block-title">Base palette — neutral greys</h3> |
| <div class="block-text split-copy">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.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="swatch-row"> |
| <div class="swatch-item"> |
| <div class="swatch-block" style="background:#141414;"></div> |
| <div class="swatch-meta"> |
| <div class="swatch-name">Ink</div> |
| <div class="swatch-hex">#141414</div> |
| <div class="swatch-use">Primary text · buttons · dark sections · nav</div> |
| </div> |
| </div> |
| <div class="swatch-item"> |
| <div class="swatch-block" style="background:#444444;"></div> |
| <div class="swatch-meta"> |
| <div class="swatch-name">Charcoal</div> |
| <div class="swatch-hex">#444444</div> |
| <div class="swatch-use">Dark supporting text · subtle dark elements</div> |
| </div> |
| </div> |
| <div class="swatch-item"> |
| <div class="swatch-block" style="background:#676767;"></div> |
| <div class="swatch-meta"> |
| <div class="swatch-name">Mid Grey</div> |
| <div class="swatch-hex">#676767</div> |
| <div class="swatch-use">Body copy · secondary text · muted labels</div> |
| </div> |
| </div> |
| <div class="swatch-item"> |
| <div class="swatch-block" style="background:#C0C0C0;"></div> |
| <div class="swatch-meta"> |
| <div class="swatch-name">Light Grey</div> |
| <div class="swatch-hex">#C0C0C0</div> |
| <div class="swatch-use">Dot indicators · inactive states</div> |
| </div> |
| </div> |
| <div class="swatch-item"> |
| <div class="swatch-block" style="background:#E8E8E8;"></div> |
| <div class="swatch-meta"> |
| <div class="swatch-name">Hairline</div> |
| <div class="swatch-hex">#E8E8E8</div> |
| <div class="swatch-use">All borders · dividers · ghost numbers</div> |
| </div> |
| </div> |
| <div class="swatch-item"> |
| <div class="swatch-block" style="background:#F4F4F2;border:1px solid var(--g1)"></div> |
| <div class="swatch-meta"> |
| <div class="swatch-name">Cream</div> |
| <div class="swatch-hex">#F4F4F2</div> |
| <div class="swatch-use">Page background</div> |
| </div> |
| </div> |
| <div class="swatch-item"> |
| <div class="swatch-block" style="background:#FFFFFF;border:1px solid var(--g1)"></div> |
| <div class="swatch-meta"> |
| <div class="swatch-name">White</div> |
| <div class="swatch-hex">#FFFFFF</div> |
| <div class="swatch-use">Card backgrounds · alternate sections</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="colour-accent-cool-stone" data-subsection-anchor="true"><div class="block-shell block-shell-feature"><div class="split-block"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Accent — Cool Stone</div> |
| <h3 class="block-title">Accent — Cool Stone</h3> |
| <div class="block-text split-copy">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.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="swatch-row single"> |
| <div class="swatch-item"> |
| <div class="swatch-block" style="background:#9A8F84;"></div> |
| <div class="swatch-meta"> |
| <div class="swatch-name">Cool Stone</div> |
| <div class="swatch-hex">#9A8F84</div> |
| <div class="swatch-use">Eyebrows · labels · hovers · accents only</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="colour-background-rules" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Background rules</div> |
| <h3 class="block-title">Light and dark background rules</h3> |
| <div class="block-text split-copy">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.</div> |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>Light mode default</th><td>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.</td></tr><tr><th>When to use white</th><td>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.</td></tr><tr><th>Text on light backgrounds</th><td>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.</td></tr><tr><th>Dark mode usage</th><td>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.</td></tr><tr><th>Text on dark backgrounds</th><td>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.</td></tr><tr><th>What to avoid</th><td>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.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="colour-colour-usage-rules" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Colour usage rules</div> |
| <h3 class="block-title">Colour usage rules</h3> |
| |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>Eyebrow labels</th><td>Always Cool Stone (#9A8F84) at 10px, weight 500, ALL CAPS, tracked at 0.22em.</td></tr><tr><th>Body text</th><td>Mid Grey (#676767) for supporting copy. Never pure black (#000000) for body — use Ink (#141414) only for headlines and primary text.</td></tr><tr><th>Light backgrounds</th><td>Default to Cream for page fields and White for contained cards or modules. The contrast between the two should stay subtle, not stark.</td></tr><tr><th>Borders & dividers</th><td>Hairline (#E8E8E8) throughout. Never use a coloured border. 1px only — never thicker except for the active nav indicator (2px Cool Stone).</td></tr><tr><th>Dark sections</th><td>Background #181818 (slightly off-black, not pure black). Text #F4F4F2 for headlines and rgba(244,244,242,0.72) for supporting copy.</td></tr><tr><th>Accent restriction</th><td>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.</td></tr><tr><th>No additional colours</th><td>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.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="colour-colour-do-don-t" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Colour do / don't</div> |
| <h3 class="block-title">Colour discipline</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="do-dont-grid"> |
| <div class="compare-card good"> |
| <div class="compare-body"> |
| <div class="compare-label">Do</div> |
| <h4>Let the system breathe</h4> |
| <p>Black headlines on cream, grey body copy, hairline borders, stone eyebrow labels. Photography provides colour. The palette stays neutral.</p> |
| </div> |
| <div class="compare-visual">DRESSED BY ICO |
| Kimpton · Marriott · Hilton |
|
|
| — body copy in #676767 |
| — hairline borders in #E8E8E8</div> |
| </div> |
| <div class="compare-card bad"> |
| <div class="compare-body"> |
| <div class="compare-label">Don't</div> |
| <h4>Do not add colour</h4> |
| <p>Do not introduce additional accent colours, gradient backgrounds, or coloured section backgrounds. Every colour addition dilutes the system.</p> |
| </div> |
| <div class="compare-visual">Gradient header |
| Coloured cards |
| Multiple accent colours |
| Coloured borders</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div></div> |
| </div> |
| </section> |
| <section class="page" id="contextual-colour"> |
| <div class="section-inner"> |
| <div class="section-head"> |
| <div class="section-kicker">05 · Contextual Colour</div> |
| <div> |
| <h2 class="section-title">How colour enters the system without becoming the brand</h2> |
| <div class="section-desc">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.</div> |
| </div> |
| </div> |
| <div class="stack"><div id="contextual-colour-core-principle" data-subsection-anchor="true"><div class="block-shell block-shell-half"><div class="prose-block"> |
| <h3 class="block-title">Core principle</h3> |
| <div class="block-text">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.</div> |
| <div class="block-note"><strong>Why it matters —</strong> This keeps the brand restrained. The product and imagery still carry the emotion. Colour supports the layout, but it never becomes the identity itself.</div> |
| </div></div></div><div id="contextual-colour-when-to-use-it" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">When to use it</div> |
| <h3 class="block-title">When contextual colour is appropriate</h3> |
| |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>Use it for</th><td>Image-led storytelling, product spotlights, campaign moments, lookbooks, landing pages, and collateral where colour helps unify photography and layout.</td></tr><tr><th>Do not use it for</th><td>Core UI, navigation, standard informational pages, dense decks, tables, forms, or any part of the system that should remain neutral and purely functional.</td></tr><tr><th>What it is</th><td>A contextual application method that borrows hue from photography or product.</td></tr><tr><th>What it is not</th><td>Not a secondary brand palette, not a campaign colour system, and not a licence to add arbitrary accent colours.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="contextual-colour-sampling-rule" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Sampling rule</div> |
| <h3 class="block-title">The sampling rule</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="rule-grid"> |
| <div class="rule-card"> |
| <div class="rule-card-title">Primary source</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Secondary source</div> |
| <div class="rule-card-text">If the product is intentionally neutral, sample from the environment only when it strengthens the mood without overpowering the garment.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Tonal shift</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">One hue at a time</div> |
| <div class="rule-card-text">Use one sampled hue per composition. If multiple colours from the image compete for attention, the layout will stop feeling controlled.</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="contextual-colour-sampling-examples" data-subsection-anchor="true"><div class="block-shell block-shell-feature"><div class="feature-block"> |
| |
| <div class="feature-head"> |
| <div class="split-label">Sampling examples</div> |
| <h3 class="block-title">Sampling examples</h3> |
| <div class="block-text">Placeholders below show how sampled colour should stay tied to product or image context. Click any example to enlarge it.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="gallery-grid cols-4"> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%237E8C74%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23141414%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3EDominant%20garment%20sample%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23141414%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3EColour%20block%20pulled%20from%20the%20hero%20garment%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Primary source placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Primary source</h4><p>Sample from the dominant product tone so the colour reads as a continuation of the garment.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%23B58C6C%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23141414%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3EEnvironmental%20sample%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23141414%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3EWall%20or%20flooring%20tone%20used%20as%20a%20mood%20field%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Secondary source placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Secondary source</h4><p>Use the environment only when it supports the mood without overtaking the product.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%235E6B7A%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23F4F4F2%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3ESubtle%20tonal%20shift%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23F4F4F2%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3ESampled%20hue%20moved%20slightly%20darker%20for%20depth%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Tonal shift placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Tonal shift</h4><p>A slight shift in luminosity can create depth while still feeling sourced from the image.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%238B6F62%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23141414%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3ESingle-hue%20composition%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23141414%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3EOne%20sampled%20field%20carrying%20the%20composition%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="One hue at a time placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>One hue at a time</h4><p>Keep the composition on one sampled hue so the page stays controlled and editorial.</p></div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="contextual-colour-layout-application" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Layout application</div> |
| <h3 class="block-title">Layout application</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="rule-grid"> |
| <div class="rule-card"> |
| <div class="rule-card-title">Architectural, not decorative</div> |
| <div class="rule-card-text">Contextual colour should appear as a field, panel, or grounded surface. It should not show up as random highlights, badges, or ornamental fragments.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Flush to the image</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Full field or grid-locked</div> |
| <div class="rule-card-text">Use colour blocks only when they span a meaningful field or align cleanly to the layout grid. Avoid awkward partial shapes that feel improvised.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Return to neutral</div> |
| <div class="rule-card-text">A colour-led moment should eventually resolve back into the base palette. The neutral system still sets the resting state of the brand.</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="contextual-colour-layout-examples" data-subsection-anchor="true"><div class="block-shell block-shell-feature"><div class="feature-block"> |
| |
| <div class="feature-head"> |
| <div class="split-label">Layout examples</div> |
| <h3 class="block-title">Layout examples</h3> |
| <div class="block-text">These placeholders show the difference between contextual colour used as structure and colour used as decoration. Click any example to enlarge it.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="gallery-grid cols-4"> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%23B4A28E%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23141414%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3EArchitectural%20field%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23141414%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3EGrounded%20colour%20panel%20supporting%20the%20layout%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Architectural field placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Architectural field</h4><p>Colour appears as a grounded surface, not a floating accent shape.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%23727D67%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23141414%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3EFlush%20to%20image%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23141414%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3ENo%20gap%20between%20image%20and%20sampled%20field%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Flush to the image placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Flush to the image</h4><p>The sampled block meets the image cleanly so both elements read as one composition.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%23667A87%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23F4F4F2%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3EGrid-locked%20field%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23F4F4F2%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3EColour%20aligned%20to%20the%20same%20page%20rhythm%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Grid-locked field placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Grid-locked field</h4><p>The colour block aligns exactly to the same spacing logic as the rest of the layout.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%239A8F84%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23141414%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3EReturn%20to%20neutral%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23141414%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3EColour%20section%20handing%20back%20to%20the%20base%20palette%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Return to neutral placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Return to neutral</h4><p>A colour-led moment resolves back into cream, white, hairline, and stone.</p></div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="contextual-colour-typographic-safety" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Typographic safety</div> |
| <h3 class="block-title">Typographic safety</h3> |
| <div class="block-text split-copy">Contextual colour must never compromise the ICO type system. The typography rules stay the same even when the background shifts.</div> |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>Dark fields</th><td>Use Cream (#F4F4F2) for headlines and supporting text on dark sampled backgrounds.</td></tr><tr><th>Light fields</th><td>Use Ink (#141414) for headlines and Mid Grey (#676767) for body copy on light sampled backgrounds.</td></tr><tr><th>Mid-tone exclusion</th><td>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.</td></tr><tr><th>Priority</th><td>Legibility beats colour fidelity. If the exact sampled tone fails, adjust slightly or move the text elsewhere.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="contextual-colour-type-on-colour" data-subsection-anchor="true"><div class="block-shell block-shell-feature"><div class="feature-block"> |
| |
| <div class="feature-head"> |
| <div class="split-label">Type on colour</div> |
| <h3 class="block-title">Type on colour examples</h3> |
| <div class="block-text">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.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="gallery-grid cols-4"> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%233F4B59%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23F4F4F2%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3ECream%20on%20dark%20field%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23F4F4F2%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3EHeadline%20and%20copy%20sit%20clearly%20on%20a%20dark%20sample%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Dark field typography placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Dark field</h4><p>Cream typography on a dark sampled background keeps the text clear and controlled.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%23D4C7B7%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23141414%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3EInk%20on%20light%20field%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23141414%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3ENeutral%20type%20system%20preserved%20on%20a%20light%20sample%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Light field typography placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Light field</h4><p>Ink headlines and Mid Grey body copy are still the default on light samples.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%238B847A%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23F4F4F2%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3EMid-tone%20exclusion%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23F4F4F2%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3ESurface%20only%3A%20no%20text%20set%20on%20this%20field%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Mid-tone exclusion placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Mid-tone exclusion</h4><p>A true mid-tone can be used as a visual surface, but the type should move elsewhere.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual has-image"><img src="data:image/svg+xml;charset=UTF-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201200%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221600%22%20height%3D%221200%22%20fill%3D%22%23596A58%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%221480%22%20height%3D%221080%22%20fill%3D%22rgba(255%2C255%2C255%2C0.06)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.12)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22190%22%20y%3D%22210%22%20width%3D%22600%22%20height%3D%22690%22%20rx%3D%220%22%20fill%3D%22url(%23grain)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22210%22%20width%3D%22520%22%20height%3D%22280%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22560%22%20width%3D%22430%22%20height%3D%22188%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%22860%22%20y%3D%22782%22%20width%3D%22290%22%20height%3D%2212%22%20fill%3D%22%239A8F84%22%20opacity%3D%220.82%22%2F%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22620%22%20fill%3D%22%23F4F4F2%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2262%22%20font-weight%3D%22300%22%20letter-spacing%3D%22-1.5%22%3ELegibility%20first%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Ctext%20x%3D%22860%22%20y%3D%22700%22%20fill%3D%22%23F4F4F2%22%20opacity%3D%220.68%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20font-weight%3D%22400%22%3EA%20slightly%20shifted%20sample%20supporting%20readable%20type%3C%2Ftext%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22grain%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22rgba(255%2C255%2C255%2C0.04)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22rgba(20%2C20%2C20%2C0.05)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2282%22%20cy%3D%2254%22%20r%3D%2212%22%20fill%3D%22rgba(255%2C255%2C255%2C0.16)%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2258%22%20cy%3D%2288%22%20r%3D%2222%22%20fill%3D%22rgba(20%2C20%2C20%2C0.08)%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20" alt="Legibility first placeholder" data-enlargeable="true" /></div> |
| <div class="gallery-body"><h4>Legibility first</h4><p>If the exact sampled tone fails, adjust the tone slightly rather than sacrificing readability.</p></div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="contextual-colour-litmus-test" data-subsection-anchor="true"><div class="block-shell block-shell-half"><div class="prose-block"> |
| <h3 class="block-title">The litmus test</h3> |
| <div class="block-text">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.</div> |
| <div class="block-note"><strong>Why it matters —</strong> The product must remain the source of the hue. Contextual colour works only when it reinforces what is already present in the imagery.</div> |
| </div></div></div></div> |
| </div> |
| </section> |
| <section class="page" id="typography"> |
| <div class="section-inner"> |
| <div class="section-head"> |
| <div class="section-kicker">06 · Typography</div> |
| <div> |
| <h2 class="section-title">Two typefaces. <span class="serif">Strict rules.</span></h2> |
| <div class="section-desc">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.</div> |
| </div> |
| </div> |
| <div class="stack"><div id="typography-typefaces" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Typefaces</div> |
| <h3 class="block-title">The two typefaces</h3> |
| <div class="block-text split-copy">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.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div style="display:grid;gap:18px"> |
| <div class="type-specimen-block"> |
| <div class="tsb-header"> |
| <span class="tsb-label">Primary — DM Sans</span> |
| <span class="tsb-spec">Weight 300 / 400 / 500 · All UI, headings, body, labels</span> |
| </div> |
| <div class="tsb-body" style="padding: 32px 24px;"><div style="font-family:'DM Sans',sans-serif;font-size:48px;font-weight:300;line-height:1;letter-spacing:-.02em;color:#141414;margin-bottom:12px">Uniform programs</div><div style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:300;line-height:1.8;color:#676767">We design, build, and manage uniform programs for teams of every size — from single properties to global portfolios.</div></div> |
| </div> |
| <div class="type-specimen-block"> |
| <div class="tsb-header"> |
| <span class="tsb-label">Display — Cormorant Garamond</span> |
| <span class="tsb-spec">Weight 300 / 400 · Regular by default · Italic for accent only · Never below 24px</span> |
| </div> |
| <div class="tsb-body dark" style="padding: 32px 24px;"><div style="font-family:'Cormorant Garamond',serif;font-style:normal;font-weight:300;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.01em;color:#F4F4F2">The creative partner behind the world's best dressed brands.</div></div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="typography-headline-mixing" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Headline mixing</div> |
| <h3 class="block-title">Approved headline mixing</h3> |
| <div class="block-text split-copy">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.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div style="display:grid;gap:18px"> |
| <div class="type-specimen-block"> |
| <div class="tsb-header"> |
| <span class="tsb-label">Default section header</span> |
| <span class="tsb-spec">DM Sans only · Default for page and section headlines</span> |
| </div> |
| <div class="tsb-body" style="padding: 32px 24px;"><div style="font-family:'DM Sans',sans-serif;font-size:clamp(34px,3.8vw,56px);font-weight:300;line-height:1.08;letter-spacing:-.02em;color:#141414">Two typefaces. Strict rules.</div></div> |
| </div> |
| <div class="type-specimen-block"> |
| <div class="tsb-header"> |
| <span class="tsb-label">Approved serif swap</span> |
| <span class="tsb-spec">One serif phrase · 1.25em inline serif · -0.03em tracking · No italic inside the serif phrase</span> |
| </div> |
| <div class="tsb-body" style="padding: 32px 24px;"><div style="font-family:'DM Sans',sans-serif;font-size:clamp(34px,3.8vw,56px);font-weight:300;line-height:1.08;letter-spacing:-.02em;color:#141414">The <span style="font-family:'Cormorant Garamond',serif;font-size:1.25em;font-weight:400;letter-spacing:-.03em">strategic core</span> of the ICO brand</div></div> |
| </div> |
| <div class="type-specimen-block"> |
| <div class="tsb-header"> |
| <span class="tsb-label">Approved italic accent</span> |
| <span class="tsb-spec">DM Sans only · One italic phrase · No typeface swap</span> |
| </div> |
| <div class="tsb-body" style="padding: 32px 24px;"><div style="font-family:'DM Sans',sans-serif;font-size:clamp(34px,3.8vw,56px);font-weight:300;line-height:1.08;letter-spacing:-.02em;color:#141414">A neutral system with one <span style="font-style:italic">warm accent</span></div></div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="typography-type-scale" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Type scale</div> |
| <h3 class="block-title">Type scale & usage</h3> |
| <div class="block-text split-copy">Every size has one job. Do not repurpose sizes for decoration.</div> |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>Hero headline</th><td>Cormorant Garamond · Regular 300 · clamp(52px, 6.8vw, 108px) · line-height 1.0 · Used once per page maximum.</td></tr><tr><th>Section heading H2</th><td>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.</td></tr><tr><th>Card heading H3</th><td>DM Sans · Weight 400 · 18–22px · tracking 0 to -0.01em. Regular weight (not light) for legibility at smaller sizes.</td></tr><tr><th>Body large</th><td>DM Sans · Weight 300 · 16px · line-height 1.8 · color #676767. Hero subcopy, section intros, scale section subtext.</td></tr><tr><th>Body standard</th><td>DM Sans · Weight 300 · 14px · line-height 1.8 · color #676767. Card descriptions, process steps, proof facts.</td></tr><tr><th>Eyebrow / label</th><td>DM Sans · Weight 500 · 10px · tracking 0.22em · ALL CAPS · color #9A8F84 (Cool Stone). All section labels, nav items, department tags.</td></tr><tr><th>Button / CTA</th><td>DM Sans · Weight 500 · 11px · tracking 0.14em · ALL CAPS. Pill shape for primary, outlined pill for secondary, underline for tertiary.</td></tr><tr><th>Pull quote</th><td>Cormorant Garamond · Regular 300 by default, italic only for emphasis · clamp(20px, 2vw, 30px) · line-height 1.3. Testimonials only. Always in quotation marks.</td></tr><tr><th>Mixed-line pairing</th><td>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.</td></tr><tr><th>Single accent move</th><td>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.</td></tr><tr><th>Section header default</th><td>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.</td></tr><tr><th>Approved serif swap</th><td>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.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="typography-leading" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Leading</div> |
| <h3 class="block-title">Leading</h3> |
| <div class="block-text split-copy">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.</div> |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>Display serif</th><td><strong>1.0–1.1</strong> · Keep large Cormorant display settings tight so the line feels elegant and connected.</td></tr><tr><th>Section headlines</th><td><strong>1.05–1.1</strong> · Use for DM Sans section headings. The line should feel composed and continuous, not airy or stacked by accident.</td></tr><tr><th>Body copy</th><td><strong>1.75–1.9</strong> · Use generous leading for reading text, adjusting slightly for measure and contrast.</td></tr><tr><th>Quotes</th><td><strong>1.15–1.3</strong> · Pull quotes and positioning lines should be tighter than body copy, but not compressed.</td></tr><tr><th>The test</th><td><strong>Crowded</strong> → loosen slightly before changing size. <strong>Floaty</strong> → tighten before adding weight.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="typography-kerning" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Kerning</div> |
| <h3 class="block-title">Kerning & tracking</h3> |
| <div class="block-text split-copy">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.</div> |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>DM Sans headlines</th><td><strong>Slight negative tracking</strong> · Use in large DM Sans headlines so the line feels clean and continuous. Never force a line with aggressive tightening.</td></tr><tr><th>Inline serif phrases</th><td><strong>Tighten slightly</strong> · When Cormorant appears inside a DM Sans line, reduce spacing enough that the phrase reads as part of the sentence.</td></tr><tr><th>Serif display</th><td><strong>Near neutral spacing</strong> · Large standalone Cormorant should stay elegant. Tighten only enough to avoid visible gaps.</td></tr><tr><th>Labels & UI</th><td><strong>Positive tracking</strong> · Use for small uppercase labels, eyebrows, and utility text. This is for clarity, not decoration.</td></tr><tr><th>The test</th><td><strong>Fragmented line</strong> → correct spacing before changing typefaces. <strong>One phrase jumps forward</strong> → reduce tracking contrast first.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="typography-typography-rules" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Typography rules</div> |
| <h3 class="block-title">The rules</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="rule-grid"> |
| <div class="rule-card"> |
| <div class="rule-card-title">Serif appears twice</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Light weight = confidence</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Italic for rhythm, not decoration</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Overscale serif inline</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">One emphasis method at a time</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Section headers stay calm</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Serif swap is deliberate</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="typography-type-do-don-t" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Type do / don't</div> |
| <h3 class="block-title">Typography discipline</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="do-dont-grid"> |
| <div class="compare-card good"> |
| <div class="compare-body"> |
| <div class="compare-label">Do</div> |
| <h4>Controlled hierarchy</h4> |
| <p>Stone eyebrow → light sans heading → grey body copy at 16px → hairline divider. Every level is distinct. Spacing is generous and consistent.</p> |
| </div> |
| <div class="compare-visual">OUR PHILOSOPHY (stone, 10px) |
|
|
| Every industry. (sans 300, 36px) |
|
|
| Body copy at 16px weight 300, |
| line-height 1.8 in mid grey. |
|
|
| ────────────────</div> |
| </div> |
| <div class="compare-card bad"> |
| <div class="compare-body"> |
| <div class="compare-label">Don't</div> |
| <h4>Flat or overcrowded</h4> |
| <p>Avoid pages where all text feels the same size, spacing looks accidental, or Cormorant is used as a decorative heading font throughout.</p> |
| </div> |
| <div class="compare-visual">HEADLINE IN BOLD SERIF |
| Body text same size as heading |
| Another bold serif heading |
| All caps everywhere |
| No breathing room</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div></div> |
| </div> |
| </section> |
| <section class="page" id="photography"> |
| <div class="section-inner"> |
| <div class="section-head"> |
| <div class="section-kicker">07 · Photography</div> |
| <div> |
| <h2 class="section-title">Taste, imagery, and art direction</h2> |
| <div class="section-desc">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.</div> |
| </div> |
| </div> |
| <div class="stack"><div id="photography-the-clothing-is-the-subject" data-subsection-anchor="true"><div class="block-shell block-shell-half"><div class="prose-block"> |
| <h3 class="block-title">The clothing is always the subject</h3> |
| <div class="block-text">People and environments create context, but the garment, fit, material, and silhouette should remain the primary point of attention in every image.</div> |
| <div class="block-note"><strong>Why it matters —</strong> 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.'</div> |
| </div></div></div><div id="photography-photography-rules" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Photography rules</div> |
| <h3 class="block-title">Direction rules</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="rule-grid"> |
| <div class="rule-card"> |
| <div class="rule-card-title">Environment</div> |
| <div class="rule-card-text">Use real environments for context and controlled environments for clarity. The environment should be readable at a glance — not a puzzle.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Composition</div> |
| <div class="rule-card-text">Natural and intentional. Avoid stiff corporate posing. Avoid fashion poses that overwhelm the clothing. The subject should look like they belong in the uniform.</div> |
| </div> |
| <div class="rule-card"> |
| <div class="rule-card-title">Lighting</div> |
| <div class="rule-card-text">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.</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="photography-photography-modes" data-subsection-anchor="true"><div class="block-shell block-shell-feature"><div class="feature-block"> |
| |
| <div class="feature-head"> |
| <div class="split-label">Photography modes</div> |
| <h3 class="block-title">Approved photography modes</h3> |
| <div class="block-text">Use these as reference buckets when selecting or producing imagery for any ICO touchpoint.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="gallery-grid cols-4"> |
| <div class="gallery-card"> |
| <div class="gallery-visual">Hotel or property environment |
| Clean but believable |
| Environment supports the role</div> |
| <div class="gallery-body"><h4>Operational context</h4><p>Real locations that explain the role without turning the image into a busy scene.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual">Neutral backdrop |
| Subject-first framing |
| Garment reads immediately</div> |
| <div class="gallery-body"><h4>Controlled editorial</h4><p>Minimal or neutral backgrounds that clarify design, styling, and silhouette.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual">Soft top-right light |
| Controlled shadows |
| Works alongside other images</div> |
| <div class="gallery-body"><h4>Compositing-ready</h4><p>Images shot with consistent light direction so they work together in decks and portals.</p></div> |
| </div> |
| <div class="gallery-card"> |
| <div class="gallery-visual">Texture / trim detail |
| Silhouette crops |
| Material clarity</div> |
| <div class="gallery-body"><h4>Detail support</h4><p>Close crops that explain materials, finishing, and silhouette without becoming abstract.</p></div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="photography-image-guardrails" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Image guardrails</div> |
| <h3 class="block-title">Image selection guardrails</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="do-dont-grid"> |
| <div class="compare-card good"> |
| <div class="compare-body"> |
| <div class="compare-label">Do</div> |
| <h4>Intentional and readable</h4> |
| <p>The uniform reads clearly, the scene supports the clothing, the lighting is consistent, and the subject looks natural in the role.</p> |
| </div> |
| <div class="compare-visual">Relaxed, natural pose |
| Clean consistent light |
| Garment reads first |
| Environment adds context</div> |
| </div> |
| <div class="compare-card bad"> |
| <div class="compare-body"> |
| <div class="compare-label">Don't</div> |
| <h4>Generic or off-taste</h4> |
| <p>Avoid stock-looking images, cluttered scenes, dramatic mixed lighting, or shots that look like lifestyle advertising rather than uniform communication.</p> |
| </div> |
| <div class="compare-visual">Busy scene competes with clothing |
| Over-posed or stiff |
| Harsh or mixed lighting |
| Style overrides substance</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div></div> |
| </div> |
| </section> |
| <section class="page" id="layout"> |
| <div class="section-inner"> |
| <div class="section-head"> |
| <div class="section-kicker">08 · Layout</div> |
| <div> |
| <h2 class="section-title">Structured, intentional, never empty</h2> |
| <div class="section-desc">ICO layouts use a small set of repeatable patterns. The goal is consistency and clarity — not novelty. Every section should have a visible purpose.</div> |
| </div> |
| </div> |
| <div class="stack"><div id="layout-spacing-system" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Spacing system</div> |
| <h3 class="block-title">Spacing system</h3> |
| <div class="block-text split-copy">All spacing uses a base-4 scale. These values are not suggestions — use them consistently.</div> |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>4px</th><td>Base unit — internal component gaps, badge padding.</td></tr><tr><th>8px</th><td>Tight spacing — eyebrow to headline, card number to card title.</td></tr><tr><th>16px</th><td>Standard gap — headline to body copy, list items, button groups.</td></tr><tr><th>24px</th><td>Component gap — body to CTA, between card elements.</td></tr><tr><th>40px</th><td>Section gutter — horizontal padding throughout (6vw on main content).</td></tr><tr><th>72px</th><td>Section rhythm — standard vertical padding per section top and bottom.</td></tr><tr><th>2–3px</th><td>Grid gap between tiles, cards, and photo panels. Creates the 'tight grid' effect without borders.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div><div id="layout-layout-patterns" data-subsection-anchor="true"><div class="block-shell block-shell-feature"><div class="feature-block"> |
| |
| <div class="feature-head"> |
| <div class="split-label">Layout patterns</div> |
| <h3 class="block-title">Core layout patterns</h3> |
| <div class="block-text">Use a small number of repeatable structures. The goal is a page that can be understood quickly — not one that demonstrates design creativity.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="variant-grid cols-4"> |
| <div class="variant-card"> |
| <div class="variant-visual">Kicker (stone, uppercase) |
| H2 heading |
| Description at 16px</div> |
| <div class="variant-body"> |
| <h4>Section intro</h4> |
| <p>Opens a chapter with kicker, heading, and description. Always has a border-bottom before content begins.</p> |
| |
| </div> |
| </div> |
| <div class="variant-card"> |
| <div class="variant-visual">Photo panel with overlay type |
| Client name bar |
| Text panel: eyebrow + H2 + body</div> |
| <div class="variant-body"> |
| <h4>Photo + text duo</h4> |
| <p>58/42 or 50/50 split. Photo on left or right. Ghost overlay text on photo. Client bar at bottom of photo.</p> |
| |
| </div> |
| </div> |
| <div class="variant-card"> |
| <div class="variant-visual">Dark bg |
| Left: heading + CTA |
| Right: 2×2 service cards</div> |
| <div class="variant-body"> |
| <h4>Dark section</h4> |
| <p>Background #181818. Left column: eyebrow + heading + body + CTA. Right: 2×2 card grid with hairline borders.</p> |
| |
| </div> |
| </div> |
| <div class="variant-card"> |
| <div class="variant-visual">Photo cards |
| Stone dept label |
| Italic name in cream</div> |
| <div class="variant-body"> |
| <h4>Tile grid</h4> |
| <p>4-column photo card grid with gradient overlay, department label in stone, italic name in cream.</p> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="layout-minimal-empty" data-subsection-anchor="true"><div class="block-shell block-shell-half"><div class="prose-block"> |
| <h3 class="block-title">Minimal does not mean empty</h3> |
| <div class="block-text">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.</div> |
| <div class="block-note"><strong>Why it matters —</strong> 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.</div> |
| </div></div></div><div id="layout-layout-do-don-t" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">Layout do / don't</div> |
| <h3 class="block-title">Layout guardrails</h3> |
| |
| </div> |
| |
| <div class="split-content"> |
| <div class="do-dont-grid"> |
| <div class="compare-card good"> |
| <div class="compare-body"> |
| <div class="compare-label">Do</div> |
| <h4>Repeatable, intentional structure</h4> |
| <p>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.</p> |
| </div> |
| <div class="compare-visual">Consistent block rhythm |
| Clear hierarchy |
| Eyebrow → heading → body → CTA |
| Hairline borders do the work</div> |
| </div> |
| <div class="compare-card bad"> |
| <div class="compare-body"> |
| <div class="compare-label">Don't</div> |
| <h4>Improvised or hollow</h4> |
| <p>Avoid creating a new visual system for every deck, over-indexing on minimalist emptiness, or placing elements randomly without a structural logic.</p> |
| </div> |
| <div class="compare-visual">Random text placement |
| No section structure |
| Floating elements |
| One-off layouts per slide</div> |
| </div> |
| </div> |
| </div> |
| </div></div></div></div> |
| </div> |
| </section> |
| <section class="page" id="resources"> |
| <div class="section-inner"> |
| <div class="section-head"> |
| <div class="section-kicker">09 · Resources</div> |
| <div> |
| <h2 class="section-title">Assets, templates, and escalation</h2> |
| <div class="section-desc">A scalable standard needs to help people get the right files and understand when to ask for help.</div> |
| </div> |
| </div> |
| <div class="stack"><div id="resources-asset-library" data-subsection-anchor="true"><div class="block-shell block-shell-feature"><div class="feature-block"> |
| |
| <div class="feature-head"> |
| <div class="split-label">Asset library</div> |
| <h3 class="block-title">Asset library</h3> |
| <div class="block-text">Use approved files. Do not reconstruct assets from screenshots or memory.</div> |
| </div> |
| |
| <div class="split-content"> |
| <div class="resource-grid cols-3"> |
| <div class="resource-card"> |
| <h4>Logo files</h4> |
| <p>Primary mark files for digital, print, and presentation use. Black and white variants included.</p> |
| <div class="resource-meta">SVG · PNG · AI</div> |
| <a class="resource-link" href="#" target="_blank">Download logo pack</a> |
| </div> |
| <div class="resource-card"> |
| <h4>Deck templates</h4> |
| <p>Approved presentation structures pre-aligned to these brand standards. Use these as starting points — do not build from scratch.</p> |
| <div class="resource-meta">PPT · Keynote · PDF</div> |
| <a class="resource-link" href="#" target="_blank">Download templates</a> |
| </div> |
| <div class="resource-card"> |
| <h4>Photography selects</h4> |
| <p>Approved image sets that define current ICO taste. Use for onboarding presentations and external partner briefs.</p> |
| <div class="resource-meta">JPG · curated library</div> |
| <a class="resource-link" href="#" target="_blank">Access image library</a> |
| </div> |
| </div> |
| </div> |
| </div></div></div><div id="resources-when-to-escalate" data-subsection-anchor="true"><div class="block-shell block-shell-full"><div class="split-block dense"> |
| |
| <div class="split-meta"> |
| <div class="split-label">When to escalate</div> |
| <h3 class="block-title">When to escalate</h3> |
| |
| </div> |
| |
| <div class="split-content panel-surface"> |
| <table class="spec-table"><tbody><tr><th>Always escalate</th><td>New layout patterns, unusual typography behaviour, non-standard colour use, logo modifications, co-branded applications, or imagery that feels borderline off-taste.</td></tr><tr><th>Never escalate</th><td>Straightforward use of approved blocks, approved language, standard logo variants, and reference imagery from the approved library.</td></tr><tr><th>The test</th><td>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.</td></tr> |
| </tbody></table> |
| </div> |
| </div></div></div></div> |
| </div> |
| </section></div> |
| <div class="footer-note" id="footerNote"><div class="footer-inner">ICO Uniforms Brand Standards · v1.0 · Internal use. For external distribution, contact the creative team.</div></div> |
| </main> |
| <div class="lightbox" id="lightbox" aria-hidden="true"> |
| <div class="lightbox-inner"> |
| <button class="lightbox-close" id="lightboxClose" aria-label="Close image viewer">×</button> |
| <img id="lightboxImage" alt="" /> |
| </div> |
| </div> |
| <script> |
| (function (root) { |
| function enhanceNav() { |
| const parentLinks = Array.from(document.querySelectorAll(".nav-parent")); |
| const childLinks = Array.from(document.querySelectorAll(".nav-child")); |
| const groups = Array.from(document.querySelectorAll(".nav-group")); |
| const sections = Array.from(document.querySelectorAll("section.page")); |
| const subsections = Array.from(document.querySelectorAll('[data-subsection-anchor="true"]')); |
|
|
| function setExpandedGroup(sectionId) { |
| groups.forEach(function (group) { |
| if (!group.classList.contains("has-children")) return; |
| group.classList.toggle("is-collapsed", group.getAttribute("data-section-group") !== sectionId); |
| }); |
| } |
|
|
| function jumpToTarget(targetId, behavior) { |
| const target = document.getElementById(targetId); |
| if (!target) return; |
| window.history.pushState(null, "", "#" + targetId); |
| target.scrollIntoView({ behavior: behavior || "auto", block: "start" }); |
| } |
|
|
| parentLinks.forEach(function (link) { |
| link.addEventListener("click", function (event) { |
| event.preventDefault(); |
| const targetId = (link.getAttribute("href") || "").replace("#", ""); |
| if (!targetId) return; |
| setExpandedGroup(targetId); |
| jumpToTarget(targetId, "auto"); |
| }); |
| }); |
|
|
| childLinks.forEach(function (link) { |
| link.addEventListener("click", function (event) { |
| event.preventDefault(); |
| const targetId = (link.getAttribute("href") || "").replace("#", ""); |
| if (!targetId) return; |
| const target = document.getElementById(targetId); |
| const section = target ? target.closest("section.page") : null; |
| if (section) setExpandedGroup(section.id); |
| jumpToTarget(targetId, "smooth"); |
| }); |
| }); |
|
|
| if ("IntersectionObserver" in root) { |
| const sectionObserver = new IntersectionObserver(function (entries) { |
| const visible = entries |
| .filter(function (entry) { return entry.isIntersecting; }) |
| .sort(function (a, b) { return b.intersectionRatio - a.intersectionRatio; })[0]; |
|
|
| if (!visible) return; |
|
|
| const activeId = visible.target.id; |
|
|
| parentLinks.forEach(function (link) { |
| link.classList.toggle("active", link.getAttribute("href") === "#" + activeId); |
| }); |
|
|
| setExpandedGroup(activeId); |
| }, { rootMargin: "-20% 0px -60% 0px", threshold: [0.01, 0.2, 0.4, 0.6] }); |
|
|
| const subsectionObserver = new IntersectionObserver(function (entries) { |
| const visible = entries |
| .filter(function (entry) { return entry.isIntersecting; }) |
| .sort(function (a, b) { return b.intersectionRatio - a.intersectionRatio; })[0]; |
|
|
| if (!visible) return; |
|
|
| childLinks.forEach(function (link) { |
| link.classList.toggle("active", link.getAttribute("href") === "#" + visible.target.id); |
| }); |
| }, { rootMargin: "-18% 0px -70% 0px", threshold: [0.01, 0.2, 0.4, 0.6] }); |
|
|
| sections.forEach(function (section) { |
| sectionObserver.observe(section); |
| }); |
|
|
| subsections.forEach(function (subsection) { |
| subsectionObserver.observe(subsection); |
| }); |
|
|
| return; |
| } |
|
|
| if (sections[0]) { |
| const initialSectionId = sections[0].id; |
| parentLinks.forEach(function (link) { |
| link.classList.toggle("active", link.getAttribute("href") === "#" + initialSectionId); |
| }); |
| setExpandedGroup(initialSectionId); |
| } |
| } |
|
|
| function setupLightbox() { |
| const lightbox = document.getElementById("lightbox"); |
| const lightboxImage = document.getElementById("lightboxImage"); |
| const closeButton = document.getElementById("lightboxClose"); |
|
|
| if (!lightbox || !lightboxImage || !closeButton) return; |
|
|
| function closeLightbox() { |
| lightbox.classList.remove("is-open"); |
| lightbox.setAttribute("aria-hidden", "true"); |
| lightboxImage.removeAttribute("src"); |
| lightboxImage.removeAttribute("alt"); |
| } |
|
|
| document.addEventListener("click", function (event) { |
| const trigger = event.target.closest('img[data-enlargeable="true"]'); |
| if (!trigger) return; |
| lightboxImage.src = trigger.getAttribute("src") || ""; |
| lightboxImage.alt = trigger.getAttribute("alt") || ""; |
| lightbox.classList.add("is-open"); |
| lightbox.setAttribute("aria-hidden", "false"); |
| }); |
|
|
| closeButton.addEventListener("click", closeLightbox); |
|
|
| lightbox.addEventListener("click", function (event) { |
| if (event.target === lightbox) closeLightbox(); |
| }); |
|
|
| document.addEventListener("keydown", function (event) { |
| if (event.key === "Escape" && lightbox.classList.contains("is-open")) { |
| closeLightbox(); |
| } |
| }); |
| } |
|
|
| root.BrandGuidePage = { |
| enhanceNav, |
| setupLightbox, |
| }; |
| }(typeof window !== "undefined" ? window : globalThis)); |
| window.BrandGuidePage.enhanceNav(); |
| window.BrandGuidePage.setupLightbox(); |
| </script> |
| </body> |
| </html> |
| |