search

IBM-Cloud / logistics-wizard-webui

Web UI for Logistics Wizard Showcase demo. The Logistics Wizard is an end-to-end, smart supply chain management solution that showcases how to execute hybrid cloud, microservices, and predictive data analytics in the real world.
Other
14 stars 20 forks source link

Create Design Style Guide for App #8

Closed colbycheeze closed 8 years ago

colbycheeze commented 8 years ago

As a user, I feel delighted by the consistent design of the app.

Create the visual and experience style guide for our app, extending the IBM Design Language

Logo for app included in this task.

@colbycheeze commented on Fri Aug 12 2016

@kingtraceyj Do you have a color palette in mind yet? Here are some default variables we have set up in our project (came from material-ui) so you can use this as a reference for coming up with ideas.

You can customize this palette and add/remove anything that suits our project so this is just what exists now if you look through the material-ui docs and see the various colors.

palette: {
    primary1Color: cyan500,
    primary2Color: cyan700,
    primary3Color: grey400,
    accent1Color: pinkA200,
    accent2Color: grey100,
    accent3Color: grey500,
    textColor: darkBlack,
    alternateTextColor: white,
    canvasColor: white,
    borderColor: grey300,
    disabledColor: fade(darkBlack, 0.3),
    pickerHeaderColor: cyan500,
    clockCircleColor: fade(darkBlack, 0.07),
    shadowColor: fullBlack,
  },

If you want to come up with these I can plug it into the existing theme and starting using these as reference similar to the typography (so if I'm like, "yo what color is that widget" you can just say, "It's primary2") and then if we update primary2 later...you get the idea :)

@kingtraceyj commented on Fri Aug 12 2016

great. i do have a basic color palette and am going to work on some accent colors. i take a look at the attributes and get those to next week.

@kingtraceyj commented on Tue Aug 16 2016

@colbycheeze & @LRRoberts0122

Here's what I have so far. more colors coming soon! let me know if you need something else thats not listed so far.

primary1Color: #0F94A7, primary2Color: #485566, accent1Color: #91C383, textColor: #485566, alternateTextColor: #FFFFFF, canvasColor: #EFF2F5, borderColor: #DADDE0,

lw_color

colbycheeze commented 8 years ago

Converting this to an epic since it encompasses many aspects of the project, such as building reusable components, logo, color design, implementation, etc.