FULL DS Standards Design Tokens

Created to support FULL DS Standards
Tokens
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

Index

In the field.

Definition.

Tokens.
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

In the field.
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

In the field.
Medium.com/...b73f80f602ab
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
World Wide Web Consortium (W3C)

The main International standards organization for the World Wide Web since 1994
Design tokens are indivisible pieces of a design system such
as colors, spacing, typography scale.
Mozilla Photon Design System
A design token is an abstraction of a visual property such as
color, font, width, animation, etc. These raw values are
language application agnostic and once transformed and
formatted can be used on any platform.
Salesforce, Lightning Design System
Design tokens are the visual design atoms of the design system
— specifically, they are named entities that store visual design
attributes. We use them in place of hard-coded values

(such as hex values for color or pixel values for spacing) in
order to maintain a scalable and consistent visual system

for UI development.

In the field.
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
Spectrum - Adobe’s design system
https://spectrum.adobe.com/page/design-tokens/

In the field.
Design tokens are named entities that store raw,
indivisible design values like colors or sizes. They are the
core pieces of a design system. Stored in a technology
agnostic format they can be transformed for use on any
platform, replacing hard-coded values.
Lukas Oppermann 
www.vea.re
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

Definition.
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

Definition.
Os design tokens são as palavras-chave que usamos

para representar os elementos mais primitivos (fundações)
de um sistema de design.

Cada um desses elementos (tokens) tem opções
associadas, que nos permitem definir os códigos visuais
do design system.
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

Definition.
Os design tokens são agnósticos de tecnologia.

Não dependem de uma linguagem de programação
ou design.

No entanto são consumidos por todo o tipo de
tecnologia, é caso disso o Software Figma para os
designers ou o HTML e CSS para os coders.
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
Colors
Typography
Layout
Iconography
Style
Media
Motion
Components
Umbraco
HTML
CSS
Specifications
Zeroheight
Visualstudiocode
Figma

Tokens.
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

Os Token 1.0 foram usados pela primeira vez na
Grandunion, quando atualizámos o
para a sua segunda versão.
Legu DS Master
Alto da barra. Junho de 2017
Av. da Liberdade. Julho de 2022
Cinco anos depois, atualizamos os Token 2.0 para
suportar o FULL DS Standards
Tokens.
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

Colors
Typography
Layout
Iconography
Generic style
Media
Motion
Components
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
Tokens.

F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
Colors
$color_soli
main m-01, m-02, m-0
additional add-01, add-02, add-0
neutral neu-01, neu-02, neu-0
extendedm-01—l-01, m-01—d-01, m-01—d-02

$color_gradient gra-01, gra-02, gra-03

Escala de
crescimento e
variação
M M-2 M-3
L L-2 L-3
2XL 2XL-2 2XL-3
2XS 2XS-2 2XS-3
3XS 3XS-2 3XS-3
XS XS-2 XS-3
XL XL-2 XL-3
3XL 3XL-2 3XL-3
S S-2 S-3
M
M--link
NUM-M
M-2 M-3
M-2--link
NUM-M-2
M-3--link
Variação Fórmula
Crescimento
Escala (X) de Crescimento, Variação e Extensão
[C](C>1) X [-V] (V>1)[--E]
$type_preset 8, 16, 24, 32, 48, 64, 96, 128, 192, 256, 512

$type_style 2xs, xs, s, m, m-2, l, xl, 2xl, 3xl, 4xl

$type_bullet ordered, unordered
Typography
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0

A titulo de exemplo no Third Block de EDP,
aplicação:

Elemento: Imagem

Format: Column_layout

Options: 2/3-1/3 & 1/3-2/3

Default: 2/3-1/3
#Column_layout
Alternative layout
Default layout
#Module_Paddin
Padding_top None, Small, Medium, Larg
Padding_bottom None, Small, Medium, Large
Far far away,
behind the world
mountains
80
80
Far far away,
behind the world
mountains
40
40
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
$background_size full_width, full_container, full_screen

$content_alignment left, center, right

$module_paddin
padding_top none, s, m,
padding_bottom none, s, m, l

$column_layout 1/2-1/2, 1/3-2/3, 2/3-1/3

$content_fixed true, false

$display_content true, false

$breakpoint mobile, phablet, tablet, laptop, desktop
Layout
0 512 768 1024
Column change

6 12
1280 1440

F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
M
L
2XS
XS
XL
S
2XL
3XL
$icon_sizes2xs, xs, s, m, l, xl, 2xl, 3xl

$icon_typ
brand bra-01, bra-02, bra-0
base bas-01, bas-02, bas-0
social soc-01, soc-0
payment pay-01, pay-0
flags fla-01, fla-02
Iconography

Themes
Todos os temas estão ao mesmo nível, opcionalmente podem
existir variantes/extensões de um tema:

THEME[--VAR]

Exemplo de caso:

#styles_theme PurpleBlue, PurpleBlue--Inverted
Overlay
Existem dois tipos de overlays num sistema. 
Simples ou baseado num gradiente:

#styles_overlay Ove-01, Ove-02, Ove-03

#styles_overlay gradient Ogr-01, Ogr-02, Ogr-03
Main shadows são as principais, devem considerar sempre
no ambito de sistema duas a três elevações diferentes.

As Additional shadows devem ter um uso ponderado.
Shadows
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
$style_shado
main sma-01, sma-02, sma-0
additional sad-01, sSad-02, sad-03

$style_overlay ove-01, ove-02, ove-03

$style_overlay gradient ogr-01, ogr-02, ogr-03

$style_radius rad-01, rad-02, rad-03

$style_theme purpleBlue, purpleBlue--Inverted

$style_stroke str-01, str-02, str-03

$style_glass gla-01, gla-02, gla-03

$style_mesh mes-01, mes-02, mes-03
Generic style
Rad-01
Str-01

Str-02

Str-03
Sma-01 Sma-02 Sma-03

1.85:1 2.35:1
16:9
16:10
HDTV, Widescreen

SDTV, smartphones

(horizontal)
Widescreen computer

displays, smartphones

(horizontal)
3:2
35 mm film
Computer

displays
5:4
Cinema film (US) Cinemascope
Standard video display
4:3
3:4
Portrait
Smartphone

(vertical)
1:1
Icones
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
$media_crop true, false

$media_ratio 1:1, 3:2, 4:3, 16:9, 9:16, 21:9

$media_forma
image jpeg, webp, gif, svg, pn
video external, mp4
Media

F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
$slider_autoplaytrue, false

$page_scroll true, false

$stickytrue, false
Motion

Acent
Primary
Secondary
Tertiary
Xtras
Hyperlink
Botão estratégico
Botão principal d
Solução complem
Botão alternativo
Excecional, não e
Não é um botão.
F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
$component_textformat plain text, simple rich text, rich text, rich text plus

$component_button_type accent, primary, secondary, tertiary

$component_button_style acc-01, pri-01, pri-02, pri-03, sec-01, ter-01

$component_button_size pri-01--s, pri-01--m, pri-01--l

$component_button_icon_position left, right, top, bottom

$component_link_type internal, modal, anchor, external
Components

F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
Tokens
As siglas ou abreviaturas são compostaspor
trêscaracteres, salvo raras exceções. 

Asiglaédefinidapelastrêsprimeirasletras da
propriedade do token. Se uma propriedade tiver
sub-propriedades, fazemos uso da primeiraletra
dapropriedadeeasduasprimeirasletrasda
sub-propriedade.
brand

shadow main

shadow additional

overlay

overlay gradient
E x a m p l e 0 1
E x a m p l e 0 2
E x a m p l e 0 3
bra

sma

sad

ove

ogr

F
U
L
L
D
S
S
T
o
k
e
n
s
2
.
0
Thankyou.
https://standards.fullsix.pt

FULL DS Standards Design Tokens

Recommandé

Recommandé

Contenu connexe

Similaire à FULL DS Standards Design Tokens

Similaire à FULL DS Standards Design Tokens (8)

FULL DS Standards Design Tokens