v11: (type styles) add new expressive styles label-02, caption-02, helper-text-02

[oliviaflory]

Detailed description

Describe in detail the issue you're having. Please include whether or not this is part of Sketch Libraries or the larger Sketch Kit file.

The Carbon for IBM.com team and all dotcom designers will be transitioning to use the Carbon design kits as we integrate the Expressive variants needed into Carbon. The designers will need access to the new styles added to accommodate expressive experience needs, which were previously provided through the Carbon Expressive kits maintained by Carbon for IBM.com team.

Add the new expressive type styles to the Carbon design kits. I figure it would be good to have the color tokens match between the corresponding productive/expressive styles, but open to feedback.

---

caption-02

token	font size	line height	letter spacing	font weight
caption-02	14	18	.16	regular

Color tokens:

• disabled-02
• inverse-01
• text-01
• text-02

---

label-02

token	font size	line height	letter spacing	font weight
label-02	14	18	.16	regular

Color tokens:

• disabled-02
• inverse-01
• text-01
• text-02

---

helper-text-02

token	font size	line height	letter spacing	font weight
helper-text-02	14	18	.16	regular

Color tokens:

• disabled-02
• hover-primary-text
• inverse-01
• link-02
• link-02
• text-01
• text-05

Add in all themes

• white
• gray 10
• gray 90
• gray 100

What version of the Carbon Design System Kit are you using?

v10 kit

Carbon for IBM.com will use the v10 kit until we have a migration plan for v11

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.

New type styles added to enable expressive experiences

What did you expect to happen? What happened instead? What would you like to see changed?

Is this issue being filed based on a discrepancy between the website/code and the kit? If so what is the inconsistency?

The type styles were added to the Type package

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Carbon for IBM.com

Additional information

• Carbon for IBM.com would need these added in order to transition our current users to use the Carbon kit
• I am happy to help update the kit if needed (@oliviaflory)

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized (i.e.use the libraries label for any issue relating to the Carbon Sketch Library). This will help us to better understand and address your issue.

[mariuszmickiewicz]

@laurenmrice @oliviaflory

I'm working on Gray 10 theme now and this is how the structure looks like (image below). All styles colors are linked to V2 library. Expressive styles are in a separate folder, but inside of it there is no distinction between fluid (lg, max, etc.) and regular expressive styles (the new ones we just added). Luckily the names of the styles make the fluid ones being "grouped" (by alphabetical order) together. Should it stay this way?

[mariuszmickiewicz]

I figure it would be good to have the color tokens match between the corresponding productive/expressive styles, but open to feedback.

I did add it, let me know what's the best approach here.

[oliviaflory]

All styles colors are linked to V2 library.

Does V2 library mean the Carbon v11 Sketch library or the IDL v2 sketch library? Carbon for IBM.com won't be able to move to Carbon v11 this year, so just confirming we'd still be able to use the v10 kit.

Expressive styles are in a separate folder, but inside of it there is no distinction between fluid (lg, max, etc.) and regular expressive styles (the new ones we just added). Luckily the names of the styles make the fluid ones being "grouped" (by alphabetical order) together. Should it stay this way?

That's a good question.. I had origininally imagined label-02 caption-02 and helper-text-02 outside of the Expressive folder with the other fixed type styles. We do try to distinguish between the fluid and fixed now and I wonder if it would be slightly confusing if they were in the expressive folder. Technically Expressive experiences use the body-short-02 and body-long-02 tokens as well, so I worry if those aren't grouped in with expressive too teams could miss them?

In looking at the structure image above, I'm realizing the expressive-heading-01 and expressive-heading-02 tokens are not included in the Carbon kit either 🙈 Is it possible to add those as well?

@laurenmrice would love to hear your thoughts!

[mariuszmickiewicz]

Does V2 library mean the Carbon v11 Sketch library or the IDL v2 sketch library? Carbon for IBM.com won't be able to move to Carbon v11 this year, so just confirming we'd still be able to use the v10 kit.

It means IDL v2

expressive-heading-01 and expressive-heading-02

Sure, I will add it.

Expressive vs Productive

Regarding current structure (on the image above) additional grouping fluid styles isn't necessary I think and doing so would just add another level in Sketch to go through — we all know this is not the best experience :)

Regarding expressive / productive vs fluid / fixed — it all depends what's most important to emphasise. If we choose the latter then designers working with Carbon for product might have the wrong impression that it is ok to use these expressive new styles in product UIs. I'm curious what you do think on how to approach this.

[laurenmrice]

@mariuszmickiewicz @oliviaflory I just got on a call with dotcom peeps to talk this through. We have landed on the following structure:

---

● First level

-All body type styles with suffix -01 and -02 for both productive and expressive will be on the same level. On that same level there will also be Productive headings and Expressive headings bucket titles.

⃝ Second level

-Productive headings --> 1-7 headings will be listed out.
-Expressive headings --> expressive-heading-01 and expressive-heading-02, max, xlg, lg, md, sm . (Keeping headings 01 and 02 separated out from breakpoint buckets because they are not fluid and we would need to duplicate them for every breakpoint bucket.)

▪️Third level

-Each breakpoint bucket will include fluid displays, headings, paragraph and quotation type styles.

---

• body-long-01
• body-long-02
• body-short-01
• body-short-02
• caption-01
• caption-02
• code-01
• code-02
• helper-text-01
• helper-text-02
• label-01
• label-02
• Productive headings
  • productive-heading-01
  • productive-heading-02
  • productive-heading-03
  • productive-heading-04
  • productive-heading-05
  • productive-heading-06
  • productive-heading-07
• Expressive headings
  • expressive-heading-01
  • expressive-heading-02
  • max
    • display-01
    • display-02
    • display-03
    • display-04
    • expressive-heading-03
    • expressive-heading-04
    • expressive-heading-05
    • expressive-heading-06
    • expressive-paragraph-01
    • quotation-01
    • quotation-02
  • xlg
  • lg
  • md
  • sm

[mariuszmickiewicz]

productive-heading-01 apart from text-01 and text-02 also has inverse-01 version. Does expressive-heading-01 also need it?

Here is the updated structure.

[mariuszmickiewicz]

All themes done.

[laurenmrice]

productive-heading-01 apart from text-01 and text-02 also has inverse-01 version. Does expressive-heading-01 also need it?

I believe productive-heading-01 has the inverse-01 color option because of the UI shell header. So expressive-heading-01 should not need this color.

All themes done.

Thank you so much 💯 🙏. I am going to keep this open for now still because we are going to talk about this again as a larger group today to discuss the placement of expressive-headings-01 and -02 as well as the names of the productive and expressive buckets. Will let you know what the outcome is.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[laurenmrice]

@mariuszmickiewicz Ok! After further discussion, we have made additional changes to the text styles. The changes include new tokens, removal of some tokens and name changes of existing tokens.

Here is the list:

New tokens

label-02
Size: 14px
Line height: 18px
Weight: 400 / Regular
Letter spacing: .16px

legal-01
Size: 12px
Line height: 16px
Weight: 400 / Regular
Letter spacing: .32px

legal-02
Size: 14px
Line height: 18px
Weight: 400 / Regular
Letter spacing: .16px

Deleted tokens

caption-01
caption-02
helper-text-01
helper-text-02

*Deleting caption tokens in favor of label-01 and label-02.
*We have decided not to delete helper text tokens and we are bringing them back into our token set.

Name changes

New name	Old name
body-compact-01	body-short-01
body-compact-02	body-short-02
body-01	body-long-01
body-02	body-long-02
heading-compact-01	productive-heading-01
heading-compact-02	productive-heading-02
heading-01	expressive-heading-01
heading-02	expressive-heading-02
heading-03	productive-heading-03
heading-04	productive-heading-04
heading-05	productive-heading-05
heading-06	productive-heading-06
heading-07	productive-heading-07
fluid-heading-03	expressive-heading-03
fluid-heading-04	expressive-heading-04
fluid-heading-05	expressive-heading-05
fluid-heading-06	expressive-heading-06
fluid-paragraph-01	expressive-paragraph-01
fluid-quotation-01	quotation-01
fluid-quotation-02	quotation-02
fluid-display-01	display-01
fluid-display-02	display-02
fluid-display-03	display-03
fluid-display-04	display-04

Structure in kit

This is the folder/bucket structure they should be in:

• Productive

  • body-01
  • body-compact-01
  • code-01
  • headings
    • heading-compact-01
    • heading-compact-02
    • heading-01
    • heading-02
    • heading-03
    • heading-04
    • heading-05
    • heading-06
    • heading-07
  • helper-text-01
  • label-01
  • legal-01

• Expressive

  • body-02
  • body-compact-02
  • code-02
  • headings
    • heading-compact-01
    • heading-compact-02
    • heading-01
    • heading-02
  • fluid headings
    • max
      • fluid-display-01
      • fluid-display-02
      • fluid-display-03
      • fluid-display-04
      • fluid-paragraph-01
      • fluid-quotation-01
      • fluid-quotation-02
    • xlg
    • lg
    • md
    • sm
  • helper-text-02
  • label-02
  • legal-02

[mariuszmickiewicz]

Seems like

• heading-compact-01
• heading-compact-02
• heading-01
• heading-02

are in both expressive and productive groups. I'm just making sure this is intentional?

If so I will try to make the duplicates in such a way, that currently used styles of each type are untouched - stay connected to peoples' documents. For example current heading-01 goes to expressive, and only its copy goes to the productive group and the opposite is true for heading-compact-01.

Deleted styles
Temporarily I would put it in a "depreciated" folder, until it is swapped in all of the symbols around the libraries. This can be done by changing the old style to big red letters and them select all visible instances and swap it to the new style. Perhaps some plugin could be used too.

[mariuszmickiewicz]

Deleted tokens

caption-01
helper-text-01

(in favor of label-01)

Is the same true for respective -02 styles (which we originally added in this thread)? I don't see them on the newest list so I assume caption-02 and helper-text-02 also need to be removed?

[mariuszmickiewicz]

Which color tokens are required for legal- styles?

Seems like legal- styles share the same properties as label- styles, same as deleted caption- and helper-text- did. Should for example caption- become legal- or we start fresh here (so nothing on existing layouts people created should become legal- ?

[laurenmrice]

Are in both expressive and productive groups. I'm just making sure this is intentional?

• Yes, it is intentional to have duplicates of the fixed headings in productive and expressive.

Is the same true for respective -02 styles (which we originally added in this thread)? I don't see them on the newest list so I assume caption-02 and helper-text-02 also need to be removed?

• Yes, those should also be removed.

Which color tokens are required for legal- styles?

• For legal-, we could just start with text-01 and text-02 color token options.

Should for example caption- become legal- or we start fresh here (so nothing on existing layouts people created should become legal- ?

• We can start from scratch and make new type styles for legal-. It is going to be used in specific places of a product for legal copy only and wouldn't be used for instances like how we used the caption or helper text.

[oliviaflory]

are in both expressive and productive groups. I'm just making sure this is intentional?

I believe it's intentional because Product uses both, and expressive will likely utilize both.

[mariuszmickiewicz]

This is the current state of things. I hope the hierarchy is ok.
caption- and helper-text- are kept for now until we manage to switch it everywhere in the files to label-

• white
• gray 10
• gray 90
• gray 100

[laurenmrice]

Final list of type tokens

*All values for type tokens match the updated type guidance for v11

Utility styles

• code-01
• code-02 (new expressive)
• label-01
• label-02 (new expressive)
• helper-text-01
• helper-text-02 (new expressive)
• legal-01 (new productive)
• legal-02 (new expressive)

Body styles

• body-compact-01
• body-compact-02
• body-01
• body-02

Fixed heading styles

• heading-compact-01
• heading-compact-02
• heading-01
• heading-02
• heading-03
• heading-04
• heading-05
• heading-06
• heading-07

Fluid heading styles

• fluid-heading-03
• fluid-heading-04
• fluid-heading-05
• fluid-heading-06

Fluid display styles

• fluid-paragraph-01
• fluid-quotation-01
• fluid-quotation-02
• fluid-display-01
• fluid-display-02
• fluid-display-03
• fluid-display-04

---

Deprecated styles

• caption-01
• caption-02

*In favor of label-01 and label-02
*Deleted caption-01 out of the Sketch kit after replacing it with helper-text-01 in symbols. It was being used in the following components:

• Date picker
• Dropdown
• File uploader
• Number input
• Select
• Text area
• Text input

---

Added and updated! Will be available in the next Sketch kit update. 🎉