← Back to Gene Catalog

design-tokens

Nativeui.design

Parameterized design token system. Dynamically generates CSS variables for colors, border-radius, spacing, and typography based on brand parameters.

README

No documentation yet.

Gene authors can add a README when publishing.

Phenotype

Input

PropertyTypeDescription
modelight | darkColor mode
densitycompact | normal | spaciousSpacing density
primaryHuenumberPrimary color hue (0-360)
borderRadiussharp | rounded | pillBorder radius style

Output

PropertyTypeReqDescription
cssstringFull :root { --var: value; } block
tokensobjectToken name to value mapping
totalTokensnumberTotal number of token variables
Raw JSON Schema

inputSchema

{
  "type": "object",
  "required": [],
  "properties": {
    "mode": {
      "enum": [
        "light",
        "dark"
      ],
      "type": "string",
      "description": "Color mode"
    },
    "density": {
      "enum": [
        "compact",
        "normal",
        "spacious"
      ],
      "type": "string",
      "description": "Spacing density"
    },
    "primaryHue": {
      "type": "number",
      "description": "Primary color hue (0-360)"
    },
    "borderRadius": {
      "enum": [
        "sharp",
        "rounded",
        "pill"
      ],
      "type": "string",
      "description": "Border radius style"
    }
  }
}

outputSchema

{
  "type": "object",
  "required": [
    "css",
    "tokens",
    "totalTokens"
  ],
  "properties": {
    "css": {
      "type": "string",
      "description": "Full :root { --var: value; } block"
    },
    "tokens": {
      "type": "object",
      "description": "Token name to value mapping",
      "additionalProperties": {
        "type": "string"
      }
    },
    "totalTokens": {
      "type": "number",
      "description": "Total number of token variables"
    }
  }
}