Linh Nguyen
Work
Design System
SELECTED WORK / UI SYSTEMS
Design System
A collection of reusable UI components and patterns, designed with consistency, flexibility, and scalability in mind.
Figma
Auto Layout
Variables
Component Variants
All
Actions
Inputs
Navigation
Feedback
Primary
Outline
Ghost
Secondary
Disabled
Button
Primary, outline, ghost, and neutral variants with sizes.
Stay Informed
Upcoming maintenance this weekend. Please plan accordingly.
Error
Your session has expired. Please log in again.
Alert
Default and destructive callouts for user attention.
What is the FAQ Section?
The FAQ section provides a collection of common inquiries and their answers.
How do I reset my password?
Where can I find support?
Accordion
Vertically stacked, interactive expand/collapse sections.
All
Active
Archived
Draft
More
Following
Button Group
Grouped related buttons with dropdown variants.
Email address
john@example.com
Search components...
Input
Text fields and search inputs with label and helper text.
Dashboard
Reports
Social
Export
Portfolio
Work
Design System
Breadcrumb
Hierarchical page path with icon and slash dividers.
View profile
Settings
Shortcuts
Team
Log out
Profile
Settings
Zap
Log out
Menu
Dropdown menus with default, icon, and multiselect variants.
FOUNDATIONS
Built for consistency and reuse.
Every component is architected with real product usage in mind — flexible enough to adapt, consistent enough to scale.
Component architecture and variants
Each component exposes named properties for states, sizes, and content slots — keeping design intent legible and reducing override complexity.
States: Default · Hover · Active · Disabled
Sizes: xs · sm · md · lg
Icon swaps via instance swap slots
Button — size: md
Default
Hover
Active
Disabled
Small
Neutral
Secondary
Design foundations and variables
A token layer of variables powers the entire system — from colours and radii to spacing and typography. Light and dark modes switch with a single variable mode change.
Color tokens: background, text, border, icon
Radius, spacing and size primitives
Light / dark via Figma variable modes
Primary
Secondary
Surface
Accent
Success
Destructive
Typography scale
Display / H2 · 600
Body L / 500 — component labels
Caption L / 400 — secondary copy
Caption M / 500 — badge labels, tags
Components in real product interfaces
These components are assembled into complete product flows — from navigation and data entry to feedback and confirmation — demonstrating how the system holds together at scale.
Composed page headers with breadcrumbs
Form layouts with input and helper text
Alert banners in contextual product UI
Dashboard
Components
+ New
Documentation incomplete
3 components have missing descriptions. Review before publishing.
Filter components...
Illustrative product UI — components assembled from the same design system
Linh’s personal site
Creating digital products
Let’s Connect!
Back to top
Linh Nguyen
Hello
Work
Design System
Work
Design System
SELECTED WORK / UI SYSTEMS
Design System
A collection of reusable UI components and patterns, designed with consistency, flexibility, and scalability in mind.
Figma
Auto Layout
Variables
Component Variants
Primary
Outline
Ghost
Secondary
Disabled
Button
Primary, outline, ghost, and neutral variants.
Stay Informed
Upcoming maintenance this weekend.
Error
Your session has expired. Please log in.
Alert
Default and destructive callouts.
What is the FAQ Section?
The FAQ section answers common questions and guides users quickly.
How do I reset my password?
Where can I find support?
Accordion
Vertically stacked expand/collapse sections.
All
Active
Draft
Button
More
Following
Button Group
Grouped buttons with dropdown variants.
Email address
john@example.com
Search components...
Input
Text fields and search inputs.
Dashboard
Reports
Social
Export
Portfolio
Work
Design System
Breadcrumb
Hierarchical page path navigation.
View profile
Settings
Keyboard shortcuts
Team
Log out
View profile
Settings
Option
Team
Log out
Select options
Option 1
Option 2
Option 3
Option 4
Menu
Dropdown menus with default, icon, and multiselect variants.
FOUNDATIONS
Built for consistency and reuse.
Every component is architected with real product usage in mind — flexible enough to adapt, consistent enough to scale.
Component architecture and variants
Each component exposes named properties for states, sizes, and content slots — keeping design intent legible and reducing override complexity.
States: Default · Hover · Active · Disabled
Sizes: xs · sm · md · lg
Icon swaps via instance swap slots
Button — size: md
Default
Hover
Active
Disabled
Small
Neutral
Secondary
Design foundations and variables
A token layer of variables powers the entire system — from colours and radii to spacing and typography. Light and dark modes switch with a single variable mode change.
Color tokens: background, text, border, icon
Radius, spacing and size primitives
Light / dark via Figma variable modes
Primary
Secondary
Surface
Accent
Success
Destructive
Typography scale
Display / H2 · 600
Body L / 500 — component labels
Caption L / 400 — secondary copy
Caption M / 500 — badge labels, tags
Components in real product interfaces
These components are assembled into complete product flows — from navigation and data entry to feedback and confirmation — demonstrating how the system holds together at scale.
Composed page headers with breadcrumbs
Form layouts with input and helper text
Alert banners in contextual product UI
Dashboard
Components
Export
New component
Documentation incomplete
3 components have missing descriptions. Review before publishing.
All
Actions
Inputs
Button
Feedback
Filter components...
Illustrative product UI — components assembled from the same design system
Linh’s personal site
Creating digital products
Let’s Connect!
Back to top
Linh Nguyen
Hello
About me
Work
Design System
Design System
A collection of reusable UI components and patterns, designed with consistency, flexibility, and scalability in mind.
Primary
Outline
Ghost
Secondary
Disabled
Button
Primary, outline, ghost, and neutral variants with sizes.
Stay Informed
Upcoming maintenance this weekend. Please plan accordingly.
Error
Your session has expired. Please log in again.
Alert
Default and destructive callouts for user attention.
What is the FAQ Section?
The FAQ section provides a collection of common inquiries and their answers.
How do I reset my password?
Where can I find support?
Accordion
Vertically stacked, interactive expand/collapse sections.
All
Active
Archived
Draft
More
Following
Button Group
Grouped related buttons with dropdown variants.
Email address
john@example.com
Search components...
Input
Text fields and search inputs with label and helper text.
Dashboard
Reports
Social
Export
Portfolio
Work
Design System
Breadcrumb
Hierarchical page path with icon and slash dividers.
View profile
Settings
Keyboard shortcuts
Team
Invite colleagues
Log out
View profile
Settings
Option
Team
Invite colleagues
Log out
Select options
Option 1
Option 2
Option 3
Option 4
Menu
Dropdown menus with default, icon, and multiselect variants.
FOUNDATIONS
Built for consistency and reuse.
Every component is architected with real product usage in mind — flexible enough to adapt, consistent enough to scale.
Component architecture and variants
Each component exposes named properties for states, sizes, and content slots — keeping design intent legible and reducing override complexity.
States: Default · Hover · Active · Disabled
Sizes: xs · sm · md · lg
Icon swaps via instance swap slots
Button — size: md
Default
Hover
Active
Disabled
Small
Neutral
Secondary
Design foundations and variables
A token layer of variables powers the entire system — from colours and radii to spacing and typography. Light and dark modes switch with a single variable mode change.
Color tokens: background, text, border, icon
Radius, spacing and size primitives
Light / dark via Figma variable modes
Primary
Secondary
Surface
Accent
Success
Destructive
Typography scale
Display / H2 · 600
Body L / 500 — component labels
Caption L / 400 — secondary copy
Caption M / 500 — badge labels, tags
Components in real product interfaces
These components are assembled into complete product flows — from navigation and data entry to feedback and confirmation — demonstrating how the system holds together at scale.
Composed page headers with breadcrumbs
Form layouts with input and helper text
Alert banners in contextual product UI
Dashboard
Components
Export
New component
Documentation incomplete
3 components have missing descriptions. Review before publishing.
All
Actions
Inputs
Button
Feedback
Filter components...
Illustrative product UI — components assembled from the same design system
Linh’s personal site
Creating digital products
Let’s Connect!
Back to top