diff --git a/public/icons/static/social/facebook-share.png b/public/icons/static/social/facebook-share.png
old mode 100644
new mode 100755
index 845647191..743ec2d28
Binary files a/public/icons/static/social/facebook-share.png and b/public/icons/static/social/facebook-share.png differ
diff --git a/public/icons/static/social/telegram-share.png b/public/icons/static/social/telegram-share.png
index cffce179f..d759f5fde 100644
Binary files a/public/icons/static/social/telegram-share.png and b/public/icons/static/social/telegram-share.png differ
diff --git a/public/icons/static/social/twitter-share.png b/public/icons/static/social/twitter-share.png
index 04836ff75..1b05dd41d 100644
Binary files a/public/icons/static/social/twitter-share.png and b/public/icons/static/social/twitter-share.png differ
diff --git a/public/icons/static/social/wechat-share.png b/public/icons/static/social/wechat-share.png
index a1df1b7c6..fcdc1e594 100644
Binary files a/public/icons/static/social/wechat-share.png and b/public/icons/static/social/wechat-share.png differ
diff --git a/public/icons/static/social/weibo-share.png b/public/icons/static/social/weibo-share.png
index d9f63df94..669e934a9 100644
Binary files a/public/icons/static/social/weibo-share.png and b/public/icons/static/social/weibo-share.png differ
diff --git a/src/components/Buttons/styles/yes_or_no_buttons.ts b/src/components/Buttons/styles/yes_or_no_buttons.ts
index 0a30e4e54..f8f89efde 100644
--- a/src/components/Buttons/styles/yes_or_no_buttons.ts
+++ b/src/components/Buttons/styles/yes_or_no_buttons.ts
@@ -10,6 +10,14 @@ export const Wrapper = styled.div<TWrapper>`
     align === 'center' ? 'center' : 'flex-end'};
 `
 export const CancelBtn = styled.div`
+  opacity: 0.8;
   color: ${theme('button.primary')};
   font-size: 14px;
+
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+
+  transition: opacity 0.2s;
 `
diff --git a/src/containers/tool/AbuseReport/Footer.tsx b/src/containers/tool/AbuseReport/Footer.tsx
index 01f016256..722b4acef 100644
--- a/src/containers/tool/AbuseReport/Footer.tsx
+++ b/src/containers/tool/AbuseReport/Footer.tsx
@@ -3,6 +3,7 @@ import { FC } from 'react'
 import { YesOrNoButtons } from '@/components/Buttons'
 
 import { Wrapper } from './styles/footer'
+import { goBack } from './logic'
 
 type TProps = {
   view: 'main' | 'detail'
@@ -14,7 +15,11 @@ const Footer: FC<TProps> = ({ view }) => {
   return (
     <Wrapper>
       {/* <Note>举报后社区志愿者会在第一时间【处理】。</Note> */}
-      <YesOrNoButtons confirmText="举报" />
+      <YesOrNoButtons
+        cancelText="上一步"
+        confirmText="举报"
+        onCancel={goBack}
+      />
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx
index 41cb9c2d7..380540078 100644
--- a/src/containers/tool/AbuseReport/Header.tsx
+++ b/src/containers/tool/AbuseReport/Header.tsx
@@ -1,7 +1,9 @@
-import { FC } from 'react'
+import { FC, memo } from 'react'
 
 import { REPORT_TYPE } from '@/constant'
 import { ICON } from '@/config'
+
+import type { TREPORT_ITEM } from './spec'
 import { Wrapper, ReportIcon, Text, ContentTitle } from './styles/header'
 
 const getCustomTitle = (type: string): string => {
@@ -23,16 +25,22 @@ const getCustomTitle = (type: string): string => {
 
 type TProps = {
   type: string
+  view: 'main' | 'detail'
+  activeItem: TREPORT_ITEM
 }
 
-const Header: FC<TProps> = ({ type }) => {
+const Header: FC<TProps> = ({ type, view, activeItem }) => {
   return (
-    <Wrapper>
+    <Wrapper showShadow={view === 'detail'}>
       <ReportIcon src={`${ICON}/article/report-solid.svg`} />
-      <Text>举报{getCustomTitle(type)}</Text>
+      {view === 'detail' ? (
+        <Text>{activeItem.title}</Text>
+      ) : (
+        <Text>举报{getCustomTitle(type)}</Text>
+      )}
       <ContentTitle>这是一首简单的小情歌</ContentTitle>
     </Wrapper>
   )
 }
 
-export default Header
+export default memo(Header)
diff --git a/src/containers/tool/AbuseReport/ReportContent/Detail.tsx b/src/containers/tool/AbuseReport/ReportContent/Detail.tsx
index 221d40112..566f99c14 100644
--- a/src/containers/tool/AbuseReport/ReportContent/Detail.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Detail.tsx
@@ -2,11 +2,9 @@ import { FC } from 'react'
 
 import Input from '@/components/Input'
 import { Br } from '@/components/Common'
-import { ArrowButton } from '@/components/Buttons'
 
 import type { TREPORT_ITEM } from '../spec'
 import { Wrapper, DetailDesc } from '../styles/report_content/detail'
-import { goBack } from '../logic'
 
 type TProps = {
   activeItem: TREPORT_ITEM
@@ -15,15 +13,6 @@ type TProps = {
 const Detail: FC<TProps> = ({ activeItem }) => {
   return (
     <Wrapper>
-      <ArrowButton
-        size="small"
-        direction="left"
-        arrowStyle="simple"
-        onClick={() => goBack()}
-      >
-        {activeItem.title}
-      </ArrowButton>
-      <Br bottom={10} />
       <DetailDesc>{activeItem.detail}</DetailDesc>
       <Br bottom={25} />
       <Input
diff --git a/src/containers/tool/AbuseReport/ReportContent/Main.tsx b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
index 73951c6e8..101a8e7b1 100644
--- a/src/containers/tool/AbuseReport/ReportContent/Main.tsx
+++ b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
@@ -1,11 +1,18 @@
-import { FC, Fragment } from 'react'
+import { FC } from 'react'
 
 import { SpaceGrow } from '@/components/Common'
 import Checker from '@/components/Checker'
 
 import type { TREPORT_ITEM } from '../spec'
 
-import { Option, SelectWrapper, Title } from '../styles/report_content/main'
+import {
+  Wrapper,
+  OptionsWrapper,
+  Option,
+  SelectWrapper,
+  Title,
+  Panel,
+} from '../styles/report_content/main'
 import { selectItem } from '../logic'
 
 type TProps = {
@@ -15,18 +22,21 @@ type TProps = {
 
 const Main: FC<TProps> = ({ items, activeItem }) => {
   return (
-    <Fragment>
-      {items &&
-        items.map((item) => (
-          <Option key={item.raw}>
-            <SelectWrapper onClick={() => selectItem(item.raw)}>
-              <Checker checked={item.raw === activeItem.raw} />
-              <Title active={item.raw === activeItem.raw}>{item.title}</Title>
-            </SelectWrapper>
-            <SpaceGrow />
-          </Option>
-        ))}
-    </Fragment>
+    <Wrapper>
+      <OptionsWrapper>
+        {items &&
+          items.map((item) => (
+            <Option key={item.raw}>
+              <SelectWrapper onClick={() => selectItem(item.raw)}>
+                <Checker checked={item.raw === activeItem.raw} />
+                <Title active={item.raw === activeItem.raw}>{item.title}</Title>
+              </SelectWrapper>
+              <SpaceGrow />
+            </Option>
+          ))}
+      </OptionsWrapper>
+      <Panel>感谢你用实际行动为社区净化作出贡献。</Panel>
+    </Wrapper>
   )
 }
 
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
index 8f13c4d3f..8d71457bc 100755
--- a/src/containers/tool/AbuseReport/index.tsx
+++ b/src/containers/tool/AbuseReport/index.tsx
@@ -37,7 +37,7 @@ const AbuseReportContainer: FC<TProps> = ({
   return (
     <Modal width="500px" show={show} showCloseBtn onClose={() => close()}>
       <Wrapper testid={testid}>
-        <Header type={type} />
+        <Header type={type} view={view} activeItem={activeItem} />
         <ReportContent view={view} items={itemsData} activeItem={activeItem} />
         <Footer view={view} />
       </Wrapper>
diff --git a/src/containers/tool/AbuseReport/styles/footer.ts b/src/containers/tool/AbuseReport/styles/footer.ts
index 3df4814ae..590f058bf 100644
--- a/src/containers/tool/AbuseReport/styles/footer.ts
+++ b/src/containers/tool/AbuseReport/styles/footer.ts
@@ -3,7 +3,8 @@ import styled from 'styled-components'
 import { theme } from '@/utils'
 
 export const Wrapper = styled.div`
-  margin-top: 35px;
+  background: ${theme('modal.subPanel')};
+  height: 50px;
 `
 export const Note = styled.div`
   color: ${theme('thread.articleDigest')};
diff --git a/src/containers/tool/AbuseReport/styles/header.ts b/src/containers/tool/AbuseReport/styles/header.ts
index cc0d48bc4..8dc175a00 100644
--- a/src/containers/tool/AbuseReport/styles/header.ts
+++ b/src/containers/tool/AbuseReport/styles/header.ts
@@ -3,10 +3,15 @@ import styled from 'styled-components'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ showShadow: boolean }>`
   ${css.flex('align-center')};
   color: ${theme('thread.articleDigest')};
-  margin-bottom: 20px;
+  background: ${theme('modal.bg')};
+  padding: 20px 38px;
+  filter: ${({ showShadow }) =>
+    showShadow ? theme('modal.subPanelShadow') : ''};
+  /* filter: ${theme('modal.subPanelShadow')}; */
+  z-index: 1;
 `
 export const ReportIcon = styled(Img)`
   ${css.size(16)};
@@ -14,6 +19,7 @@ export const ReportIcon = styled(Img)`
 `
 export const Text = styled.div`
   color: ${theme('thread.articleTitle')};
+  font-weight: bold;
   margin-left: 8px;
   margin-right: 6px;
 `
diff --git a/src/containers/tool/AbuseReport/styles/index.ts b/src/containers/tool/AbuseReport/styles/index.ts
index 5112363e3..6b2a12527 100755
--- a/src/containers/tool/AbuseReport/styles/index.ts
+++ b/src/containers/tool/AbuseReport/styles/index.ts
@@ -1,12 +1,13 @@
 import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
-import { theme } from '@/utils'
+import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  padding: 25px 40px;
   color: ${theme('thread.articleDigest')};
+  ${css.flexColumn()};
+  min-height: 320px;
 `
 export const ContentWrapper = styled.div``
diff --git a/src/containers/tool/AbuseReport/styles/report_content/detail.tsx b/src/containers/tool/AbuseReport/styles/report_content/detail.tsx
index 082e6b6ec..8f22c29cc 100644
--- a/src/containers/tool/AbuseReport/styles/report_content/detail.tsx
+++ b/src/containers/tool/AbuseReport/styles/report_content/detail.tsx
@@ -1,9 +1,14 @@
 import styled from 'styled-components'
 
-import { css } from '@/utils'
+import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
+  flex-grow: 1;
+  /* border: 1px solid tomato; */
+  padding: 20px 30px;
+  padding-top: 30px;
+  background: ${theme('modal.subPanel')};
 `
 export const Title = styled.div`
   ${css.flexColumn()};
diff --git a/src/containers/tool/AbuseReport/styles/report_content/main.ts b/src/containers/tool/AbuseReport/styles/report_content/main.ts
index 89e027e44..ffb0b0726 100644
--- a/src/containers/tool/AbuseReport/styles/report_content/main.ts
+++ b/src/containers/tool/AbuseReport/styles/report_content/main.ts
@@ -5,6 +5,23 @@ import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
+  height: 100%;
+`
+export const OptionsWrapper = styled.div`
+  padding: 0 35px;
+  padding-right: 20px;
+  background: ${theme('modal.bg')};
+  filter: ${theme('modal.subPanelShadow')};
+`
+export const Panel = styled.div`
+  ${css.flex('align-center')};
+  padding-left: 35px;
+  width: 100%;
+  background: ${theme('modal.subPanel')};
+  /* background: ${theme('modal.panelBg')}; */
+  height: 50px;
+  color: ${theme('thread.articleDigest')};
+  font-size: 13px;
 `
 export const Option = styled.div`
   ${css.flex('align-center')};
diff --git a/src/containers/tool/Share/Platforms.tsx b/src/containers/tool/Share/Platforms.tsx
index 4a8d5abd9..eb2572aa0 100644
--- a/src/containers/tool/Share/Platforms.tsx
+++ b/src/containers/tool/Share/Platforms.tsx
@@ -45,8 +45,8 @@ const medias = [
     id: '3',
     title: '微信',
     logo: `${ICON}/social/wechat-share.png`,
-    bg: 'white',
     type: SHARE_TYPE.WECHAT,
+    noBg: true,
   },
   {
     id: '4',
@@ -59,7 +59,6 @@ const medias = [
     id: '5',
     title: 'Telegram',
     logo: `${ICON}/social/telegram-share.png`,
-    bg: 'white',
     type: SHARE_TYPE.TELEGRAM,
   },
   {
@@ -67,12 +66,12 @@ const medias = [
     title: '微博',
     logo: `${ICON}/social/weibo-share.png`,
     type: SHARE_TYPE.WEIBO,
+    noBg: true,
   },
   {
     id: '7',
     title: 'Facebook',
     logo: `${ICON}/social/facebook-share.png`,
-    bg: 'white',
     type: SHARE_TYPE.FACEBOOK,
   },
 ]
@@ -92,7 +91,7 @@ const Platforms: FC<TProps> = ({ article }) => {
       <InnerWrapper>
         {medias.map((item) => (
           <Media key={item.id} onClick={() => toPlatform(item.type)}>
-            <LogoWrapper bg={item.bg}>
+            <LogoWrapper noBg={!!item.noBg}>
               <Logo src={item.logo} small={!!item.small} />
             </LogoWrapper>
             <Title>{item.title}</Title>
diff --git a/src/containers/tool/Share/logic.ts b/src/containers/tool/Share/logic.ts
index 5c0c38ac7..4782ad941 100755
--- a/src/containers/tool/Share/logic.ts
+++ b/src/containers/tool/Share/logic.ts
@@ -26,6 +26,7 @@ type TShareParam = {
   text?: string
   subject?: string
   body?: string
+  u?: string
 }
 const openShareWindow = (platformUrl: string, param: TShareParam): void => {
   const safeParam = []
@@ -64,8 +65,8 @@ export const toPlatform = (type: string): void => {
     }
 
     case SHARE_TYPE.FACEBOOK: {
-      const param = { url, title }
-      return openShareWindow('https://facebook.com/sharer/sharer.php', param)
+      const param = { u: url }
+      return openShareWindow('https://facebook.com/share.php', param)
     }
 
     case SHARE_TYPE.WEIBO: {
@@ -80,7 +81,7 @@ export const toPlatform = (type: string): void => {
 }
 
 export const close = (): void => {
-  store.mark({ show: false })
+  store.mark({ show: false, siteShareType: SHARE_TYPE.LINKS })
 }
 
 // ###############################
diff --git a/src/containers/tool/Share/styles/info_panel.ts b/src/containers/tool/Share/styles/info_panel.ts
index e61b53d3f..071eeb8b3 100644
--- a/src/containers/tool/Share/styles/info_panel.ts
+++ b/src/containers/tool/Share/styles/info_panel.ts
@@ -8,7 +8,7 @@ export const Wrapper = styled.div<{ type: string }>`
   padding: 20px 40px;
   width: 100%;
   height: ${({ type }) => getInfoPanelHeight(type)};
-  background: #0a313e;
+  background: ${theme('modal.subPanel')};
   color: ${theme('thread.articleTitle')};
   transition: all 0.1s;
 `
diff --git a/src/containers/tool/Share/styles/platform.ts b/src/containers/tool/Share/styles/platform.ts
index 0b2f40e20..8d5e42347 100644
--- a/src/containers/tool/Share/styles/platform.ts
+++ b/src/containers/tool/Share/styles/platform.ts
@@ -9,7 +9,7 @@ export const Wrapper = styled.div`
   width: 100%;
   min-height: 220px;
   background: ${theme('modal.bg')};
-  filter: drop-shadow(3px 3px 6px #002a34);
+  filter: ${theme('modal.subPanelShadow')};
   transition: min-height 0.2s;
 `
 export const Header = styled.div`
@@ -38,18 +38,15 @@ export const Media = styled.div`
   margin-bottom: 18px;
   cursor: pointer;
 `
-export const LogoWrapper = styled.div<{ bg: string | undefined }>`
+export const LogoWrapper = styled.div<{ noBg: boolean }>`
   ${css.circle(38)};
   ${css.flex('align-both')};
-  background: ${({ bg }) => bg || '#164651'};
+  background: ${({ noBg }) => (noBg ? 'transparent' : '#184b56')};
   margin-bottom: 5px;
 `
 export const Logo = styled(Img)<{ small: boolean }>`
-  fill: ${theme('thread.articleTitle')};
-  display: block;
-  width: ${({ small }) => (small ? '24px' : '40px')};
-  height: ${({ small }) => (small ? '24px' : '40px')};
-  border-radius: 100%;
+  fill: #e7f2f7; // ${theme('thread.articleTitle')};
+  ${({ small }) => (small ? css.circle('24px') : css.circle('38px'))};
   filter: saturate(0.6);
   opacity: 0.8;
 
diff --git a/src/containers/unit/ArticleFooter/AuthorInfo/index.tsx b/src/containers/unit/ArticleFooter/AuthorInfo/index.tsx
index a7a43a5fd..feb9474e1 100644
--- a/src/containers/unit/ArticleFooter/AuthorInfo/index.tsx
+++ b/src/containers/unit/ArticleFooter/AuthorInfo/index.tsx
@@ -55,7 +55,7 @@ const AuthorInfo: FC<TProps> = ({ testid = 'author-info', author }) => {
           src={author.avatar}
           fallback={<ImgFallback user={author} size={38} bottom={16} />}
         />
-        <FollowButton size="tiny" fakeLoading />
+        <FollowButton size="tiny" fakeLoading hasFollowed />
       </AvatarIntro>
     </Wrapper>
   )
diff --git a/src/containers/unit/ArticleFooter/styles/actions/index.ts b/src/containers/unit/ArticleFooter/styles/actions/index.ts
index 977bbf67a..63a0b92e1 100644
--- a/src/containers/unit/ArticleFooter/styles/actions/index.ts
+++ b/src/containers/unit/ArticleFooter/styles/actions/index.ts
@@ -11,17 +11,16 @@ export const Item = styled.div`
   ${css.flex('align-center')};
   cursor: pointer;
 `
-const Icon = styled(Img)`
-  fill: ${theme('thread.articleDigest')};
-  ${css.size(14)};
-  margin-top: -1px;
-`
-export const ReferIcon = styled(Icon)``
-export const RecordIcon = styled(Icon)`
-  ${css.size(15)};
-`
+// const Icon = styled(Img)`
+//   fill: ${theme('thread.articleDigest')};
+//   ${css.size(13)};
+// `
+// export const ReferIcon = styled(Icon)``
+// export const RecordIcon = styled(Icon)`
+//   ${css.size(15)};
+// `
 export const ReferNum = styled.span`
-  font-size: 14px;
+  font-size: 13px;
   font-weight: bold;
   color: #00a59b;
   margin-right: 5px;
diff --git a/utils/themes/skins/cyan.ts b/utils/themes/skins/cyan.ts
index 197d3fe3c..456f07acf 100755
--- a/utils/themes/skins/cyan.ts
+++ b/utils/themes/skins/cyan.ts
@@ -289,6 +289,8 @@ const cyan = {
     bg: contentBoxBg,
     border: primaryColor,
     innerSelectBg: '#e4eeed45',
+    subPanel: '#00313d',
+    subPanelShadow: 'drop-shadow(3px 3px 6px #002a34)',
   },
   form: {
     inputBg: '#FFFFFF',
diff --git a/utils/themes/skins/github.ts b/utils/themes/skins/github.ts
index 964ce2a8e..137967e14 100755
--- a/utils/themes/skins/github.ts
+++ b/utils/themes/skins/github.ts
@@ -290,6 +290,8 @@ const github = {
     bg: contentBoxBg,
     border: primaryColor,
     innerSelectBg: '#e4eeed45',
+    subPanel: '#00313d',
+    subPanelShadow: 'drop-shadow(3px 3px 6px #002a34)',
   },
   form: {
     inputBg: '#FFFFFF',
diff --git a/utils/themes/skins/green.ts b/utils/themes/skins/green.ts
index b02b76aae..4c367a2b7 100755
--- a/utils/themes/skins/green.ts
+++ b/utils/themes/skins/green.ts
@@ -288,6 +288,8 @@ const green = {
     bg: '#e1e8d9',
     border: primaryColor,
     innerSelectBg: '#333040',
+    subPanel: '#00313d',
+    subPanelShadow: 'drop-shadow(3px 3px 6px #002a34)',
   },
   form: {
     inputBg: lighten(0.03, contentBoxBg),
diff --git a/utils/themes/skins/iron_green.ts b/utils/themes/skins/iron_green.ts
index fbca18682..fcf60b40d 100755
--- a/utils/themes/skins/iron_green.ts
+++ b/utils/themes/skins/iron_green.ts
@@ -283,6 +283,8 @@ const iconGreen = {
     bg: '#4f858a',
     border: primaryColor,
     innerSelectBg: bannerBg,
+    subPanel: '#00313d',
+    subPanelShadow: 'drop-shadow(3px 3px 6px #002a34)',
   },
   form: {
     inputBg: '#FFFFFF',
diff --git a/utils/themes/skins/monokai.ts b/utils/themes/skins/monokai.ts
index feee9839f..3e723e6f9 100755
--- a/utils/themes/skins/monokai.ts
+++ b/utils/themes/skins/monokai.ts
@@ -284,6 +284,8 @@ const monokai = {
     bg: '#353337',
     border: primaryColor,
     innerSelectBg: '#333040',
+    subPanel: '#00313d',
+    subPanelShadow: 'drop-shadow(3px 3px 6px #002a34)',
   },
   form: {
     inputBg: lighten(0.03, contentBoxBg),
diff --git a/utils/themes/skins/purple.ts b/utils/themes/skins/purple.ts
index baad7e9a6..6f3c8b3be 100755
--- a/utils/themes/skins/purple.ts
+++ b/utils/themes/skins/purple.ts
@@ -288,6 +288,8 @@ const purple = {
     bg: bannerBg,
     border: primaryColor,
     innerSelectBg: '#333040',
+    subPanel: '#00313d',
+    subPanelShadow: 'drop-shadow(3px 3px 6px #002a34)',
   },
   form: {
     inputBg: lighten(0.03, contentBoxBg),
diff --git a/utils/themes/skins/solarized_dark.ts b/utils/themes/skins/solarized_dark.ts
index 742abf6fb..24554e27e 100755
--- a/utils/themes/skins/solarized_dark.ts
+++ b/utils/themes/skins/solarized_dark.ts
@@ -290,6 +290,8 @@ const solarizedDark = {
     bg: bannerBg,
     border: '#1d5171',
     innerSelectBg: '#03323e',
+    subPanel: '#00313d',
+    subPanelShadow: 'drop-shadow(3px 3px 6px #002a34)',
   },
   form: {
     inputBg: '#002D39',
diff --git a/utils/themes/skins/yellow.ts b/utils/themes/skins/yellow.ts
index 56e9ee36f..5cd6aac0d 100755
--- a/utils/themes/skins/yellow.ts
+++ b/utils/themes/skins/yellow.ts
@@ -287,6 +287,8 @@ const yellow = {
     bg: '#FCFBF7',
     border: primaryColor,
     innerSelectBg: '#f7f0e0',
+    subPanel: '#00313d',
+    subPanelShadow: 'drop-shadow(3px 3px 6px #002a34)',
   },
   form: {
     inputBg: lighten(0.03, contentBoxBg),