initial feedback (sorry for doing that, but I'll be focusing on the "negatives" for now... doesn't mean there are no "positive" feedback as well):

• Buttons

  • I don't like the drop shadow... our design is flat, and we should keep it flat. The only exception may be for modals (though would love to see how we can even avoid it there)
  • the danger button :hover red is way too bright...
  • the text of the buttons in the toolbar are a bit off from vertical alignment side of things (too low)

• Links

  • -1 on underline on :hover

• TextInput

  • -1 on the dotted outer border when focused

• CheckBox

  • will be good to also have a "partial" state implemented (a "dash" instead of a check icon)

• Table

  • Some alignment issues (e.g. the mag glass inside the search box is off)
  • when hovering over a sortable header, the header text moves... not sure if it's intentional or not, but it shouldn't

Table lines...

I agree that it's worth exploring 1px borders... the one thing I'd be careful here is that the header won't all of a sudden be too much "in your face", so we might need to subtle the header background to accommodate such change

ToolBar size....

Ties to the previous point... we'll need to try different options here and see what feels best

Tag legibility....

I think this can be solved in different ways... I like what we have today, but one thing I'd like to explore is a different shape to the label... shape is "sticky" in your mind...

agree with @uboness comments. also please use color 5A5A5A for icons in buttons (as agreed in design reviews).

example for a tag shape:

• https://codepen.io/wbeeftink/pen/dIaDH
• http://dimox.net/beautiful-tags-for-a-website-using-only-css/

@uboness love the second example with the tag pointing on the left side. feels like a real tag to me :)

@cjcenizal for links could you try this for us:
a.kibana:link {color:#006E8A; text-decoration:none;}
a.kibana:visited {color:#006E8A;text-decoration:none;}
a.kibana:hover {color:#3CAED2;text-decoration:none;}
a.kibana:active {color:#00586A;text-decoration:none;}

Quick and dirty link tests: http://codepen.io/altziebler/pen/dOKgJZ
example three above

@uboness @alt74 Thanks for the great feedback! I'm glad you're coming around on the tag design Jurgen. 😄 Those are great finds, Uri. I'm also a fan.

In our next meeting let's talk some more about buttons, links, and inputs. I'd especially like to talk about the concept of affordance in relation to buttons, and accessibility in relation to inputs and links. Here's a summary of my thoughts (I'd like to dive in deeper in our meeting):

Buttons

In case anybody isn't already familiar with the concept of affordance, it's the idea that a thing should communicate how it's used by its appearance (shape, color, behavior etc). So, a button should communicate that it's pressable, somehow. There's a spectrum of affordance along which a button can lie -- from very weak (no affordance) to very strong (unmistakable affordance). I created this pen to demonstrate this spectrum.

Our (awesome) aesthetic is flat but that doesn't take into account the importance of usability and it doesn't leverage our ability to design the user's interaction with the button. I want to preserve our flat aesthetic but also offer a stronger affordance to our users, which is why I think strengthening the affordance only in hover and active states is a good compromise. Thoughts?

Links

The current design for links is almost indistinguishable from regular text and it's entirely indistinguishable for colorblind users. Take a look at this pen for comparison. I think we have 2 requirements: 1) we need to make links stand out more from regular text and 2) we need the hover state to stand out from the regular state. What do you both think of this? Jurgen, if this makes sense to you, do you think you could brainstorm on some more link styles to meet these requirements?

Inputs

Uri, what about the focus state did you not like? That it existed at all? Or that it was dotted? We definitely need to indicate focus state in some manner; otherwise tabbing through inputs won't be possible. Jurgen, would you mind exploring some options?

@cjcenizal for selected input please try color 6EADC1 (no dotted lines please - very noisy).
I would vote for a glow (like GitHub inputs) before I vote for a dotted line around the input.

Link exploration updated with 4 options:
http://codepen.io/altziebler/pen/dOKgJZ

breaking some conventions here with idea 4 but I like it :)
regular/visited: light blue
hover: dark blue
active: darker blue + underline

I should probably stay out of this, but I want to mention two things:

1. @cjcenizal's description of affordance seems to describe the exact intuition I have about buttons. Without some sort of hover effect the button feels less alive, causes a bit of ambiguity regarding it interactiveness, and makes it hard to distinguish from other purely decorative uses of background color. Material design describes this as using elevation and I think they pull it off very well.

2. I'm not a huge fan of :active states on buttons, but it's very important for accessibility. Whether it's a dotted outline, or the default browser style (my recommendation, users will expect that) I think it's important to keep.

@spalger Thanks for chiming in and for the great reference!

button test: http://codepen.io/altziebler/pen/mOGQao
1px down movement for active state – I like it 👍

Nice work @alt74! Looks great.

@cjcenizal Given that the ui framework is now in the Kibana repo, is your plan just to copy this change to over there?

@epixa Yes

Replacing this PR with elastic/kibana#9462