Principles

Balance size, weight, line-height, width, and alignment together. Changing one rarely fixes the text because the other four still shape how it reads. Weak typography usually comes from pushing one part too far to cover for the rest.

Limit an interface to three type sizes or fewer. Build the rest of the hierarchy with weight, color, position, and space. Use a fourth only when the content truly needs another level. Every extra size adds another distinction the user has to understand.

Once the type system is set, build more hierarchy with color, weight, position, casing, and decoration. Try those controls before adding another size. Two or three sizes can carry an entire interface when the other controls do their share.

Use a flexible, responsive grid to give content a starting point. The grid is only a tool for alignment. Balance comes from how you position each element within it.

Use a visible column grid for the big structure and an invisible rhythm grid for the space inside it. Let the rhythm grid work at two scales. Use a type-led baseline for larger vertical spaces and a smaller unit for component gaps and padding.

Start with the body text. Its font size and line-height create one baseline. Use whole multiples of that baseline for the larger spaces between content, sections, and page regions. Keep smaller gaps inside components on the micro-spacing grid. The page stays aligned because its space grows from the content.

Choose the grid for each viewport. A desktop grid does not shrink cleanly to mobile. Mobile leans on content and spacing for alignment, while tablet sits between the two. Let the content set the column count at each breakpoint.

Give each color a structural or interactive job before choosing its value. Structural colors hold canvases, containers, groups, borders, dividers, and chrome. Interactive colors carry buttons, links, tappable controls, and states.

Use the same color for the same meaning throughout the flow. People learn that language without instruction. Keep each color definition intact. Don't reuse a color for a conflicting meaning. Brand primary and interface primary action may need different colors, so name that choice clearly.

Lock the hue, then vary saturation and brightness to keep related components cohesive. Use additional hues for success, warnings, and errors. Give each additional hue one clear meaning.

Use a small, named set of greys that share a tight hue range and match the brand's temperature. Add a missing middle grey when one tier does too much work. Rebuild the palette when near-duplicates start piling up instead of patching each screen.

Use white to pull surfaces forward, lighter greys for the middle, and darker values to push them back. A white module on a grey canvas can feel pressed through the page because the eye brings real-world light into the screen. Create separation with depth first. Add dividers only when depth cannot carry it.

Apply the same principles in dark UI without simply inverting the palette. Small mistakes show up faster on dark backgrounds. Avoid pure white on pure black except for OLED needs, and use subtly saturated greys instead of pure greyscale. Keep structural values close so data, accents, and primary actions get the contrast.

Define text styles, named colors, and component variants by the job each one performs. Reuse each style in the same role across every screen so people learn the interface without instruction. That shared meaning forms a contract with the user. Consistency makes an interface predictable.

Rebuild an admired design in your own tool to understand it. Take it apart until you can name the three to five choices doing most of the work. Strip away the surface and find the structure underneath. Keep the lesson. Leave the copied design behind.

Define how the work should feel before anyone reads a word. Direction mixes why with how. Use it to reject choices that fight the feeling without deciding every detail up front. Keep personal taste inside that direction. Return to the direction whenever references start pulling the work toward an average.

Use language to do the work styling cannot. Write titles that name the consequence and helper text that explains why. Do not repeat the label in the placeholder. Generic copy can convert worse than a weak layout, so treat every interface string as a design choice.

Design every element from empty to fully populated. Test profiles with no data and rich customization, lists from empty results to overflow, and auth both signed in and signed out. Empty and partial states shape a new user's first impression, so treat branded empty states as core work.

Keep designers and developers in conversation from the first iteration through release. Mark what is fixed and what can change. Choose the tool that keeps the conversation clear. Use the static comp to begin the discussion, then finish the product in the browser with real content.

Choose the review format by audience and outcome. Keep informal reviews loose and story-driven for one or two collaborators. Use semiformal reviews to shape direction with a small team. Save polished, principle-led presentations for executive approval on validated work. Move the conversation toward strategy as the audience moves up the org chart.

Show what you tried, what changed, and why the final direction works. Build agreement through frequent conversations about small pieces. Invite honest reactions, treat revisions as input, and present the work yourself. Share the file after the conversation so it supports the story.

Start with a direct title, clear body copy, a primary action, and a way out. Add a close control and overlay when they help. Shape the rest around the decision and its consequences.

Use three moves together to make a design feel confident and modern. Give it generous negative space, bold-and-light type contrast at the same size, and strong left alignment across the layout. Other approaches can work, but these three keep proving themselves. Learn the pattern and carry it across projects.

Do not trust bounding-box math to center circles, triangles, mixed corners, or icons with different visual mass. Nudge circles inward, push triangles toward the point, and give rounded shapes more room beside sharp ones. Apply the adjustment across the set. After making the same nudge three times, write it down as a rule.

Build visual weight with size, font weight, color and background mass, negative space and isolation, and position. The levers compound. A large bold title with generous space on a colored background can outweigh any one lever pushed to its limit. Scale describes size. Weight describes heaviness. Do not confuse them.

Let every gap describe a relationship. Keep intimate pairs tight, related elements farther apart, and separate sections farther still. Give each relationship one spacing value and reuse it across the screen. Equal gaps erase hierarchy. Shared edges signal connection. Indentation shows how a child belongs to its parent.

Use space and alignment to show how much an element matters. Give a high-stakes form field generous room and a clear edge. Hierarchy depends on space as much as size. A heavy title feels small when cramped and owns the page when it has room.

Make the interface work at least as well as it looks. Name the function and primary user action before choosing hierarchy, color, or typography. Add style after the structure can carry the experience. Form follows function.

Set the hierarchy by answering four questions. What does the user plan to do here? Are they exploring or completing a task? What do you want them to do? Which piece of information matters most? Answer those before choosing size or color.

Judge spacing at the size people will actually see it. Start with the measured value, then account for internal padding, descenders, character widths, and nearby visual mass. Adjust the number until the gap looks balanced in context.

Treat the experience as a path from where someone stands to where they want to go. Every element either moves them forward, holds the path steady, or distracts them. Keep the first two and cut the third. Before judging anatomy, type, color, or style, name where the person stands on that path.

Decide whether the person has a specific task or wants to browse what is possible. One screen rarely serves both modes well at once. Give hunters direct paths and constrained controls. Give explorers room to scan and discover. Match hierarchy, navigation depth, density, and motion to the mode. Navigation changes surfaces. Actions change the current one. Keep their affordances distinct unless the edge case earns an exception.

Set the direction before generating. AI can produce polished surfaces cheaply, but it averages every style spectrum and lands in the middle. The screen may look composed while feeling like no one made it. Judge the output against a direction you already chose. Never treat the first pass as finished.

Build quality through small moves. Widen the tight gap. Break the line at the right place. Shift the hover color and shadow by a touch. Layer light until a control feels tactile. Make every tiny decision support the larger composition. People may never name those decisions, but they build trust.

Use grids, measurements, and tokens to build the first pass. Then inspect the work at its final size and correct the places where mathematical alignment looks visually wrong. Record repeated optical corrections as rules.

Line things up so the work feels deliberate. A reliable left edge, balanced split, and clean rhythm of columns and gutters signal care. Pieces that almost align feel accidental. Pieces that share an edge feel decided. Every broken alignment makes the user work harder to parse the page.

Name which colors are structural, which are interactive, how states work, and why you chose each one. If you cannot explain the palette, type scale, or component family in plain words, the system is not finished. Write the decisions down as a short list.

Do not let a darker divider or one extra pixel of button padding become a permanent near-token. Keep the vocabulary small by naming and reconciling every new value before it enters the system. Test the system by changing the primary color everywhere with no orphaned values. Fix the vocabulary upstream instead of patching each screen.

See every interface element as content wrapped by padding, border, and margin. Text, icons, components, sections, screens, and typography all follow that four-part model. Padding belongs inside the box. Margin protects the space around it.

Give each component rules for padding, sibling spacing, and nesting. Tie its internal proportions together. The label margin can mirror the corner radius, helper text can scale to its input, and a checkbox can scale to the field beside it. Let the component manage itself and the layout arrange it. Build in padding so two components create the right gap when snapped together.

Put a named token between each design intent and its value. Use names such as `color/primary` and `spacing/sm` to show each token's job and keep its value editable in one place. Change a shared token across the product and find any values that do not update. Name those values or bring them back into the system. Give AI the same token vocabulary.

Build a tight system for typography, layout, and color before adding subtle details. Surface treatment cannot rescue weak fundamentals. Work in order. Set the function, build the hierarchy, then add style. Decoration that arrives before the structure is ready has the wrong job.

Design a real screen before defining permanent styles, tokens, and components. Find the patterns that repeat, name them, and reuse them across the product. On content-led surfaces, start with temporary components and replace them as real content reveals the lasting system.

When the same decision comes up again, turn it into a short list of questions, parts, stages, or constraints. Name the framework so people can remember it, teach it, and use it on another project. Keep it only while it continues to make the work clearer.

Define the pattern and its job while you style it. A list can become a card as the content needs more separation, weight, or interaction. Let the content and context shape the anatomy, states, and visual treatment together.

Let impact set the visual weight. Give forward progress full color and contrast. Keep secondary actions supportive and tertiary controls quiet. Give only one action primary weight. Use red and a confirmation step to make destructive actions feel consequential.

Build a system everyone understands so developers can make small calls without stopping the designer. Use clear component names, documented tokens, and logged decisions so people and agents can keep moving on their own. Maintain that rigor as the system grows.

Reserve the primary action color for the next step in the user's current task. Give each task one clear primary through color, position, and style. Keep that treatment consistent across the app. Exploratory and dashboard screens may need no primary treatment. You can also hold the slot in a disabled state until the user meets its requirements.

List the states each component can actually enter, then design all of them. Start with default, hover, focus, active, disabled, selected, loading, success, error, empty, and overflow. Remove the states that do not apply. Show the remaining states through weight, contrast, depth, copy, or motion.

For actions that change state, show what the user can do, what is happening now, and what happened. Make the available action, its progress, and its result clear. Simpler controls only need the states their job requires.

Use a modal when the user needs an explicit decision. A filter that slides away can leave people wondering whether it applied. Save and Cancel remove that doubt. Match the modal to the action. Use full screen for compose flows and heavy settings, and a bottom sheet for short signed-in actions. Keep reading flows in navigation because they have no save state.

Treat affordance as a limited signal. Use one primary interactive color and two or three action tiers. Reserve that color for interaction. Make interactive elements clearly tappable and static elements clearly static. Keep the hit area larger than the visible control and solve those two problems separately.

Choose transitions by what the user is doing. Use standard platform motion for task flows because extra time becomes friction. Give exploratory flows more room for custom motion because discovery can reward delight. Keep decorative animation out of repeat task flows.

Make every animation communicate state, signal affordance, ease a transition, or earn its cost another way. Custom motion must justify the engineering time behind it. Keep decorative motion out of task flows and reserve attention for animation that communicates.

Match the tool, polish, and time to the decision you need to make. Keep conceptual work rough. Polish only the load-bearing screens for persuasion. Make validation work interactive enough to reveal confusion. Make instructional work precise enough to build from. Treat the shipped product as the final level of fidelity.

When a page feels unclear, remove something before adding size, weight, color, borders, or chrome. Extra signals usually make a hierarchy problem louder. Audit the foundation and make the existing controls work before introducing another one. The simplest version that still functions is usually closer to done. This holds in dark UI, tables, list-to-detail work, and AI editing.

Make every visual choice carry meaning, hierarchy, affordance, or function. Structural choices age slowly because the work holds them up. Decoration ages quickly when a trend does all the work. Give every gradient, accent, illustration, and ornament a job. Remove it when it has none.

Reduce the design to strong typography, layout, and color so quiet details have room to work. A careful shadow, corner radius, small animation, or refined hover disappears on a page that already shouts. Structural restraint makes refinement visible.

Expect AI to add too many type sizes, pull quotes, glass, blur, depth, and safe grids. Edit the first pass by subtraction. Remove extra emphasis, overlays, and hierarchy levels, then check the composition again. Start a fresh session or revisit the design manually if AI iterations stop improving the work.

Start with system fonts, standard grids, conventional component shapes, and platform patterns. Override them on purpose and write down why. A custom move only feels intentional when the standard underneath is solid. Document deliberate breaks as exceptions instead of quietly folding them into the system. Build cohesion first, then break one convention where the idea earns it.

Anchor every highlight, shadow, and gradient to one overhead light source so the interface feels physically coherent. Give raised elements a top highlight and bottom shadow. Reverse that stack for recessed elements. Flat design remains a valid direction, but modals, popovers, and elevation cues still need consistent light. Mixed directions make the work feel decorated instead of designed.

Use light beyond the raised and recessed states of controls. A barely visible canvas gradient can feel like environmental light. A large blurred white shape behind the foreground can create a spotlight at low opacity. Multi-stop gradients can make illustrated objects feel credible instead of plastic.

Give imagery as much weight as typography, color, and layout. People read a strong visual faster than a paragraph. Curate every photo and icon against the full composition. Place each image on a control spectrum from fully curated to user-uploaded, client-supplied, or generated. Choose among seven interface types with care. Static photos, dynamic images, glyphs, icons, illustrations, 3D, and collage each need a different discipline.

Curate static imagery and treat dynamic imagery as an adversarial input. Test a white logo on white, a black photograph, and no image at all. Beautiful source material sets an easy bar. Make the layout survive bad imagery and every content state. Use a utility gradient as the floor for text on images. Keep overlays, blurs, and blends on separate layers.

Build icons from circles, rectangles, lines, and minimal pen work inside a consistent frame. Use smaller or larger frames only when density or prominence calls for them. Keep stroke weight and cap style consistent across the family. Center by eye when the math looks wrong. Think in assembled shapes instead of freehand drawings. Do not generate each icon in isolation. Curate a proven set before building a new one.

Judge every icon in order. First, does it improve the interaction? Second, does it belong to the same family? Third, does its personality fit the project? Let universal symbols stand alone. Pair custom interface icons with labels when either one feels unclear by itself. Cap each surface at two or three unlabeled icons.

Build product mockups and onboarding art with simple shapes, gradients, blur, and a reference image you have the right to use. Study its structure, lighting, and proportion, then rebuild those qualities in your own visual language. Work at the size where the illustration will appear. Refine the details that remain visible at that size and simplify the rest.

Make the app icon part of the same visual language as the load screen, colors, and interface iconography. Keep the mark simple and reuse interface elements for continuity. Design it after the product language has settled, then test it at real size inside the platform. Let one master carry the design while platform frames wrap it for each surface. Use that same carrier-and-wrapper pattern beyond app icons.

Use platform patterns people already know. Put tab bars at the bottom, navigation bars at the top, back in the upper left, clear confirmation in modals, and skeletons during loading. Spend novelty on one transition, haptic, or signature interaction where it earns attention. Keep navigation conventional so it remains familiar after the first session.

Pass the required contrast ratio first. Then judge the result in context because surrounding color and visual mass change what people perceive. Set measured floors for body text, large text, and non-text controls. Define helper, placeholder, and disabled colors by whether people need to read or use them. Preserve enough range between roles to keep the hierarchy clear.

Build contrast into the palette before designing screens. Define separate text greys for body copy and larger text. Set three working floors for body text, large text, and non-text controls. Create the starting swatches from those floors and document where each one can be used.

Give every interactive control a hit area larger than its visible shape. Keep small controls inside larger tap targets. Preserve the platform's minimum size for primary touch controls even when the chrome shrinks. Solve visible and tappable affordance as separate problems.

Pair every color state with text, an icon, position, weight, or structure. A red helper line, green success badge, or blue active tab needs another signal. Bold text on a tinted background still reads without color. Thin red text alone does not. This protects color-blind users and keeps the interface clear in print and greyscale.

Remove all color from the screen. Check what still reads through layout, structure, copy, weight, and icons. Move every load-bearing color signal into at least one of those channels.

Use judgment to decide what works, what needs work, what stays, and what goes. AI can generate in seconds, do the math, and name a pattern. The designer handles optical refinement and decides whether that pattern belongs in this context. As generation gets cheaper, your value comes from producing the right pixels against real constraints faster than the alternative.

Name things consistently, keep the file tidy, and structure the work for human teammates and AI agents. A designer who drives an agent becomes a design engineer, and a deployed prototype can serve the team better than a static file. Throwing a file over the wall produces plausible but disconnected work. Strong system context compounds for people and agents over time.

Make the design work when the content gets bad. Test long titles, dense copy, metadata, timestamps, empty states, partial states, overflow, and hostile dynamic images. Replace beautiful placeholders and lorem ipsum with real content before review.

Design a next step for every blocked, error, denied, and completed state. Link an unavailable address to a service request, denied permission to settings, and duplicate accounts to a merge flow. Give every modal balanced exit paths and use reassuring copy. The user still needs to move from A to B after the system says no. Design recovery as a real surface.

Let AI infer useful defaults such as dark mode, compact layouts, or morning notifications. Decide which choices the system can adjust quietly and which still need consent. Use inference for common cases. Keep every inferred default editable and leave a clear setting for people who want the exception.

Drive the AI agent and coded prototype through implementation. Stay involved as the design changes in the browser. Use the deployed product as the shared artifact. Guide the build and let the original comp change when the working product needs it.

Choose style inside the boundaries set by the subject. Give the Hawaiian Islands large, beautiful photography because flat type alone cannot carry the place. Keep financial products inside a visual range that supports trust. Build cohesion first, then break one convention to make the work memorable.

Begin functional product design on mobile. The small screen forces content priorities and resolves hierarchy through physics. A composition that survives that constraint usually expands cleanly to desktop. Desktop work rarely shrinks as well. Use mobile-first as the default for product UI.

Begin marketing design on desktop because expressive composition needs canvas. Build the hero, display typography, imagery, and larger layout at their intended scale. Reduce that composition to mobile after it holds. Use desktop-first as the default for marketing surfaces.

Treat missing assets as a sourcing problem. Check the browser inspector, official brand resources, vector libraries, source URLs, screenshots, and direct outreach. Confirm permission and usage rights before using any asset. Move to the next legal source when the current route stops paying off.

Curate a proven set before generating a worse one. As generation gets cheaper, editorial judgment matters more. Do not hand fifty variations to the audience and make them evaluate for you. Searching is part of the work. Repeated prompts in the style of one product lock the output to someone else's language. Taste means noticing that fixation quickly and stopping before it ships.

Study one specific quality from a reference, such as spacing, image treatment, or type contrast. Close the reference, then apply that lesson in your own visual language. Avoid copying the combination of choices that makes the source recognizable. Keep pixel-perfect recreations as private studies and out of portfolios, client work, and shipped products.

Do not study one reference until every sketch becomes a variation of it. Restore range in three ways. List what you like, then close the reference before designing. Push three more versions into different territory. Before shipping, picture your work beside the reference and run the gut check.

Let content determine scale and rhythm. A short list can support generous rows, while a long list needs tighter spacing. Match container padding to the content. Design for realistic and worst-case content instead of the smallest expected case. Work from the content out.