What it is
Two things at once. A brand book, voice, logo, colour, motif, the rules that make ICC recognisable. And a component source, the tokens, states and specs the Figma library and every product build read from.
Why it exists
Consistency across every ICC product without re-deciding the basics each time. Colour, spacing, type and copy tone are settled here so the work upstream can be about the actual problem.
action-primary. Components consume these.
Colour 9 tokens · all active
Radius
Elevation
Spacing base unit 4px
Motion
prefers-reduced-motion.Typography
Semantic mapping
Components never reach for a hex. They ask for a role, and the role resolves to one of the nine.
Approved pairings & contrast
Measured ratios. Body = WCAG AA 4.5:1 for text under 24px. Large / UI = 3:1 for 24px+, bold 18.66px+, and non-text UI boundaries.
Terracotta, Soft Blue and Sage don’t clear 4.5:1 on cream. Use them as borders, icons, badge fills and 24px+ type, and let Ink carry the sentence. An error message reads in Ink with a Terracotta border and icon, not Terracotta prose at 14px.
“Nine colors, not five, restraint was never the point, intention was.”
Responsive behaviour
The scale
Primitives
Three containers cover almost every layout in the system. If a layout needs something else, that is a signal to simplify the layout.
gap: space-75
gap: space-75 · wrap
padding: space-150
Grid
Breakpoints
Sidebar behaviour
This document’s own sidebar is the reference implementation, resize the window and watch it change. Collapse state persists for the session; it does not reset on navigation.
Radius
Radius carries meaning here. Larger radius means larger surface, not decoration. Uniform rounding across every element is what makes a system read as templated.
Elevation & shadow
Every shadow in this system is tinted Deep Blue. Never gray, never black. This one decision does more to make the system feel designed rather than templated than almost anything else.
On Deep Blue the shadow nearly disappears, that is correct. Depth on dark surfaces comes from the surface colour step (Deep Blue → Core Blue), not from blur. Reach for a border before reaching for a bigger shadow.
A gray shadow on a cream page reads as dirt. The page is warm, so the shadow has to be a darker version of the light in the room, and in this system that light is blue. Tinting shadows to Deep Blue keeps the whole surface on one colour temperature, which is why cards here look placed rather than pasted.
Motion
Calm, measured, confident. No bounce, no elastic, no spin. Three durations cover the whole system.
Pulsing, glowing, bouncing text, confetti, marquee. Press states darken and scale to 0.98 for 100ms, nothing in this system ever grows on interaction. All of it collapses to near-zero under prefers-reduced-motion.
Iconography
Line icons, 1.5px stroke, rounded caps, drawn on a 24px grid and usable at 16, 20 and 24px. This brand has almost no utility iconography, where a chevron or a close is genuinely needed, it looks like this.
Semantic colouring
An icon takes the colour of its meaning, not its container.
This brand does not have an icon system, it has a shape system, the 12 motifs. Utility icons are a substitution, kept deliberately plain so they never compete with the motifs for personality.
Logo & usage
Four approved colour contexts. No other combinations. Each works at three sizes.
Clear space
Equal to the width of the “P” in the wordmark, on all four sides. The dashed zone is the minimum boundary, nothing enters it.
Pandey
Lockup: mark left, two-line stacked wordmark right. Never reflow the wordmark to a single line inside the lockup.
Format applications
- Use on approved backgrounds only
- Maintain aspect ratio when scaling
- Keep clear space around the mark
- Use the white-only mark at very small sizes
- Recolour outside the palette
- Stretch, distort, or skew
- Add drop shadows or glow
- Place on busy or photographic backgrounds
Visual language
Twelve motifs derived from the mark. Illustration, dividers, backgrounds, texture. Always on-palette. Never decorative without purpose.
Motifs in practice
Three examples pulled straight from this document’s own build, the rule proved, not stated.
Motifs may be scaled, rotated or cropped, never distorted, never recoloured beyond the five core colours. Always at 12–30% opacity or scaled large enough to read as texture. A motif never competes with foreground text for contrast.
Voice & content design
“Someone who has done the work, thinking out loud.”
Write like this / not like this
The voice at the login screen
“No episodes published. Start with the conversation you keep coming back to.”
“That page moved or doesn’t exist.”
“Subscribed. Edition 1 lands in your inbox on March 1.”
“The voice traits mean nothing if they only apply to LinkedIn posts and stop at the login screen.”
Accessibility
This page sits in Foundations, not in a checklist at the end. Accessibility is a token-level decision, which is why it appears before a single component.
Focus states
A 2px Amber ring at 2px offset. Never removed with outline:none. Tab into the controls below to see it.
Motion sensitivity
Every animated token in this system respects prefers-reduced-motion: reduce. Durations collapse to near-zero; nothing is left mid-transition, and no information is carried by motion alone. Toasts still appear and still dismiss, they just stop sliding.
Colour is never the only signal. Every status badge carries a word, every error carries text, every success carries a label, the colour is confirmation, not the message.
action-primary
action-hero
surface-page
surface-raised
text-on-dark
status-error
Site matrix
- Remap semantic tokens per site
- Adjust density and voice register to the product’s job
- Adopt one suggested-extension colour as a product accent
- Introduce new core hex values
- Change the logo’s approved contexts
- Abandon the four voice traits
- Mix multiple extension colours as competing accents on one product
Variants & states
“Amber is capped at 5% usage in the token system for a reason, a button hierarchy where only one thing can be urgent at a time is restraint made visible, not a limitation.”
- Amber only for the single highest-intent action on the screen
- Deep Blue for the action the user came to complete
- Core Blue outline paired beside a primary, never alone
- Terracotta only when the action cannot be undone
- Two Amber buttons in one view, pick which one actually matters
- Deep Blue everywhere by default, which flattens the hierarchy
- Terracotta for a merely cautious action, that is Amber, or a confirm step
- Noun labels. “Save changes”, not “Submit”
Inputs & forms
Label above the field, helper text below, and an error that replaces the helper in place, so the form never shifts under the reader.
A form that reflows when it fails punishes the person for making a mistake. Reserving the helper-text line means the error appears exactly where the eye already is, and nothing below it moves. Focus is a 2px Amber ring at every field, the same ring, everywhere, so it is learnable.
Badges, tags & status
Pill shape, radius full, caption-size text. A badge reports state and does nothing. A tag can be removed.
Colour is never the only signal, every badge carries a word. A Sage pill with no label is decoration, not status.
Cards
Pearl, not Warm Neutral, a card sits above the page, so it takes the elevated surface colour. Radius md standard, xl for feature cards.
Edition 1 · March 2026. No hover, no lift, nothing here is clickable, so nothing behaves as if it is.
Avatar & media
Circular, radius full. Deep Blue fallback with Warm Neutral initials when there is no image, an Amber ring marks the active one, matching the brand kit’s social avatar frame.
Navigation
Tabs, breadcrumb, side nav, pagination. All four are live below, the side nav example is this document’s own sidebar.
Horizontal bar with an Amber active-state underline. Inactive labels sit at 60% Ink so the active one wins without shouting.
Use tabs for peer views of the same object. If the content is a different object, that is navigation, not a tab.
border-bottom: 2px solid amber
color: text-default | text-muted
transition: 120ms ease-out
The sidebar on the left of this page is the side-nav component. Deep Blue surface, Amber active state at 16% fill, group labels in Amber caps, and the two-digit page number standing in for an icon, because this brand has no icon system to draw from.
Collapse it with the control at its foot, then navigate, the state persists.
Overlays
Modal, drawer, tooltip, popover. Everything above the page sits on Pearl and enters at slow 320ms.
The draft and its two revisions go with it. This can’t be undone.
Slides in from the right at slow 320ms. The page stays visible behind the scrim, because the task belongs to what is on it.
Feedback & messaging
Four tones, one voice. Every message here follows the copy patterns from Voice & Content Design, specific, unhurried, never apologetic.
The first note you write shows up here. Start with the conversation you keep coming back to.
Loading states
Skeleton for known layouts, spinner for unknown waits, progress bar for anything measurable.
Data display
Light by design. This system will never need dense enterprise data grids, a readable table and a plain list cover it.
Layout primitives as components
Three components carry the structure of every page in this document, including this one.
max-width 1200 · gutter clamp(20,5vw,80)
hairline · motif · 4px accent rule
warm → pearl → deep → warm
Empty states
An empty state is an invitation, not an apology. Name the first useful action.
Form validation copy
Specific and actionable, never vague. Inline, at the field, in Terracotta, replacing the helper text in place.
- Name the field, not the error class.
- Say what a correct value looks like.
- Validate on blur, not on every keystroke, unhurried applies here too.
Confirmation & success copy
Understated. The work is done; the interface doesn’t need to celebrate itself.
Use-case presets
The fast pathFull asset library
Every variant, one file at a timePortrait & photography
Warm, natural light, shot on cream. Same format and size options as the logo library.
{{ pendingLabel }}
This page is specified in the build brief and is queued for the next pass. Foundations 03–09 and the Get Started group are live now.