Beautiful, functional Figma and Framer Components

Components are reusable design elements or patterns in a design system. They include buttons, input fields, navigation bars, modals, and more. Each component is crafted with specific styles, behaviors, and functionalities that adhere to the design system's guidelines. Made with Auto Layout 4.0, Variables, Breakpoints and Framer Interactions.

Preview in Figma

Design System Foundation

In essence, these foundational elements – colors, spacing, and shadows – work together to create a harmonious and effective design system.

Design System Foundation

In essence, these foundational elements – colors, spacing, and shadows – work together to create a harmonious and effective design system.

Design System Foundation

In essence, these foundational elements – colors, spacing, and shadows – work together to create a harmonious and effective design system.

Design System Foundation

In essence, these foundational elements – colors, spacing, and shadows – work together to create a harmonious and effective design system.

Colors

150 Variables, 102 Styles

blue-50

18.51 AAA

AAA

1.13

#e6f2ff

rgb(230, 242, 255)

blue-100

13.91 AAA

AAA

1.51

#b0d6ff

rgb(176, 214, 255)

blue-200

11.24 AAA

AAA

1.87

#8ac2ff

rgb(138, 194, 255)

blue-300

8.28 AAA

AAA

2.54

#54a6ff

rgb(84, 166, 255)

blue-400

6.88 AAA

3.05

#3395ff

rgb(51, 149, 255)

blue-500

5.23 AAA

4.02 AA

#007aff

rgb(0, 122, 255)

blue-600

4.44 AA

4.73 AAA

#006fe8

rgb(0, 111, 232)

blue-700

3.03

6.93 AAA

#0057b5

rgb(0, 87, 181)

blue-800

2.18

9.63 AAA

AAA

#00438c

rgb(0, 67, 140)

blue-900

1.69

12.46 AAA

AAA

#00336b

rgb(0, 51, 107)

Spacing

50 Variables

Shadows

20 Styles

shadow sm

shadow lg

shadow md

Components

When beginning a new design, components act as the foundational building blocks. Designers can quickly assemble a user interface by pulling together these pre-designed elements, significantly speeding up the design process.

Typography & Content

100+ Components

Heading 1 - 60 Semibold

Heading 2 - 50 Semibold

Heading 3 - 40 Semibold

Heading 4 - 30 Semibold

Heading 5 - 24 Semibold

Headline - 20 Regular

Body Large - 18 Regular

Body - 16 Regular

Buttons

40 Components

Primary

Ghost

Menus

30 Components

Glass

Line

Flat

Cards

60 Components

Wireframes

30 Components

Icons

2,116 Components

Backgrounds

40 Components

Patterns

20 Components

Full-page Templates

Full-page templates are pre-designed, complete layouts that encompass various page sections like headers, footers, content areas, and sidebars.

App Showcase

4 Components

UI Kit / Design System

5 Components

Device Mockups

7 Components

Icon Set

5 Components

Courses

5 Components

Sections

Page sections are modular blocks or areas on a webpage or app screen. Each section is designed to hold specific types of content or fulfill particular user interactions.

Hero

7 Components

Features

7 Components

Pricing

7 Components

DesignCode UI

Components

Pricing

Changelog

Buy now

DesignCode UI