@gitlab/ui
Version:
GitLab UI Components
1,069 lines (1,068 loc) • 31.4 kB
JSON
{
"illustration": {
"stroke": {
"color": {
"default": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.09019607843137255,
0.07450980392156863,
0.12941176470588237
],
"alpha": 1,
"hex": "#171321"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.8901960784313725,
0.8901960784313725,
0.9098039215686274
],
"alpha": 1,
"hex": "#e3e3e8"
}
},
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
}
},
"width": {
"default": {
"$value": {
"default": "2",
"dark": "1.5"
},
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail.",
"$extensions": {
"com.figma.scopes": [
"STROKE_FLOAT"
]
}
}
}
},
"fill": {
"color": {
"default": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"alpha": 1,
"hex": "#fff"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.25882352941176473,
0.24705882352941178,
0.30980392156862746
],
"alpha": 1,
"hex": "#423f4f"
}
},
"$type": "color",
"$description": "Default fill color for an element where specific meaning or emphasis is not required.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"status": {
"fill": {
"color": {
"neutral": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.6470588235294118,
0.8392156862745098
],
"alpha": 1,
"hex": "#aea5d6"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.403921568627451,
0.5882352941176471
],
"alpha": 1,
"hex": "#6f6796"
}
},
"$type": "color",
"$description": "Used as a fill to convey a concept which is neither positive or negative.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"success": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.8549019607843137,
0.788235294117647
],
"alpha": 1,
"hex": "#6fdac9"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.23137254901960785,
0.5215686274509804,
0.5058823529411764
],
"alpha": 1,
"hex": "#3b8581"
}
},
"$type": "color",
"$description": "Used as a fill to convey a success or active concept, has a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"warning": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.9882352941176471,
0.6392156862745098,
0.14901960784313725
],
"alpha": 1,
"hex": "#fca326"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.6705882352941176,
0.4588235294117647,
0.1843137254901961
],
"alpha": 1,
"hex": "#ab752f"
}
},
"$type": "color",
"$description": "Used as a fill to convey a caution or warning concept, has a slightly negative connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"danger": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
1,
0.615686274509804,
0.45098039215686275
],
"alpha": 1,
"hex": "#ff9d73"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.6666666666666666,
0.33725490196078434,
0.22745098039215686
],
"alpha": 1,
"hex": "#aa563a"
}
},
"$type": "color",
"$description": "Used as a fill to convey a critical or danger concept, has a negative connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
}
},
"accent": {
"stroke": {
"color": {
"orange": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
1,
0.615686274509804,
0.45098039215686275
],
"alpha": 1,
"hex": "#ff9d73"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.8901960784313725,
0.5254901960784314,
0.37254901960784315
],
"alpha": 1,
"hex": "#e3865f"
}
},
"$type": "color",
"$description": "Used for orange accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"teal": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.8549019607843137,
0.788235294117647
],
"alpha": 1,
"hex": "#6fdac9"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.4196078431372549,
0.6823529411764706,
0.6392156862745098
],
"alpha": 1,
"hex": "#6baea3"
}
},
"$type": "color",
"$description": "Used for teal accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
},
"strong": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.6470588235294118,
0.8392156862745098
],
"alpha": 1,
"hex": "#aea5d6"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.6470588235294118,
0.8392156862745098
],
"alpha": 1,
"hex": "#aea5d6"
}
},
"$type": "color",
"$description": "Used for dark accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
}
}
},
"fill": {
"color": {
"subtle": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.8156862745098039,
0.7725490196078432,
0.8862745098039215
],
"alpha": 1,
"hex": "#d0c5e2"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.3607843137254902,
0.3254901960784314,
0.44313725490196076
],
"alpha": 1,
"hex": "#5c5371"
}
},
"$type": "color",
"$description": "Used to add depth to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"strong": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.6470588235294118,
0.8392156862745098
],
"alpha": 1,
"hex": "#aea5d6"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.403921568627451,
0.5882352941176471
],
"alpha": 1,
"hex": "#6f6796"
}
},
"$type": "color",
"$description": "Used for an element requiring visual emphasis without competing with primary content or status indicators.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"orange": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
1,
0.615686274509804,
0.45098039215686275
],
"alpha": 1,
"hex": "#ff9d73"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.6666666666666666,
0.33725490196078434,
0.22745098039215686
],
"alpha": 1,
"hex": "#aa563a"
}
},
"$type": "color",
"$description": "Used to add orange to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
},
"teal": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.8549019607843137,
0.788235294117647
],
"alpha": 1,
"hex": "#6fdac9"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.23137254901960785,
0.5215686274509804,
0.5058823529411764
],
"alpha": 1,
"hex": "#3b8581"
}
},
"$type": "color",
"$description": "Used to add teal to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
}
},
"base": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.9058823529411765,
0.8941176470588236,
0.9490196078431372
],
"alpha": 1,
"hex": "#e7e4f2"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.19607843137254902,
0.18823529411764706,
0.23529411764705882
],
"alpha": 1,
"hex": "#32303c"
}
},
"$type": "color",
"$description": "Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"isometric": {
"stroke": {
"color": {
"default": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.09019607843137255,
0.07450980392156863,
0.12941176470588237
],
"alpha": 1,
"hex": "#171321"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.8901960784313725,
0.8901960784313725,
0.9098039215686274
],
"alpha": 1,
"hex": "#e3e3e8"
}
},
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail in isometric illustration.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
}
}
},
"width": {
"default": {
"$value": {
"default": "2",
"dark": "1.5"
},
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail in isometric illustration.",
"$extensions": {
"com.figma.scopes": [
"STROKE_FLOAT"
]
}
}
}
},
"glyph": {
"top": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.7725490196078432,
0.9568627450980393,
0.9254901960784314
],
"alpha": 1,
"hex": "#c5f4ec"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.35294117647058826,
0.33725490196078434,
0.4235294117647059
],
"alpha": 1,
"hex": "#5a566c"
}
},
"$type": "color",
"$description": "Used for the top face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"front": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"alpha": 1,
"hex": "#fff"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.25882352941176473,
0.24705882352941178,
0.30980392156862746
],
"alpha": 1,
"hex": "#423f4f"
}
},
"$type": "color",
"$description": "Used for the front face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"side": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.43529411764705883,
0.8549019607843137,
0.788235294117647
],
"alpha": 1,
"hex": "#6fdac9"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.21568627450980393,
0.20392156862745098,
0.2549019607843137
],
"alpha": 1,
"hex": "#373441"
}
},
"$type": "color",
"$description": "Used for the side face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"shadow": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.06274509803921569,
0.6941176470588235,
0.6941176470588235
],
"alpha": 1,
"hex": "#10b1b1"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.1607843137254902,
0.15294117647058825,
0.18823529411764706
],
"alpha": 1,
"hex": "#292730"
}
},
"$type": "color",
"$description": "Used for the shadow of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"SHAPE_FILL"
]
}
}
}
}
},
"object": {
"top": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
1,
0.615686274509804,
0.45098039215686275
],
"alpha": 1,
"hex": "#ff9d73"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.6666666666666666,
0.33725490196078434,
0.22745098039215686
],
"alpha": 1,
"hex": "#aa563a"
}
},
"$type": "color",
"$description": "Used for the top face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"front": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
1,
0.7607843137254902,
0.6588235294117647
],
"alpha": 1,
"hex": "#ffc2a8"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.6470588235294118,
0.27450980392156865,
0.13725490196078433
],
"alpha": 1,
"hex": "#a54623"
}
},
"$type": "color",
"$description": "Used for the front face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"side": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
1,
0.4823529411764706,
0.25882352941176473
],
"alpha": 1,
"hex": "#ff7b42"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.5607843137254902,
0.26666666666666666,
0.1411764705882353
],
"alpha": 1,
"hex": "#8f4424"
}
},
"$type": "color",
"$description": "Used for the side face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"highlight": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
1,
1,
1
],
"alpha": 1,
"hex": "#fff"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.25882352941176473,
0.24705882352941178,
0.30980392156862746
],
"alpha": 1,
"hex": "#423f4f"
}
},
"$type": "color",
"$description": "Used for the face of an isometric object or symbol that requires maximum distinction from other elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"shadow": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.8862745098039215,
0.2627450980392157,
0.1607843137254902
],
"alpha": 1,
"hex": "#e24329"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.23921568627450981,
0.16862745098039217,
0.16470588235294117
],
"alpha": 1,
"hex": "#3d2b2a"
}
},
"$type": "color",
"$description": "Used for the shadow of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"SHAPE_FILL"
]
}
}
}
}
},
"accent": {
"top": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.27058823529411763,
0.25882352941176473,
0.30196078431372547
],
"alpha": 1,
"hex": "#45424d"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.42745098039215684,
0.4117647058823529,
0.4470588235294118
],
"alpha": 1,
"hex": "#6d6972"
}
},
"$type": "color",
"$description": "Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"front": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.4549019607843137,
0.44313725490196076,
0.47843137254901963
],
"alpha": 1,
"hex": "#74717a"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.28627450980392155,
0.2784313725490196,
0.30196078431372547
],
"alpha": 1,
"hex": "#49474d"
}
},
"$type": "color",
"$description": "Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"side": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.16862745098039217,
0.1568627450980392,
0.2196078431372549
],
"alpha": 1,
"hex": "#2b2838"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.12941176470588237,
0.12549019607843137,
0.13725490196078433
],
"alpha": 1,
"hex": "#212023"
}
},
"$type": "color",
"$description": "Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
}
},
"base": {
"top": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.9058823529411765,
0.8941176470588236,
0.9490196078431372
],
"alpha": 1,
"hex": "#e7e4f2"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.19607843137254902,
0.18823529411764706,
0.23529411764705882
],
"alpha": 1,
"hex": "#32303c"
}
},
"$type": "color",
"$description": "Used for the top surface of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"front": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.8352941176470589,
0.8156862745098039,
0.9098039215686274
],
"alpha": 1,
"hex": "#d5d0e8"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.16862745098039217,
0.1607843137254902,
0.19607843137254902
],
"alpha": 1,
"hex": "#2b2932"
}
},
"$type": "color",
"$description": "Used for the front face of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
},
"side": {
"fill": {
"color": {
"$value": {
"default": {
"colorSpace": "srgb",
"components": [
0.6823529411764706,
0.6470588235294118,
0.8392156862745098
],
"alpha": 1,
"hex": "#aea5d6"
},
"dark": {
"colorSpace": "srgb",
"components": [
0.13725490196078433,
0.13333333333333333,
0.16862745098039217
],
"alpha": 1,
"hex": "#23222b"
}
},
"$type": "color",
"$description": "Used for the side face of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
}
}
}
}
}
}
}
}