Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.

Back to Browse

Super

Dev Tools

Super embodies Notion-ecosystem sophistication with a premium orange-driven palette that communicates creative productivity and professional polish. The Beausite typography creates approachable yet authoritative hierarchy, while generous whitespace and warm grays evoke a sense of elevated simplicity for content creators who value both function and aesthetic refinement.

(0)
0
Visit Website
Screenshot of Super website

Design Identity

Signature Color

Super Orange

#d9730d

creative energy and professional confidence for Notion power users

Visual Identity

Distinctive orange accent system paired with sophisticated warm gray backgrounds and generous breathing room that immediately signals premium Notion tooling

Component Style

Soft-cornered buttons with 8px radius and subtle shadows, warm gray cards with gentle hover states, and minimal borders that prioritize content over chrome - everything feels refined but approachable

Spacing Philosophy

Luxurious vertical rhythm with substantial inter-section gaps creating a sense of premium calm, while tight 10px component gaps maintain functional density within content areas

Design Principles

  • Orange accents never exceed single focal points per viewport
  • Typography scales from 16px base to 57.6px headlines with consistent 1.4x line-height ratio
  • Background colors stay within warm neutral spectrum from #fdfdfc to #f7f6f3
  • Shadows use rgba(15,15,15,0.1) with 2-4px blur for subtle depth
  • Component padding follows 12-24px rhythm for touch-friendly interaction zones

Target Audience

Notion power users and content creators who want professional websites without sacrificing the familiar Notion editing experience

Mood

sophisticatedwarmproductiverefinedapproachablepremiumfocused

Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.

Design System

Typography Scale

ElementFontSizeWeightLine Height
bodyBeausite16px400normal
h1Beausite57.6px70063.36px
h2Beausite38.4px60042.24px
h3Beausite25.6px60030.72px
pBeausite18px40024px
aBeausite16px400normal
navBeausite16px400normal
footerBeausite16px400normal
mainBeausite16px400normal

Color Palette

#fdfdfc
#262a2e
#37352f
#d44e49
#ffffff
#f7f6f3
#a7a39a
#282620
#efefef
#ca922f
#878378
#2eaadc

UI Elements

a
nav
button-primary

Similar Designs

Completely Different Designs

Discussion

Loading comments...