The colors of Oracle’s new user interface
Oracle announced Alta User Interface – a new design and set of guidelines for the developers for the latest Oracle applications (cloud-based products, Fusion Middleware and mobile applications) and the next Oracle products to come. Alta UI is created as a responisve, mobile-ready, flat and clean interface design
The key principles on which Alta UI is based are:
- Mobile friendly design
With multi-device support, layouts created to fit within 1024px display width, responsive design - Simple and uncluttered layouts
Fewer elements on page, more open spaces, less ‘chrome’ used - Clean information hierarchy
Pages created out of simple, modular elements - More visual content
Use visualizations and info graphics to present information, usage of Alta UI color palette
How does it look? Here are some examples of applications and pages with Oracle Alta UI:
Oracle Developer Cloud Service Dashboard and Oracle Help Center – Home Page
Oracle Work Better mobile dashboard and Oracle SampleApp – System Load dashboard
Below a reduced color palette with hexadecimal (HEX) codes from the Alta Icon Web Design Guide. You can start using them for OBIEE reports and dashboards for a fresher, clean feel.
| #dedf54 | #e9ea92 | #ecf1cd |
|---|---|---|
| #c8d657 | #dce392 | #e7eecd |
| #b3ce5b | #cdde92 | #dfebcd |
| #9bc55d | #bdd792 | #d9eacc |
| #81bb5f | #aed292 | #d1e7cc |
| #67b460 | #9ecc92 | #c9e3ca |
| #45ac62 | #8dc592 | #c8e3d1 |
| #42ad75 | #8bc6a0 | #c8e4d6 |
| #3caf85 | #89c7ad | #c7e4de |
| #36b099 | #87c9ba | #c7e6e2 |
| #2db3ac | #86cac6 | #c7e7e9 |
| #22b5bd | #85ccd2 | #c6e7ee |
| #13b6cf | #83cdde | #c6e8f5 |
| #00b8df | #81cee9 | #c5e8f8 |
| #00b8ed | #80cff3 | #c5e2f6 |
| #17ace4 | #82c5ec | #c5def3 |
| #309fdb | #84bbe6 | #c5d9ee |
| #4092d0 | #85b3df | #c5d3eb |
| #4a85c5 | #87a9d7 | #c5cee8 |
| #5277b8 | #899ed0 | #c5c8e3 |
| #5a68ad | #8b92c7 | #c5c3df |
| #5f58a2 | #8d87c0 | #c5bcdd |
| #614a9a | #8e7db8 | #cac0dd |
| #754b9a | #9c80b8 | #d2c2de |
| #854e9b | #a984b8 | #d9c4de |
| #97519b | #b686b9 | #dfc6df |
| #aa529b | #c28aba | #e4c8df |
| #ba559c | #ce8ebb | #ebcadf |
| #ca589d | #d992bc | #efcddf |
| #da5c9d | #e394bc | #f5cfe0 |
| #e75e9e | #ec97bd | #f5cfdd |
| #e85e93 | #ec96b6 | #f5ced7 |
| #e85d88 | #ec96ad | #f6ced2 |
| #e85d7d | #ed95a3 | #f6cdcd |
| #e85d70 | #ed949b | #f6cdc7 |
| #e85c63 | #ed9391 | #f6ccc2 |
| #e95b54 | #ed9286 | #f6ccbc |
| #e95b46 | #ee927c | #f6cab7 |
| #e95a38 | #ee9270 | #f7d1b9 |
| #eb6d3a | #f09f76 | #f8d6bc |
| #ed813e | #f3ac7a | #f9ddc0 |
| #f09543 | #f5b97e | #fae2c3 |
| #f4aa46 | #f8c583 | #fae2c3 |
| #f8bb48 | #f9d286 | #fbe9c5 |
| #fbce4a | #fcde8a | #fcedc8 |
| #ffdf4d | #ffe98f | #fff4cc |
| #ffee4f | #fff492 | #fff8ce |
Besides the limited color palette there are seven colors that are recommended to be used as grey or neutral tones:
| #537fa8 | #6e8598 | #919fab | #afbac5 | #cfdce8 | #c5def4 | #f5f5f5 |
|---|
Oracle provided also an extended palette with more color tones, which is available here: http://www.oracle.com/webfolder/ux/middleware/alta_icon_web_design_guide/colors-icon_palette.html.
For the full Oracle Alta UI documentation see: http://www.oracle.com/webfolder/ux/middleware/alta/index.html.