Liquid

Light and dark

Liquid

Specification values · alpha

Theme values

Values: Colors

Values: Typography

Values: Radii

Values: Spacing

Values: Component recipes

version: alpha
name: Liquid
description: 'macOS 27 Liquid Glass over a real desktop: a translucent edge-to-edge sidebar, kit-recipe glass toolbar groups, and a lensing inspector sheet and selection bar floating over opaque content.'
colors:
  # Resolved from the NetScript Figma library, Light and Dark windows, Theme mode "Glass" (the
  # seed of Liquid's own mode).
  # Keys are the --ns-* suffix from each variable's code syntax.
  card: '#f9f9fb'
  card-dark: '#18191b'
  muted: '#f0f0f3'
  muted-dark: '#212225'
  surface-raised: '#ffffffd1'
  surface-raised-dark: '#2b2e36c7'
  fg: '#1c2024'
  fg-dark: '#edeef0'
  muted-fg: '#60646c'
  muted-fg-dark: '#b0b4ba'
  primary-text: '#113264'
  primary-text-dark: '#70b8ff'
  success-text: '#2a7e3b'
  success-text-dark: '#71d083'
  warning-text: '#4f3422'
  warning-text-dark: '#ffca16'
  warning-subtle: '#fff7c2'
  warning-subtle-dark: '#302008'
  destructive-text: '#641723'
  destructive-text-dark: '#ff9592'
  material-track: '#7575801f'
  material-track-dark: '#7575803d'
  material-fill-strong: '#ffffffd1'
  material-fill-strong-dark: '#2b2e36c7'
  liquid-primary-default: '#0063e1'
  liquid-primary-default-dark: '#0058d0'
  liquid-primary-fg: '#ffffff'
  liquid-primary-fg-dark: '#ffffff'
  liquid-primary-text: '#0066cc'
  liquid-primary-text-dark: '#409cff'
  liquid-material-glass-sidebar: '#f3f3f694'
  liquid-material-glass-sidebar-dark: '#1c1c1f85'
  liquid-material-glass-control: '#fbfbfb'
  liquid-material-glass-control-dark: '#2c2c2e'
  liquid-material-glass-sheet: '#f5f5f7b8'
  liquid-material-glass-sheet-dark: '#262629cc'
  liquid-material-glass-float: '#f7f7f8b8'
  liquid-material-glass-float-dark: '#2c2c2eb2'
  liquid-toolbar-scroll-edge: '#ffffffd9'
  liquid-toolbar-scroll-edge-dark: '#1e1e1ed9'
  liquid-toolbar-hairline: '#0000000f'
  liquid-toolbar-hairline-dark: '#00000099'
  liquid-sidebar-selection: '#00000012'
  liquid-sidebar-selection-dark: '#ffffff1a'
  liquid-effect-outline: '#e3e3e6'
  liquid-effect-outline-dark: '#00000099'
  liquid-effect-side: '#f2f2f2'
  liquid-effect-side-dark: '#0000004d'
  liquid-effect-specular: '#ffffffe5'
  liquid-effect-specular-dark: '#ffffff24'
  liquid-accent-system: '#007aff'
  liquid-accent-system-dark: '#0a84ff'
  liquid-border-ring: '#007aff'
  liquid-border-ring-dark: '#0a84ff'
  liquid-border-input: '#86868b'
  liquid-border-input-dark: '#8e8e93'
  liquid-switch-on-track: '#34c759'
  liquid-switch-on-track-dark: '#30d158'
  liquid-tag-green: '#34c759' # light delta-pill tint at 12% opacity
  liquid-tag-green-dark: '#30d158'
  liquid-success-text: '#1e7b34' # light green deltas; dark deltas bind core success-text
  liquid-status-shipped-fg: '#005fbe' # Shipped pill label and dot: 4.57:1 on its tint
  liquid-status-shipped-fg-dark: '#409cff'
  liquid-info-bg: '#e8f1fd'
  liquid-info-bg-dark: '#17304f'
  liquid-window-close: '#ff5f57'
  liquid-window-minimize: '#febc2e'
  liquid-window-zoom: '#28c840'
typography:
  hero: {
    fontFamily: Inter,
    fontSize: 40px,
    fontWeight: 700,
    lineHeight: 48px,
    letterSpacing: -0.015em,
  }
  amount: {
    fontFamily: Inter,
    fontSize: 30px,
    fontWeight: 700,
    lineHeight: 36px,
    letterSpacing: -0.015em,
  }
  kpi: {
    fontFamily: Inter,
    fontSize: 26px,
    fontWeight: 700,
    lineHeight: 32px,
    letterSpacing: -0.015em,
  }
  sheet-title: {
    fontFamily: Inter,
    fontSize: 22px,
    fontWeight: 700,
    lineHeight: 28px,
    letterSpacing: -0.015em,
  }
  window-title: {
    fontFamily: Inter,
    fontSize: 15px,
    fontWeight: 600,
    lineHeight: 18px,
    letterSpacing: -0.005em,
  }
  row: {
    fontFamily: Inter,
    fontSize: 14px,
    fontWeight: 400,
    lineHeight: 18px,
    letterSpacing: -0.004em,
  }
  body: {
    fontFamily: Inter,
    fontSize: 13px,
    fontWeight: 400,
    lineHeight: 17px,
    letterSpacing: -0.004em,
  }
  emphasis: { fontFamily: Inter, fontSize: 13px, fontWeight: 600, lineHeight: 17px }
  helper: {
    fontFamily: Inter,
    fontSize: 12px,
    fontWeight: 400,
    lineHeight: 16px,
    letterSpacing: 0.003em,
  }
  caption: {
    fontFamily: Inter,
    fontSize: 11px,
    fontWeight: 600,
    lineHeight: 14px,
    letterSpacing: 0.03em,
  }
  data: {
    fontFamily: Inter,
    fontSize: 13px,
    fontWeight: 500,
    lineHeight: 17px,
    fontFeature: '"tnum" 1',
  }
rounded:
  none: 0px
  field: 7px
  row: 8px
  item: 10px
  group: 12px
  platter: 14px
  window: 16px
  sheet: 22px
  full: 9999px
spacing:
  desktop-margin: 80px
  sheet-gap: 12px
  sidebar: 240px
  toolbar: 52px
  control: 36px
  content-inset: 24px
  stack: 12px
  row: 40px
  grouped-row: 44px
components:
  window: {
    backgroundColor: '{colors.card}',
    rounded: '{rounded.window}',
    width: 1280px,
    height: 1000px,
  }
  sidebar: { backgroundColor: '{colors.liquid-material-glass-sidebar}', width: 240px }
  sidebar-dark: { backgroundColor: '{colors.liquid-material-glass-sidebar-dark}' }
  sidebar-item-selected: {
    backgroundColor: '{colors.liquid-sidebar-selection}',
    textColor: '{colors.fg}',
    typography: '{typography.emphasis}',
    rounded: '{rounded.item}',
    height: 32px,
  }
  toolbar-scroll-edge: { backgroundColor: '{colors.liquid-toolbar-scroll-edge}', height: 52px }
  toolbar-group: {
    backgroundColor: '{colors.liquid-material-glass-control}',
    textColor: '{colors.fg}',
    rounded: '{rounded.full}',
    height: 36px,
  }
  toolbar-group-dark: {
    backgroundColor: '{colors.liquid-material-glass-control-dark}',
    textColor: '{colors.fg-dark}',
  }
  button-prominent: {
    backgroundColor: '{colors.liquid-primary-default}',
    textColor: '{colors.liquid-primary-fg}',
    typography: '{typography.emphasis}',
    rounded: '{rounded.full}',
    height: 36px,
  }
  button-prominent-dark: {
    backgroundColor: '{colors.liquid-primary-default-dark}',
    textColor: '{colors.liquid-primary-fg-dark}',
  }
  kpi-platter: {
    backgroundColor: '{colors.muted}',
    textColor: '{colors.fg}',
    typography: '{typography.kpi}',
    rounded: '{rounded.platter}',
    height: 92px,
    padding: 14px 16px,
  }
  banner: {
    backgroundColor: '{colors.warning-subtle}',
    textColor: '{colors.fg}',
    rounded: '{rounded.group}',
    height: 44px,
    padding: 0 14px,
  }
  segmented-track: {
    backgroundColor: '{colors.material-track}',
    rounded: '{rounded.full}',
    height: 34px,
    padding: 2px,
  }
  segment-thumb: {
    backgroundColor: '{colors.material-fill-strong}',
    textColor: '{colors.fg}',
    typography: '{typography.emphasis}',
    rounded: '{rounded.full}',
    height: 30px,
  }
  table-row-zebra: {
    backgroundColor: '{colors.muted}',
    textColor: '{colors.fg}',
    typography: '{typography.body}',
    rounded: '{rounded.row}',
    height: 40px,
  }
  table-row-selected: {
    backgroundColor: '{colors.liquid-primary-default}',
    textColor: '{colors.liquid-primary-fg}',
    rounded: '{rounded.row}',
    height: 40px,
  }
  table-row-selected-dark: {
    backgroundColor: '{colors.liquid-primary-default-dark}',
    textColor: '{colors.liquid-primary-fg-dark}',
  }
  selection-bar: {
    backgroundColor: '{colors.liquid-material-glass-float}',
    textColor: '{colors.liquid-primary-text}',
    rounded: '{rounded.sheet}',
    height: 44px,
  }
  selection-bar-dark: {
    backgroundColor: '{colors.liquid-material-glass-float-dark}',
    textColor: '{colors.liquid-primary-text-dark}',
  }
  inspector-sheet: {
    backgroundColor: '{colors.liquid-material-glass-sheet}',
    textColor: '{colors.fg}',
    rounded: '{rounded.sheet}',
    width: 360px,
  }
  inspector-sheet-dark: {
    backgroundColor: '{colors.liquid-material-glass-sheet-dark}',
    textColor: '{colors.fg-dark}',
  }
  grouped-group: { backgroundColor: '{colors.surface-raised}', rounded: '{rounded.group}' }
  grouped-row: {
    textColor: '{colors.fg}',
    typography: '{typography.row}',
    height: 44px,
    padding: 0 15px,
  }
  switch-on: {
    backgroundColor: '{colors.liquid-switch-on-track}',
    rounded: '{rounded.full}',
    width: 46px,
    height: 28px,
  }
  switch-off: {
    backgroundColor: '{colors.material-track}',
    rounded: '{rounded.full}',
    width: 46px,
    height: 28px,
  }

Overview

• Thesis: macOS 27 Liquid Glass over a real desktop. Glass is used only for navigation and controls (sidebar, toolbar groups, inspector sheet, selection bar, segmented thumb). Content stays opaque, and the wallpaper shows through the glass.
• Signature moves:
  1. Desktop under glass. The 1280×1000 window (radius 16) sits 80px inside a 1440×1160 wallpaper of five LAYER_BLUR 180 blobs. The 240px edge-to-edge sidebar is liquid-material-glass-sidebar (58% light, 52% dark) with a 60px backdrop blur, so the wallpaper tints the navigation.
  2. Specular rims. The sheet, the selection bar and the segmented thumb carry a 1px linear-gradient stroke (white 100→25→75% light, 34→5→18% dark), a 1px top inner highlight, a 20px inner glow and stronger lensing (refraction 0.55, depth 22, dispersion 0.25).
  3. Kit-recipe toolbar. 36px glass groups on a 52px hard scroll edge: #FBFBFB fill, 0.5px outline, ±0.75px side shading, no drop shadow. A blue prominent capsule ends the toolbar.
• Anchor: Apple macOS 27 / iOS 27 Liquid Glass, measured from Apple's macOS 27 Figma kit (see Sources). Taken: measured geometry and the toolbar-item recipe. Kit facts are applied as local corrections to the NetScript proportions. A faithful reproduction of the kit is the separate macOS 27 theme (planned, #2443). Not copied: SF Pro, SF Symbols, wallpapers, kit components. Expo's studies influenced "glass on navigation only" and the detached sheet.
• Family: Platform. Best for: pro desktop apps, inspectors, media and asset tools. Avoid for: content-heavy reading and dense data entry; suggest cupertino or studio.
• Feel: luminous, spatial, current. It should look like the current macOS.

Colors

• Ground and surface ladder. Wallpaper (light #6fa8ff, #9fe3e6, #ffd3b8, #c7b6ff, white; dark #1b4ddb, #0b8a94, #6a2bc2, #d9480f, #0a1230) → glass sidebar → opaque content card #f9f9fb / #18191b → platters and zebra rows muted #f0f0f3 / #212225 → floating glass (sheet 72% / 80%, selection bar 72% / 70%).
• Accent policy. liquid-primary-default #0063e1 / #0058d0 fills only the selected row, New Order and Save Changes, each with white text. Inline actions (Review, Mark as Shipped, Print Label, Refund) are primary-text. Sidebar selection is grey (liquid-sidebar-selection, black 7% / white 10%), never blue, as in the macOS 27 kit.
• Status colours. Status is a 7px dot plus a word. Dots and channel markers use the scheme-correct Apple system hues through liquid-tag-*: light #34c759, #ff9500, #af52de, #ff3b30, #8e8e93; dark #30d158, #ff9f0a, #bf5af2, #ff453a, #8e8e93. Green deltas use liquid-success-text #1e7b34 in light and success-text #71d083 in dark; other deltas use destructive-text and warning-text. The banner is warning-subtle.
• Dark design notes. Dark glass is a smoky tint. The sheet is #262629 at 80%, the bar #2c2c2e at 70%, the sidebar #1c1c1f at 52%. Rims drop to 34→5→18% white. Top highlights drop from 90% to 22%. Outlines turn to black 60% (liquid-effect-outline). Primaries get darker (#0058d0), never paler. No white slab, white perimeter or white outer shadow.

Typography

• Family. Inter (OFL) stands in for SF Pro, which loads in Figma but renders blank from the Plugin API. Code stack: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui. SF Pro is never embedded. #2414 decides whether the system face comes first.
• Scale (literal in Figma, not bound to Theme type/*). Hero 40/48 Bold −1.5%. Amount 30/36 Bold. KPI 26/32 Bold. Sheet title 22/28 Bold, all −1.5%. Window title 15/18 Semi Bold −0.5%. Grouped rows 14/18 −0.4%. Body and table 13/17 −0.4%, the macOS body size. Helper 12/16 +0.3%. Captions 11/14 Semi Bold: uppercase +2% (sidebar) and +3% (sheet), title case +0.3% (table headers).
• Weights. Numbers and titles are Bold. Selection and captions are Semi Bold. Order IDs, totals and actions are Medium. Everything else is Regular.

Layout

• Desktop. 1440×1160; the window at (80, 80).
• Window. 1280×1000, radius 16. Sidebar 0–240. Content 240–1280. Toolbar band 52 across the content.
• Toolbar (y8, 36 tall). Sidebar toggle circle at x260. History group (back/forward, 75 wide). Title block. Spacer. View group (filter, sort, export, 108). Search capsule 220. New Order 116. Traffic lights are 14px at x18/41/64, y19, centred on the 52px row (kit pitch 23).
• Content column x264, 632 wide. Hero 0–300 (revenue plus an area chart bleeding the full 1040). KPI platters (3×203, 12 gap) at y316. Banner y420. Segmented y480. Table y528 (header 30, rows 40). "Showing 6 of 3,182 · 1 selected".
• Inspector sheet 360×924 at x908, y64: 12px from the toolbar, the right edge and the bottom. 17px inner inset. Sections 14px apart. Actions pinned to the bottom.
• Selection bar 489×44 at y900, floating over the content's bottom.
• Density. Comfortable, set explicitly on both windows.

Elevation & Depth

Depth comes from material rather than shadow. Three glass weights sit over one opaque content plane.

• Lensing: Figma GLASS refraction 0.55, depth 22, dispersion 0.25, light 0.90 at −50° on float and thumb glass; 0.35 / 12 / 0.15 / 0.85 on toolbar controls. CSS has no refraction. It ships as an SVG displacement filter where supported, otherwise as blur only. Runtime proof is pending in #2419.
• Content (hero, platters, banner, table) has no material and no shadow.

Shapes

• Concentric: window 16; toolbar items full pills (36 → radius 18). Sheet and selection bar 22. Groups 12, inset 17px inside the sheet, with rows inset 15px inside the group. Rows 8. Fields 7. Platters 14. Banner 12. Sidebar items 10. The segmented track and thumb are pills (17 / 15).
• Strokes: 0.5px window and kit outlines; 1px group strokes (black 6% / white 10%); 1px grouped-row dividers (black 8%); 1.5px white ring on the selected avatar.

Components

Do's and Don'ts

• Do keep the NetScript proportions (240 sidebar, 632 content, 360 sheet). Apply kit facts as local corrections. Rebuilding the layout from the kit produces the macOS 27 theme, not Liquid.
• Don't apply a 34px-window / 72px-toolbar template.
• Do put glass only on navigation and controls; content stays opaque (Apple materials guidance).
• Do put a desktop wallpaper behind the glass, never a flat page (GUIDELINES §5).
• Do keep sidebar selection grey and the toolbar items flat, with no drop shadow.
• Do put white text only on #0063e1 / #0058d0 (5.42 / 6.35:1). Never on #0a84ff (3.65:1).
• Do keep the colourful avatars: scheme-hue discs with black #000000 initials (light minimum 5.08:1 on #af52de, dark minimum 5.76:1 on #0a84ff). Don't put white initials on them (2.02–3.65:1), and don't swap them for a pastel template.
• Do give editable fields and off-switch tracks a 1px liquid-border-input edge ≥3:1. The off track edge measures 3.59:1 light / 4.28:1 dark.
• Do draw focus as a solid 3px liquid-border-ring band (1px inside stroke plus a 2px solid ring), never a translucent halo: 3.98:1 light / 3.83:1 dark against the group.
• Do keep tinted labels ≥4.5:1 at their actual composite. Light green deltas use liquid-success-text #1e7b34 (4.69:1 on the platter, 4.62:1 on the 12% green pill).
• Do set the "Shipped" pill's label and dot in liquid-status-shipped-fg (#005fbe light, #409cff dark) on the 14% accent tint: 4.57:1 light, 4.53:1 on the darkest pill tint. Never use liquid-primary-text #0066cc there; it measures 4.10:1. Don't recolour the selected row's white label.
• Do design dark as smoky glass with darker tints, dim rims and a darker blue. Never use a white perimeter or white shadow.
• Don't reuse Cupertino capsules or grouped cards. Keep the two themes visually distinct.

Iconography & Imagery

• Lucide (ISC) as an SF Symbols stand-in. 17px nav icons tinted per destination; 16px toolbar and banner glyphs; 15px bar actions in primary-text; 13–14px chevrons and close glyphs.
• Avatars: circular, 22px (table) and 28px (account), scheme-correct Apple-hue fills with black initials (see Do's and Don'ts).
• The wallpaper is required: five blurred colour fields. Never use an Apple wallpaper or a photo with trademarks. Charts: one area chart with a gradient fill and a 2.5px line.

Motion & States

• States are pending in #2416 and runtime checks in #2419. Intended physics:
  • glass lensing intensifies on press (the GUIDELINES "state physics" for Liquid);
  • the segmented thumb and selection bar slide with a spring of about 300ms;
  • the sheet presents from the trailing edge;
  • hover adds liquid-state-hover-overlay (black 6% / white 8%).
• Reduced motion (proposed): cross-fade instead of slide. Reduced transparency (proposed): glass becomes opaque liquid-surface-*, outlines kept. Neither variant is drawn yet.

Accessibility

Contrast ratios are measured on exported pixels.

• Hit targets: toolbar 36, rows 40, grouped rows 44, bar actions 32.
• RTL: mirror the sidebar, toolbar order, traffic lights and sheet side.

NetScript Mapping

• Roles pending in #2414. These values are still literal in Figma:
  • the pink avatar hue #ff2d55 / #ff375f, which has no liquid-tag-* role yet;
  • the black avatar initials #000000;
  • white labels and knobs, which move to liquid-primary-fg;
  • hairlines (black 6–18% / white 10–28%), which need roles;
  • the on-accent rims (white 30–35%) and the selected-avatar ring (white 90%);
  • type and radii, because Liquid's mode still holds the Glass scale, which belongs to Cupertino.
  • Green deltas bind liquid-success-text in light and core success-text in dark; #2414 picks one role.
• Status. Values come from the NetScript Figma library. Role registration, fonts and tnum are tracked in #2414, component states, focus and reduced transparency in #2416, and runtime checks such as glass compositing, selection-bar occlusion and sheet motion in #2419.

Sources

• Measured from Apple's macOS 27 Figma kit: window radius 16; sidebar 240; toolbar 52; "Scroll Edge Effect - Hard" blur 6; window controls 14px at x219/242/265 (pitch 23), 19px below the toolbar top; toolbar items 36 with a 28px inner button; the item recipe is fill #fbfbfb, 0.5px spread #ebebeb, ±0.75px #f2f2f2, no drop shadow.
• NetScript deviations from the kit: outline #e3e3e6 (not #ebebeb); an added GLASS (0.35), a 1px black 10% stroke and a top highlight on toolbar items; sidebar blur 60 (the inspected kit sidebar instance exposes no blur effect; the kit's canonical sidebar blur remains unverified).
• Links: Apple Design Resources, Meet Liquid Glass, Get to know the new design system, Expo: Maps-style sheets.
• Not copied: SF Pro, SF Symbols, Apple wallpapers, kit components.
• Fixture content is invented: Northwind, every name, order, amount, channel split (1,904 / 612 / 418 / 248), tab counts (3,182 / 214 / 2,881 / 87), the revenue series and the 48m Jonas Weber activity entry.