---
# System prepended metadata

title: Goldfish UI

---

# 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