What is this?

A testing ground for future Spectrum components.
Click buttons, scrub sliders and break things.
Stuff will change and some might not see the light of day. #spectrum
Warning: Experimental Components

Resources

spectrum.corp.adobe.com
git

Downloads

CSS White CSS Light CSS Mid-Dark CSS Dark

Typeface

Adobe Clean:LightRegularBoldItalic Regular

Headers

Display

Page Title

Subtitle 1

Subtitle 2

Subtitle 3

Copy

LargeRegularItalicSmallSecondaryLabelPlaceholderDisabled Text

Small

Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly beans caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.

Regular

Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly beans caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.

Large

Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly beans caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.

Headings

Hello

States

Copy

Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly beans caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit editable.

States

List

    Unordered List Title

  • Item One
  • Item Two
  • Item Three

    Ordered List Title

  1. Item One
  2. Item Two
  3. Item Three
Once upon a Click Me
I'm feeling subtle Click Me

Colors

Grays

Reds

Greens

Blues

Buttons

Style

Quiet
Save/Animate
Blue Hover

States


Quiet Buttons - Test

Buttons - on Color


button {border-color:white;color:white;mix-blend-mode:screen;}
button:hover {background:white;color:black;}
button:active {opacity:.85}

Input Fields

Top label Left label
Email
Not a valid email address
[email protected]

Style

Quiet

Labels

None Top Left Float

States

Enabled Disabled Error Helper Text

Textareas

Top label Left label
Letter to Santa
No candy canes allowed only cookies

Labels

None Top Left Float

States

Enabled Disabled Error

Tags

Outdoor tags
Bears
Woman
Hiking
Nature
Campfire

Stepper Fields

Top label Left label
Número only
0 - 99

Style

Quiet

Labels

None Top Left

States

Enabled Disabled Error Helper Text
Top label Left label
Not Allowed
Option Three

Style

Quiet
20 items

Labels

None Top Left

States

Enabled Disabled Error Helper Text

Combo Boxes

Top label Left label
You broke it

Style

Quiet

Labels

States

Toolbars

Style

Labels
Blue Hover
Disable Edit

Progress Bars

Style

Thick

States

Activity Indicators

html/css - bad panda

svg/css - bad panda

svg/css - for red panda version 43 +

svg/css - indie

Diff Ani

Progress Radial

States

Sliders

Opacity0.50
Alpha0.50
Scale X & Y13 - 30
Scale X & Y13 - 30
1:473:34
Color Slider Title#1E71EA

States

Enabled Disabled Error

Sliders

Standard Slider Filled Slider Double Slider
Video Slider Ramp Slider Knobs
Color Slider

Sliders 2

Length of Meeting4.0
Length of Meeting4.0

Sliders - Hollow

Style

Filled

Color Picker

#
R
G
B
A

Radio Buttons

KIIS FM 1080 AM Disabled Error

Checkboxes




Toggles

Advanced
Australian
Leave On
Disabled Off
Disabled On
Error

Toggles - Hollow

Tabs

PAGE TABS


Panel Tabs


Panel Tabs (Icons only)


Vertical Tabs






Vertical Tabs (Icons only)




Modals

Modal Title
Cupcake ipsum dolor sit amet. Bear claw bonbon sweet roll. Cotton candy chocolate wafer chocolate chocolate cake. Toffee cookie brownie dessert jelly muffin.

Croissant tiramisu ice cream cake biscuit halvah wafer ice cream. Croissant bonbon chocolate jujubes ice cream. Dessert tart cupcake marshmallow chupa chups gummi bears. Jelly beans biscuit carrot cake sugar plum chupa chups tootsie roll.

Pastry chocolate cake danish apple pie lemon drops cheesecake. Bonbon cookie tiramisu caramels ice cream carrot cake marshmallow bear claw muffin. Gummies jelly-o sweet.

Fruitcake wafer muffin biscuit. Sesame snaps caramels jelly-o gingerbread. Cotton candy soufflé cotton candy sesame snaps pudding jujubes gummies halvah. Liquorice jelly beans dragée.

Apple pie cupcake muffin tart jelly-o pudding apple pie. Caramels chupa chups croissant sugar plum. Marzipan tart halvah croissant. Sugar plum dessert cotton candy pastry icing marshmallow carrot cake jelly-o topping.

Style

Scrollable

States

Default Success Help/Info Error Warning

Alignment

Center Left Diagonal 22.5°
Modal Title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.

Croissant tiramisu ice cream cake biscuit halvah wafer ice cream. Croissant bonbon chocolate jujubes ice cream. Dessert tart cupcake marshmallow chupa chups gummi bears. Jelly beans biscuit carrot cake sugar plum chupa chups tootsie roll.

Pastry chocolate cake danish apple pie lemon drops cheesecake. Bonbon cookie tiramisu caramels ice cream carrot cake marshmallow bear claw muffin. Gummies jelly-o sweet.

Fruitcake wafer muffin biscuit. Sesame snaps caramels jelly-o gingerbread. Cotton candy soufflé cotton candy sesame snaps pudding jujubes gummies halvah. Liquorice jelly beans dragée.

Apple pie cupcake muffin tart jelly-o pudding apple pie. Caramels chupa chups croissant sugar plum. Marzipan tart halvah croissant. Sugar plum dessert cotton candy pastry icing marshmallow carrot cake jelly-o topping.
Modal Title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.

Croissant tiramisu ice cream cake biscuit halvah wafer ice cream. Croissant bonbon chocolate jujubes ice cream. Dessert tart cupcake marshmallow chupa chups gummi bears. Jelly beans biscuit carrot cake sugar plum chupa chups tootsie roll.

Pastry chocolate cake danish apple pie lemon drops cheesecake. Bonbon cookie tiramisu caramels ice cream carrot cake marshmallow bear claw muffin. Gummies jelly-o sweet.

Fruitcake wafer muffin biscuit. Sesame snaps caramels jelly-o gingerbread. Cotton candy soufflé cotton candy sesame snaps pudding jujubes gummies halvah. Liquorice jelly beans dragée.

Apple pie cupcake muffin tart jelly-o pudding apple pie. Caramels chupa chups croissant sugar plum. Marzipan tart halvah croissant. Sugar plum dessert cotton candy pastry icing marshmallow carrot cake jelly-o topping.

Popovers

Popover Title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah.

States

Default Success Help/Info Error Warning
Tanzania
United Arab Emirates
United Kingdom
United States of America
Edit HTML
Edit Text
Edit Style
Another Option
Audience
Expand Selection
Navigate to this link
Edit HTML
Edit Text
Edit Style
Another Option
Audience
Expand Selection
Navigate to this link
Bread Crumb

Tooltips

Tooltip Style
Tooltip Left Tooltip Style
Tooltip Top
Tooltip Style
Tooltip Bottom Tooltip Style
Tooltip Right Tooltip Style
Success
Info
Error
Link Click Me

Toast

Toast is done
Bounce
Top

States

Default Help/Info Success Error Warning
Toast is done
Toast is done
Toast is done
Toast is done
Toast is done

Error Message

Incorrect Payment Information
Marshmallow halvah icing muffin marshmallow tart pudding. Candy canes sweet roll chocolate croissant. Jelly sweet roll powder sugar plum gummies cupcake. Candy canes chocolate bonbon.

Accordions

Wizards

Step 1
Step 1
Step 2
Step 2
Step 3
Step 3
Step 4
Step 4
Labels
Tooltip

Tables

CampaignsStatus Change Log
Western Region, APJ AU 6.1 LT Deals Page TestActive (15 Days)Updated 05 Feb 13
EMEA PJ AU 6.1 LT Deals Layout TestActive (4 Days)Updated 05 Feb 13
California, APJ AU 6.1 LT Page LayoutInactiveUpdated 05 Feb 13
Wisconsin, APJ AU 6.1 LT Deals PageInactiveUpdated 05 Feb 13
* Make bg corners rounded if you can, I couldn't =(
Background

Palletes

Transform
XY
WH
Color
Fill Color #1E71EA
Transform
XY
WH

Coachmarks

This is a coachmark, isn't it helpful?
1 of 1.33e+17
This is a coachmark, isn't it helpful?
1 of 2
This is a coachmark, isn't it helpful?
1 of 2

Cards

Making a test tube at GE Gif
Guardians of the Galaxy UI Gif
Guardians of the Galaxy Alien User Interface 2 Gif
A kitchen that cooks itself
1

Image

Come on I don't bite Jpg
By Sergey Polyushko
Cool stuff
37

Images

Art of Sparth Jpg
Edit
Delete
Share
Magic
Lufthansa Airliner Jpg
More cool stuff
6

Images

Space Shuttle Jpg
Bodum coffee maker Jpg
Even more cool stuff
4

Images

Quiet

Art of Sparth Jpg

Images

Hello

idea

Create anything you can imagine. Anywhere you are.

With the world's best imaging and design app, you can create and enhance photographs, websites, mobbile apps, 3D artwork, videos and more.
2 of 4

Cookies Ice Cream Pancakes

Cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes cupcakes

Video Player

0:000:00
HD Video
Closed Captions