new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Shopify Polaris · all subjects

typography/scale

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Primitive font scales - five key token sets

The primitive font scales consist of five key token sets: Font Family, Font Weight, Letter Spacing, Font Size, and Line Height.

Font size and line height token convention

Font size and line height token scales adhere to the convention of the size token scale, which translates to pixel values.

Font weight and letter spacing token approach

Font weight and letter spacing scales adopt a contextual approach that is more appropriate for their design requirements.

Primitive token structure

Primitive tokens are composed of system, group, property, and scale values.

Semantic text tokens layer

Polaris introduced a new layer of semantic text tokens that reference the primitive font scales. These semantic tokens create a streamlined approach that enhances consistency and facilitates the assembly of Text variants, directly mapping to the various variants available within the Text component.

Semantic token composite properties

Semantically-routed composite text tokens include properties such as font size, line height, font weight, letter spacing, and font family, and allow for a comprehensive and customizable typographic experience.

Semantic token structure

Semantic tokens are composed of system, concept, variant, and property values.

Apply typography tokens with Text component variant prop

The Text component provides a variant prop that seamlessly applies font token styling specific to the selected variant, ensuring consistency.

Apply typography tokens with semantic text tokens

When markup access is limited, semantic text tokens offer flexibility for styling elements.

Font scales available in token styles.css

Polaris exposes font scales in the token styles.css file, allowing users to create custom variants.

Typography token application options

Builders can use the Text component, semantic (composite) text tokens, and font scales to receive both flexibility and system synchronicity.

Type scale values updated to major third ratio

The new type scale uses a 1.2 ratio (major third) for all font sizes, with each size multiplied or divided by 1.2 from the previous size and rounded to multiples of 4px. The new scale includes: 12px, 14px, 16px, 20px, 24px, 28px, 32px, and 40px.

Single type scale for desktop and mobile

Polaris version 10 moves from separate desktop and mobile type scales to one unified scale for both. While sizes 1px difference was observed between screen sizes, designers and developers indicated the complexity of maintaining two distinct scales was not justified. Larger sizes in the scale are planned to respond automatically at certain breakpoints in the next release.

Type scale changes rationale

All font size and line-height values were updated to multiples of 4px (except the 14px base size) to maintain visual rhythm on the page. The 32px size was added to provide an extra step for large display sizes used in learning-focused or celebratory pages in the Shopify admin. Smaller scale values largely remained unchanged; larger values saw the most adjustments.

Give your agent this brain