The design system
you plan to build

14 day money-back guarantee
EN
Ester Naomi
New
Artwork preview
Artwork preview
Artwork preview
0.74 ETH
Checkout
5
User avatar
Font / Featured 2

Everything you expect
from a design system

<Card padding={0}>
<View padding={2} gap={3} direction="row" align="center">
<Image
width={12} height={12} borderRadius="medium"
src="/img/examples/avatar-food.webp"
/>
<View.Item grow>
<Text variant="body-3" weight="bold">Food</Text>
<Text variant="caption-1" weight="medium">247 results</Text>
</View.Item>
<Button rounded variant="ghost" icon={IconHeart} />
</View>
<View backgroundColor="neutral-faded" paddingInline={2} paddingBlock={1}>
<Text variant="caption-2">Sponsored</Text>
</View>
</Card>
Food
247 results
Sponsored
Component file structure
Reshaped
Themes
About
Reshaped
Light and dark mode
Funky
Light and dark mode
Classic
Light and dark mode
New theme
Light and dark mode

React library

<Card elevated>
<View direction="row" gap={{ s: 2, l: 4 }}>
<Avatar size={10} src="avatar.jpg" />
<View.Item grow>
<Text variant="body-2-1">Reshaped</Text>
<Text color="neutral-faded">
Design system built for your scale
</Text>
</View.Item>
<Button icon={IconArrow} rounded />
</View>
</Card>

React is the only dependency Reshaped needs in runtime. You can use it alongside any other dependencies you already use in your product.

Typescript support

Everything you import from Reshaped is written in Typescript. Code editor helps you writing code before you even open the documentation.

Small bundle size

The whole React library weighs ~35kb including both CSS and JS code. Adopt it alongside your current codebase and your bundle will only have the parts you use.

Reshaped is covered with an extensive test suite of unit, screenshot and accessibility tests. You’ll get multiple hundreds of tests and we keep adding more.

Max Trusov avatar
Max Trusov
Head of Front-end Development

Figma libraries

Figma libraries popup

You get 3 libraries: Components and Styles for light and dark modes. All of them are aligned with React and built in a scalable way.

Figma styles popup

There are 2 style libraries: for light & dark modes. Each contains styles for colors, typography and effects that are used for all components.

Figma variants popup

Reshaped has thousands of variants carefully wrapped into individual components that are easy to find and configure.

Figma auto layout popup

All components, where it's possible, support auto-layout. It lets you resize and see content auto reflow just like in code.

Kamlesh Chandnani avatar
Kamlesh Chandnani
Principal Frontend Engineer, Razorpay

And much more

Documentation

Thorough technical and design documentation, best-practices and real-world examples

Composable architecture

Built in flexibility that lets you develop your own components in minutes

Accessibility

WCAG AA compliant starting from color contrast and up to the screen reader navigation

Responsive styles

Components that dynamically adapt to different viewport sizes

Theming

Themes supported out-of-the-box for all components with contextual tokens

Dark mode

Dark mode support embedded into each theme through semantic colors

Pro license

Building your
own design system?

Includes React and Figma source files
Component file structure

You get access to Reshaped implementation of all components and utilities with a fully working development environment and Storybook examples.

User graph

Pro license can be used for your whole company, no more hassle with managing individual licenses.

Component tests status

Get access to the test suite and Storybook files for the whole library. Keep your tests in sync for your new features with zero overhead.

Pricing

Popular
$59/seat
  • Lifetime access
    Future updates and components
  • Unlimited projects
    Library license is reserved for one person and unlimited projects
  • React library
    40+ components and utilities
  • Figma library
    Components aligned with code, light & dark mode libraries
  • Documentation
    Thoroughly documentated library and processes
  • Theming engine
    Ability to create custom themes
Buy library license
Forever yours with all updates 🙌
14 day money-back guarantee
Source code
$999
  • All assets from the library license
    Get access to the libraries, theming and documentation
  • Unlimited seats and projects
    Stop thinking about managing the number of available seats
  • Full access to the source code
    Skip your first year of development for your own design system
  • Full test suite
    Get full control over the component development environment
  • Extendable theming engine
    Ability to create custom themes and extend the engine
Buy pro license
Headstart for your own design systems 🤓
Best deal for teams
Consulting
Contact us
  • Onboarding
    Guidance on how to introduce Reshaped to your development and design process
  • Design system audit
    Review and recommendations for your own design system implementation
  • Tailored support
    Priority support for the new feature requests based on your product requirements
  • Need even more?
    Reach out to us and let's discuss how we can help
Contact us
Personalized approach 🚀

© 2020-2023 Reshaped Design. All rights reserved.
Built with Reshaped in Amsterdam ❤️