"We’re not designing pages, we’re designing systems of components." -Stephen Hay

Calligraphy.

  • Font family: Circular Std
  • Styles:
  • Regular

  • Light

  • Italic

  • Semibold

  • Bold

Aa

Circular Std Regular

Aa

Circular Std Italic

Aa

Circular Std Bold

Typography.

  • Heading 1

  • Font family: Circular Std
  • Font size: 55px

Almost before we knew it, we had left the ground.

  • Heading 2

  • Font family: Circular Std
  • Font size: 55px

Almost before we knew it, we had left the ground.

  • Heading 3

  • Font family: Circular Std
  • Font size: 55px

Almost before we knew it, we had left the ground.

  • Heading 4

  • Font family: Circular Std
  • Font size: 22px

Almost before we knew it, we had left the ground.

  • Heading 5

  • Font family: Circular Std
  • Font size: 18px
Almost before we knew it, we had left the ground.
  • Heading 6

  • Font family: Circular Std
  • Font size: 14px
Almost before we knew it, we had left the ground.

Paragraph.

b.

Almost before we knew it, we had left the ground.

p.

Almost before we knew it, we had left the ground.

small.

Almost before we knew it, we had left the ground.

span.

Almost before we knew it, we had left the ground.

i.

Almost before we knew it, we had left the ground.

u.

Almost before we knew it, we had left the ground.

strike.

Almost before we knew it, we had left the ground.

Font align.

Aa

Text-left

Aa

Text-center

Aa

Text-right

Colors.

Primary

#50fa7b

Danger

#f2405d

Warning

#ffb721

Black

#000000

Grey

#b3b3b3

Light grey

#e2e2e2

White

#ffffff

Gradients.

Primary
Dark
Light

Shadows.

Small
Medium
Large

Buttons.

Value

    
< atomic-button value="Digite seu texto">
    
  

Size

    
< atomic-button value="Small" size="small">
< atomic-button value="Medium" size="medium">
< atomic-button value="Large" size="large">
    
  

Type

    
< atomic-button value="Default" type="">
< atomic-button value="Primary" type="primary">
< atomic-button value="Danger" type="danger">
< atomic-button value="Warning" type="warning">
    
  

Color

    
< atomic-button value="color: purple" color="purple">
    
  

Font-color

    
< atomic-button value="font-color: #fff" color="purple" font-color="#fff">
    
  

Border-radius

    
< atomic-button value="Border Radius" border-radius="30px">
    
  

Width

    
< atomic-button value="Width: 300px" width="300px">
    
  

Attribute

Type

Default

Options

Description

ValueStringEx: "Texto do botão"Texto dentro do botão
SizeStringMediumsmall / medium / largeDefine a proporção do botão
TypeStringDefaultprimary / dangerDefine o tipo
ColorString#dddQualquer tipo de cor(red, #ff4455, rgb(23,154, 16))Define a cor do background
Font-colorString#333Qualquer tipo de cor, Ex: (red, #ff4455, rgb(23,154, 16))Define a cor da fonte
Border-radiusString4pxNúmero + medida, Ex: (4px, 50%)Define o radius da borda
WidthStringNúmero + medida, Ex: (200px, 100%)Define o tamanho do botão

Grid.

1
2
3
4
5
6
7
8
9
10
11
12

Spaces.

Margin (left, right, top, bottom)
without margin
margin-left-10
margin-left-20
margin-left-30
margin-left-40
margin-left-50
Padding (left, right, top, bottom)
without padding
padding-left-50
padding-left-50
padding-left-50
padding-left-50
padding-left-50
width 90% margin 0 auto