Workspace avatar: what should always look the same, and what should be adjustable?

[lifeiscontent]

Hi @bhaveshraja, I'm firming up the workspace avatar (the little square workspace logo, or its initials when there's no logo) in our kit and want to settle the defaults with you.

For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?

1. The square shape and growing corners. It's a rounded square, and the corners get a little rounder as it gets bigger (gently rounded at the small sizes, more rounded at the big ones). Should that always be the shape and that corner-grows-with-size rule?

2. The size steps. It comes in eight sizes, from a tiny 16px up to a big 64px. Should those eight be the full set, with medium as the everyday default?

3. The border. Each one has a soft outline that thickens a touch at the larger sizes (thin up to about 32px, a bit thicker from 40px up). Should that border always be there, in those weights?

4. The initials fallback. When there's no logo, it shows the workspace initials picked from a colour palette that's auto-chosen from the name (the same palette as our people avatars). Should that always be the fallback look, and should the colour always be auto-picked rather than hand-set?

5. The initials text size. The initials scale up with the square. Should that text size always track the size the way it does now?

Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!

[bhaveshraja]

1. Always
2. Depends
3. Always
4. Always
5. Always

[bhaveshraja]

Based on detailed analysis of the Figma design specs for Avatar:

Always the same

• Rounded-square shape (radius/lg = 8px) — distinct from user avatars which are circular; shape carries entity-type meaning
• Content resolution priority: image → initials → icon (never shows a broken-image state)
• Equal width and height (square frame, never stretches)
• Initials: max 2 characters, always uppercased
• Fill color: deterministic per identity (same workspace → same color every time, from the label color set)
• Border width scales with magnitude (border-2 for larger sizes)
• No intrinsic animation or hover state
• Accessibility: presentational by default

Depends (adjustable)

• Magnitude/size (matches the user avatar size scale)
• Content: workspace image or name (for initials derivation)
• Color mode: light, dark, light-contrast, dark-contrast (adapts via semantic tokens)
• Interactive vs presentational (determined by wrapper)

[lifeiscontent]

Thanks Bhavesh, this is really helpful, and your second comment is exactly the format I was hoping for. The quick always/depends list answers it, but the detailed one gives me two things I can actually build from: the exact value (the 8px corners, the 2px border on the larger sizes, the label color set) and the reason behind it (the square shape meaning workspace and not person, never showing a broken image). Those reasons matter a lot, they stop me from quietly changing something later that was doing a real job.

If it saves you time on the rest, a simple shape you can reuse:

Two buckets, like you already did.

Always the same. For each one, the rule plus the exact value when there is one, and a quick why when the choice carries meaning. For example: "Corner rounding is 8px, always, because the rounded square reads as a workspace and not a person."

Can change. For each one, what can vary, and if it's a fixed set of choices, list them; if it's wide open, just say so. For example: "Size: any of our eight steps" or "Fill color: adapts to the four color modes, picks itself from the name."

And please keep dropping in the details I didn't ask about, like the image then initials then icon order, or the max two letters. That kind of context is exactly what I need.

No need to re-derive everything from Figma each time either. If you already know the answer off the top of your head, the rule plus the value is plenty. Answering right inside each issue like you did works great.