Radius Foundation
Build an AI-ready Radius Foundation without starting from scratch
Turn arbitrary corner values into a consistent shape language your team can customize, document, and hand off to development
Trusted by designers from
Radius gets messy when corner values lack system logic. Most teams lack shared rules for shape, nesting, and implementation
_
Most radius systems stop before they become usable infrastructure
Having border-radius values is not the same as having a scale, shape rules, nesting logic, affordance guidance, and handoff logic
of teams connect tokens across design tools, code, and documentation
Source: zeroheight, 2026
+
of developers and designers say handoff between design and code could be improved
Source: Figma, 2025
1
Local corners
Radius values chosen locally without shared naming, scale, or rules
2
Shared values
Reused corner values without token structure or semantic meaning
3
Primitive tokens
Radius values organized into a structured primitive scale
4
Semantic roles
Radius tokens mapped to surfaces, controls, overlays, and nesting
5
Documented rules
Rules explain usage, nesting, affordance, exceptions, and edge cases
6
System layer
AI context, handoff, and team knowledge work from one model
Bring structure to your radius system, wherever you're starting from
Start from scratch, clean up existing radius values, prepare handoff, or customize your shape system with AI
Start with shape logic, not just corners
Turn corner values into a system for surfaces, interactions, and product feel
Turn radius values into a system
Audit existing corners, clean up inconsistent values, and define reusable shape rules
Use AI without breaking shape logic
Adapt radius scale, nesting rules, and naming with AI while preserving system structure
Bridge between design and code
Connect radius roles to token meaning, nested surface logic, and implementation rules
From arbitrary corners to a consistent shape language
Turn disconnected radius values into a structured scale, shape rules, nested radius logic, and developer-readable handoff
Arbitrary corner values without clear usage
Defined radius scale with clear usage logic
Shape feels inconsistent across screens
Consistent shape language across product surfaces
Developers guess which radius value to use
Developer-readable radius handoff
Nested surfaces handled manually
Nested radius logic documented
Shape decisions copied from old patterns
Shape decisions connected to product feel
Radius values hardcoded in implementation
Radius tokens mapped to implementation rules
Turn visual corner choices into reusable system roles
Replace disconnected radius values with semantic roles for surfaces, controls, overlays, nested layouts, and handoff
Before
Local corner values, mixed usage, unclear nesting logic, and repeated decisions
After
Radius scale, shape rules, nested surface logic, and developer-readable handoff
Customize, document, and hand off your radius foundation
Adapt radius roles, document shape rules, and give developers the logic behind corners, nested surfaces, and implementation
Figma file
fig
Build from a structured radius foundation with tokens, semantic roles, and documentation in one file
Setup guide
Customize your radius scale, shape rules, nesting logic, and workflow step by step without breaking the system structure
AI prompts
Audit radius values, adapt shape roles, review consistency risks, and prepare handoff with repeatable prompts
AI context
Md
Give an LLM the radius rules and constraints for safer customization
Gemini Notebook
Md
Explore the system and generate briefings from one source
Accessibility
Md
Review affordance clarity, surface recognition, and consistency risks
Dev handoff
Md
Explain radius roles, token mapping, nesting rules, and implementation guidance
Make radius decisions easier for devs to implement consistently
The dev handoff file explains radius roles, nested surface logic, and usage rules before implementation from Figma
Token meaning
Explain what radius tokens represent and how to use them in design and code
Shape logic
Clarify control, surface, overlay, and nested radius relationships
Usage rules
Show where radius roles should and should not be used to avoid local exceptions
Implementation notes
Give developers the logic behind radius values, nesting rules, and implementation
Use AI with radius system context, not generic prompts
Give Claude or another LLM the rules, constraints, and shape logic it needs to help without inventing a new system
OpenAI frames context optimization as a core lever for improving LLM accuracy
Source: OpenAI, LLM Accuracy Guide
Role-safe changes
Adapt radius scale, shape, nesting, and naming without breaking the system model
System-aware audit
Find duplicates, unclear roles, inconsistent radius, and weak nesting logic
Accessibility review
Check affordance clarity, focus geometry, and consistency risks
Handoff-ready notes
Turn radius logic into clearer explanations for developers
Helpful, particularly for conducting research on specific component terms and terminology. It provided a strong starting point for structuring how I plan to document each component
Eric Luciano
UX/UI Designer
Use Radius Foundation when shape decisions get inconsistent
Whether you are starting from scratch, cleaning up corner values, defining nested surface logic, or preparing handoff
Start from scratch with a radius system
When you are building a new product or design system, radius decisions can turn into disconnected corner values quickly. Radius Foundation gives you a structured model from day one: radius scale, roles, documentation, AI context, accessibility notes, and developer handoff
Outcome
You start with a radius foundation that is ready to customize instead of inventing every rule from zero
Adapt existing corner values into product roles
Audit messy radius values and shape gaps
Prepare handoff without guesswork
Deliver client-ready radius foundations
Built for teams and designers working on shape systems
Use Radius Foundation when corner decisions need to be structured, customized, documented, and handed off
01
Product designers
Keep interfaces consistent with reusable radius roles for surfaces, controls, overlays, and flows
02
UI designers
Turn visual corner choices into clear rules for shape, affordance, nesting, and product feel
03
Freelancers and agencies
Deliver client-ready radius foundations with documentation, AI context, and handoff
04
Design system leads
Standardize existing radius values with clearer roles, naming, and usage rules
Based on analysis of 100+ design systems. Patterns translated into a reusable radius foundation
Since 2023, Design Systems Surf has cataloged mature design systems across foundations, components, documentation, and implementation patterns.
Radius Foundation turns that research into reusable shape roles, nesting rules, AI context, accessibility guidance, and handoff
Save 24–36 hours on radius system work and documentation
Radius Foundation removes repetitive setup, documentation, AI context, accessibility, and handoff work
Trusted by designers working on design systems
Feedback from people building, auditing, documenting, and maintaining design systems
10k+
Designers across 175+ countries follow Design Systems Surf for design system examples, patterns, and practical resources
What to know before you start
Clear answers about what Radius Foundation includes, how it can be customized, and how it fits into real design system work
Is this just a Figma template?
No. The Figma file is one part of the package. Radius Foundation also includes AI context .md, NotebookLM source .md, setup guidance, AI prompts, accessibility .md, and dev handoff .md.
The Figma file gives you the working radius system. The Markdown files support different AI workflows: customization, knowledge exploration, accessibility review, and developer handoff.
What is included?
Radius Foundation includes a Figma file, AI context .md, NotebookLM source .md, setup guide, AI prompts, accessibility .md, and dev handoff .md.
The Figma file gives you radius tokens, a radius scale, semantic radius roles, nested radius rules, examples, and documentation. The Markdown files give AI tools the system context needed to help you customize, explore, review, document, and hand off your radius foundation with less guesswork.
Can I customize it?
Yes. You can adapt radius values, shape roles, nested radius logic, and naming.
The goal is to customize the radius system without breaking shape consistency, nesting logic, accessibility review, or implementation meaning.
Will this fit my brand?
Radius Foundation is not tied to one fixed visual shape style. You bring your product or brand direction and map it into product-ready radius roles.
If your current shape language has gaps, for example unclear surface radius, weak nesting logic, or too many local exceptions, the setup workflow and AI-ready Markdown files help you identify what needs review before implementation.
Can I use it with an existing design system?
Yes. You can use Radius Foundation as a reference model to audit or repair an existing radius system.
It can help you find duplicate values, unclear semantic roles, inconsistent shape logic, weak nested radius logic, and gaps in developer handoff. You do not need to replace your whole design system to use it.
Do I need to use AI?
No. You can use the Figma file and setup workflow manually.
AI is optional, but several supporting files are designed primarily for AI-assisted workflows. The AI context .md helps with safe customization. The NotebookLM source .md helps with knowledge exploration, Q&A, and briefings. The accessibility .md helps AI review foundation-level radius risks. The dev handoff .md helps AI generate developer-facing implementation notes.
Are the Markdown files standalone guides?
They are Markdown files, but they are not all traditional standalone guides.
You can read them manually, but their main purpose is to support AI-assisted workflows. Each .md file has a different role: customization context, NotebookLM knowledge source, accessibility review context, or developer handoff context.
What does the NotebookLM source do?
The NotebookLM source .md is a structured knowledge file for exploring the radius foundation.
You can upload it to NotebookLM and ask questions about radius roles, shape rules, token meaning, nested radius logic, accessibility concerns, and implementation guidance. It helps turn the foundation into a searchable knowledge source for you, your team, or your client.
What does the accessibility file do?
The accessibility .md is designed mainly for AI-assisted review.
It gives AI the review logic for foundation-level radius risks such as focus geometry, affordance clarity, nested radius consistency, and shape-related usability concerns. It does not guarantee accessibility by itself. You still need to review the actual values and product usage after customization.
What does the dev handoff file do?
The dev handoff .md is designed mainly for AI-assisted handoff generation.
It gives AI the structure to generate developer-facing notes from your customized foundation, including radius role meaning, nested radius rules, usage guidance, implementation risks, and CSS-oriented token mapping. Developers still need to adapt the output to their codebase, naming conventions, and token pipeline.
Does this include components?
No. Radius Foundation covers the radius foundation layer: radius tokens, scale logic, semantic radius roles, nested surface rules, accessibility review logic, and developer handoff context.
Does this support nested radius logic?
Yes. Radius Foundation includes structure for nested radius relationships, surface radius, overlay radius, and control radius.
You still need to review your actual values after customization, especially when inner and outer surfaces sit close together.
Who is this for?
Radius Foundation is for product designers, UI designers, freelancers, agencies, design system leads, design system engineers, consultants, and teams that need to build, repair, document, review, or hand off a structured radius system.
Is this for beginners or advanced teams?
Both, but for different reasons.
For newer teams, it gives a structured starting point instead of a blank canvas. For mature teams, it works as an audit, repair, documentation, and handoff reference for weak or inconsistent radius foundations.
How is this different from building it myself?
You can build this yourself. The difference is that you would need to create the token architecture, radius scale, semantic radius roles, nested radius rules, setup workflow, AI context, NotebookLM source, prompts, accessibility review logic, and handoff structure from scratch.
Radius Foundation gives you that structure so you can focus on adapting it to your product, brand, team, or client.
Will developers be able to use it?
Yes, but not as a drop-in code package.
The dev handoff .md helps generate developer-facing notes from the foundation. It explains radius role meaning, nested radius logic, usage rules, implementation risks, and CSS variable mapping. Developers still need to adapt the output to their codebase and implementation workflow.
Can I use this for client work?
Yes. You can use Radius Foundation as part of paid client work and deliver a customized foundation to your client.
You cannot resell, redistribute, or repackage the original product as a standalone product or template unless the license explicitly allows it.
What is not included?
Radius Foundation is not a UI kit, component library, rounded UI preset, brand identity package, visual style pack, or automatic accessibility guarantee.
It gives you the foundation structure, workflow, AI-ready Markdown files, review logic, and handoff structure. You still need to customize values, review the result, and adapt implementation to your product or client environment.
Still have questions?
Reach out at hey@designsystems.surf
