Lestari
Generated Nov 1, 2026
Latest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Figma
description: |
Figma's design system embodies a modern, minimalist aesthetic rooted in
clarity and purposeful simplicity. The visual language prioritizes clean
geometry, generous whitespace, and a restricted monochromatic primary palette
accented by vibrant secondary hues. The design conveys professionalism and
accessibility—tools for creative work demand precision and intuitive
structure. Typography is refined and hierarchical, with careful tracking on
display sizes to maintain visual rhythm. The system employs flat surfaces and
micro-elevations rather than deep shadows, creating a sense of lightness and
immediacy. Color is deployed strategically: black and white form the backbone,
while a bright green accent (#24CB71) signals action and energy. Decorative
accent hues appear in product badges and illustrative contexts, never in core
UI. The overall impression is of a sophisticated, uncluttered workspace—one
that gets out of the way and lets creative work take center stage.
source:
url: "https://www.figma.com/design/cAIP7dKJwP0i9GvXj28bRW/figma-mcp--2?node-id=0-1&t=GyxDTwS9pkv8nulh-1"
pagesAnalyzed: 6
extractedAt: 2026-11-01
tokensMeasured: true
colors:
primary: "#000000"
accent: "#24CB71"
link: "#007BE5"
canvas: "#FFFFFF"
surface-alt: "#F3FFE3"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#697485"
accent-1: "#00B6FF"
accent-2: "#FF7237"
accent-3: "#FF3737"
accent-4: "#874FFF"
accent-5: "#0D99FF"
neutral-1: "#444444"
typography:
display-xl:
fontFamily: figmaSans
fontSize: 86px
fontWeight: 400
lineHeight: 0.95
letterSpacing: -1.72px
display-lg:
fontFamily: figmaSans
fontSize: 72px
fontWeight: 400
lineHeight: 1
letterSpacing: -1.44px
display-md:
fontFamily: figmaSans
fontSize: 56px
fontWeight: 400
lineHeight: 1.1
letterSpacing: -0.84px
display-md-tight:
fontFamily: figmaSans
fontSize: 56px
fontWeight: 400
lineHeight: 1
letterSpacing: -1.25px
heading-md:
fontFamily: figmaSans
fontSize: 32px
fontWeight: 400
lineHeight: 1.3
letterSpacing: -0.32px
heading-sm:
fontFamily: figmaSans
fontSize: 24px
fontWeight: 520
lineHeight: 1.35
letterSpacing: -0.24px
heading-xs:
fontFamily: figmaSans
fontSize: 18px
fontWeight: 450
lineHeight: 1.4
letterSpacing: -0.09px
body-xl:
fontFamily: figmaSans
fontSize: 24px
fontWeight: 340
lineHeight: 1.35
letterSpacing: -0.12px
body-lg:
fontFamily: figmaSans
fontSize: 18px
fontWeight: 330
lineHeight: 1.4
letterSpacing: 0px
body-md:
fontFamily: figmaSans
fontSize: 16px
fontWeight: 320
lineHeight: 1.45
letterSpacing: 0px
body-md-tight:
fontFamily: figmaSans
fontSize: 16px
fontWeight: 320
lineHeight: 1.45
letterSpacing: -0.12px
body-md-strong:
fontFamily: figmaSans
fontSize: 16px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
body-sm:
fontFamily: figmaSans
fontSize: 14px
fontWeight: 340
lineHeight: 1.45
letterSpacing: 0px
nav:
fontFamily: figmaSans
fontSize: 16px
fontWeight: 400
lineHeight: 1.45
letterSpacing: 0px
button-lg:
fontFamily: figmaSans
fontSize: 18px
fontWeight: 330
lineHeight: 1.4
letterSpacing: -0.14px
button-lg-strong:
fontFamily: figmaSans
fontSize: 18px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
button-lg-tight:
fontFamily: figmaSans
fontSize: 18px
fontWeight: 580
lineHeight: 1.25
letterSpacing: 0px
button-md:
fontFamily: figmaSans
fontSize: 16px
fontWeight: 400
lineHeight: 1.15
letterSpacing: 0px
button-sm:
fontFamily: figmaSans
fontSize: 12px
fontWeight: 360
lineHeight: 1.25
letterSpacing: 0px
button-sm-strong:
fontFamily: figmaSans
fontSize: 12px
fontWeight: 520
lineHeight: 1.25
letterSpacing: 0px
code-md:
fontFamily: figmaMono
fontSize: 16px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0.48px
textTransform: uppercase
code-sm:
fontFamily: figmaMono
fontSize: 12px
fontWeight: 400
lineHeight: 1
letterSpacing: 0.6px
textTransform: uppercase
code-xs:
fontFamily: figmaMono
fontSize: 11px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0.44px
textTransform: uppercase
rounded:
none: 0px
xs: 5px
sm: 8px
md: 13px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 32px
xxl: 40px
xxxl: 48px
section: 60px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "oklch(0 0 none / 0.16) 0px 1px 0px 0px"
md: "rgba(0, 0, 0, 0.18) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 3px 8px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px"
elevationStrategy: layered-micro
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F3FFE3"
surfaceRaised: "#E9F5DA"
text: "#000000"
textMuted: "#697485"
border: "#E0E0E0"
accent: "#1EA85E"
accentFg: "#000000"
focusRing: "#24CB71"
elevation: shadow
dark:
bg: "#0B140F"
surface: "#1A221D"
surfaceRaised: "#262E29"
text: "#F6FDF9"
textMuted: "#9DA4A0"
border: "#323A35"
accent: "#24CB71"
accentFg: "#0B0B0C"
focusRing: "#24CB71"
elevation: "border+surface"
components:
button-filled:
textColor: "{colors.on-primary}"
height: 24px
fontSize: 11px
fontFamily: Inter
fontWeight: 450
lineHeight: 1.45
rounded: "{rounded.xs}"
backgroundColor: "{colors.accent-5}"
button-text:
textColor: "{colors.ink}"
height: 32px
padding: "0px 0px 0px 8px"
fontSize: 11px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.45
rounded: "{rounded.xs}"
button-text-sm:
textColor: "rgba(0, 0, 0, 0.898)"
height: 24px
fontSize: 11px
fontFamily: Inter
fontWeight: 450
lineHeight: 1.45
rounded: "{rounded.xs}"
button-icon:
textColor: "{colors.on-primary}"
height: 32px
fontSize: 11px
boxShadow: "rgba(0, 0, 0, 0.18) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 3px 8px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px"
fontFamily: Inter
fontWeight: 400
lineHeight: 1.45
rounded: "100%"
backgroundColor: "{colors.canvas}"
link:
textColor: "{colors.link}"
fontSize: 11px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.45
link-2:
typography: "{typography.body-lg}"
textColor: "{colors.on-primary}"
padding: "0px 6px 0px 6px"
rounded: "50%"
backgroundColor: "rgba(255, 255, 255, 0.24)"
card:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
navigation:
typography: "{typography.nav}"
textColor: "{colors.ink}"
height: 39.1875px
footer:
typography: "{typography.nav}"
textColor: "{colors.on-primary}"
border: "1px solid rgba(255, 255, 255, 0.16)"
padding: "120px 0px 120px 0px"
backgroundColor: "{colors.primary}"
footer-2:
typography: "{typography.nav}"
textColor: "{colors.ink}"
border: "1px solid rgba(0, 0, 0, 0.08)"
padding: "120px 0px 120px 0px"
backgroundColor: "{colors.canvas}"
states:
other-hover:
target: other
state: hover
textDecoration: underline
other-focus:
target: other
state: focus
textDecoration: underline
other-focus-visible:
target: other
state: focus-visible
borderWidth: 1px
input-focus-visible:
target: input
state: focus-visible
borderWidth: 3px
nav-hover:
target: nav
state: hover
opacity: 1
transform: "translateY(0px) scaleY(1)"
button-hover:
target: button
state: hover
opacity: 1
button-focus-visible:
target: button
state: focus-visible
outlineWidth: 0.125rem
breakpoints:
- width: 375
containerWidth: 327
gridColumns: 5
navLinksVisible: 0
menuToggleVisible: true
headingPx: 56
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 704
gridColumns: 5
navLinksVisible: 0
menuToggleVisible: true
headingPx: 56
bodyPx: 16
sectionPaddingX: 24
- width: 1024
containerWidth: 939
gridColumns: 5
navLinksVisible: 0
menuToggleVisible: true
headingPx: 72
bodyPx: 16
sectionPaddingX: 16
- width: 1280
containerWidth: 1173
gridColumns: 6
navLinksVisible: 1
menuToggleVisible: true
headingPx: 72
bodyPx: 16
sectionPaddingX: 24
- width: 1440
containerWidth: 1320
gridColumns: 4
navLinksVisible: 1
menuToggleVisible: true
headingPx: 86
bodyPx: 16
sectionPaddingX: 24
coverage:
statesFound: 84
gradientsFound: 0
rolesUnassigned: 6
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Figma's design system embodies a modern, minimalist aesthetic rooted in clarity and purposeful simplicity. The visual language prioritizes clean geometry, generous whitespace, and a restricted monochromatic primary palette accented by vibrant secondary hues. The design conveys professionalism and accessibility—tools for creative work demand precision and intuitive structure. Typography is refined and hierarchical, with careful tracking on display sizes to maintain visual rhythm. The system employs flat surfaces and micro-elevations rather than deep shadows, creating a sense of lightness and immediacy. Color is deployed strategically: black and white form the backbone, while a bright green accent ({colors.accent} — #24CB71) signals action and energy. Decorative accent hues appear in product badges and illustrative contexts, never in core UI. The overall impression is of a sophisticated, uncluttered workspace—one that gets out of the way and lets creative work take center stage.
Key Characteristics
{colors.primary} — #000000): Primary CTA fills, brand mark, headings, primary body text, and active states. The foundational color for all actionable and emphasis contexts.{colors.canvas} — #FFFFFF): Default page background and label text on brand-colored surfaces. The neutral backdrop.{colors.accent} — #24CB71): Bright green used alongside the achromatic primary to signal brand identity, energy, and positive action. Appears in new badges and highlights.{colors.link} — #007BE5): Inline hyperlink color; distinct from primary to disambiguate navigational text.{colors.accent-1} — #00B6FF): Decorative cyan used in product badges and illustrative components; no core UI role.{colors.accent-2} — #FF7237): Decorative orange used in product badges and illustrative components; no core UI role.{colors.accent-3} — #FF3737): Decorative red used in product badges and illustrative components; no core UI role.{colors.accent-4} — #874FFF): Decorative purple used in product badges and illustrative components; no core UI role.{colors.accent-5} — #0D99FF): Decorative blue used in product badges and illustrative components; no core UI role.{colors.body} — #697485): Secondary body copy and muted text. Used for descriptive content and reduced-emphasis information.{colors.neutral-1} — #444444): Mid-tone neutral for secondary UI elements and borders.{colors.surface-alt} — #F3FFE3): Soft pale green alternating section band. Provides subtle visual rhythm without overwhelming content.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | figmaSans | 86px | 400 | 0.95 | -1.72px | Hero headlines; extreme compression for visual impact |
| Display Large | figmaSans | 72px | 400 | 1.0 | -1.44px | Main page headlines; compressed tracking |
| Display Medium | figmaSans | 56px | 400 | 1.1 | -0.84px | Section headlines; tight letter-spacing |
| Display Medium Tight | figmaSans | 56px | 400 | 1.0 | -1.25px | Alternative display size with tighter line-height |
| Heading Medium | figmaSans | 32px | 400 | 1.3 | -0.32px | Subsection titles; light compression |
| Heading Small | figmaSans | 24px | 520 | 1.35 | -0.24px | Card titles and secondary headings; semi-bold weight |
| Heading XS | figmaSans | 18px | 450 | 1.4 | -0.09px | Small headings; medium-bold weight |
| Body Large | figmaSans | 18px | 330 | 1.4 | 0px | Emphasis body copy; light weight for reading comfort |
| Body XL | figmaSans | 24px | 340 | 1.35 | -0.12px | Large body; slight compression for cohesion |
| Body Medium Strong | figmaSans | 16px | 400 | 1.4 | 0px | Regular body text; regular weight for clarity |
| Body Medium | figmaSans | 16px | 320 | 1.45 | 0px | Standard body copy; light weight for extended reading |
| Body Medium Tight | figmaSans | 16px | 320 | 1.45 | -0.12px | Compressed body variant with tight tracking |
| Body Small | figmaSans | 14px | 340 | 1.45 | 0px | Captions and fine print; lighter weight |
| Button Large | figmaSans | 18px | 330 | 1.4 | -0.14px | Large button labels; compressed tracking |
| Button Large Strong | figmaSans | 18px | 400 | 1.25 | 0px | Alternative large button; regular weight |
| Button Large Tight | figmaSans | 18px | 580 | 1.25 | 0px | Bold large button variant |
| Button Medium | figmaSans | 16px | 400 | 1.15 | 0px | Standard button label; regular weight |
| Button Small | figmaSans | 12px | 360 | 1.25 | 0px | Small button label; semi-bold weight |
| Button Small Strong | figmaSans | 12px | 520 | 1.25 | 0px | Bold small button variant |
| Navigation | figmaSans | 16px | 400 | 1.45 | 0px | Nav links; regular weight with generous line-height |
| Code Small | figmaMono | 12px | 400 | 1.0 | 0.6px | Inline code; uppercase transform; tight line-height |
| Code Medium | figmaMono | 16px | 400 | 1.3 | 0.48px | Code block text; uppercase transform |
| Code XS | figmaMono | 11px | 400 | 1.25 | 0.44px | Smallest code label; uppercase transform |
Primary Button (Filled)
{colors.accent-1} (#00B6FF){colors.canvas} (#FFFFFF)0px{rounded.xs} (5px)0px none{typography.code-xs} (12px, weight 400, line-height 1.25, uppercase)none24px105.938pxSecondary Button (Text)
rgba(0, 0, 0, 0) (transparent){colors.primary} (#000000)0px 0px 0px 8px{rounded.xs} (5px)0px none{typography.code-xs} (12px, weight 400, line-height 1.25, uppercase)none32pxTertiary Button (Text Small)
rgba(0, 0, 0, 0) (transparent)rgba(0, 0, 0, 0.898) (nearly opaque black)0px{rounded.xs} (5px)0px none{typography.code-xs} (12px, weight 450, line-height 1.25, uppercase)none24pxIcon Button
{colors.canvas} (#FFFFFF){colors.canvas} (#FFFFFF)0px{rounded.full} (100% / pill shape)1px solid rgba(0, 0, 0, 0) (transparent border, no visible stroke){typography.code-xs} (12px, weight 400, line-height 1.25, uppercase){colors.primary} elevation — rgba(0, 0, 0, 0.18) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 3px 8px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px32px32pxNavigation Bar
rgba(0, 0, 0, 0) (transparent){colors.primary} (#000000)0px0px0px none{typography.nav} (16px, weight 400, line-height 1.45)none39.1875px506pxInline Link (Default)
rgba(0, 0, 0, 0) (transparent){colors.link} (#007BE5)0px0px0px none{typography.code-xs} (12px, weight 400, line-height 1.25, uppercase)noneautoautoCircular Link (Default 2)
rgba(255, 255, 255, 0.24) (translucent white){colors.canvas} (#FFFFFF)0px 6px 0px 6px50% (perfect circle)0px none{typography.body-lg} (18px, weight 330, line-height 1.4)none36px36pxCard (Default)
rgba(0, 0, 0, 0) (transparent){colors.primary} (#000000)0px{rounded.none} (0px / sharp corners)0px none{typography.body-lg} (18px, weight 330, line-height 1.4)none802.797px330pxFooter (Dark)
{colors.primary} (#000000){colors.canvas} (#FFFFFF)120px 0px 120px 0px0px1px solid rgba(255, 255, 255, 0.16) (subtle white hairline){typography.nav} (16px, weight 400, line-height 1.45)none1224.28px1440pxFooter (Light)
{colors.canvas} (#FFFFFF){colors.primary} (#000000)120px 0px 120px 0px0px1px solid rgba(0, 0, 0, 0.08) (subtle dark hairline){typography.nav} (16px, weight 400, line-height 1.45)none1224.28px1440pxFigma's spacing system uses an 8px base unit with a scale that grows progressively:
{spacing.xxs} = 4px — Micro padding within dense components{spacing.xs} = 8px — Tight spacing between adjacent elements{spacing.sm} = 12px — Small padding and gaps{spacing.md} = 16px — Standard padding and margins{spacing.lg} = 24px — Generous padding for card and section internals{spacing.xl} = 32px — Large gaps between sections{spacing.xxl} = 40px — Extra-large section spacing{spacing.xxxl} = 48px — Spacious padding for major containers{spacing.section} = 60px — Section gap{spacing.band} = 64px — Large band/hero section paddingUsage Context: {spacing.md} (16px) is the baseline for most padding and margins; {spacing.lg} (24px) is used for card interiors and section padding at desktop; {spacing.band} (64px) frames hero sections and full-width bands.
1320px939px; section padding-x 16px704px; section padding-x 24px327px; section padding-x 0pxNavigation collapses at 1280px (nav links become 0 visible, menu toggle appears). Largest headings scale from 56px (tablet) to 86px (1440px+).
Whitespace is abundant and purposeful. Sections are separated by {spacing.band} (64px) or {spacing.section} (60px) gaps, creating visual breathing room. Card interiors use {spacing.lg} (24px) padding; body text has a 1.4–1.45 line-height for comfortable reading. The design avoids visual clutter; decorative elements are sparse, and focus flows naturally from heading to body to call-to-action.
{rounded.none} = 0px — Cards and full-width containers (sharp, architectural aesthetic){rounded.xs} = 5px — Buttons, input fields (subtle rounding){rounded.sm} = 8px — Button hover state, secondary interactive elements{rounded.md} = 13px — Larger interactive containers{rounded.full} = 9999px — Icon buttons and circular elements (perfect pill shape)1px — Card borders, footer dividers (hairline stroke)Border widths are minimal and restrained; only footer and card components use visible borders, and only at high opacity ({colors.accent-1} hairline for dark footer, neutral hairline for light footer).
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Default surface; cards, containers |
| Micro (sm) | oklch(0 0 none / 0.16) 0px 1px 0px 0px | Navigation bar; subtle top border only |
| Micro (md) | rgba(0, 0, 0, 0.18) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 3px 8px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px | Buttons; layered, barely-there lift |
Shadow Philosophy: Figma's elevation strategy is layered-micro—depth comes from stacked near-transparent layers rather than a single, pronounced shadow. The multi-part button shadow (three layers with opacities of 0.18, 0.1, and 0.1) creates a barely-there lift without visual weight. This reinforces the modern, minimalist aesthetic: UI elements float slightly above the canvas without dominating visual hierarchy. Flat surfaces (0 shadow) are the default; shadows are reserved for interactive and floating elements.
0.60) — Slightly reduced opacity; used for disabled or secondary states0.30) — Heavy reduction; used for subtle backgrounds or overlaysOpacity is used sparingly to modulate color intensity without introducing new hues.
The stacking scale follows a progressive but coarse ladder:
z-index: 1, 2, 3, 4z-index: 6, 8z-index: 10, 11This simple scale ensures that dropdowns sit above navigation (base), which sit above page content. Modal or toast layers would sit even higher (not explicitly measured but implied by the spacing).
0px) for cards and full-width containers. They reinforce the clean, architectural aesthetic.{spacing.md} (16px) as the default padding and margin unit. Scale up to {spacing.lg} (24px) or {spacing.band} (64px) for emphasis.{colors.primary} (#000000) as the foundational color for headings, primary CTAs, and primary text. Reserve {colors.accent} (green) for brand identity and new features.{rounded.xs} or {rounded.sm}. Pill-shaped buttons ({rounded.full}) are reserved for circular icon buttons.{rounded.none} (0px) is the standard; exceptions are rare.4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 60px, 64px) is fixed; use these only.{colors.accent-1} through {colors.accent-5} appear in badges and illustrations; they do not carry functional meaning.| Breakpoint | Viewport Width | Content Width | Grid Columns | Nav Visible | Largest Heading | Section Padding X |
|---|---|---|---|---|---|---|
| Mobile | 375px | 327px | 5 | 0 | 56px | 0px |
| Tablet | 768px | 704px | 5 | 0 | 56px | 24px |
| Desktop | 1024px | 939px | 5 | 0 | 72px | 16px |
| Large Desktop | 1280px | 1173px | 6 | 1 | 72px | 24px |
| Extra Large | 1440px | 1320px | 4 | 1 | 86px | 24px |
Collapse Strategy: Navigation menu becomes a toggle at 1280px and below. Above 1280px, nav links render inline. Content column grows linearly with viewport; grid columns remain at 5 across most breakpoints, expanding to 6 at 1280px and compressing to 4 at 1440px (likely a card grid reflow). Section padding-x varies (0px on mobile, up to 24px on desktop) to accommodate the shrinking viewport; padding-y remains consistent at {spacing.band} (64px) or {spacing.section} (60px). Heading sizes scale in two steps: 56px at mobile/tablet, 72px at desktop, 86px at extra-large.
Minimum interactive element size: 24px × 24px (buttons); 32px × 32px (icon buttons preferred). Button padding is often minimal (0px on filled variants), so sufficient height is ensured by {typography.button-sm} (12px) or {typography.button-md} (16px) font size plus vertical padding. Icon buttons are consistently 32px square, exceeding touch targets.
{typography.body-md} — 16px) remains constant.{spacing.band} (64px) may compress on mobile (not explicitly measured, but section gaps shrink as column width shrinks). Padding-x on sections ranges from 0px (mobile) to 24px (desktop).{colors.primary} — #000000){colors.accent} — #24CB71){colors.link} — #007BE5){colors.canvas} — #FFFFFF){colors.body} — #697485){colors.surface-alt} — #F3FFE3)#00B6FF, #FF7237, #FF3737, #874FFF, #0D99FF){rounded.none} — 0px) for cards and full-width containers; use {rounded.xs} (5px) for buttons and inputs. Icon buttons are {rounded.full} (9999px).{typography.display-xl} — -1.72px at 86px). This compression is non-negotiable and defines the brand character.{spacing.md} (16px) is default padding; scale up to {spacing.lg} (24px) or {spacing.band} (64px) for emphasis. Never invent intermediate values.rgba(0, 0, 0, 0.18) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 3px 8px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px); everything else is flat.{colors.accent} (green) for brand identity and green badges; decorative accents (cyan, orange, red, purple, blue) only in illustrations and product logos, never in core UI.{colors.accent-1} through {colors.accent-5}) appear in product badges and illustrations but have no measurable role in core UI. Use them for visual variety only; do not assign functional meaning.1px) borders were measured. No thick or medium stroke variants were found; do not invent them.1, 2, 3, 4, 6, 8, 10, 11 or request extended guidance.{typography.code-xs} through {typography.code-md}) includes uppercase text-transform; verify this is applied to code blocks before deployment.