{"id":"dc541737-8bf2-4b31-b729-0352f696e82f","name":"OpenAI","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/dc541737-8bf2-4b31-b729-0352f696e82f","originalSiteUrl":"https://openai.com","capturedAt":"2026-04-11T18:05:13.549Z","colors":[{"name":"Void","hex":"#000000","role":"Primary text, nav labels, filled CTA button background, icon fills — the singular chromatic anchor of the entire system","group":"brand","cssVariable":"--color-void"},{"name":"Fog Border","hex":"#e5e7eb","role":"All dividing lines, card outlines, input borders, nav underlines — the lightest possible mark that still reads as a separator on white","group":"neutral","cssVariable":"--color-fog-border"},{"name":"Chalk","hex":"#f1f1f1","role":"Hover-state button backgrounds, subtle surface fills — one step off pure white without introducing warmth","group":"neutral","cssVariable":"--color-chalk"},{"name":"Graphite","hex":"#666666","role":"Supporting body text, icon strokes, secondary labels — muted but still readable","group":"neutral","cssVariable":"--color-graphite"},{"name":"Ash","hex":"#8f8f8f","role":"Tertiary labels, disabled states, fine-grain icon strokes","group":"neutral","cssVariable":"--color-ash"},{"name":"Canvas","hex":"#ffffff","role":"Page background, card surfaces, all primary surfaces — absolute white with no warm or cool tint","group":"neutral","cssVariable":"--color-canvas"}],"typography":[{"role":"The single typeface for the entire site across every context — nav, body, headlines, buttons, inputs. At 48px display it runs at roughly -0.03em letter-spacing, making large text feel compressed and precise rather than airy. Weight 600 for headlines, 500 for UI labels, 400 for body. The custom cuts provide 'calt' and 'liga' features for text composition.","sizes":"13px, 14px, 16px, 17px, 18px, 22px, 28px, 48px","family":"OpenAI Sans","weight":"400, 500, 600","lineHeight":"1.00–1.65 (tighter at large sizes ~1.16, looser at body ~1.50–1.65)","substitute":"Inter, DM Sans","letterSpacing":"-0.03em at display sizes (48px), -0.01em at mid sizes, +0.011em at smallest sizes (13px caps/tags)","fontFeatureSettings":"\"calt\", \"liga\""}],"spacing":{"radius":{"cards":"6.08px","chips":"9999px","input":"9999px","links":"4px","buttons":"9999px","softButton":"40px"},"elementGap":"8-16px","sectionGap":"64-80px","cardPadding":"32px","pageMaxWidth":"1200px"},"radius":{"cards":"6.08px","chips":"9999px","input":"9999px","links":"4px","buttons":"9999px","softButton":"40px"},"shadows":{"philosophy":"Elevation is functionally absent. The only shadow in the system — rgba(0,0,0,0.02) 0px 4px 6px, rgba(0,0,0,0.05) 0px 0px 2px — appears on the CTA button and is so faint it reads as a print artifact rather than depth. Cards have no shadow; separation comes from whitespace and the 6.08px image clip radius, not shadow stacking. This is a flat surface philosophy where z-axis is communicated through opacity and spatial distance, not shadow."},"guidelines":{"do":["Use #000000 as the only filled button background color — no colored CTAs","Apply 9999px border-radius to all pill buttons, ghost buttons, and the conversational input field","Use 6.08px border-radius on all image-containing card elements and thumbnail clips","Set display headlines (48px) with letter-spacing -0.03em; omit tracking overrides below 22px unless using caps labels","Use #e5e7eb as the only border/divider color — never darken it or tint it","Introduce color only through photography or editorial imagery — never through UI backgrounds or button fills","Maintain minimum 64px vertical gap between page sections"],"dont":["Do not use any colored accent (blue, green, orange) on interactive elements or backgrounds","Do not apply box-shadows to cards — separation comes from whitespace, not depth","Do not mix border-radius values between pill (9999px) and card (6.08px) contexts — the contrast is intentional and the values must be exact","Do not use weight below 400 or above 600 in OpenAI Sans — the 400/500/600 triad defines all typographic hierarchy","Do not use background colors on section blocks — the page stays #ffffff wall-to-wall","Do not add letter-spacing at body sizes (16-18px) — tracking is only for display (negative) and caps labels (positive +0.011em)","Do not use more than two typographic colors: #000000 for primary and #666666 for secondary — #8f8f8f is reserved for disabled/tertiary only"]}}