Responsive Multi-Screen Design Guidelines

I’m ready to formalise a set of clear, practical guidelines that keep our product looking and working perfectly across mobile, tablet, and desktop breakpoints. The aesthetic is firmly Flat Design, so every recommendation you provide—from colour usage to icon treatment—should respect that clean, layer-free style.

The single biggest priority is readable, consistent typography. I need explicit rules for font scaling, line-height, and character spacing that adapt smoothly as the viewport changes. Please anchor all other sizing decisions (grid, spacing, component padding) to those typographic scales so the hierarchy feels naturally proportional on every device.

To make sure the team can implement your work without ambiguity, I’d like you to deliver:

• A concise guideline document (PDF or shared Figma page) outlining breakpoints, columns, and spacing values
• A type ramp for each breakpoint, showing exact rem/px values and usage notes
• Examples of common UI patterns—cards, forms, nav bars—illustrating how their text and surrounding containers resize
• A quick-reference table summarising rules so developers can copy values straight into code

Feel free to build the visual examples in Figma, Sketch, or Adobe XD—whatever you’re fastest with—as long as the final artefacts are easy for us to export or inspect.

I’m happy to answer questions about brand colours or existing assets as you work; otherwise, lean on standard Flat Design conventions. If this sounds like a good fit, let’s lock in the milestones and get the first draft underway.