An EDI integration platform for trading partner workflows. Fits B2B integration tools, supply-chain platforms, fintech dashboards, and operations-software website designs.
Design tokens
16 colors · 12 type stylesVivid red (#e42b0c) primary on a pure white (#ffffff) canvas, set in Telegraf for headlines and Modern Gothic for body text. The highlights below are read from the Orderful DESIGN.md in the Pass bundle, which carries all 16 color tokens, 12 type styles and the full component rules.
Colors
- Primaryvivid red
#e42b0c - Canvaspure white
#ffffff - Inkpure black
#000000
Type
- TelegrafDisplayweights 300, 500, 600, 60 to 72px
- Modern GothicBodyweight 300, 14 to 20px
Radius
- xs 4px
- sm 6px
- md 8px
- full 9999px
Spacing
- xxs 4px
- xs 8px
- sm 12px
- md 16px
- lg 24px
- xl 32px
- xxl 48px
- x3 64px
- section 96px
Components
- Primary button
button-primaryPrimary buttons fill with vivid red (#e42b0c) and carry pure white (#ffffff) text, set in Telegraf 16px at weight 500, with 8px corners and 16px padding.
- Card
feature-cardCards sit on pure white (#ffffff) behind a cool light gray (#e5e7eb) hairline, with 6px corners and 24px padding.
- Navigation
nav-barThe top navigation runs on pure white (#ffffff) with pure black (#000000) links, set in Telegraf 14px at weight 500.
Three ways to ship a Orderful-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Orderful. All trademarks belong to their respective owners.
