Codex design skill for AI agents

Overview

Codex is a radically minimal, blank-canvas design system skill file that instructs AI coding assistants to generate interfaces with almost no decorative styling. It is built on edge-to-edge white space, typographic hierarchy, black fills, black dividers, pill-shaped controls, and editorial photography as the only meaningful source of color.

Where many modern systems use cards, shadows, gradients, tinted panels, icon color, decorative illustration, or expressive surface layers, Codex removes nearly all of it. The interface should feel quiet, exact, open, and deliberate. It is not minimal because it is unfinished. It is minimal because every visible element must earn its place.

When you feed this skill file to an AI assistant, every generated component — buttons, cards, forms, navigation, modals, tables, article layouts, dashboards, onboarding screens, and landing pages — should adopt the Codex visual posture: white edge-to-edge canvas, black as the only filled UI color, typographic structure as the main hierarchy tool, no shadows, no gradients, no ornamental illustration, and soft pill-shaped interactive elements.

The result is a system that feels spare, intelligent, conversational, and highly controlled. Codex should feel like a blank page with a few perfectly placed marks.

Design Tokens

Color Palette

Codex uses an intentionally severe palette. The interface is almost entirely black and white. Color exists only for semantic state feedback and editorial photography.

The most important rule is that black is the only graphic UI color. It is used for filled buttons, dividers, text, dark cards, selected states, borders when necessary, and high-emphasis interface elements.

White is not just a background. It is the canvas. Codex should feel edge-to-edge, open, and unboxed. Avoid introducing gray panels, tinted sections, decorative color washes, or layered neutral backgrounds.

Semantic success, warning, and danger colors are allowed only when they communicate real system state. They should not become brand accents.

Color Usage Principles

Codex color usage follows five strict rules:

1. White is the environment — the app sits on an edge-to-edge white canvas.
2. Black is the only filled UI color — use primary for filled controls, dividers, and dark cards.
3. Typography carries hierarchy — do not use color to compensate for weak structure.
4. Photography may introduce color — editorial images can contain color, but UI chrome must remain black and white.
5. Semantic colors remain semantic — success, warning, and danger appear only for meaningful feedback.

Do not add decorative accent colors, pastel backgrounds, gradients, chart-like color systems, or colored icon sets unless the component is explicitly communicating semantic state or displaying editorial media.

Recommended Semantic Roles

Implementations should create semantic aliases to keep the monochrome system consistent.

Avoid adding local one-off grays. If a muted tone is required, define it once as a semantic token and use it consistently.

Typography

Codex is typography-led. Because the palette is nearly empty, type scale, weight, spacing, alignment, and line length carry most of the visual hierarchy.

Font Families

Open Sans gives Codex a clean, readable, neutral voice. It should not feel decorative. It should disappear enough for the layout, spacing, and content to become the main experience.

JetBrains Mono should be reserved for technical content, developer-facing values, version numbers, keyboard shortcuts, and code. Do not use monospace as an ornamental contrast.

Type Scale

Codex uses a restrained type scale:

Because the interface has almost no color, hierarchy must be clear through type. Use size and weight deliberately. Avoid layouts where all text sits at the same size and weight.

Weight

Open Sans supports weights from 100 through 900, but Codex should use a narrow set of weights.

Recommended usage:

• 400 for body copy
• 500 for labels, navigation, and buttons
• 600 for section headings and card titles
• 700 for page titles and major display emphasis
• 800–900 only for rare editorial statements

Avoid ultra-light text. It can feel elegant in mockups but often fails in real interfaces, especially at small sizes. Avoid excessive bold weight as well; Codex should feel precise, not heavy.

Typographic Hierarchy

Codex hierarchy should be created through:

• Font size
• Font weight
• Line height
• Alignment
• Whitespace
• Black fills
• Dividers
• Content order

Do not rely on colored labels, tinted badges, decorative icons, or surface variation to create hierarchy.

Recommended typographic defaults:

:root {
  --font-primary: "Open Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
}

Line Length and Rhythm

Codex layouts should feel readable and editorial. Text blocks should not stretch endlessly across the blank canvas.

Recommended rules:

• Body copy should generally stay between 55 and 75 characters per line.
• Dense UI copy should use clear grouping and spacing.
• Headings should wrap intentionally and avoid awkward single-word lines.
• Metadata should be compact but not low contrast.
• Long labels must wrap or truncate predictably.

Blank space is part of the system. Do not fill it simply because the page feels empty.

Spacing

Codex uses a 4px-based spacing scale:

Spacing is one of the primary visual tools in Codex. Since there are no shadows, gradients, or decorative surfaces, the distance between elements creates structure.

Use spacing to show:

• Which controls belong together
• Where a section starts and ends
• Which text belongs to which heading
• Which action is primary
• Which content is separate from surrounding content

Do not introduce arbitrary spacing values. A minimal system becomes messy quickly when spacing is inconsistent.

The Codex Look

Codex has a strict visual identity. It should feel like a blank page with precise typography and a few intentional black marks.

Edge-to-Edge White Canvas

The entire interface should sit on a white canvas. There should be no decorative page background, no tinted app shell, and no alternating color sections.

Do:

• Use #FFFFFF as the page background.
• Let whitespace define rhythm.
• Use black dividers sparingly.
• Keep content aligned and intentional.
• Use typography to create structure.

Do not:

• Add gray page backgrounds.
• Add cream, blue, or tinted section blocks.
• Use decorative background gradients.
• Place the app inside a boxed container by default.
• Create unnecessary card layers just to fill space.

The canvas should feel open and uninterrupted.

Black as the Only Filled UI Color

Black is the sole filled color for UI elements. It can be used for:

• Primary buttons
• Selected pills
• Active navigation
• Dark cards
• Dividers
• Text emphasis
• Modal emphasis
• Empty-state marks
• Minimal icons

Black should not be overused. Because it is the only filled color, every black block carries weight. Use it to create hierarchy and decisive moments.

Typography as Visual Weight

Codex should look designed even with almost no decoration. Typography must do the work.

Use typography for:

• Page structure
• Section hierarchy
• Emphasis
• Navigation clarity
• Content density
• Editorial rhythm

Avoid using icons, badges, colors, and panels as substitutes for clear text hierarchy.

Pill-Shaped Interactive Elements

All interactive elements should use pill-shaped geometry to create a soft, conversational feel. This is the main shape language of Codex.

Use pill geometry for:

• Buttons
• Input controls
• Search fields
• Selects
• Tabs
• Filter chips
• Segmented controls
• Tags
• Toggle-like controls
• Navigation actions

Recommended radius:

--radius-pill: 999px;

Pill shapes soften the radical minimalism and make the interface feel conversational rather than severe.

Image-Based Cards

Color appears through editorial photography, not UI decoration. Image-based cards may use precise radius to create subtle, near-flat contrast.

Image card rules:

• Use real imagery or editorial photography as the source of color.
• Keep UI chrome around the image black and white.
• Use a precise, consistent image radius.
• Avoid image shadows.
• Avoid tinted overlays unless required for text contrast.
• Do not place important text directly on busy images unless contrast is guaranteed.
• Keep captions and metadata typographic.

Recommended radius roles:

Most non-image UI should remain flat and simple. Image cards may be the only place where radius creates visual contrast.

No Shadows, No Gradients, No Decorative Illustration

Codex is a no-elevation UI. Surfaces do not float. They are separated by space, typography, black fills, and dividers.

Avoid:

• Box shadows
• Drop shadows
• Soft elevation
• Glassmorphism
• Background blur
• UI gradients
• Decorative illustrations
• Decorative icon sets
• Tinted cards
• Colorful badges
• Patterned backgrounds

The only allowed visual richness should come from editorial photography and strong content.

Component Coverage

The Codex skill file should guide complete interface generation across product UI, editorial layouts, dashboards, documentation, tools, and marketing pages.

Buttons

Buttons are pill-shaped, minimal, and direct. The primary button is usually black with white text. Secondary buttons are white or transparent with black text and a black outline when needed.

Button variants:

Primary button rules:

• Use primary black fill.
• Use white text.
• Use pill radius.
• Use Open Sans at 14px or 16px.
• Use 500 or 600 weight.
• Avoid icons unless they clarify the action.
• Avoid shadows.
• Avoid gradients.
• Preserve clear hover, focus-visible, active, disabled, and loading states.

Recommended button state behavior:

Good labels:

Avoid vague labels like Submit, Click here, or Go.

Links

Links should be typographic, not colorful.

Link rules:

• Use black or text color.
• Use underline for inline links.
• Use visible focus-visible states.
• Avoid blue default browser links unless the product explicitly overrides the system.
• Do not rely on color alone to distinguish links from body text.
• Use clear link labels.

Good examples:

Cards

Codex cards are not traditional elevated surfaces. They are either typographic groups, image cards, or black inverse cards layered above the white page.

Card variants:

Card rules:

• Do not use shadows.
• Do not use tinted backgrounds.
• Avoid borders unless a divider is needed.
• Use black inverse cards sparingly.
• Use typography and spacing for most grouping.
• Image cards may use radius-image.
• Inverse cards should use black fill and white text.
• Long content must wrap cleanly.
• Interactive cards must have proper button or link semantics.

Black inverse cards should be rare because they carry strong visual weight. Use them for featured content, selected states, or critical calls to action.

Forms

Forms should be quiet, readable, and conversational. Pill-shaped fields create the soft interaction language of Codex.

Form rules:

• Labels must always be visible.
• Placeholder text must not replace labels.
• Inputs should use pill radius where practical.
• Text inputs should use 16px type.
• Field groups should use spacing tokens.
• Error messages must be visually and programmatically associated with fields.
• Required fields must be indicated accessibly.
• Focus-visible states must be obvious.
• Disabled fields must remain understandable.
• Long labels and helper text must wrap cleanly.

Recommended input styling:

.input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: 16px;
}

.input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

For multiline textareas, use a larger radius rather than a full pill:

.textarea {
  border-radius: 16px;
}

This preserves the soft geometry without creating awkward capsule-shaped tall fields.

Search

Search is a signature Codex component because it naturally supports the conversational pill shape.

Search rules:

• Use a pill-shaped input.
• Keep the icon monochrome.
• Keep placeholder copy specific.
• Use visible focus-visible outline.
• Provide clear submit or reset behavior.
• Do not use tinted search backgrounds.
• Avoid decorative icons or colored suggestions.
• Ensure autocomplete options are keyboard navigable.

Example placeholder copy:

Navigation

Navigation should be minimal, typographic, and pill-based when interactive.

Navigation rules:

• Use Open Sans at 14px or 16px.
• Use black text on white background.
• Use black filled pills for active states when strong emphasis is needed.
• Use underline, weight, or a subtle pill outline for lower-emphasis active states.
• Avoid colored nav markers.
• Avoid icons unless they improve scanning.
• Preserve keyboard navigation.
• Use visible focus-visible states.
• Keep labels short and specific.

Navigation patterns may include:

• Top nav with pill actions
• Minimal sidebar with typographic hierarchy
• Segmented pill tabs
• Breadcrumbs as text links
• Command/search entry point
• Footer as simple text groups

Active states must not rely only on color. Use fill, underline, weight, or border.

Tabs and Segmented Controls

Tabs should be pill-shaped and monochrome.

Tab rules:

• Use pill containers or standalone pill tabs.
• Use black fill for selected tab when emphasis is needed.
• Use white text on selected black fill.
• Use black text for unselected tabs.
• Provide keyboard arrow navigation where appropriate.
• Preserve visible focus-visible states.
• Do not use colored underlines or tinted tab backgrounds.

Example states:

Modals and Overlays

Modals should feel like focused white or black typographic panels. They should not float with shadows.

Modal rules:

• Use white surface for standard dialogs.
• Use black inverse surface only for high-emphasis or destructive confirmation patterns.
• Avoid shadows.
• Use spacing and backdrop contrast for separation.
• Keep titles clear.
• Use pill-shaped action buttons.
• Trap focus inside the dialog.
• Close on Escape unless the action requires explicit confirmation.
• Return focus to the triggering element after close.

Because shadows are prohibited, modal separation may use:

• Backdrop opacity
• Centered layout
• Strong typography
• Black divider
• Inverse card treatment
• Generous whitespace

Tables and Data

Data displays should be clean and typographic. Codex can support dense information, but it should avoid visual clutter.

Table rules:

• Use black text on white background.
• Use horizontal dividers sparingly.
• Avoid tinted header rows.
• Avoid excessive grid lines.
• Use JetBrains Mono for technical values when useful.
• Align numbers consistently.
• Use semantic colors only for meaningful states.
• Provide responsive behavior for small screens.
• Preserve readable row height.

Recommended table structure:

• Header row with 600 weight
• Body rows with 400 weight
• Optional black top or bottom divider
• Minimal cell padding from spacing scale
• No shadows or tinted containers

Badges and Tags

Badges should be monochrome pills.

Badge rules:

• Use pill shape.
• Use black fill with white text for strong badges.
• Use white fill with black outline for secondary badges.
• Use semantic colors only for real status states.
• Keep labels short.
• Avoid decorative badge colors.
• Ensure contrast passes.

Good badge labels:

Alerts and Feedback

Alerts are one of the few places where semantic color may appear. However, Codex should still keep alert design restrained.

Alert rules:

• Use semantic colors only for meaningful success, warning, or danger messages.
• Include clear text and recovery guidance.
• Do not rely on color alone.
• Keep structure typographic.
• Avoid decorative icons unless they improve comprehension.
• Use borders, labels, or headings to reinforce state.
• Make dismiss controls keyboard accessible.

Example feedback copy:

Empty States

Empty states should be quiet and content-led. No decorative illustrations should be added.

Empty state rules:

• Use typography, spacing, and one action.
• Do not use decorative illustrations.
• Do not use colorful empty-state art.
• Keep copy direct.
• Provide one clear next step.
• Use a black pill button for the primary action.
• Use photography only if it is editorially meaningful, not as decoration.

Examples:

Image and Media Cards

Editorial photography is the only acceptable source of rich color in Codex. Image-based cards should be restrained and precise.

Image card rules:

• Use real photography or meaningful editorial imagery.
• Use consistent image radius.
• Avoid decorative illustrations.
• Avoid color overlays unless needed for contrast.
• Do not use shadows.
• Keep captions typographic.
• Use black and white UI controls around media.
• Ensure alt text is meaningful when the image conveys content.
• Use empty alt="" only for decorative images.

Media should feel curated, not ornamental.

Accessibility

Codex enforces WCAG 2.2 AA as a baseline. Its high-contrast monochrome palette can be very accessible, but the minimal style creates risks around subtle states, hidden affordances, and over-reliance on spacing.

Core Accessibility Requirements

• Text must meet WCAG 2.2 AA contrast against its background.
• Every interactive element must be reachable and operable by keyboard.
• Every interactive element must have a visible focus-visible state.
• Color must never be the only indicator of state.
• Form errors must be visually and programmatically associated with fields.
• Semantic HTML must be used before ARIA.
• Touch targets should be large enough for comfortable interaction.
• Motion must respect reduced-motion preferences.
• Links must be distinguishable from surrounding text.
• Disabled states must remain understandable.

Contrast Requirements

The black-and-white palette supports strong contrast, but muted text and disabled states still require care.

Rules:

• Body text should use text or primary.
• Small text must not use low-contrast gray.
• Disabled controls must remain readable enough to understand.
• Text on black surfaces must use white or another compliant foreground.
• Semantic success, warning, and danger colors must be tested against the actual surface.
• Text over photography must be avoided unless contrast is guaranteed.

Do not use ultra-light gray text as a substitute for hierarchy. Use size, weight, and spacing instead.

Focus States

Focus states must be obvious. In a minimal interface, hidden focus states are especially damaging because there are few other visual cues.

Preferred focus treatments:

• 2px or 3px black outline
• Offset outline outside pill controls
• Underline plus outline for text links
• Inverse fill for selected or active controls
• Clear border change for form fields

Avoid faint gray rings, opacity-only focus states, or focus indicators that disappear on black surfaces.

Keyboard Interaction

Keyboard behavior must be explicit and complete.

Rules:

• Buttons activate with Enter and Space.
• Links activate with Enter.
• Tabs and segmented controls support expected keyboard navigation.
• Modals trap focus and return focus after close.
• Menus close with Escape.
• Search suggestions are keyboard navigable.
• Interactive cards use link or button semantics.
• Tab order matches visual order.

Do not make typographic elements clickable without proper semantics.

Motion Accessibility

Codex should use very little motion. When motion appears, it should clarify state rather than decorate the interface.

Motion rules:

• Keep transitions short and subtle.
• Avoid large animated entrances.
• Avoid parallax, decorative loops, or animated backgrounds.
• Respect prefers-reduced-motion.
• Do not rely on motion alone to communicate feedback.

Recommended durations:

Reduced-motion mode should remove non-essential transitions.

Content and Tone

Codex uses concise, confident, helpful writing. The voice should match the interface: clear, sparse, and direct.

Voice Principles

Codex copy should be:

• Brief
• Specific
• Calm
• Useful
• Neutral
• Action-oriented
• Easy to scan

The writing should not be playful, ornamental, or sales-heavy. Since the UI is visually minimal, copy quality is especially important. Every label must carry its own meaning.

Good Examples

Avoid

Codex copy should reduce ambiguity. Labels should describe the action or object directly.

Editorial Content Standards

Because the system is so minimal, editorial content must be well structured.

Content should use:

• Short headings
• Descriptive labels
• Clear section titles
• Concise helper text
• Direct error recovery
• Plain-language explanations
• Consistent terminology

Avoid:

• Long decorative taglines in functional UI
• Repeated marketing claims
• Vague empty states
• Ambiguous navigation labels
• Over-explaining simple actions

How to Use with AI Tools

Cursor and Claude Code

Add the Codex skill file to your project so the assistant can use it as design-system context while generating UI code.

npx typeui.sh codex

The skill file should be saved as SKILL.md or another project-level instruction file. Once present, ask the assistant to generate components, pages, flows, or refactors using the Codex design system.

Example prompts:

Create a minimal settings page using the Codex design system.

Build a search interface with pill-shaped controls, black-and-white UI, and no shadows.

Refactor this dashboard into a blank-canvas Codex layout where typography carries hierarchy.

Generate accessible buttons, tabs, form fields, and image cards using Codex rules.

Claude

Use the design skill directly in Claude by adding the markdown file as project knowledge or pasting it into the beginning of a conversation.

Then ask for implementation-specific output:

Generate React components for Codex buttons, inputs, tabs, and cards.

Create component rules for navigation, search, forms, and image cards using this skill.

Audit this UI against the Codex design rules and list required changes.

ChatGPT, Windsurf, Copilot, v0, and Other AI Tools

The file is standard markdown, so it can be used with any AI assistant that accepts context, prompt instructions, or project-level rules.

Useful workflows include:

• Paste the skill into the chat before requesting UI code.
• Add it to a repository-level instruction file.
• Use it to generate minimal component libraries.
• Use it to refactor colorful or overdesigned interfaces.
• Use it as a QA checklist during code review.
• Ask the assistant to remove shadows, gradients, decorative illustration, and non-semantic color from an existing UI.

The best results come from prompting for concrete rules: monochrome tokens, pill geometry, typography hierarchy, no-shadow constraints, image-card behavior, interaction states, and accessibility acceptance criteria.

Design Philosophy

Codex is governed by a few core principles.

1. The Page Is the Interface

Codex does not rely on decorative containers or colorful backgrounds. The edge-to-edge white canvas is the product environment. Layout, spacing, and typography create the experience.

2. Black Carries All Graphic Force

Black is the only filled UI color, the only strong divider, and the only surface tone for inverse cards. Because it is used so sparingly, it becomes powerful.

3. Typography Replaces Decoration

Headings, labels, line length, weight, spacing, and alignment create hierarchy. If a layout needs decoration to make sense, the typography and structure need improvement.

4. Pills Make Minimalism Conversational

Pill-shaped controls soften the otherwise radical minimalism. They make actions feel approachable, direct, and modern without adding visual clutter.

5. Photography Is the Only Color

Editorial photography may introduce richness, mood, and narrative. UI chrome should not compete with it. The interface frames content; it does not decorate itself.

6. Absence Requires Discipline

A minimal system is unforgiving. Inconsistent spacing, weak labels, vague hierarchy, or subtle inaccessible states become obvious. Codex requires precision.

7. Accessibility Is the Structure

Visible focus states, clear labels, semantic markup, contrast, and keyboard behavior are not add-ons. They are what make the sparse interface usable.

Anti-Patterns

Avoid these implementations when generating Codex-style interfaces:

• Gray app shells or tinted page backgrounds
• Decorative color accents outside semantic states
• Blue default links that break the monochrome palette
• Gradients in UI surfaces
• Drop shadows or soft elevation
• Glassmorphism or blurred panels
• Decorative illustrations
• Colorful icon sets
• Tinted cards or pastel badges
• Heavy borders around every container
• Overuse of black inverse cards
• Non-pill interactive elements without a strong reason
• Sharp rectangular buttons
• Low-contrast muted text
• Placeholder-only form labels
• Hidden or subtle focus states
• Image overlays that reduce readability
• Vague labels like Submit, Click here, or Go
• Color-only success, warning, danger, selected, or active states
• One-off spacing values outside the defined scale
• Components missing hover, focus-visible, active, disabled, loading, or error states

Codex should feel minimal, not unfinished; quiet, not ambiguous; sparse, not inaccessible.

Migration Notes

When adapting an existing interface to Codex, migrate in this order:

1. Replace the page background with an edge-to-edge white canvas.
2. Remove tinted sections, decorative backgrounds, gradients, and ornamental color.
3. Replace soft shadows with spacing, typography, and black dividers.
4. Convert primary actions to black filled pill buttons.
5. Convert secondary actions to monochrome pill buttons or text links.
6. Normalize interactive elements to pill-shaped geometry.
7. Reduce card usage; group content with spacing and typography first.
8. Convert high-emphasis cards to black inverse surfaces only when needed.
9. Restrict color to semantic feedback and editorial photography.
10. Remove decorative illustrations and colored icon sets.
11. Apply Open Sans consistently across primary and display typography.
12. Normalize type sizes to the 12 / 14 / 16 / 20 / 24 / 32px scale.
13. Normalize spacing to the 4 / 8 / 12 / 16 / 24 / 32px scale.
14. Add visible focus-visible states to every interactive element.
15. Replace vague labels with clear, specific action copy.
16. Test contrast, keyboard navigation, and responsive behavior.
17. Run the QA checklist before shipping.

Do not migrate by simply turning everything black and white. Codex depends on the full system: blank canvas, typographic hierarchy, restrained black fills, pill-shaped interaction, no shadows, no gradients, no decorative illustration, and disciplined content.

QA Checklist

Use this checklist when reviewing generated UI against the Codex design skill.

Visual System

• The app sits on an edge-to-edge white canvas.
• Black is the only filled UI color.
• Color appears only through semantic states or editorial photography.
• There are no UI gradients.
• There are no shadows or soft elevation effects.
• There are no decorative illustrations.
• Dividers are black and used sparingly.
• Black inverse cards are used only for high-emphasis moments.
• The interface feels intentionally minimal, not incomplete.
• Whitespace and typography create the main structure.

Typography

• Open Sans is used for primary and display typography.
• JetBrains Mono is reserved for code, metadata, and technical values.
• Type sizes come from the 12 / 14 / 16 / 20 / 24 / 32px scale.
• Hierarchy is clear through size, weight, spacing, and alignment.
• Body copy remains readable.
• Long headings and labels wrap cleanly.
• Muted text remains accessible.
• Typography carries visual weight without decorative support.

Components

• Interactive elements use pill-shaped geometry.
• Primary buttons use black fill and white text.
• Secondary actions remain monochrome.
• Links are distinguishable without relying on color alone.
• Forms use visible labels and accessible error messaging.
• Search fields are pill-shaped and keyboard accessible.
• Tabs and segmented controls have clear selected states.
• Cards do not rely on shadows or tinted backgrounds.
• Image cards use precise radius and no shadow.
• Modals trap focus and return focus after closing.
• Alerts use semantic colors plus text or structural cues.
• Empty states rely on copy and action, not illustration.

Accessibility

• Text contrast meets WCAG 2.2 AA.
• Text on black inverse surfaces has been tested.
• Semantic colors pass contrast against their actual surfaces.
• Keyboard navigation works across all interactive elements.
• Focus-visible states are obvious.
• Color is never the only indicator of state.
• Form errors are linked to fields programmatically.
• Semantic HTML is used before ARIA.
• Touch targets are comfortable.
• Motion is minimal and respects reduced-motion preferences.
• Text over photography is avoided unless contrast is guaranteed.

Content

• CTA labels are specific and action-oriented.
• Error messages explain what happened and how to recover.
• Empty states explain what is missing and provide one clear next action.
• Destructive actions clearly state consequences.
• Navigation labels are short and descriptive.
• Copy remains concise, confident, and helpful.
• Vague labels like Submit, Click here, and Go are avoided.

Codex is a disciplined design system for interfaces that should feel radically minimal, precise, and calm. Its strength comes from absence: an edge-to-edge white canvas, typographic hierarchy, black as the only graphic UI color, pill-shaped interaction, and editorial photography as the only source of visual richness.