I really really want to love this. I'm so close to loving it.
I'm a fan of utility classes. I don't think that classes should be named based on their content, or that we should be using stupidly specific and complex selectors so we can keep our markup clean (clean markup has nothing to do with class names or selectors); But I feel like this takes to too far.
What do I gain over inline styles? This doesn't seem to be too much more maintainable than that.
This is your own fault. You've made your "boss" believe that you can complete designs without content for so long that he now expects it. You should try re-framing the conversation. Something like:
— SCENE: BOSS TYPING FURIOUSLY, YOU KNOCK ON HIS DOOR AND HE INVITES YOU IN.
BOSS: "We need this design for our new sprocket page as soon as possible - We're going to market in two weeks and need a landing page for our Google AdWords campaign"
YOU: "Awesome! The new sprocket is going to be huge for our company. What would you really like to focus on for this page? I want to make sure to prominently feature the most important things."
BOSS: _excitedly lists a dozen things_
YOU: Wow - this thing is really great. It's going to be a huge benefit to our customers. How can we show them the three things they're going to react to instantly?
BOSS: "Well my favorite is the gizmosis feature. It makes it so you don't have to flim-flam any more!"
YOU: "Woah. That's really cool! I'll make sure that is billed highly. Anything else you can thing of that sticks out in your mind?"
BOSS: "That's the only thing that sticks out. I do have this detailed list of features here"
YOU: "Please do send that to me - I'll try to make some sense of it. If you think of anything else really important, just email it over to me. I'm going to start putting all of these features into the design tomorrow morning - so make sure you let me know by the end of the day! I can't wait to get this page up for our clients to see - it's going to be a huge win."
BOSS: "Excellent. I'll send over any additional thoughts I have with that document right now. Thanks."
— END SCENE
Framing the conversation is important. Seeing yourself as the boss's advocate is important. You're working toward the same goal. The content is more important than your design. Accept that.
This looks nice and seems to be a decent solution to setting a consistent vertical rhythm, but doesn't seem to really use any Sass features, and the old OOCSS-style layout helpers leave a bad taste in my mouth. Seems easier to extend placeholders rather than use those classes all over the place in your markup. Sure, you CAN do something like this:
<div class="h2 left p2 mr2 bold white bg-blue rounded">.oh</div>