Design Principles
A ruled three-column grid of six numbered working principles, each pairing a short titled belief with an honest explanation of its impact.
A ruled three-column grid of six numbered working principles, each pairing a short titled belief with an honest explanation of its impact.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Design Principles lays out six numbered working beliefs in a ruled three-column grid, each pairing a short title (Clarity over cleverness, Edge cases are the design, Words are interface) with an honest note on how it changes what ships. The section opens with a "What I optimize for" heading and a line explaining that the list settles most arguments before they start.
Principles are one typed array; each cell carries a tabular number, a title, and a body, divided by a top border rather than card chrome. The honesty is the point: principle 04 admits taste generates the options but a five-user test picks the winner, so the list reads as a real point of view, not slogans.
Reach for this block on an about or services page where a designer's judgment is the thing being sold. The installer swaps the six titles and bodies for their own convictions, keeping each one specific enough that a client can tell how a future call will go.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is a design philosophy statement. Other principle layouts:
Tip: a principle only earns trust when it costs something; keep each body honest about the tradeoff it makes rather than listing beliefs everyone shares.