Permissions & Controls
Designed to meet the complex workflows, infrastructure, and security requirements of enterprise teams, Knapsack delivers the governance you need to control, scale, and optimize your digital production processes.
User Permissions
Control visibility, access, and editing rights across your workspace to ensure the integrity and security of your digital production infrastructure.
CI/CD workflow integration
Open up contribution and collaboration, supported by the security of Git backups and SSO authentication.
Approvals & Change Management
Customize workflows to automatically trigger reviews, approvals, pull requests, and production controls, reducing manual effort while ensuring process and quality control.
Build better together
Knapsack is the next generation of design systems - flexible, scalable, and highly collaborative. Knapsack powers unified product experiences by providing a central source of truth for everyone on your team. Document decisions, create tokens, build prototypes, and ship code directly to your app or website. You'll see a new level of collaboration between teams and increase velocity in just a few weeks with Knapsack's ready-to-use infrastructure. Unite design and engineering in one powerful tool that will scale with your organization for years to come.
Go further faster
Knapsack enables enterprise engineering, product, and design teams to build better products faster by bringing all teams together around production code and engineering workflows.
Knapsack allows teams to do four main things:
- Organize your design assets around patterns
- Connect to your code to be able to view and manipulate components
- Document usage guidelines, history, examples, and other information
- Ship a version controlled package of code and tools for use in building applications
About Us
We're a passionate group of designers, engineers, and former design system consultants. Our team has helped some of the largest companies build and implement design systems that solve their unique challenges. Our mission is to simplify the design system experience so teams can spend more time creating and less time rebuilding or struggling to keep their design and code in sync.
We're backed by Google, Slack, and other world-class investors who see our vision for the future.
Our focus is modernizing digital production through collaborative tooling and workflows that make it easy to reuse code.
About Design Tokens
Design tokens are design decisions captured as usable code. When we design and build using tokens, we give ourselves the ability to maintain and update brand experiences at any scale with ease. This section of the platform allows designers and engineers to collaboratively define and manage tokens.
Tokens by Category
- Colors
- Breakpoints
- Spacing
- Shadow
- Animation
All Design Tokens
| Name | Value | Description |
|---|---|---|
breakpoint.media.query.featuredSwap |
screen and (min-width: 850px) |
|
breakpoint.media.query.large |
screen and (min-width: 768px) |
|
breakpoint.media.query.medium |
screen and (min-width: 480px) |
|
breakpoint.media.query.small |
screen and (min-width: 330px) |
|
breakpoint.media.query.xlarge |
screen and (min-width: 992px) |
|
breakpoint.media.query.xxlarge |
screen and (min-width: 1240px) |
|
breakpoint.media.query.xxxlarge |
screen and (min-width: 1440px) |
|
breakpoint.width.featuredSwap |
850px |
|
breakpoint.width.large |
768px |
|
breakpoint.width.medium |
480px |
|
breakpoint.width.small |
330px |
|
breakpoint.width.xlarge |
992px |
|
breakpoint.width.xxlarge |
1240px |
|
breakpoint.width.xxxlarge |
1440px |
|
color.base.blue |
#207FF9 |
|
color.base.green |
#3ccf91 |
|
color.base.orange |
#ff924f |
|
color.base.orchid |
#aa1baf |
|
color.base.red |
#ef5151 |
|
color.base.yellow |
#FCD02A |
|
color.brand.black |
#000000 |
|
color.brand.primary |
#6436BF |
|
color.brand.secondary |
#E43A5C |
|
color.brand.tertiary |
#F3EFFB |
|
color.brand.white |
#FFFFFF |
|
color.dark.blue |
#213683 |
|
color.dark.green |
#21835a |
|
color.dark.orange |
#e65800 |
|
color.dark.orchid |
#560e58 |
|
color.dark.red |
#c91313 |
|
color.dark.yellow |
#e6b400 |
|
color.layout.border |
#DDDDDD |
|
color.layout.defaultBg |
#FFFFFF |
|
color.layout.primary |
#393B3E |
|
color.layout.primaryHover |
#525A62 |
|
color.layout.secondary |
#555555 |
|
color.light.blue |
#8d9fe2 |
|
color.light.green |
#8de2bf |
|
color.light.orange |
#ffd0b3 |
|
color.light.orchid |
#e77bea |
|
color.light.red |
#f8b0b0 |
|
color.light.yellow |
#ffeeb3 |
|
color.text.default |
#222222 |
|
color.text.inverse |
#f9f9f9 |
|
color.text.link |
#2B64A8 |
|
font-size.2xl |
1.5rem |
|
font-size.3xl |
1.875rem |
|
font-size.4xl |
2.25rem |
|
font-size.5xl |
3rem |
|
font-size.6xl |
3.75rem |
|
font-size.7xl |
4.5rem |
|
font-size.8xl |
6rem |
|
font-size.9xl |
8rem |
|
font-size.base |
1rem |
|
font-size.lg |
1.125rem |
|
font-size.sm |
0.875rem |
|
font-size.xl |
1.25rem |
|
font-size.xs |
0.75rem |
|
shadow.box.lg |
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
|
shadow.box.md |
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
|
shadow.box.sm |
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
|
shadow.text.medium |
0 1px 2px rgba(0,0,0,0.5) |
|
spacing.2xl |
64px |
|
spacing.2xs |
2px |
|
spacing.l |
32px |
|
spacing.m |
16px |
|
spacing.s |
8px |
|
spacing.xl |
48px |
|
spacing.xs |
4px |
|
transition.delay.slow |
8000ms |
Used for timings that need to be fully interpreted by users, such as the Carousel autorotate delay. |
transition.duration.normal |
150ms |
|
transition.duration.slow |
600ms |
Used for near full width movements, like the Carousel |
transition.timing.default |
ease |