| version | alpha | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| name | Codex Proxy | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| description | Compact operational dashboard with quiet surfaces, GitHub-like dark mode, emerald primary actions, and dense data cards. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| shadows |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| elevation |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| motion |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
Codex Proxy is a compact operational dashboard for managing accounts, proxy routing, API keys, settings, logs, and usage telemetry. The visual identity should feel precise, calm, and engineer-owned: more control room than landing page. The interface should privilege scan speed, status clarity, and repeatable workflows over decorative composition.
The default feeling is restrained and utilitarian. Pages sit on a very light slate field in light mode and a GitHub-like near-black field in dark mode. Cards are clean white or graphite panels with thin borders, small radii, and soft shadows. The primary accent is a contrast-safe emerald system: deep emerald for readable light-mode text and solid actions, brighter mint-emerald for dark-mode text, and pale or dim containers for selected states.
The product should never feel oversized or editorial. Keep the information density high, controls close to the data they affect, and headings compact. The strongest visual signals are state color, tab selection, badges, progress bars, and small inline icons.
The palette is built from neutral slate surfaces plus one operational green accent.
- Operational Emerald (#047857 light text/action, #34D399 dark text, #DCFCE7/#11281D containers): Primary action color, online status, active toggles, selected tabs, healthy quota bars, and successful copy/save states. Text/accent tokens and solid action tokens are separate so white text stays readable on buttons while selected chips remain legible in both themes.
- Slate Canvas (#F8FAFC) and GitHub Night (#0D1117): Page backgrounds. The light background is cool and quiet; the dark background is a deep technical graphite.
- Card Surfaces (#FFFFFF, #161B22): Main content cards and settings panels. Surfaces should remain plain, bordered, and easy to scan.
- Borders (#E5E7EB, #30363D): Most hierarchy is carried by hairline borders rather than heavy depth.
- Muted Text (#64748B, #8B949E): Metadata, helper text, empty states, timestamps, and low-priority toolbar labels.
- Alerts: Red is reserved for failed requests, unread errors, destructive actions, and quota exhaustion. Amber is for rate limiting, warnings, and attention states. Blue, violet, cyan, and fuchsia appear mainly in charts, secondary quotas, and avatars. Status and avatar colors should always be used as foreground/container pairs, not as raw color-on-white combinations.
Dark mode is not just inverted light mode. It uses a GitHub-inspired neutral stack: black-blue page canvas, graphite panels, steel borders, and muted gray text. The primary accent becomes brighter and slightly more teal for text, while solid primary actions keep the deeper emerald background needed for white label contrast.
Use the system sans stack for the product voice. This keeps the UI native, compact, and fast. Use the monospace stack only for API keys, URLs, code examples, timestamps, IDs, and other technical strings.
Hierarchy should be shallow. Most headings live between 14px and 18px with bold weight. Body copy is usually 13px to 14px. Captions and metadata use 10px to 12px. Avoid large display type unless creating a completely new entry screen such as an authentication page.
Weights matter more than size. Use semibold for labels and controls, bold for panel titles, regular for descriptions, and medium monospace for technical values. Keep letter spacing normal; the product should read as a dense tool, not a brand campaign.
The layout uses a centered fixed-width working area. The main dashboard width is 960px, while chart-heavy standalone views can expand to 1100px. Desktop side padding is generous enough to center the control surface, while mobile and tablet padding tighten to 16px and 32px.
Spacing follows a 4px base rhythm with 8px, 12px, 16px, 20px, and 24px doing most of the work. Dense toolbars use 6px gaps and compact vertical padding. Cards and settings panels use 16px to 20px internal padding. Major stacked sections use 24px gaps.
Use grids for repeated summaries and account cards. Use flexible wrapping toolbars so controls can collapse without clipping. Keep controls directly above or inside the content they modify; do not split operational workflows into isolated marketing-like sections.
Depth is deliberately shallow. The system relies on tonal layering, thin borders, and low-opacity shadows. Standard cards use a subtle one-step shadow, and hover states can lift to a medium shadow only when the element is interactive. Sticky headers get a thin border and a small shadow so they separate from scroll content without feeling heavy.
Do not introduce dramatic drop shadows, glass effects, blurred backgrounds, gradient panels, or floating decorative layers. The dashboard should feel stable and machine-like. In dark mode, borders and surface contrast carry most depth; shadows should be visually minimal.
The shape language is compact and pragmatic.
- Cards and panels: 12px radius. This is enough softness to avoid harsh rectangles while preserving an engineered feel.
- Inputs and primary buttons: 8px radius. They should feel direct and utilitarian.
- Small icon buttons: 6px radius.
- Badges, status chips, progress bars, avatars, and toggles: Fully pill-shaped.
- Login or modal containers: 16px radius is acceptable for the rare elevated entry point.
Avoid oversized rounded cards or pill-shaped containers for general content. Pills are reserved for badges, filters, compact header actions, and binary status.
The header is sticky, 56px tall, bordered, and softly shadowed. It uses a compact logo mark, product name, status pill, utility actions, language and theme toggles, and a primary add action. Header controls should remain small, horizontally grouped, and icon-led where possible.
Top navigation uses compact text tabs. The active tab uses a pale emerald container and emerald text; inactive tabs use muted slate text and a light hover surface. Tabs should not become large segmented cards.
Account cards are dense operational objects. They contain avatar, identity, status toggle, status badge, quick actions, metrics, proxy selector, and quota bars. Preserve the structure: identity and controls first, then metric rows, then assignment and quota state. Hover may add a little shadow and accent border, but the card should remain quiet.
Summary cards are smaller and flatter. They emphasize the value with a bold 18px number and keep labels and hints muted.
Primary buttons are emerald with white text, 8px radius, compact padding, and a subtle shadow. Secondary buttons are neutral bordered controls with muted slate text and a light hover fill. Destructive actions should usually appear as icon buttons that become red on hover, unless the action is the main page intent.
Pressed states can scale slightly to 98 percent. Keep transitions short and color-based. Avoid bouncy or playful motion.
Inputs use neutral surfaces, thin borders, 8px radius, and compact padding. Technical inputs should use monospace. Focus states use an emerald ring or border. Selects should match text inputs in height, border, and surface treatment.
Status chips are pill-shaped, small, and color coded. Active and healthy states use green; warning and rate-limited states use amber or orange; failed and exhausted states use red; disabled states use slate. Keep badge text short and semibold.
Progress bars are 8px tall, pill-shaped, and sit on a pale slate track. Healthy quota is green, warning quota is amber, exhausted quota is red, secondary quota can be indigo, and review quota can be cyan.
Charts are SVG-like, lightweight, and line-based. Use blue for input tokens, green for output tokens, violet for cached tokens, amber for request count, and fuchsia for hit rate. Grid lines and axis labels should stay muted so the series carries attention.
Code examples live in bordered containers with a muted surface and monospace text. In dark mode, code blocks use the same near-black canvas as the page background. Copy actions should appear on hover or stay visually secondary.
Do keep screens dense, quiet, and operational. Do use borders, muted text, and small spacing steps to preserve scanability. Do reserve emerald for selected, healthy, and primary actions. Do keep chart colors consistent across pages.
Do not create a landing-page hero, oversized cards, decorative gradients, glass panels, or large editorial headings. Do not use purple as a dominant theme; violet is only a chart and secondary-data accent. Do not hide state behind animation or imagery. Do not replace historical or operational semantics with visually nicer surrogate metrics.