# Physical Shape Cookbook Guidance for drawing physical objects (vehicles, buildings, hardware, mechanical systems, anatomy) — when rectangles aren't enough. ## Shape selection | Physical form | SVG element | Example use | |---------------|-------------|-------------| | Curved bodies | `` with Q/C curves | Fuselage, tanks, pipes | | Tapered/angular shapes | `` | Wings, fins, wedges | | Cylindrical/round | ``, `` | Engines, wheels, buttons | | Linear structures | `` | Struts, beams, connections | | Internal sections | `` inside parent | Compartments, rooms | | Dashed boundaries | `stroke-dasharray` | Hidden parts, fuel tanks | ## Layering approach 1. Draw outer structure first (fuselage, frame, hull) 2. Add internal sections on top (cabins, compartments) 3. Add detail elements (engines, wheels, controls) 4. Add leader lines with labels ## Semantic CSS classes (instead of c-* ramps) For physical diagrams, define component-specific classes directly rather than applying `c-*` color classes. This makes each part self-documenting and lets you keep a restrained palette: ```css .fuselage { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; } .wing { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; } .engine { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; } ``` Add these to a local `