Design Systems Surf

@designsystemssurf.bsky.social

14 Followers 1 Following

Best-in-class Design Systems with components and foundations references from top-tier tech companies and leading UI teams. https://designsystems.surf/

A vertical flow diagram detailing a cyclical governance process: Propose, Review, Update, Release, and Monitor, with a feedback loop connecting Monitor back to Propose.
An annotated UI mockup of a design tool's text style editor panel. Callout bubbles highlight that properties for the "Rag 123" style are defined by semantic token names rather than hardcoded values.
A schema diagram showing the deconstruction of a text role. The example 'headline.md.strong' is broken down into segments labeled concept, variant, size, and emphasis, illustrating how these parts map to specific typographic properties like weight, size, and line-height.
A diagram illustrating a responsive typography scale on a number line. It highlights a specific token, 'scale.600', and shows how its value adapts across different modes: 24px for desktop, 22px for tablet, and 20px for mobile devices.
A flowchart diagram illustrating the typography system architecture. It shows two parallel paths: "Scales" and "Primitive Tokens" on the left, converging with "Text Roles" and "Semantic Tokens" on the right. Both paths merge at the bottom into the final layer, "Text Styles."
Mobile UI screens showing buttons, chips, and links used for primary and secondary actions.
Mobile interfaces showing alert banners, snackbars, and tooltips providing user feedback.
Mobile UI examples showing text fields, checkboxes, and toggle switches used for user input.
Mobile screens displaying tabs, breadcrumbs, and tab bar navigation patterns from different applications.
Mobile UI examples showing badges, progress bars, and loading spinners across different apps.
Floating UI components including toggles, cards, sliders, and a cursor on a blue gradient background.
Fix your Typography System before it breaks
AI DS Starter Stack
AI DS Starter Stack
AI DS Starter Stack
AI DS Starter Stack
Denmark’s Det Fælles Design System (DKFDS)
How does a Design System help to scale projects?
Public Sector Design Systems