Slide 6
Slide 6 text
{Component name} Anatomy
1 {Layer name}
Depends on : {Dependency}
{Name} : {Value}
{Name} : {Value}
2 {Layer name}
{Name} : {Style/token}
{Name} : {Style/token}
{Name} : {Value}
3 {Layer name}
{Name} : {Value}
{Name} : {Style/token}
{Name} : {Style/token}
4 {Layer name}
Depends on : {Dependency}
{Name} : {Value}
{Name} : {Value}
#
#
#
#
# #
#
#
#
#
#
#
Properties
{Variant property name}
{Property value} (default)
{Layer name}
{Name} : {Style/token}
{Name} : {Value}
{Layer name}
Depends on : {Dependency}
{Name} : {Value}
{Property value}
{Layer name}
{Name} : {Style/token}
{Name} : {Value}
{Layer name}
Depends on : {Dependency}
{Name} : {Value}
{Property value}
{Layer name}
{Name} : {Style/token}
{Name} : {Value}
{Layer name}
Depends on : {Dependency}
{Name} : {Value}
{Boolean property name}
Property type : Boolean
Default : {true/false}
Associated layers :
{Layer name}
{Layer name}
{Layer name}
Layout and spacing
Spacing
{Layer name}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Layer name}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
{Name} : {Value}
16 16
16
16
16
16
Overflow
{Layer name}
{Description}
{Layer name}
{Description}
Touch targets
{Layer name}
{Description}
48
48
Responsive layout
{Breakpoint or Device}
{Description}
{Breakpoint or Device}
{Description}
Accessi
bility
Screen reading
For
when t
he mem
ber is usin
g a screen reader
, includin
g ho
w elements s
hould
be identified
, read
, and in
what order
.
ESDS Te
xt input
Readin
g :
[ESDS
Form la
bel
]. [Icon
] [value/
place
holder
], [role
].
Example :
“Cost rate
, t
he internal cost t
hat t
his
person incurs on your
business
. Dollar
100,
[role
].”
Role : te
xt
bo
x
{Layer name}
Readin
g : {
Readin
g}
Example : {
Example}
Role : {
Role}
Focus order
##
. {
Name} {
Role}
##
. {
Name} {
Role}
##
. {
Name} {
Role}
##
. {
Name} {
Role}
#
#
#
#
#
#
#
#
#
#
#
#
Announced order
##
. {
Name} {
Role}
##
. {
Name} {
Role}
##
. {
Name} {
Role}
##
. {
Name} {
Role}
#
#
#
#
#
#
#
#
#
#
#
#
Alternative te
xt
For any non-decorati
ve ima
ge and
visual elements con
veyed only
wit
h color
, pro
vide alternate te
xt
. By default
, any element NOT listed
belo
w
s
hould
be considered decorati
ve and not include alternate te
xt
.
Element Type Alternate te
xt
{
Element name
, suc
h as
Call to action
button} {Type
, suc
h as Visual element} {Alternate te
xt
, suc
h as Button or
Icon name}
{
Element name
, suc
h as
Call to action
button} {Type
, suc
h as Visual element} {Alternate te
xt
, suc
h as Button or
Icon name}
{
Element name
, suc
h as
Call to action
button} {Type
, suc
h as Visual element} {Alternate te
xt
, suc
h as Button or
Icon name}
{
Element name
, suc
h as
Call to action
button} {Type
, suc
h as Visual element} {Alternate te
xt
, suc
h as Button or
Icon name}
{
Element name
, suc
h as
Call to action
button} {Type
, suc
h as Visual element} {Alternate te
xt
, suc
h as Button or
Icon name}
Component tokens
{Su
bsection title}
Token Alias
Figma style Value
00 {Value} $esds-... $esds-... {
Fi
gma style}
{Description}
00 {Value} $esds-... $esds-... {
Fi
gma style}
{Description}
Aa {Value} $esds-... $esds-... {
Fi
gma style}
{Description}
{Value} $esds-... $esds-... {
Fi
gma style}
{Description}
{Value} $esds-... $esds-... {
Fi
gma style}
{Description}
{Value} $esds-... $esds-... {
Fi
gma style}
{Description}
{Su
bsection title}
Token Alias
Figma style Value
00 {Value} $esds-... $esds-... {
Fi
gma style}
00 {Value} $esds-... $esds-... {
Fi
gma style}
00 {Value} $esds-... $esds-... {
Fi
gma style}
00 {Value} $esds-... $esds-... {
Fi
gma style}
{Su
bsection title}
Token
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
{Value} $esds-...
Version his
Version #
.#
.# •
New features
d {DescriptionR
d {DescriptionR
d {Description}
Enhancements
d {DescriptionR
d {DescriptionR
d {Description}
Fi
xes
d {DescriptionR
d {DescriptionR
d {Description}
Version #
.#
.# •
New features
d {DescriptionR
d {DescriptionR
d {Description}
Enhancements
d {DescriptionR
d {DescriptionR
d {Description}
Fi
xes
d {DescriptionR
d {DescriptionR
d {Description}
©
Copyri
ght 2
024 •
Ei
ghtS
hapes LL
C
UI design specification
“Design spec”
“Spec”
or
or
, simply
A document t
hat descri
bes
ho
w an interface is composed
,
confi
gured
, visually desi
gned
, be
ha
ves and more
, whet
her
a component
, pa
ge or somet
hin
g else
.