Design rationale, assumptions, and product-UI notes.

This is a repositioning, not a refresh.

Celoxis's current homepage leads with "AI-Powered Project Management Software." The brief asks for the opposite move: stop leading with AI, stop competing as a project-management tool, and step up to a Project Portfolio Execution Platform.

So the work is a category shift, from a crowded AI-PM field up to serious PPM, with AI demoted to one capability inside the product rather than the headline. The homepage has to do two jobs at once: convert a hands-on mid-market buyer who evaluates quickly, and reassure an enterprise PMO that this is deep enough for real governance. Every decision below serves that. The line that holds it together is the brand's own: run the work, trust the numbers.

Product-led, enterprise-grade, not enterprise-heavy.

The single most important decision: the product is the hero. Real Celoxis screens carry the page, not illustrations, stock art, or AI renders. Around them the system stays calm and light-dominant, roughly 60 percent white and light grey for readability and commercial trust, navy reserved for authority moments, and a single blue accent used only for action.

The visual language

Restraint is the brief. Headings are confident but sentence-case, kickers are quiet, and monospace is reserved for in-dashboard values like stat figures and ratings, never as decorative all-caps labels across the page. Status colors appear only on data. The result should read as a mature enterprise SaaS product site, not a design-studio lookbook.

An evaluation story, in order.

The section order walks a buyer from positioning to proof to depth to decision, serving the mid-market practitioner and the enterprise PMO at each step.

• Hero. The positioning line over a real executive dashboard composite, plus three CTAs that cover both buying motions: book a demo, start a free trial, and see pricing.
• Trust and choice. Real customer logos, the cloud-or-on-premise wedge placed high because deployment flexibility is one of the two sharpest differentiators, industry footprint, and credibility stats.
• Category reframe. Task tools show activity; Celoxis shows portfolio health. Separates Celoxis from task tools without attacking competitors.
• Product tour. The depth proof and centerpiece: an annotated executive dashboard plus real Gantt, capacity, financials, and risk screens. This is where the product does the selling.
• Core capabilities and lifecycle. The breadth of PPM depth, then the full intake-to-improve execution story, to show Celoxis controls the whole lifecycle, not a slice.
• Portfolio health, AI, and governance. A navy RAG authority band; AI as an honest set of example questions, not a headline; and the real deployment and governance console.
• Role-based value, industries, proof, and pricing. What each role gets, the industries served, customer quotes and verified ratings, and transparent evaluation paths.

Make the product look deep, without faking it.

The product is the differentiator, so the screenshots carry the page. Every shot is a real Celoxis capture, treated with a consistent system.

• Crop to one decision. The app sidebar and trial chrome are cropped away so each shot shows a single idea, not the whole crowded app.
• Frame cleanly. Minimal light browser chrome, consistent corner radius, soft shadow. The frame signals "real product" without the dated device-mockup look.
• Annotate lightly. An accent dot and a small label name the value in a region, placed as a presentation layer over a real screenshot. No data is invented.
• Caption the outcome. Every shot is captioned with business value, not a feature. Example: "See capacity, utilization, and overloads before work is committed."

One page, made to scale to all pages.

This is delivered as a real, responsive, tokenized build, color, type, spacing, and components, not a one-off mockup. The markup is prerendered to static HTML so the headline, sections, and image alt text ship in the page source for search and answer engines, with JavaScript only attaching behaviors. Because the engagement covers all pages and the internal team extends the work, the homepage is the first expression of a system the team can carry across product, solution, industry, and comparison pages without redrawing decisions.

What was assumed, stated plainly.

• Screenshots. All product imagery is real, captured read-only from a live Celoxis trial, then cropped only. No product UI has been invented.
• Sample data. The trial's projects were renamed to realistic names (ERP Rollout, Customer Portal Revamp, Network Modernization) before capture. The portfolio containers (Portfolio 1 and 2) could not be renamed through the trial UI, so the hero uses a dashboard view where they do not appear.
• AI. The trial does not expose an AI feature, so the AI section uses the brief's real example prompts with the required disclaimer rather than a fabricated AI screen.
• The RAG band. The portfolio-health bar chart is a bespoke explainer, clearly labelled illustrative, not presented as a real customer dashboard.
• Logos. The customer logos are the set currently displayed publicly on celoxis.com. The final approved list should be confirmed with Celoxis before launch.
• Ratings and quotes. Review scores are the verified ratings supplied in the project brief, across the nine named review platforms shown; testimonials use quotes Celoxis publishes on its own site. Confirm current numbers and approvals before launch.
• Compliance. Security claims use safe language (security documentation available on request) pending written confirmation of SOC 2 and GDPR status.
• Type and brand assets. Hanken Grotesk is a close stand-in pending Celoxis's actual brand typeface and licensing. The real logo and brand fonts drop in on handover.

An honest read on the product imagery.

A redesign that wants the product to be the hero depends on the quality of the screenshots. A few observations from capturing and reviewing the live app:

• Portfolio containers still read as samples. Projects were given realistic names, but the portfolio entities (Portfolio 1 and 2) are not renamable through the trial UI. A fuller account, or admin access to rename portfolios, would let the Portfolio Overview be used as the hero too.
• Capture from one consistent environment. All shots here came from a single account in light mode at high resolution, so the set is coherent. Keep to one current UI version to avoid visible drift.
• Light mode is the right default. It matches the product-led, light-dominant direction and reads cleaner than dark captures inside a light page.
• A few screens have empty states. Some dashboards have sparse widgets on a fresh trial; a fuller account would let the hero and feature shots show more depth.
• Marketing imagery on the live site is stylized composites. Real, well-framed interface builds more trust than device-mockup renders for a product-led direction.
• The treatment elevates, it does not fabricate. Framing, cropping, light annotation, and outcome captions make even imperfect real screenshots look intentional, without inventing a single screen.

The system, in eight specs.

• Color. Ink #0E1B2E for authority, white and mist #F4F7FB for readability, slate #16202E for headings, a single signal blue #2563EB for action, and RAG (#16A34A / #D88200 / #DC2626) only on data. Roughly 60 percent light, 25 percent dark, 5 percent accent.
• Typography. Hanken Grotesk for confident sentence-case headlines, Inter for body and UI, IBM Plex Mono for in-dashboard values and stat figures only. Generous line height, tabular figures on numbers.
• Buttons. Primary is solid signal blue with a right arrow; secondary is a hairline ghost; tertiary is a quiet text link. One action color throughout, never on decoration.
• Cards. 1px hairline borders, soft shadows, 12 to 16px radius, generous internal padding. Capability, role, industry, and pricing cards share one grid-with-hairline-gutters pattern.
• Spacing. A 1240px max container with consistent gutters; section rhythm roughly 110 to 140px on desktop and 56 to 72px on phones; a left-headline, right-support section head.
• Screenshot framing. Minimal light browser chrome (dots, a real URL, a mono tag), consistent radius and soft shadow, app sidebar and trial chrome cropped away. Real captures only.
• Annotation. An accent dot with a soft blue halo plus a small navy label, placed as a presentation layer over the screenshot to name the value in a region. It never alters the underlying UI or data.
• Mobile and responsive. A hamburger menu with a slide-down panel, single-column stacking, full-width CTAs, compact rhythm, 24px tap targets, and reduced-motion support. No horizontal overflow from 360 to 414px.