The skill mark is the same ghost and shell on a light ground: skill is the skills-only edition of agents. The same app icon is the organization avatar, the mark on the organization profile and the mark of the skill CLI.

The icon is a Liquid Glass app icon built in Icon Composer. Its Icon Composer document and its rendered assets are generated from the entry in Iconography; change the entry or the layer artwork, then regenerate.

This file follows Google's DESIGN.md format (version: alpha). Every token lives in the front matter; the sections below explain intent and cite token names instead of values. Lint this file locally with the official @google/design.md parser through the toolchain; validation requires zero errors and zero warnings. github-readme-design's toolchain renders terminal demos, social previews and the organization profiles from these tokens through the same parser. Change a token, then regenerate every output that reads it.

skill-cli chooses the agents family values for every token, so skill reads as an edition of agents. primary is the family indigo. It marks what a reader acts on, the terminal prompt; primary-dark lifts the same hue for dark surfaces.

ink is a deep indigo for titles and commands, so text keeps the family's hue instead of a neutral black; ink-dark is its counterpart on dark surfaces.

The terminal-* colors build a quiet window around the session: a near-white surface, a slightly deeper title bar and a hairline border in light, and the shell's night blue in dark. Output is one step softer than commands, so the eye goes to what was typed; terminal-dim is reserved for the window title.

The social-preview-* colors are the card's pale lavender ground and the muted tone of its About sentence.

App icon colors are defined by its entry in Iconography.

One family, Google Sans Code, carries every lettering role. Its MONO axis switches between a monospaced and a proportional design and wght sets the weight; each typography token selects both. Terminal sessions and code are set monospaced so output keeps its column grid; titles, labels and body text are set proportional, which reads more compactly at display sizes.

Rendered lettering, terminal sessions included, is converted to glyph outlines from .github/design/fonts/GoogleSansCode[MONO,wght].ttf, so every reader sees the same letterforms and widths whatever fonts they have installed. The font is Google Sans Code v7.001 from the googlefonts/googlesans-code release archive (SHA-256 eebba2a438882396e8530cad6d6cb80182b0afb6e9e0ad07b7340359a53ba2e9), licensed under the SIL Open Font License 1.1 (.github/design/fonts/OFL.txt).

A terminal window is never narrower than terminal-min-width and grows with its widest line. Its maximum is the width of GitHub's README column, a platform limit the renderer enforces: a session that does not fit is shortened, never scaled down. The title bar is terminal-title-bar tall, the session sits terminal-padding from every edge, and one empty line separates commands.

A social preview fills GitHub's 1280×640 canvas. The icon is a social-preview-icon square set social-preview-padding from the left edge, and the text column starts social-preview-gap after it. Owner, title and About stack social-preview-stack apart, centered vertically. Text is never cut: a long title shrinks, then breaks at a hyphen or slash, and the About sentence wraps.

The public profile (profile/README.md) and the member dashboard in the private .github-private repository are rendered locally by github-readme-design's toolchain from profile/catalog.json. The dashboard also supplies its member input and the accepted catalog revision. The umbrella mark is a profile-header-icon square on the public profile and a profile-member-header-icon square on the dashboard; repository icons use profile-row-icon and profile-member-row-icon.

Presentation surfaces are flat: no shadows, gradients or blur. A terminal window stands apart from the page by its hairline frame alone. Depth belongs to the app icon, whose glass is defined in Iconography.

Terminal windows use the terminal corner radius, a soft corner that echoes the app icon without imitating its continuous curve. The title bar carries no window buttons: the session is the subject, not a desktop.

Each component is a presentation role. The light appearance carries the base name; the dark appearance adds -dark and lists only the properties that change, which renderers merge over the base.

Each repository commits its card at .github/assets/social-preview/social-preview.png. Render and check the card locally from this file using the toolchain commands.

• Do change a value only in the front matter, then regenerate every output that reads it.
• Do keep a terminal session short enough to fit GitHub's README column at actual size.
• Do select light and dark images with <picture> and prefers-color-scheme.
• Don't restate token values in prose; cite token names.
• Don't ship live text in rendered images; outline it.
• Don't add window buttons, shadows or gradients to terminal windows.
• Don't use primary for body text or large fills; it marks what a reader acts on.

{
  "app_icons": {
    "skill-cli": {
      "background": "#FFFFFF",
      "gradient": true,
      "groups": [
        {
          "name": "Spirit",
          "shadow": {
            "kind": "layer-color",
            "opacity": 0.5
          },
          "translucency": {
            "enabled": true,
            "value": 0.4
          },
          "refractivity": {
            "enabled": true,
            "strength": 0.4,
            "depth": 0.16
          },
          "layers": [
            {
              "source": ".github/design/icons/skill-cli/layers/spirit-a.svg",
              "name": "Spirit A",
              "fill": {
                "automatic-gradient": "#B57AFF"
              }
            },
            {
              "source": ".github/design/icons/skill-cli/layers/spirit-b.svg",
              "name": "Spirit B",
              "fill": {
                "automatic-gradient": "#FF7AD6"
              },
              "opacity": 0.85
            }
          ]
        },
        {
          "name": "Bloom",
          "blend-mode": "plus-lighter",
          "specular": false,
          "shadow": {
            "kind": "none",
            "opacity": 0
          },
          "translucency": {
            "enabled": false,
            "value": 0
          },
          "layers": [
            {
              "source": ".github/design/icons/skill-cli/layers/bloom-outer.svg",
              "name": "Bloom outer",
              "fill": {
                "solid": "#FFFFFF"
              },
              "opacity": 0.32
            },
            {
              "source": ".github/design/icons/skill-cli/layers/bloom-inner.svg",
              "name": "Bloom inner",
              "fill": {
                "solid": "#FFFFFF"
              },
              "opacity": 0.65
            },
            {
              "source": ".github/design/icons/skill-cli/layers/bloom-core.svg",
              "name": "Bloom core",
              "fill": {
                "solid": "#FFFFFF"
              },
              "opacity": 0.75
            }
          ]
        },
        {
          "name": "Shell",
          "shadow": {
            "kind": "layer-color",
            "opacity": 0.5
          },
          "translucency": {
            "enabled": true,
            "value": 0.55
          },
          "blur-material": 0.55,
          "refractivity": {
            "enabled": true,
            "strength": 0.8,
            "depth": 0.14
          },
          "layers": [
            {
              "source": ".github/design/icons/skill-cli/layers/shell.svg",
              "name": "Shell",
              "fill": {
                "automatic-gradient": "#1A1F5C"
              }
            }
          ]
        },
        {
          "name": "Ghost",
          "blend-mode": "plus-lighter",
          "shadow": {
            "kind": "layer-color",
            "opacity": 0.5
          },
          "translucency": {
            "enabled": false,
            "value": 0
          },
          "refractivity": {
            "enabled": true,
            "strength": 0.2,
            "depth": 0.1
          },
          "layers": [
            {
              "source": ".github/design/icons/skill-cli/layers/star.svg",
              "name": "Ghost",
              "fill": {
                "automatic-gradient": "#FFFFFF"
              },
              "fill-specializations": {
                "dark": {
                  "solid": "#FFFFFF"
                }
              }
            }
          ]
        }
      ],
      "styles": {
        "liquid-glass": {
          "design_generation": 27
        }
      },
      "web_dark": true
    }
  }
}