Fictional manufacturing company. All services, equipment, and scenarios are demonstration content.
Fictional manufacturing company. All services, equipment, and scenarios are demonstration content.
A system you can edit.
A system you can edit.
A system you can edit.
The graphite-and-orange direction, expressed with native text, layouts, and reusable components.
The graphite-and-orange direction, expressed with native text, layouts, and reusable components.
Start your RFQ
Keep the visual rhythm.
Keep the visual rhythm.
Keep the visual rhythm.
Use this page as a visual reference when adapting the template. The live design also includes page-specific fills, text sizes and component controls. Check those instances after changing a shared style.
Use this page as a visual reference when adapting the template. The live design also includes page-specific fills, text sizes and component controls. Check those instances after changing a shared style.
01 — Color. Graphite #171918 grounds the interface; orange #FF681D highlights primary actions. Paper #F5F5F2, metal #E1E5E8 and white support content. Some panels have local fills. Recheck contrast after color changes.
01 — Color. Graphite #171918 grounds the interface; orange #FF681D highlights primary actions. Paper #F5F5F2, metal #E1E5E8 and white support content. Some panels have local fills. Recheck contrast after color changes.
GRAPHITE #171918
SIGNAL #FF681D
PAPER #F5F5F2
METAL #E1E5E8
02 — Type and spacing. Native display headings pair with readable body text. Preserve the per-page scales, generous desktop gutters, compact phone gutters and natural wrapping. Replace fonts through Framer and review every breakpoint; no font binaries are supplied with the guide.
02 — Type and spacing. Native display headings pair with readable body text. Preserve the per-page scales, generous desktop gutters, compact phone gutters and natural wrapping. Replace fonts through Framer and review every breakpoint; no font binaries are supplied with the guide.
03 — Native and code components. Edit Site Header, Demo Notice and inner-page Site Footer in Assets; Home has its own native Footer. Preserve CMS bindings. IndustrialScene, ProcessMotion and FeatureDiagram isolate SVG artwork; custom geometry needs code editing. RFQMock is a separate demo component.
03 — Native and code components. Edit Site Header, Demo Notice and inner-page Site Footer in Assets; Home has its own native Footer. Preserve CMS bindings. IndustrialScene, ProcessMotion and FeatureDiagram isolate SVG artwork; custom geometry needs code editing. RFQMock is a separate demo component.
After edits, check 320, 390, 768, 1024 and 1440 widths, visible keyboard focus and reduced-motion settings. ProcessMotion offers Loop and Reduced Motion controls. Keep essential text and warnings visible without animation. This guide does not certify accessibility or performance.
After edits, check 320, 390, 768, 1024 and 1440 widths, visible keyboard focus and reduced-motion settings. ProcessMotion offers Loop and Reduced Motion controls. Keep essential text and warnings visible without animation. This guide does not certify accessibility or performance.