Phase 3 · Design system foundations
Every element on this page is rendered by the production stylesheet and script that will be handed to the Oracle APEX team. Components are shown inside marketing compositions, not in isolation, so the language can be judged as a website.
?samples is in the URL.
Approved lockups, the gear-e mark, the gear-petal pattern and the two background worlds. Logos are never redrawn, rotated or recoloured. Clear space equals the width of the “e” in the wordmark.
Brand in use
Empowering Project Success
Figtree stands in for the brand’s commercial Artific face on headings and buttons; Lato carries body copy, eyebrows and labels. The scale is fluid: each step tightens from the design-system desktop size to a mobile floor without breakpoint overrides.
Experts in Oracle PPM · United Kingdom
We design, deliver and optimise your project management for real business impact: specialist SaaS solutions and advisory services for Oracle Project Portfolio Management Cloud.
Empowering Project Success
The first Oracle-native Projects Extension
Advisory from people who build on Oracle every day
PMO / PPM Health Checks
Release & Regression Management
We implement what we recommend, and we build software on the same platform we advise on.
Oracle Cloud is the system of record. Our products are the layer that makes it effortless, designed by industry experts and delivered as enterprise SaaS.
Quarterly update impact analysis, testing and remediation.
02Advisory Services
Placeholder pending approved client reference
01Native Oracle Solutions
Oracle Cloud is the system of record. Our products are the layer that makes it effortless.
The index number is part of the “machinery” story: sections are numbered like drawings in an engineering set. One orange word per headline, never two.
Long-form pages such as Resource Detail, Legal and Advisory Detail hold copy to a 68-character measure. Wider lines are harder to track back to the next line start, and on this site the containers are wide enough to make that mistake easy.
Inline links look like this teal underline and darken on hover. Lists keep their markers:
A deep-teal world with a single signal. The seven brand colours are preserved verbatim; three colours are added for text-on-dark, error and success, each with a reason in docs/tokens.md.
Empowering Project Success
Empowering Project Success
Specialists, not generalists.
Why the third panel exists. Brand orange measures 2.9:1 on cloud and 2.7:1 on silver, below the 3:1 floor even for large text. The stylesheet switches .pe-accent to orange deep inside subtle and silver sections automatically. If an accent word still reads poorly in a given composition, omit the accent rather than force it.
Twelve columns. 1200px is the default; 1320px is a wide-composition option used where a layout genuinely benefits (Home, mega menu, product heroes, storytelling). Long-form text never spans either: it sits on a 68ch measure.
This paragraph is held to sixty-eight characters per line regardless of how wide the page is. Product heroes may use the wide container; a privacy policy never will.
A ten-step scale from 4px to 128px. Section rhythm is fluid: 48px on a phone rising to 96px on desktop, with a larger 64 to 128px rhythm for Home and storytelling sections.
Within a section: heading group to content = 48 (64 on desktop); card padding = 32 (24 on phone); element gaps = 12 / 16 / 24.
Primary is deep teal. Accent orange is reserved for the single highest-value action on a page, which sitewide is Book a Demo. Secondary and ghost live on light surfaces; inverse lives on dark. 44px standard, 52px large, 36px small.
02Advisory Services
A 30-minute consultation with an Oracle PPM specialist.
Orange roles (locked). Filled CTA buttons use --pe-orange-deep (#C93D05, 5.06:1 with white text). Brand orange #FF510A stays the accent: one headline word, decorative gear tint, accent icons. Never white text on brand orange.
Four link behaviours: inline underline inside copy, the teal sweep for standalone links, the arrow link for “go somewhere” and the up-arrow for outbound or detail links. Links darken one step on hover; nothing shrinks.
Inline in copy: read the implementation guide before cutover.
Body copy on dark uses 72% white; inline links are full white with the teal underline.
Shown inside the Contact / Demo composition it will live in. One field pattern (label above, hint, error) covers text, email, select, textarea, checkbox and radio. Validation runs on blur and submit; submission itself is APEX-owned. Try submitting the form empty.
Book a Demo
Thirty minutes with an Oracle PPM specialist. Your portfolio, your systems, no generic pitch.
A specialist, not a sales engineerYour data model, not a canned datasetA written summary within two working daysAPEX mapping. Each .pe-field is an Item Template (label above, hint, error slot). The submit handler is a documented stub; PE.forms.validate(form) returns a boolean the APEX process can call first. The honeypot is a convenience only; real spam control is server-side.
Cards are used sparingly and always in a composition. Product cards carry a corner gear that turns on hover; resource cards carry a category tag; story cards on dark carry a metric pair. The spec-row list is the alternative to cards for services: rigorous, text-forward, no boxes.
01Native Oracle Solutions
Native Oracle Solution
Mass updates made simple.
Built for business users, trusted by Oracle specialists. Bulk data migration, validation, system-to-system transfer and data quality on Oracle PPM Cloud.
Bulk Data MigrationData ValidationSystem-to-System TransferNative Oracle Solution
Every obligation, visible.
Contract visibility, obligation tracking, change control and commercial reporting, connected to the projects they govern.
Contract VisibilityObligation TrackingChange ControlFlagship platform
Project governance, portfolio, financial, resource and risk management, reporting and analytics, AI and automation, natively on Oracle PPM Cloud.
07Insights & Resources
05Customer Stories
International Development
Consolidated a multi-region project portfolio onto Oracle PPM Cloud with Mass Data Exchange handling the historic data estate.
Professional Services
Extended Oracle PPM with governance workflows and portfolio dashboards across thousands of concurrent engagements.
They understand Oracle PPM at a depth we simply had not seen from larger firms, and their software closed gaps we assumed we would have to live with.
Global development institution
Approval pending: all client names, metrics and quotes above are illustrative placeholders from the draft and are listed in docs/approval-register.md.
Turn PMO ambition into a working operating model.
Know exactly where your PMO stands, and what to fix first.
From blueprint to go-live, without the guesswork.
Give your teams the confidence to run the platform themselves.
Default
Hairline border, white.
Subtle
Cloud fill, no border.
Shadow
Quiet cool shadow, for one featured item.
Panel
Panel teal, white text.
Whole-card click rule (locked). A card is one link only when it has one destination. Cards holding secondary links, buttons, downloads or form controls use explicit links instead: one logical focus target, a proper accessible name, a visible focus state, no nested links.
The shipped brand set: 56 thin-outline glyphs from the client deck. On the site they appear either inside a panel-teal tile (white glyph) or raw on light surfaces at 24px. No icon font, no emoji, no third-party icon libraries. Arrows and chevrons are inline SVG so they inherit colour.
advisory-consult
bar-chart
certificate
chart-cyclechecklist-pencloud-data
collaboration-ideadashboard-monitor
data-distribution
database-server
doc-gear-star
engineer-gears
finance-doc
gears-check-cycle
gears-pair
idea-gear
money-flow
presenter-gear
target-gearteamtraining-laptopcheck-circle-orange
chevron-circle-teal
lifebuoy-brandSits in the hero of every page except Home, campaign landings, thank-you and error pages. Maps to the APEX Breadcrumb list with one custom template. On phones it collapses to first › … › last two. Emits BreadcrumbList JSON-LD from the same items.
AdvisoryService
A structured assessment of your project and portfolio management maturity, governance and tooling, benchmarked against best practice, with a prioritised action plan.
The dark variant is on the cover of this page. Note the hero on light pages: the header will swap to the teal lockup automatically via data-pe-hero-tone="light" in Phase 4.
Category tags label content; solution tags list capabilities on product pages; status tags mark events. Filter chips are links (server filtering) with aria-current for the active state, and collapse to a select on phones.
Three conversion patterns. The global CTA band closes most pages and lives on APEX Page 0. The inline strip sits mid-page after a proof section. The CTA tile completes a card grid so the last cell is an ask, not an empty slot.
A 30-minute consultation with an Oracle PPM specialist: your portfolio, your systems, no generic pitch.
Cloud Solutions
Secure, scalable cloud architecture underpinning every product, and available as a foundation for your own Oracle Cloud estate.
Hover darkens one step; press darkens two; nothing scales down. Hairline rows (spec, list, story, job, index and route rows) are the exception: on hover only their two divider lines turn teal, with no fill, shift or title change. Focus is a solid 2px teal ring offset 3px on light, white on dark, and it never depends on colour alone. The simulated states below are static; tab through the live examples in earlier sections to see the real thing.
One idea, applied with restraint: the page is a drivetrain. Every brand gear on the page is geared to the same scroll position and differs only by ratio, direction and lag. Everything else moves once, on entry, then stays still. Use the Motion switch in the top bar to compare full, reduced and off.
How it reads
Speed 1.0 · clockwise · lag 1.2s
Speed 2.4 · counter · lag 0.9s
Speed 1.4 · clockwise · lag 1.6s
Higher lag trails the scroll, so a fast flick visibly spins the gear up and settles. Meshed pairs always counter-rotate.
01
Fade and rise 28px, 900ms, expo-out.
02
Second item, 120ms later.
03
Third, 240ms.
04
Once revealed, never re-hides.
65%
faster period close
4,200
projects under control
£2bn+
portfolio value
Counters keep prefix and suffix, count over 1.4s with a quartic ease, and snap to the exact text at the end. Under reduced motion they render the final value immediately.
--pe-dur-fast colour, border, opacity on hover--pe-dur-base arrows, card lift, accordion icon--pe-dur-slow underline sweep, reduced-motion reveal--pe-dur-reveal expo-out, 28px risedata-pe-gear-lag ScrollTrigger scrub--pe-gear-idle hero wheel onlyPrinciples. Nothing bounces. Nothing loops except the hero idle spin, the eyebrow ping and the scroll cue. Motion is opacity and transform only, so it never causes layout shift. Reduced motion removes all decorative motion and keeps reveals as a 400ms fade; “off” removes everything. Lenis smooth scroll is off by default and only enabled with data-pe-smooth="on".
The same composition rendered live at 390 and 768 wide, and at 1440 scaled to fit. Reference widths are 390, 768, 1024, 1280 and 1440. Navigation switches at the single token --pe-bp-nav (1200px), built in Phase 4.
| Component | ≥1200 | 1024–1199 | 768–1023 | <768 |
|---|---|---|---|---|
| Header | Full nav, search, CTA | Compact: logo, search, CTA, burger | Compact | Logo, CTA, burger |
| Card grids | 3–4 columns | 3 columns | 2 columns | 1 column |
| Spec rows | 4-column row | 4-column row | 4-column row | Stacked, no arrow |
| Filter bar | Chips | Chips | Chips, scroll | Select |
| Anchor nav | Sticky rail | Sticky top bar | Sticky top bar | Sticky top bar, scroll |
| Forms | Paired fields | Paired | Paired | Single column |
| Stat row | 3–4 across | 3 across | 3 across | 2 × 2 |
| CTA band | Two gears | Two gears | One gear | No gears |
| Breadcrumb | Full | Full | Full | First › … › last two |
| Section rhythm | 96 / 128 | ~84 | ~72 | 48 / 64 |
WCAG 2.2 AA is the target. The contrast table below is computed, not estimated. Three brand pairings needed rules rather than colour changes; the CTA fill uses the deeper orange token.
| Pairing | Ratio | Result | Rule in the stylesheet |
|---|---|---|---|
| Ink on white | 16.55 | Pass | Headings |
| Body on white | 9.16 | Pass | Body copy |
| Muted on white | 5.30 | Pass | Captions and meta (token adjusted from #6B7A80, review RB-01) |
| Muted on cloud | 4.73 | Pass | Also valid on cloud; body colour on silver and mist |
| Teal 500 on white | 4.74 | Pass | Links, eyebrows, focus ring |
| Teal 300 on white | 2.85 | Fail | Never text on light; decorative only |
| Teal 200 on dark gradient | 4.76–8.09 | Pass | Eyebrows and labels on dark (new token) |
| Teal 300 on dark gradient | 3.02–5.14 | Large only | Replaced by teal 200 for small text |
| White on teal 600 / 700 / 900 | 7.86 / 7.88 / 14.66 | Pass | Primary button, tiles, dark surfaces |
| Orange on white | 3.26 | Large only | Accent word in headlines ≥24px |
| Orange on dark end / flat teal 900 | 4.21 / 4.49 | Large only | Accent word on dark; headlines sit on the dark end |
| Orange on cloud / silver | 2.92 / 2.67 | Fail | Auto-switch to orange deep (4.4 on cloud) |
| White on brand orange | 3.26 | Not used | Brand orange is never a fill behind text |
| White on orange deep (CTA fill) | 5.06 | Pass | All filled accent buttons |
| Error on white | 6.57 | Pass | Field errors |
| Success on white | 4.96 | Pass | Form success |
Skip link is the first focusable element (press Tab from the address bar).One h1 per page, in the hero; sections are h2, cards h3.Touch targets are at least 44px; chips are 40px tall with 8px gaps, buttons 44 and 52.Card-wide click areas use one link with a stretched pseudo-element, so there is one tab stop per card.Errors are announced through role="alert" and tied to fields with aria-describedby; focus moves to the first invalid field.Decorative gears and glows are aria-hidden and pointer-inert.Reduced motion is honoured by CSS and by the script; the page is complete with zero motion.Hover never reveals anything that focus and tap cannot also reach.Five treatments, chosen per storytelling need, so the site feels coherent without being uniformly filtered. Teal duotone is used selectively where it strengthens the brand. Placeholders stand in for approved imagery; the treatment classes are production.
Documentary photography, people at work, no filterGentle teal cast, skin tones preservedGraphic backdrop for heroes and story headersUse. A for people and places; B when a photo sits next to brand surfaces and needs to belong; C for full-bleed section backdrops and customer-story headers; D for every product UI shot, never filtered; E for process and mechanism explainers.
Introduced with the Solutions templates and reused by every long-form page: the rail layout with anchored blocks, solution areas, the feature grid, process steps and the category node. All are hairline-led; none are cards.
Numbered block with a hairline top, a lede at 36rem and a 7/5 narrative grid.
Long-form copy sits on the left at the reading measure. The aside carries a small-caps heading and a hairline list, which is the pattern for "built for", "includes" and "outputs".
01
Stage gates, approvals and audit trails on every project record.
02
Prioritise, balance and fund the portfolio against strategy.
1
Five steps: three across at 1024, five from 1280.
2
Hairline with a dot marker per step.
3
Numbers in Figtree 300.
4
Two across at 768.
5
Stacked below.
Icon tile, title, one paragraph. Hairline top, no box.
Two columns from 640; the column count is a custom property.
Shared-system rules added in the final QA pass. They apply to every template and are encoded in pe.css; the full list is in docs/tokens.md and the audits in docs/handover/.
Contrast. Block index numerals teal-500; links and small accent type on tinted sections teal-600; small type on dark tiles white at 88%.Hidden wins. [hidden] is display:none !important; empty states and state-driven blocks rely on it.Narrow screens. Buttons wrap below 480px; the header compacts below 400px; chips wrap from 768px and become a select below.Semantics. Supplementary blocks are divs, not asides; table wrappers are focusable labelled regions; rail links carry aria-current when active; every image has intrinsic dimensions.Markup discipline. Only custom-property hooks may be inline; gear positions and all other variation are classes. Content status markers (data-pe-status, data-pe-sample, data-pe-approval) must survive into APEX until resolved.