# Goldfish UI

- [Mobile Styleguide no Figma](https://www.figma.com/file/1AqZLJb1C3aNQP7UFILQtY/Mobile-Styleguide?node-id=126%3A1)

### Goldfish Commons - Tokens

### Colors

Cores usadas nas plataformas da Biz.

#### Brand colors
- brownDark: #383014,
- yellowPrimary: #F0B000,
- yellowBrand: #F6BE00,
- yellowBright: #FAC600,
- yellowBackgroud: #FFFAE6,
- tealPrimary: #008299,
- tealBrand: #00A7B5,
- tealBright: #2BC5CD,
- tealBackground: #D7FBFC,

#### Interface colors
- redDark700: #8C1D17,
- redBright500: #D62D24,
- redMedium300: #F26E63,
- redLight100: #FDB5AF,
- redBackground50: #FEEDEB,
- greenDark700: #6E8122,
- greenBright500: #8FA82E,
- greenMedium300: #BBD557,
- greenLight100: #CDE17F,
- greenBackground50: #F9FBEE,
- coralDark700: #C84F0F,
- coralBright500: #FA7833,
- coralMedium300: #FF9963,
- coralLight100: #FFC09E,
- coralBackground50: #FFF2EB,
- purpleDark700: #521CD9,
- purpleBright500: #7758F3,
- purpleMedium300: #9C8FFF,
- purpleLight100: #C2C3FF,
- purpleBackground50: #EBEBFF,

#### Greys
- darkGrey1: #162B32,
- darkGrey4: #869DA5,
- lightGrey2: #E7EFF3,
- neutralDarkGrey900: #0D1726,
- neutralDarkGrey850: #142339,
- neutralDarkGrey800: #1C2F4A,
- neutralDarkGrey700: #263C59,
- neutralMediumGrey650: #374D6D,
- neutralMediumGrey600: #4D6280,
- neutralMediumGrey550: #677B98,
- neutralMediumGrey500: #8596AD,
- neutralLightGrey400: #9FABBC,
- neutralLightGrey300: #C2CAD6,
- neutralLightGrey200: #D1D8E0,
- neutralLightGrey100: #E1E5EA,
- neutralBackgroundGrey90: #E7EAEE,
- neutralBackgroundGrey80: #F0F2F5,
- neutralBackgroundGrey70: #F9FAFB,
- blueLight: #DFFDFF,

#### Other
- white: #FFFFFF,
- shadowColor: #1C2F4A,
- backdropColor: rgba(29, 36, 43, 0.7),

### Spacing

Progressão de espaçamentos

- minimal: 4
- xxsmall: 8
- xsmall: 16
- small: 24
- medium: 32
- large: 40
- xlarge: 48
- xxlarge: 56
- big: 64
- xbig: 72

### Typography Mobile

Tipos de tipografia utilizadas nos Apps nativos

#### Family
- fontFamily

#### Title
- titleJumbo
- titleBold
- titleLight

#### Subtitle
- subtitleLargeBold
- subtitleLarge
- subtitleSmallBold
- subtitleSmall

#### Button
- buttonText

#### Body
- bodyLargeBold
- bodyLarge
- bodyLargeRegular
- bodySmallBold
- bodySmall
- bodySmallRegular

#### Chip
- chipTextBold
- chipTextRegular

#### Overline
- overlineBold
- overlineRegular

### Typography Web

- heading-1
- heading-2
- heading-3
- heading-4
- heading-5
- heading-6
- subtitle
- body-1
- body-2
- body-3
- body-4

### Layers Web (zindex)

- base: 10
- menu: 20
- overlay: 30
- modal: 40
- alwaysOnTop: 50