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
NotebookLM source
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?
Can I customize it?
Will this fit my brand?
Can I use it with an existing design system?
Do I need to use AI?
Are the Markdown files standalone guides?
What does the NotebookLM source do?
What does the accessibility file do?
What does the dev handoff file do?
Does this include components?
Does this support focus treatment?
Who is this for?
Is this for beginners or advanced teams?
How is this different from building it myself?
Will developers be able to use it?
Can I use this for client work?
What is not included?
Still have questions?
Reach out at hey@designsystems.surf
