OAS / Studio Refined
One brand. A clear design language.
The tokens and choices behind the Studio Refined design language. The original website content is preserved; its presentation, navigation and motion have been reworked.
Colour palette
Ink#0E1A2B
Accent#3F78AE
Highlight#AFCDE3
Surface#EDF3F8
Paper#FFFFFF
Type, rhythm and shape
| heading | Outfit |
|---|---|
| body | Lato |
| display | clamp(2.7rem, 4.8vw, 4.65rem) |
| body Size | 18px |
| section | 88px |
| container | 1280px |
| gutter | 40px |
| mobile Gutter | 20px |
| radius | 24px |
Movement with a purpose
Product-specific diagrams, floating workspace layers, radar sweeps, staged section entrances and number counters. Motion pauses out of view and respects reader controls.
Keyboard and touch users can reach the same pages. Reduced motion keeps content fully available, and animations pause when the browser tab is hidden.
How the pages connect
Solutions brings Citrix workspaces and Three Pillar managed services together. Products gives each platform its own place.
What changed
- Give Citrix workspaces and Three Pillar managed services equal prominence.
- Use distinct animations for all eleven product pages.
- Replace repeated boxes with open layouts, disclosures and readable comparison tables.
- Mix full-width and paired article layouts, with Citrix insight on the homepage.
- Use one team enquiry action and real product whitepapers.
The OAS writing guide
Use clear South African English. Lead with the practical benefit, write short active sentences and explain technical terms. Avoid hype, unsupported guarantees and invented business claims.
Writers control the content. The design language controls its typography, colours, spacing and layout.