← Gallery
Unlock all prompts
drams.framer.website
AStudio · 96/100 · Proper. This is how it's done. · Checked
Floating the top of the d to the corner. Simple typographic tension on flat Braun orange
Design DNA
Type
Geometric Sans-Serif
PaletteMuted warm tones
Design DNA
Turn drams.framer.website’s design into your OG
- Full color system with hex codes and harmonies
- Typography breakdown with role mapping
- Layout, patterns, and recreation steps
- One mega-prompt that has everything
Platform fit
OKFacebook / LinkedIn / Discord(1200×630)
OKX / Twitter (Large Card)(1200×628)
INFOX / Twitter (Summary)(120×120)
OKWhatsApp / iMessage(~300×157)
OKSlack(~200×105)
OKChatGPT(~400px wide)
INFOGoogle Search(N/A)
INFOText legibility(Design tip)
drams.framer.website
Drams - Framer components inspired by Dieter Rams' principles
StatusPerfect fit for summary_large_image
SizeRecommended 1200×628, min 300×157
CropCenter-crops to 2:1. summary_large_image shows full width, summary crops to 120x120 square.
CacheX caches aggressively. New cards may take minutes to appear. Adding ?v=2 to the URL can force a refresh.
DebugCard Validator was deprecated in 2022. Post a tweet with the URL to preview, or use properOG checker.
Under the hood
og:title
Drams - Framer components inspired by Dieter Rams' principles
og:description
Elevate your digital projects with sleek Framer UI elements inspired by Dieter Rams. Explore buttons, sliders & components designed for simplicity & functionality.
Dimensions
1200×630
File size
22KB
Industry
Studio
Color mode
colorful
Layout
text-logo
Categories
studio
Tags
gradient
Score breakdown
+
OG Image
Has og:image tag
https://framerusercontent.com/assets/KBimPUkY0IXJqZOMFGmQpIJbHA.png
+
Image loads
og:image resolves (HTTP 200)
https://framerusercontent.com/assets/KBimPUkY0IXJqZOMFGmQpIJbHA.png
+
Dimensions
1200×630, 1.90:1 ratio. Ideal
+
Title
Perfect length (61 chars). Won't truncate anywhere
Drams - Framer components inspired by Dieter Rams' principles
!
Description
Will be truncated (163 chars). Front-load the value
Elevate your digital projects with sleek Framer UI elements inspired by Dieter Rams. Explore buttons, sliders & components designed for simplicity & functionality.
+
og:type
og:type = website
+
File size
22KB. Well optimized
+
Twitter card
twitter:card = summary_large_image
!
Image format
PNG. Consider WebP for 30-50% smaller files
i
Title uniqueness
OG title matches page title. Consider a social-specific headline
+
Description quality
Description reads naturally
+
Favicon
Custom favicon detected
Quality Profile
AI analysis
Strengths
- +Strong brand identity through distinctive typography and logo mark.
- +Excellent contrast between the vibrant orange background and dark gray text, ensuring high readability.
- +Minimalist design aligns with the product's inspiration (Dieter Rams), conveying simplicity and functionality.
Improvements
- →The separation of the 'D' from 'grams' might lead to the full brand name 'Drams' being less immediately recognizable, especially if the 'D' is cropped in certain previews.
- →Using a more suitable image format like PNG or WebP for graphics with solid colors and sharp text could improve quality and potentially reduce file size compared to JPG, which can introduce artifacts.
↗
Takeaway
Leverage strong brand colors and bold, legible typography to create an instantly recognizable and impactful Open Graph image, ensuring all key brand elements are clearly visible even when cropped.
Want your OG image this proper?
Check your current OG or generate a new one from your brand.
More like this
smallbits.designA
Smallbits – 290+ pixelated icons on an 8×8 grid
View editorial →
Scattered 8x8 pixel icons on black. Retro nostalgia works when the grid is this strict
Scattered 8x8 pixel icons on black. Retro nostalgia works when the grid is this strict
svgdoodles.comA
SVG Doodles – Free, editable SVGs to spice up your designs
View editorial →
Floating chrome doodles and a bare URL. Refuses to explain itself, which is why it works
Floating chrome doodles and a bare URL. Refuses to explain itself, which is why it works
tiny.opencreators.aiA
Someone is asking for what you built.
View editorial →
Winking skull on an acid yellow disc. Early Snapchat mascot energy doing all the heavy lifting
Winking skull on an acid yellow disc. Early Snapchat mascot energy doing all the heavy lifting
glideapps.comA
AI App Builder: Turn Spreadsheets into Business Apps | Glide
View editorial →
Stacked site trailers and steel framing to sell software. A literal metaphor that actually works
Stacked site trailers and steel framing to sell software. A literal metaphor that actually works
animaxxing.comA
Animaxxing
View editorial →
That tilted final X carries the whole brand. Crude, loud, impossible to miss
That tilted final X carries the whole brand. Crude, loud, impossible to miss
herokit.designA
HeroKit
View editorial →
Stark black mark over soft yellow spheres. High contrast does all the heavy lifting
Stark black mark over soft yellow spheres. High contrast does all the heavy lifting