Social and community design systems
Design systems extracted from social networks, community platforms and personal websites. Feeds, profiles, avatars and posting controls define them, often with one playful brand color and rounded, friendly components.
2 DESIGN.md examples in this category, from Dribbble and Snapchat. Extracted from each site’s public pages, not official brand guidelines. New to the format? Read what a DESIGN.md is.
Dribbble
Dribbble's design system is built on a deep near-black navy (#0d0c22) paired with a crisp white surface, punctuated by a signature hot-pink (#ea4c89) accent used sparingly for editorial emphasis and interactive highlights. The entire typographic system relies exclusively on Mona Sans across all weights, creating hierarchy through weight and size alone. Pill-shaped buttons (border-radius: 1e+07px) and rounded cards (12px radius) define the geometry language. The layout is spacious with an 8px base grid, and elevation is conveyed through subtle drop shadows rather than heavy layering.
Snapchat
Snapchat's web presence uses a high-contrast light theme anchored by its iconic #FFFC00 brand yellow, near-black (#121314) primary surfaces, and a clean white page background. The design pairs Avenir Next (primary) with Graphik (secondary) for a friendly yet structured typographic hierarchy. Interaction elements — buttons, pills, and tags — use fully rounded (100px) radii, while inputs use a subtle 5px radius. Navigation is a floating pill with a soft drop shadow. Content is presented in large media cards with overlaid white text, creating an immersive, app-preview-forward layout. The overall density is moderate, with generous spacing and a clear visual hierarchy that bridges marketing and product UI conventions.
Don’t see the site you need?
Paste any URL to get a DESIGN.md from any website. Colors, typography, spacing, and tokens, ready for your AI workflow.