[go: up one dir, main page]

0% found this document useful (0 votes)
15 views6 pages

Chatgpt Design System

The document outlines the 'ChatGPT Dark Interface Design System' version 1.0.0, detailing its comprehensive design elements including color palettes, typography, buttons, inputs, and alerts. It provides specific guidelines for element styling, component states, and application rules to ensure consistency in design. Additionally, it emphasizes layout principles and the use of a dark theme with solid colors, avoiding gradients and bright colors.

Uploaded by

bien24052008
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
15 views6 pages

Chatgpt Design System

The document outlines the 'ChatGPT Dark Interface Design System' version 1.0.0, detailing its comprehensive design elements including color palettes, typography, buttons, inputs, and alerts. It provides specific guidelines for element styling, component states, and application rules to ensure consistency in design. Additionally, it emphasizes layout principles and the use of a dark theme with solid colors, avoiding gradients and bright colors.

Uploaded by

bien24052008
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

{

"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"
}
}
}

You might also like