Preview pages do not make enough visual distinction between examples & preview page

[ajb]

Can anyone really tell what's going on here?

[jrubenoff]

I've kept style overrides specific to the style guide at a minimum, so that:

a) We can keep maintenance costs to a minimum (i.e. fixing bugs that only appear in the style guide) b) The styles in the guide can match our apps as closely as possible

This comes at the expense of some visual coherence, but IMO I think it's worth the tradeoff given our bandwidth. For example, Bootstrap mitigates the problem by using padded boxes:

But this means they have at least one style override for every component:

Let's discuss if you still think this is an issue. (Also, IMO, this is really only a problem on the Headers page.)

[ajb]

I'm not sure why you would need to add an override for each component? Why wouldn't a uniform padding (e.g. 1rem) for the outer box work?

[jrubenoff]

Because the components themselves can have margins and padding. (For example, .page_header comes with an extra bottom margin, which looks ugly and inconsistent when placed in a box with other components.)

[ajb]

Ok, makes sense.