Border Foundation
Build an AI-ready Border Foundation without starting from scratch
Turn inconsistent strokes and dividers into a structured border system your team can customize, document, and hand off to development
Trusted by designers from
Border gets messy when strokes are used case by case. Most teams lack shared rules for separation, contrast, and implementation
_
Most border systems stop before they become usable infrastructure
Having stroke values is not the same as having roles, separation logic, focus guidance, contrast rules, 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 strokes
Borders chosen locally without shared naming, role logic, or usage rules
2
Shared values
Reused stroke widths without a defined token structure or semantic meaning
3
Primitive tokens
Border widths organized into a structured primitive token scale
4
Semantic tokens
Primitive values mapped to dividers, containers, focus, and selection roles
5
Documented rules
Rules explain usage, contrast, focus behavior, and separation logic
6
System layer
AI context, handoff, and team knowledge work from one model
Bring structure to your border system, wherever you're starting from
Start from scratch, clean up existing strokes, prepare handoff, or customize your border system with AI
Start with roles, not just stroke widths
Turn border widths, dividers, and outlines into clear system roles from day one
Turn strokes into a system
Audit existing borders, clean up divider logic, and define clear usage rules
Use AI without breaking border logic
Adapt border roles and dividers with AI while preserving separation logic
Bridge between design and code
Connect border roles to token meaning, accessibility review, and implementation rules
From decorative strokes to structured separation systems
Turn disconnected border values into semantic roles, divider logic, accessibility rules, and developer-readable handoff
Decorative strokes without clear usage
Functional border roles with clear usage logic
Case-by-case dividers
Systematic divider and separation rules
Developers guess when to use borders
Developer-readable border handoff
Surface separation handled inconsistently
Defined surface separation guidance
Border behavior documented inconsistently
Clear border documentation and review guidance
Border values hardcoded in implementation
Border tokens mapped to implementation rules
Turn visual strokes into clear and reusable system roles
Replace disconnected borders with semantic roles for dividers, fields, focus treatment, surface separation, and handoff
Before
Visual strokes, mixed usage, unclear separation logic, and repeated decisions
After
Semantic roles, separation logic, focus guidance, and developer-readable handoff
Customize, document, and hand off your border foundation
Adapt border roles, document rules, and give developers the logic behind border width, color, focus, and dividers
Figma file
fig
Build from a structured border foundation with tokens, semantic roles, and documentation in one file
Setup guide
Customize your border widths, divider rules, focus treatment, and workflow step by step without breaking the system structure
AI prompts
Audit borders, adapt border roles, review focus and contrast risks, and prepare handoff with repeatable prompts
AI context
Md
Give an LLM the border rules and constraints for safer customization
Gemini Notebook
Md
Explore the system and generate briefings from one source
Accessibility
Md
Review focus visibility, divider clarity, and separation risks
Dev handoff
Md
Explain border role meaning, token mapping, usage logic, and implementation rules
Make border decisions easier for devs to implement consistently
The dev handoff file explains border roles, divider logic, focus treatment, and usage rules before implementation from Figma
Token meaning
Explain what border tokens represent and how to use them in design and code
Separation logic
Clarify divider, field, focus, and surface separation behavior across product surfaces
Usage rules
Show where border roles should and should not be used to avoid local exceptions
Implementation notes
Give developers the logic behind borders, focus treatment, and implementation
Use AI with border system context, not generic prompts
Give Claude or another LLM the rules, constraints, and border 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 borders, dividers, focus treatment, and naming without breaking the system model
System-aware audit
Find missing roles, unclear separation logic, and inconsistent divider usage
Accessibility review
Check focus visibility, contrast concerns, divider clarity, and separation risks
Handoff-ready notes
Turn border logic into clearer explanations for developers
Really appreciate the content — it's helping me think through how to better verbalize documentation for my design system
Steven Hardaway
UX/UI Designer
Use Border Foundation when separation decisions get messy
Whether you are starting from scratch, cleaning up existing strokes, defining divider logic, or preparing developer handoff
Start from scratch with a border system
When you are building a new product or design system, border decisions can turn into disconnected strokes quickly. Border Foundation gives you a structured model from day one: border scale, roles, documentation, AI context, accessibility notes, and developer handoff
Outcome
You start with a border foundation that is ready to customize instead of inventing every rule from zero
Adapt existing strokes into product roles
Audit messy borders and divider gaps
Prepare handoff without guesswork
Deliver client-ready border foundations
Built for teams and designers working on separation systems
Use Border Foundation when border decisions need to be structured, customized, documented, and handed off
01
Product designers
Keep interfaces consistent with reusable border roles for fields, dividers, and focus
02
UI designers
Turn visual stroke choices into clear rules for separation, focus, contrast, and usage
03
Freelancers and agencies
Deliver client-ready border foundations with documentation, AI context, and handoff
04
Design system leads
Standardize existing strokes with clearer roles, naming, and usage rules
Based on analysis of 100+ design systems. Patterns translated into a reusable border foundation
Since 2023, Design Systems Surf has cataloged mature design systems across foundations, components, documentation, and implementation patterns.
Border Foundation turns that research into reusable border roles, divider rules, AI context, accessibility guidance, and handoff.
Save 16–24 hours on border system work and documentation
Border 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 Border 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. Border 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 border system. The Markdown files support different AI workflows: customization, knowledge exploration, accessibility review, and developer handoff.
What is included?
Border 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 border tokens, semantic border roles, divider rules, focus treatment, and documentation. The Markdown files give AI tools the system context needed to help you customize, explore, review, document, and hand off your border foundation with less guesswork.
Can I customize it?
Yes. You can adapt border widths, border colors, divider logic, focus treatment, and semantic border roles.
The goal is to customize the border system without breaking separation logic, naming logic, focus visibility, accessibility review, or implementation meaning.
Will this fit my brand?
Border Foundation is not tied to one fixed visual border style. You bring your product or brand direction and map it into product-ready border roles.
If your current border treatment has gaps, for example weak focus treatment, unclear divider logic, inconsistent field borders, or low-contrast separators, 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 Border Foundation as a reference model to audit or repair an existing border system.
It can help you find duplicate strokes, unclear semantic roles, inconsistent divider usage, weak focus treatment, and gaps in developer handoff logic. 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 border 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 border foundation.
You can upload it to NotebookLM and ask questions about border roles, divider logic, token meaning, accessibility concerns, and implementation logic. 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 border risks such as focus visibility, border contrast, divider clarity, and low-visibility separation. 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 border role meaning, divider logic, focus treatment, 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. Border Foundation covers the border foundation layer: border tokens, semantic border roles, divider logic, focus guidance, accessibility review logic, and developer handoff context.
It may include examples that show how the border roles work, but it is not a production component library.
Does this support focus treatment?
Yes. Border Foundation includes structure for focus treatment, dividers, field borders, and separation roles.
You still need to review your actual values for focus visibility, contrast, separation clarity, and implementation behavior after customization.
Who is this for?
Border 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 border 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 border 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, border scale, semantic border roles, divider rules, setup workflow, AI context, NotebookLM source, prompts, accessibility review logic, and handoff structure from scratch.
Border 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 border role meaning, divider usage, focus treatment, 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 Border 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?
Border Foundation is not a UI kit, component library, decorative stroke pack, visual border preset library, 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
