Page Layouts

App Shell — Sidebar + Main Content

New chat
Search
Projects
Project name
Tab title
Main content area
Do anything
model selector

Settings — Sidebar Nav + Scrollable Panel

Back to app
Personal
Integrations
General
Setting label
Setting description text

Task/Automation Detail — Sidebar + Detail Panel

Add Tailwind config and theme support
Another task name
Add Tailwind config and theme support
Detail content area
Terminal
$ command output here

Colors

Surface / Background Colors

Surface
#181818
Surface Under
#141414
Panel
#232323
Elevated Primary
rgba(54,54,54,0.96)
Elevated Secondary
#282828
Control
rgba(45,45,45,0.96)

Accent Colors

Accent Blue
#339cff
Accent Purple
#ad7bf9
BG Accent
#0d273f
BG Accent Hover
#0e2a45
BG Accent Active
#0f2e4a
Text Accent
rgb(131,195,255)

Text Colors

Foreground — #ffffff
Secondary — 71% white
Tertiary — 50% white
Accent — rgb(131,195,255)

Border Colors

Border — 8.4% white
Border Heavy — 15.6% white
Border Light — 4.2% white
Focus — rgba(131,195,255,0.76)

Button Background Colors

Primary
rgb(13,13,13)
Secondary
rgba(255,255,255,0.052)
Tertiary
rgba(255,255,255,0.029)
Secondary Hover
rgba(255,255,255,0.078)
Primary Active
rgba(255,255,255,0.1)
Tertiary Hover
rgba(255,255,255,0.068)

Status / Decoration Colors

Added / Success
#40c977
Deleted / Error
#fa423e
Editor Added BG
rgba(64,201,119,0.23)
Editor Deleted BG
rgba(250,66,62,0.23)
Notification Blue
#0285FF
Scrim
rgba(255,255,255,0.104)

Icon Colors

Icon Primary
90.4% white
Icon Secondary
71% white
Icon Tertiary
51% white
Icon Accent
rgb(131,195,255)

Typography

Font Families

Sans
The quick brown fox jumps over the lazy dog
Mono
The quick brown fox jumps over the lazy dog

Type Scale

72px — text-4xl
Heading
48px — text-3xl
Heading
36px — text-2xl
Heading
28px — text-xl
Heading
24px — heading-lg
Page Heading Large
20px — heading-md
Page Heading Medium
18px — heading-sm
Page Heading Small
16px — text-lg
Large body text for emphasis
14px — text-base
Base body text used for most content and UI elements
13px — text-sm
Small text used for secondary labels and captions
12px — text-xs
Extra-small text for keyboard shortcuts, timestamps, and metadata

Font Weights

300 — Light
Light weight text
400 — Normal
Normal weight text
430 — VSCode
Default VSCode weight
500 — Medium
Medium weight text
600 — Semibold
Semibold weight text
700 — Bold
Bold weight text

Border Radius Scale (--corner-radius-scale: 1.25)

2xs
xs
sm
md
lg
xl
2xl
3xl
4xl

Navigation & Sidebar

Sidebar Navigation Items

Nav Item States

Projects Section Header

repochat
another-project

Thread / Task List Items (Sidebar)

Add Tailwind config and theme support
Fix routing configuration
2w
Older task name

Tab Bar

Keyboard Shortcut Badges

⌘N ⌘G Esc ⌘K

Buttons

Button Variants

Nav Row Button

Icon Buttons

Dropdown / Select Button

Form Controls

Toggle Switch

Enabled (checked)
Disabled (unchecked)
Disabled checked (locked)

Radio Cards

Search Input

Chat Composer Input

Do anything

Settings Section with Toggle

Auto-review
Codex can read and edit files in its workspace. Codex automatically reviews requests for additional access.
Bottom panel
Show terminal output in a bottom panel

Cards & Content Blocks

Badges

Completed Tomorrow at 09:01 Label Codex mobile

Automation Detail Card

Add Tailwind config and theme support

Completed
Trigger
On push to main branch
Runs when code is pushed
Schedule
Tomorrow at 09:01
Next scheduled run
Tomorrow at 09:01

Chat Message Bubble

K
You
Add Tailwind config and theme support to the project
Codex
I'll add Tailwind CSS configuration and theme support. Let me start by installing the dependencies and creating the config file.

Code Block

tailwind.config.ts 
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

Diff Block

package.json 
-  "dependencies": {}
+  "dependencies": {
+    "tailwindcss": "^4.0.0"
+  }

Terminal Panel

Terminal 
$ bun install tailwindcss
bun add v1.2.0 (a1b2c3d4)

installed tailwindcss@4.0.0

 1 package installed [320ms]

Empty State

No tasks yet. Create a new task to get started.

Thread List with Status Indicators

Completed task name
Running task name
Failed task name
Pending task name

Settings Item Row

Default permissions
By default, Codex can read and edit files in its workspace
Default model
Choose the default model for new conversations
Keyboard shortcuts
Customize keyboard shortcuts for common actions