{

"designSystem": {
"metadata": {
"name": "ChatGPT Dark Interface Design System",
"version": "1.0.0",
"description": "Comprehensive design system extracted from ChatGPT interface
screenshots"
},
"colorPalette": {
"backgrounds": {
"primary": "#212121",
"secondary": "#1A1A1A",
"sidebar": "#171717",
"card": "#2A2A2A",
"overlay": "rgba(0, 0, 0, 0.8)"
},
"text": {
"primary": "#FFFFFF",
"secondary": "#B8B8B8",
"muted": "#808080",
"accent": "#10A37F"
},
"interactive": {
"primary": "#10A37F",
"primaryHover": "#0F8A6F",
"secondary": "#4A4A4A",
"secondaryHover": "#5A5A5A",
"warning": "#FF8C00",
"warningBackground": "rgba(255, 140, 0, 0.1)"
},
"borders": {
"subtle": "#404040",
"medium": "#4A4A4A",
"strong": "#606060"
}
},
"elementStyling": {
"layout": {
"sidebar": {
"background": "#171717",
"width": "260px",
"borderRight": "1px solid #404040",
"padding": "16px"
},
"mainContent": {
"background": "#212121",
"padding": "24px",
"maxWidth": "768px",
"margin": "0 auto"
}
},
"navigation": {
"sidebarItems": {
"background": "transparent",
"backgroundHover": "#2A2A2A",
"padding": "12px 16px",
"borderRadius": "8px",
"text": "#FFFFFF",
"textHover": "#FFFFFF",
 "iconSize": "20px",
"iconColor": "#B8B8B8",
"iconColorHover": "#FFFFFF",
"gap": "12px",
"fontSize": "14px",
"fontWeight": "400",
"transition": "all 0.2s ease"
},
"activeItem": {
"background": "#2A2A2A",
"text": "#FFFFFF",
"iconColor": "#10A37F"
}
},
"chat": {
"messageContainer": {
"background": "transparent",
"padding": "24px 0",
"borderBottom": "none"
},
"userMessage": {
"background": "#2A2A2A",
"padding": "16px 20px",
"borderRadius": "18px",
"text": "#FFFFFF",
"fontSize": "16px",
"lineHeight": "1.5",
"maxWidth": "80%",
"marginLeft": "auto",
"marginBottom": "16px"
},
"aiMessage": {
"background": "transparent",
"text": "#FFFFFF",
"fontSize": "16px",
"lineHeight": "1.6",
"marginBottom": "24px"
}
},
"buttons": {
"primary": {
"background": "#10A37F",
"backgroundHover": "#0F8A6F",
"backgroundActive": "#0D7A63",
"text": "#FFFFFF",
"textHover": "#FFFFFF",
"border": "none",
"borderRadius": "8px",
"padding": "10px 16px",
"fontSize": "14px",
"fontWeight": "500",
"cursor": "pointer",
"transition": "all 0.2s ease",
"boxShadow": "none",
"boxShadowHover": "0 2px 8px rgba(16, 163, 127, 0.2)"
},
"secondary": {
"background": "#4A4A4A",
"backgroundHover": "#5A5A5A",
 "backgroundActive": "#404040",
"text": "#FFFFFF",
"textHover": "#FFFFFF",
"border": "1px solid #606060",
"borderRadius": "8px",
"padding": "10px 16px",
"fontSize": "14px",
"fontWeight": "500",
"cursor": "pointer",
"transition": "all 0.2s ease"
},
"ghost": {
"background": "transparent",
"backgroundHover": "#2A2A2A",
"text": "#B8B8B8",
"textHover": "#FFFFFF",
"border": "none",
"borderRadius": "8px",
"padding": "8px 12px",
"fontSize": "14px",
"fontWeight": "400",
"cursor": "pointer",
"transition": "all 0.2s ease"
}
},
"inputs": {
"textArea": {
"background": "#2A2A2A",
"border": "1px solid #404040",
"borderFocus": "1px solid #10A37F",
"borderRadius": "12px",
"padding": "16px 20px",
"text": "#FFFFFF",
"placeholder": "#808080",
"fontSize": "16px",
"lineHeight": "1.5",
"resize": "vertical",
"minHeight": "56px",
"maxHeight": "200px",
"outline": "none",
"transition": "border-color 0.2s ease"
}
},
"icons": {
"default": {
"fill": "#B8B8B8",
"fillHover": "#FFFFFF",
"size": "20px",
"transition": "fill 0.2s ease"
},
"accent": {
"fill": "#10A37F",
"fillHover": "#0F8A6F",
"size": "20px",
"transition": "fill 0.2s ease"
},
"warning": {
"fill": "#FF8C00",
"size": "16px"
 }
},
"alerts": {
"warning": {
"background": "rgba(255, 140, 0, 0.1)",
"border": "1px solid rgba(255, 140, 0, 0.3)",
"borderRadius": "8px",
"padding": "12px 16px",
"text": "#FFFFFF",
"iconColor": "#FF8C00",
"fontSize": "14px",
"lineHeight": "1.4"
}
},
"typography": {
"heading1": {
"fontSize": "24px",
"fontWeight": "600",
"lineHeight": "1.3",
"color": "#FFFFFF",
"marginBottom": "16px"
},
"heading2": {
"fontSize": "20px",
"fontWeight": "600",
"lineHeight": "1.4",
"color": "#FFFFFF",
"marginBottom": "12px"
},
"body": {
"fontSize": "16px",
"fontWeight": "400",
"lineHeight": "1.6",
"color": "#FFFFFF"
},
"small": {
"fontSize": "14px",
"fontWeight": "400",
"lineHeight": "1.5",
"color": "#B8B8B8"
},
"caption": {
"fontSize": "12px",
"fontWeight": "400",
"lineHeight": "1.4",
"color": "#808080"
}
},
"lists": {
"bulletPoints": {
"marginLeft": "20px",
"marginBottom": "16px"
},
"listItem": {
"marginBottom": "8px",
"color": "#FFFFFF",
"fontSize": "16px",
"lineHeight": "1.6"
},
 "nestedList": {
"marginLeft": "24px",
"marginTop": "8px"
}
},
"scrollbars": {
"width": "6px",
"track": "#1A1A1A",
"thumb": "#404040",
"thumbHover": "#5A5A5A",
"borderRadius": "3px"
}
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "12px",
"lg": "16px",
"xl": "20px",
"2xl": "24px",
"3xl": "32px",
"4xl": "48px"
},
"borderRadius": {
"sm": "4px",
"md": "8px",
"lg": "12px",
"xl": "18px",
"full": "50%"
},
"shadows": {
"none": "none",
"sm": "0 1px 3px rgba(0, 0, 0, 0.2)",
"md": "0 2px 8px rgba(0, 0, 0, 0.15)",
"lg": "0 4px 16px rgba(0, 0, 0, 0.2)",
"accent": "0 2px 8px rgba(16, 163, 127, 0.2)"
},
"animations": {
"fast": "0.15s ease",
"medium": "0.2s ease",
"slow": "0.3s ease",
"fadeIn": "opacity 0.2s ease-in-out",
"slideIn": "transform 0.2s ease-in-out"
},
"applicationRules": {
"DO_APPLY": {
"cardBackgrounds": "Use #2A2A2A for message containers, input fields, and
interactive cards",
"gradients": "DO NOT use gradients in this design system - all backgrounds
are solid colors",
"iconColors": "Use #B8B8B8 for default icons, #10A37F for accent/active
icons, #FF8C00 for warning icons",
"hoverStates": "Apply hover states to all interactive elements with smooth
transitions",
"textHierarchy": "Use #FFFFFF for primary text, #B8B8B8 for secondary,
#808080 for muted text"
},
"DO_NOT_APPLY": {
"gradients": "This design system uses solid colors only - no gradients on
any elements",
"brightColors": "Avoid bright or saturated colors except for the accent
green (#10A37F) and warning orange (#FF8C00)",
"lightBackgrounds": "Never use light backgrounds - this is a dark theme
design system",
"strongBorders": "Use subtle borders (#404040) - avoid high contrast
borders",
"cardGradients": "Cards use solid #2A2A2A background, never gradients",
"iconGradients": "Icons use solid fills, never gradients or multiple
colors"
}
},
"componentStates": {
"interactive": {
"default": "Base styling as defined in elementStyling",
"hover": "Lighter background colors, brighter text/icons, smooth 0.2s
transition",
"active": "Slightly darker than hover state",
"focus": "Add #10A37F border for inputs, subtle glow for buttons",
"disabled": "50% opacity, cursor: not-allowed, no hover effects"
}
},
"layoutPrinciples": {
"spacing": "Use consistent 8px grid system for all spacing",
"alignment": "Left-align text content, center-align form elements",
"hierarchy": "Use size, weight, and color to establish clear visual
hierarchy",
"whitespace": "Generous padding and margins for breathing room",
"responsiveness": "Maintain proportions across different screen sizes"
}
}
}