Relate dot App

Relate dot App

Preview image. Unlock full-res

Utility-first information panels with minimal fuss.

Industryother
Palette
#ffffff
#444444
#222222
#000000
#eeeeee
#7bd428
#2484f2
#2374c4

This design system presents domain names with a direct, unembellished style, leveraging high-contrast typography against simple, almost utility-like white panels. Information is segmented into cards with subtle borders rather than heavy visual separation. The overall impression is one of efficiency and clarity, with information delivered plainly without decorative flourishes. A vibrant yet functional blue or green is reserved for links or indicators to guide attention, while the majority of the interface remains in a monochrome palette. Use 'Canvas White' (#ffffff) as the default background for all primary content areas and surfaces to maintain a bright, uncluttered base. Employ 'Ink Text' (#444444) for most body text and secondary information, ensuring high readability against light backgrounds. Emphasize headlines and critical labels with 'Deep Text' (#222222) or 'Graphite Accent' (#000000) for strong visual hierarchy. Reserve 'Action Blue' (#2484f2) for borders of interactive elements and 'Link Blue' (#2374c4) for link text, making interactive elements immediately recognizable. Apply a 0px border radius to all components including buttons and cards for a sharp, unrounded aesthetic. Maintain a clear visual hierarchy using 'Proxima Nova' weights for headings: 800 for main titles, 500 for subheadings, and 400 for smaller headings. Incorporate 36px as the base sectionGap for consistent vertical rhythm between distinct content blocks. Do not introduce rounded corners or border radii greater than 0px on any interface elements. Avoid using saturated background colors or heavy gradient fills for primary content areas; surfaces should remain neutral and flat. Do not use shadows or excessive elevation that would make components appear to float; maintain a flat, panel-like appearance with subtle borders. Do not deviate from the specified font families and weights; maintain the established typographical voice across all content. Refrain from adding decorative imagery or complex illustrations; the system prioritizes direct communication through text and simple UI elements. Do not use 'Success Green' (#7bd428) as a background for buttons or primary actions; it is reserved for highlighting status only.

More like this