Open Design gallery

Design systems Examples

Style tile: Harbor

A style tile for a calm fintech brand: cool neutrals, a deep harbor-blue accent, a serif display face with a geometric sans, soft radii.

design-system

Remix it with Open Design

In a chat or editor where the Open Design Agent Kit is installed, paste this. Claude asks what to make, then starts from this example.

Remix the Open Design example od:design-system:style-tile:example.

Make one like it in Claude

The brief this example was made from. Change the details to fit yours.

Make a style tile for a calm, trustworthy fintech brand: palette with contrast ratios, a serif and sans type pairing, core components, and radius and spacing samples.

Source

example.html on GitHub

Made with the Open Design Agent Kit. Design systems and examples are synced from Open Design.