---
name: "OpenAI"
mode: "light"
---
# OpenAI
## Visual theme and atmosphere
Academic calm, institutional gravity — minimal typography on expansive negative space.
Scientific restraint with near-white spaciousness and a single quiet green thread.
## Color palette and roles
- **White (#ffffff)**: Page background, clean canvas.
- **Cream (#f7f7f8)**: Alternate sections, code blocks.
- **Border (#d9d9e3)**: Subtle dividers, input outlines.
- **Gray (#8e8ea0)**: Placeholder text, timestamps.
- **Dark (#353740)**: Primary headings and body.
- **Black (#202123)**: Nav, footer, ChatGPT sidebar.
- **Green (#10a37f)**: Primary CTA, API status, brand mark.
- **Purple (#ab68ff)**: GPT-4, premium features.
## Typography rules
- **Display**: Söhne, 600, 56px. Hero announcements.
- **Body**: Söhne, 400, 16px. Research papers, blog content.
- **Code**: Söhne Mono, 400, 14px. API docs, code snippets.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 300ms; easing is ease-out.
## Guardrails
- Use Green (#10a37f) only for primary actions and brand mark — never decorative.
- Reserve Purple (#ab68ff) for GPT-4 and premium tier indicators.
- Keep the canvas pure white — use Cream only for recessed code blocks.
- Set body at 16px Söhne weight 400 with generous 1.7 line-height.
- Use rounded 16px card radius — larger than most SaaS products.
---
name: "OpenAI"
mode: "light"
---
# OpenAI
## Visual theme and atmosphere
Academic calm, institutional gravity — minimal typography on expansive negative space.
Scientific restraint with near-white spaciousness and a single quiet green thread.
## Color palette and roles
- **White (#ffffff)**: Page background, clean canvas.
- **Cream (#f7f7f8)**: Alternate sections, code blocks.
- **Border (#d9d9e3)**: Subtle dividers, input outlines.
- **Gray (#8e8ea0)**: Placeholder text, timestamps.
- **Dark (#353740)**: Primary headings and body.
- **Black (#202123)**: Nav, footer, ChatGPT sidebar.
- **Green (#10a37f)**: Primary CTA, API status, brand mark.
- **Purple (#ab68ff)**: GPT-4, premium features.
## Typography rules
- **Display**: Söhne, 600, 56px. Hero announcements.
- **Body**: Söhne, 400, 16px. Research papers, blog content.
- **Code**: Söhne Mono, 400, 14px. API docs, code snippets.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 300ms; easing is ease-out.
## Guardrails
- Use Green (#10a37f) only for primary actions and brand mark — never decorative.
- Reserve Purple (#ab68ff) for GPT-4 and premium tier indicators.
- Keep the canvas pure white — use Cream only for recessed code blocks.
- Set body at 16px Söhne weight 400 with generous 1.7 line-height.
- Use rounded 16px card radius — larger than most SaaS products.
---
name: "OpenAI"
mode: "light"
---
# OpenAI
## Visual theme and atmosphere
Academic calm, institutional gravity — minimal typography on expansive negative space.
Scientific restraint with near-white spaciousness and a single quiet green thread.
## Color palette and roles
- **White (#ffffff)**: Page background, clean canvas.
- **Cream (#f7f7f8)**: Alternate sections, code blocks.
- **Border (#d9d9e3)**: Subtle dividers, input outlines.
- **Gray (#8e8ea0)**: Placeholder text, timestamps.
- **Dark (#353740)**: Primary headings and body.
- **Black (#202123)**: Nav, footer, ChatGPT sidebar.
- **Green (#10a37f)**: Primary CTA, API status, brand mark.
- **Purple (#ab68ff)**: GPT-4, premium features.
## Typography rules
- **Display**: Söhne, 600, 56px. Hero announcements.
- **Body**: Söhne, 400, 16px. Research papers, blog content.
- **Code**: Söhne Mono, 400, 14px. API docs, code snippets.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 300ms; easing is ease-out.
## Guardrails
- Use Green (#10a37f) only for primary actions and brand mark — never decorative.
- Reserve Purple (#ab68ff) for GPT-4 and premium tier indicators.
- Keep the canvas pure white — use Cream only for recessed code blocks.
- Set body at 16px Söhne weight 400 with generous 1.7 line-height.
- Use rounded 16px card radius — larger than most SaaS products.
---
name: "OpenAI"
mode: "light"
---
# OpenAI
## Visual theme and atmosphere
Academic calm, institutional gravity — minimal typography on expansive negative space.
Scientific restraint with near-white spaciousness and a single quiet green thread.
## Color palette and roles
- **White (#ffffff)**: Page background, clean canvas.
- **Cream (#f7f7f8)**: Alternate sections, code blocks.
- **Border (#d9d9e3)**: Subtle dividers, input outlines.
- **Gray (#8e8ea0)**: Placeholder text, timestamps.
- **Dark (#353740)**: Primary headings and body.
- **Black (#202123)**: Nav, footer, ChatGPT sidebar.
- **Green (#10a37f)**: Primary CTA, API status, brand mark.
- **Purple (#ab68ff)**: GPT-4, premium features.
## Typography rules
- **Display**: Söhne, 600, 56px. Hero announcements.
- **Body**: Söhne, 400, 16px. Research papers, blog content.
- **Code**: Söhne Mono, 400, 14px. API docs, code snippets.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 300ms; easing is ease-out.
## Guardrails
- Use Green (#10a37f) only for primary actions and brand mark — never decorative.
- Reserve Purple (#ab68ff) for GPT-4 and premium tier indicators.
- Keep the canvas pure white — use Cream only for recessed code blocks.
- Set body at 16px Söhne weight 400 with generous 1.7 line-height.
- Use rounded 16px card radius — larger than most SaaS products.
---
name: "OpenAI"
mode: "light"
---
# OpenAI
## Visual theme and atmosphere
Academic calm, institutional gravity — minimal typography on expansive negative space.
Scientific restraint with near-white spaciousness and a single quiet green thread.
## Color palette and roles
- **White (#ffffff)**: Page background, clean canvas.
- **Cream (#f7f7f8)**: Alternate sections, code blocks.
- **Border (#d9d9e3)**: Subtle dividers, input outlines.
- **Gray (#8e8ea0)**: Placeholder text, timestamps.
- **Dark (#353740)**: Primary headings and body.
- **Black (#202123)**: Nav, footer, ChatGPT sidebar.
- **Green (#10a37f)**: Primary CTA, API status, brand mark.
- **Purple (#ab68ff)**: GPT-4, premium features.
## Typography rules
- **Display**: Söhne, 600, 56px. Hero announcements.
- **Body**: Söhne, 400, 16px. Research papers, blog content.
- **Code**: Söhne Mono, 400, 14px. API docs, code snippets.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 300ms; easing is ease-out.
## Guardrails
- Use Green (#10a37f) only for primary actions and brand mark — never decorative.
- Reserve Purple (#ab68ff) for GPT-4 and premium tier indicators.
- Keep the canvas pure white — use Cream only for recessed code blocks.
- Set body at 16px Söhne weight 400 with generous 1.7 line-height.
- Use rounded 16px card radius — larger than most SaaS products.
