← OpenDesign CURATED · OPEN · FREE
Super
A clean, high-contrast SaaS tool for turning Notion documents into professional websites.
nocode tool
01
Identity DNA
Simple Efficient Notion-powered Professional Web-building
A clean, professional workspace that instantly turns your notes into a polished public website.
02
Color
#FFBE3CAccent
#262A2EInk
#66707AInk soft
#FFFFFFBG
#F9F9F8BG soft
#FDFDFCBG quiet
#808C99Muted
rgba(204, 209, 214, 1)Line
High-contrast foundation with a single energetic accent.
03
Typography
geometric-sans · humanist-sans · monospace
display 56px · 600h2 38px · 600body 18px · 400small 14px · 400tiny 12px · 400Use tight letter spacing for large display text. · Maintain high contrast for body text against white backgrounds.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base grid with generous vertical spacing for sections.
05
Surfaces
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(204, 209, 214, 1)
rgba(0, 0, 0, 0.008) 2.6px 4px 2.6px 0px · rgba(0, 0, 0, 0.01) 7.3px 11px 7.1px 0px · rgba(0, 0, 0, 0.02) 58px 88px 57px 0px
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Centered column hero layout with a standard top navigation bar.
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
Opacity fades for UI transitions · Quick transform scales on interactive elements
Subtle background color shift or slight scale increase on primary buttons. · Immediate state change with minimal transition delay.
08
Components
button Solid accent color (yellow) with dark text and rounded pill corners. card Dark-themed cards with rounded corners and subtle drop shadows. chip Minimal, slightly rounded tags with subtle borders or backgrounds. input Clean, rounded inputs with standard padding. hero Large, bold centered text with a single prominent call-to-action. 09
Voice & Don'ts
Tone Confident, direct, and helpful. Headlines Bold, declarative, and action-oriented statements. CTAs Direct, benefit-driven phrases like 'Get started free'. Don't use dark mode for the primary landing page — screenshot shows a predominantly white background. Don't use multiple competing accent colors — screenshot shows only yellow as the primary accent. Don't use decorative serif fonts for headings — screenshot shows a clean, geometric sans-serif. Don't use heavy drop shadows on primary elements — screenshot shows very subtle, large-radius box shadows. Don't clutter the layout with dense grids — screenshot shows a clean, single-column centered layout. Don't use aggressive, bright background colors — screenshot uses a restrained palette of white, off-white, and dark gray. Avoid: Overly technical jargon Avoid: Aggressive or salesy language Avoid: Vague promises 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
Super is a clean, high-contrast SaaS tool for turning Notion documents into professional websites. The visual identity relies on a foundation of white and light off-white backgrounds with dark gray (#262A2E) text, creating a crisp, professional feel. A single, energetic accent color (yellow, #FFBE3C) is used exclusively for primary calls to action. Typography features a bold, geometric sans-serif for display and a clean humanist sans-serif for body text, often with tight letter spacing at large sizes. The layout is centered and minimalist, avoiding visual clutter. Critically, avoid using dark mode for the main landing pages, never use competing bright accent colors, and always keep the layout focused on a single column in the hero section. Ensure all shadows are subtle and large-radius, and keep the UI grounded with a 4px base grid and generous vertical spacing.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: Worth including as an excellent example of a clean, focused SaaS landing page that balances a professional aesthetic with a friendly, accessible feel.
