commit a6305f356cb9a2700c4b080515b3f1c985bf5d9e Author: douboer Date: Sun Oct 19 21:22:27 2025 +0800 first commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..735c590 --- /dev/null +++ b/index.html @@ -0,0 +1,690 @@ + + + + + + Redo Brand Guidelines + + + + + + +
+ + +
+
+ Redo 品牌主视觉 +
+ +
+
+
+

Brand Guidelines

+

+ This guide defines the visual language, design style, and + principles that shape a clear and consistent brand experience, + no matter the team or area of expertise. +

+

+ At its core, Redo is about precision and clarity—just like our + mission to correct financial errors and optimize balance + sheets. This guide lays out the essential design standards that + bring our brand to life, from our color system and typography to + accessibility benchmarks and documentation. +

+

+ Whether you're designing for digital platforms or printed + materials, these guidelines ensure every touchpoint reflects the + trust and efficiency at the heart of Redo. +

+
+
+ +
+

Contents

+
    +
  1. 01 Brand Strategy
  2. +
  3. 02 Personality
  4. +
  5. 03 Logo
  6. +
  7. 04 Color
  8. +
  9. 05 Typography
  10. +
  11. 06 Art Direction
  12. +
+
+ +
+
+

01 Brand Strategy

+
+
+

+ In the world of finance, mistakes happen—miscalculations, + overlooked expenses, inefficiencies that silently erode + profitability. Businesses lose money not because they aren’t + earning, but because errors go unchecked. Redo restores + confidence in financial numbers. +

+
+ 团队合作的插画 +
+

+ Born from the need for financial clarity, Redo was founded on a + simple yet powerful mission: to correct financial errors and + optimize balance sheets. We believe that precision is the key to + profitability, and that businesses shouldn’t be held back by + avoidable losses. With advanced technology and expert analysis, + we uncover discrepancies, eliminate inefficiencies, and restore + confidence in the numbers that drive success. +

+

+ At Redo, we don’t just fix mistakes—we empower businesses to + move forward with accuracy and efficiency. Because when the + numbers are right, the future looks even brighter. +

+
+
+ +
+
+

02 Personality

+

+ Redo’s voice brings our brand to life through the words we write + and speak. The way we communicate with customers has the power + to transform their financial well-being. Through clear and + intentional language, we make financial corrections simple, + accessible, and stress-free. Our direct, approachable, and + transparent voice ensures that fixing mistakes feels + effortless—so our customers can move forward with confidence. +

+
+
+ 品牌性格关键词 +
+
+

Tone & Voice

+
    +
  • + Our Vision: why we exist + To create a future where every business maximizes their potential. +
  • +
  • + Our Mission: what we do + Correct financial errors and optimize balance sheets. +
  • +
  • + Our Promise: how we help + Empower businesses to move forward with accuracy and efficiency. +
  • +
+
+
+

Sample Copy

+
+
+

Your Finances, Fixed the Right Way

+

+ Precision matters when it comes to financial corrections. A + small error can have a big impact on your savings, credit + score, or future financial goals. +

+
+
+

We Handle the Fix, You Focus on What Matters

+

+ Your time is valuable, and dealing with financial errors + shouldn’t take up more of it than necessary. Whether it’s an + unexpected overdraft fee or a billing mistake, we take care + of the correction process for you. +

+
+
+

Mistakes Don’t Have to Cost You—We’ve Got Your Back

+

+ An overlooked charge or a simple accounting mistake shouldn’t + throw off your financial plans. We step in to identify and + correct these issues before they become bigger problems. +

+
+
+

See an Error? We’ll Make It Right.

+

+ Not sure what that unexpected charge is? Worried about an + incorrect withdrawal? Instead of worrying or assuming the + worst, let us investigate and resolve the issue for you. +

+
+
+
+
+ + + +
+
+

04 Color

+

+ Redo’s color palette is designed to evoke trust, reliability, + and financial clarity, ensuring that every touchpoint reflects + our commitment to accuracy and efficiency. Together, these + colors create a strong, dependable, and forward-thinking brand + identity, ensuring that Redo is instantly recognized as the + go-to solution for financial corrections and optimization. +

+
+
+
+

Primary Palette

+
+
+ +

Orange

+

Hex: #FA9819

+
+
+ +

Blue Tint

+

Hex: #B6C9CF

+
+
+ +

White

+

Hex: #FFFFFF

+
+
+ +

Baby Blue

+

Hex: #C6EBF7

+
+
+
+
+

Secondary Palette

+
+
+ +

Navy

+

Hex: #1E3D59

+
+
+ +

Caption

+

Hex: #48749E

+
+
+ +

Sky Blue

+

Hex: #DEEEFE

+
+
+ +

Off-blue

+

Hex: #E8EBEF

+
+
+ +

Deep Orange

+

Hex: #F45F00

+
+
+ +

Black

+

Hex: #000000

+
+
+ +

Dark Grey

+

Hex: #A3A3A3

+
+
+ +

Grey

+

Hex: #E5E5E5

+
+
+
+
+

Gradient Palette

+
+
+ 渐变 1 +
Gradient 1
+
+
+ 渐变 2 +
Gradient 2
+
+
+ 渐变 3 +
Gradient 3
+
+
+ 渐变 4 +
Gradient 4
+
+
+
+
+
+ +
+
+

05 Typography

+
+

+ Redo’s typography balances clarity and professionalism with a + modern yet timeless type pairing, reinforcing our commitment + to accuracy, efficiency, and financial stability. +

+
+ Redo 字体示例 +
+

+ Primary Sans-Serif (Rethink Sans Reg) + is a clean, modern sans-serif typeface that ensures legibility + and precision across all digital and print materials. Its + geometric structure reflects clarity, efficiency, and trust, + making it the ideal choice for data-heavy content, dashboards, + and user interfaces. +

+

+ Secondary Serif (Hedvig Letters Serif) + is a refined, authoritative serif font that adds a touch of + tradition and credibility. Used for emphasis in headlines, + reports, and financial documents, it reinforces Redo’s + expertise and reliability in correcting financial + discrepancies. +

+

+ This sans-serif and serif combination creates a dynamic + contrast—modern yet trustworthy, analytical yet approachable, + ensuring Redo’s brand communication is always clear, + professional, and dependable. +

+
+
+
+
+

Primary Typeface

+

+ Rethink Sans Reg +

+
+
+

Secondary Typeface

+

+ Hedvig Letters Serif +

+
+
+
+

Sizing

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. +

+
    +
  • +

    + Clear Up Confusion, Gain Peace of Mind +

    +
    + Type Sizes > 72pt/px + 100% Leading + -2% Tracking +
    +
  • +
  • +

    + Whether it’s a bank error, an unauthorized charge, or an + overlooked refund, we ensure you don’t pay for something you + shouldn’t have. +

    +
    + Type Sizes 55–72pt/px + 110% Leading + -2% Tracking +
    +
  • +
  • +

    + Our team works diligently to recover lost funds, correct + inaccuracies, and keep your financial records accurate—so + you can feel confident about every dollar in your account. +

    +
    + Type Sizes 24–55pt/px + 120% Leading + -1% Tracking +
    +
  • +
  • +

    + Financial errors shouldn’t slow you down or cause + unnecessary stress. Whether it’s an incorrect charge, a + duplicate transaction, or a miscalculated fee, we step in to + make things right. Our process is simple, straightforward, + and designed to get your money back where it belongs—quickly + and without hassle. +

    +
    + Type Sizes 0–24pt/px + 130% Leading + 0% Tracking +
    +
  • +
+
+
+ +
+
+

06 Art Direction

+

+ Redo’s photography style reinforces our brand’s core values— + trust, clarity, and financial empowerment—by showcasing visuals + that reflect professionalism, accuracy, and control. +

+
+
+
+ 现代办公空间照片 +
+ Clean & Casual + Photography should feature modern, well-lit workspaces with a + clean and organized feel. The focus should be on clarity, + avoiding clutter or overly dramatic compositions. +
+
+
+ 科技场景照片 +
+ Subtle Technology Integration + Include financial technology elements—dashboards, tablets, or + hands interacting with tools—to highlight Redo’s tech-driven + approach. +
+
+
+ 团队讨论照片 +
+ Financial Storytelling + Capture real-world financial scenarios—professionals analyzing + reports and teams discussing strategies—to reinforce control of + finances. +
+
+
+ 自信专注的人物照片 +
+ People with Confidence & Focus + Show people who feel empowered and in control, highlighting the + clarity Redo brings to financial lives. +
+
+
+
+
+ + +
+
+ + diff --git a/learn.md b/learn.md new file mode 100644 index 0000000..c77d8ed --- /dev/null +++ b/learn.md @@ -0,0 +1,32 @@ + +# figma学习记录 + +## 快捷键 +1. shift + a --- auto layout +1. cmd + g / cmd + shift + g --- group / ungroup +1. ] [ -- 图层上下移动 +2. cmd . / shift 1 2 -- 视图切换 +3. cmd + 鼠标 -- 切换图片 +4. i -- 取色 r -- 矩形 o --- 圆 t --- 文字 +5. 元素左边小框双击 --- 该元素放大居中 +6. 文字样式: + cmd + option < > 粗细 + cmd + shift < > 大小 +7. 双击边线 + + +## 问题 +1. figma 组件component和变体variants区别? +component不同类型的组件,如按钮、卡片等。 +variant同一类型组件的不同表现,比如组件大小、状态等。 + +2. frame是否对应html的div? +是 + +3. 组件的复用 + +4. 蒙版的使用 + +5. 渐变色 + + diff --git a/note.md b/note.md new file mode 100644 index 0000000..7218f68 --- /dev/null +++ b/note.md @@ -0,0 +1,16 @@ + + +## 记录 +20251017 +--- +figma+vscode,用Claude效果还行。 +用gpt4不行。 +改codex,把link和mcp server配置告诉贴给它。 + +用agent full access模式 + gpt-5-codex生成完美页面。 +✅ + +## 问题 +1. 2025-10-17 17:28:41.137 [info] Error reading from async stream, we will reconnect: TypeError: terminated +❓❓❓ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..cb22edd --- /dev/null +++ b/styles.css @@ -0,0 +1,628 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +:root { + --color-bg: #ffffff; + --color-text: #000000; + --color-muted: #575757; + --color-accent: #f45f00; + --color-border: rgba(0, 0, 0, 0.1); + --sidebar-width: 250px; +} + +html, +body { + margin: 0; + padding: 0; + background: var(--color-bg); + color: var(--color-text); + font-family: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif; + line-height: 1.5; +} + +img { + display: block; + max-width: 100%; + height: auto; +} + +a { + color: inherit; + text-decoration: none; +} + +.page { + display: flex; + min-height: 100vh; + background: var(--color-bg); +} + +.sidebar { + position: sticky; + top: 0; + display: flex; + flex-direction: column; + gap: 24px; + width: var(--sidebar-width); + padding: 0 20px 30px 32px; + border-right: 1px solid var(--color-border); + background: var(--color-bg); + height: 100vh; + overflow-y: auto; +} + +.sidebar__logo { + padding: 30px 0; + border-bottom: 1px solid var(--color-border); +} + +.sidebar__nav { + display: flex; + flex-direction: column; + gap: 10px; + padding-bottom: 30px; + border-bottom: 1px solid var(--color-border); +} + +.sidebar__nav a { + display: flex; + align-items: center; + justify-content: space-between; + font-weight: 500; + font-size: 15px; + letter-spacing: -0.3px; + padding: 6px 0; + color: var(--color-text); +} + +.sidebar__index { + color: var(--color-muted); + font-size: 10px; + letter-spacing: -0.2px; +} + +.sidebar__links { + display: flex; + flex-direction: column; + gap: 12px; + font-weight: 500; + font-size: 15px; + letter-spacing: -0.3px; + color: var(--color-muted); +} + +.sidebar__links a { + color: inherit; +} + +.content { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; +} + +.hero img { + width: 100%; + height: auto; + object-fit: cover; +} + +main { + padding-bottom: 120px; +} + +section { + border-left: 1px solid var(--color-border); + border-top: 1px solid transparent; + padding: 32px; + max-width: 1030px; +} + +.intro { + border-left: 1px solid var(--color-border); + border-top: none; +} + +.intro__text { + display: flex; + flex-direction: column; + gap: 20px; + max-width: 1000px; +} + +.intro h1 { + font-size: 60px; + line-height: 1.1; + margin: 0; +} + +.intro p { + margin: 0; + font-size: 15px; + letter-spacing: -0.15px; + color: var(--color-muted); +} + +.toc { + border-top: 1px solid var(--color-border); + display: flex; + align-items: flex-start; + gap: 32px; +} + +.toc h2 { + margin: 0; + font-size: 30px; + font-weight: 500; + line-height: 1.2; +} + +.toc ol { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 10px; + font-size: 30px; + font-weight: 500; + letter-spacing: -0.6px; +} + +.toc li span { + color: var(--color-muted); +} + +.section header h2 { + margin: 0 0 24px; + font-size: 60px; + font-weight: 500; + line-height: 1.1; + display: inline-flex; + gap: 12px; + align-items: baseline; +} + +.section header h2 span:first-child { + color: var(--color-accent); +} + +.section p { + color: var(--color-muted); + font-size: 15px; + letter-spacing: -0.15px; +} + +.section__body { + display: flex; + flex-direction: column; + gap: 24px; +} + +.section__body figure { + margin: 0; +} + +.section__media { + margin: 32px 0; +} + +.section__grid { + margin-top: 32px; + border-top: 1px solid var(--color-border); + padding-top: 32px; +} + +.section__grid h3 { + font-size: 22px; + font-weight: 600; + margin: 0 0 20px; +} + +.section__grid--tone ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 20px; +} + +.section__grid--tone strong { + font-weight: 700; + color: var(--color-text); +} + +.card-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 32px; +} + +.card-grid article { + display: flex; + flex-direction: column; + gap: 12px; +} + +.card-grid h4 { + margin: 0; + font-size: 15px; + font-weight: 700; + letter-spacing: -0.15px; + color: var(--color-text); +} + +.card-grid p { + margin: 0; +} + +.gallery { + display: grid; + gap: 40px; + margin-top: 40px; +} + +.gallery__group h3 { + margin: 0 0 20px; + font-size: 22px; + font-weight: 600; +} + +.gallery__group--grid .gallery__tiles { + display: grid; + gap: 20px; + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.gallery__tiles figure { + margin: 0; + display: flex; + flex-direction: column; + gap: 12px; +} + +.gallery__tiles figcaption { + display: flex; + gap: 8px; + align-items: center; + font-size: 13px; + color: var(--color-text); + letter-spacing: -0.13px; +} + +.gallery__tiles figcaption img { + width: 16px; + height: 16px; +} + +.palette { + display: grid; + gap: 64px; + margin-top: 40px; +} + +.palette__group h3 { + margin: 0 0 24px; + font-size: 22px; + font-weight: 600; +} + +.swatches { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 24px; +} + +.swatches--wrap { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.swatch { + display: flex; + flex-direction: column; + gap: 8px; + font-size: 13px; + letter-spacing: -0.13px; +} + +.swatch__color { + display: block; + width: 100%; + padding-top: 100%; + border-radius: 1000px; + background: var(--swatch); + border: 1px solid transparent; +} + +.swatch__color--border { + border-color: var(--color-text); +} + +.swatch__code { + color: var(--color-muted); +} + +.gradients { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 32px; +} + +.gradients figure { + margin: 0; + display: flex; + flex-direction: column; + gap: 12px; + font-size: 13px; + letter-spacing: -0.13px; +} + +.section--typography .highlight { + color: var(--color-accent); + font-weight: 500; +} + +.type-details { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 40px; + margin-top: 60px; +} + +.type-details__group h3 { + margin: 0 0 16px; + font-size: 22px; + font-weight: 600; +} + +.type-details__sample { + margin: 0; + font-size: 60px; + letter-spacing: -1.2px; +} + +.type-details__sample--sans { + font-family: "Rethink Sans", sans-serif; +} + +.type-details__sample--serif { + font-family: "Hedvig Letters Serif", serif; + font-weight: 400; +} + +.type-sizing { + margin-top: 80px; + border-top: 1px solid var(--color-border); + padding-top: 40px; +} + +.type-sizing h3 { + margin: 0 0 20px; + font-size: 22px; + font-weight: 600; +} + +.type-sizing p { + margin: 0 0 32px; +} + +.type-sizing ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 40px; +} + +.type-sizing__heading { + margin: 0 0 20px; + font-family: "Rethink Sans", sans-serif; + color: var(--color-text); +} + +.type-sizing__meta { + display: flex; + gap: 20px; + font-size: 13px; + color: var(--color-muted); + letter-spacing: -0.13px; +} + +.size--xl { + font-size: 50px; + line-height: 1.1; +} + +.size--lg { + font-size: 32px; + line-height: 1.1; +} + +.size--md { + font-size: 20px; +} + +.size--sm { + font-family: "Hedvig Letters Serif", serif; + font-size: 16px; + line-height: 1.4; +} + +.section--art { + padding-bottom: 0; +} + +.photo-grid { + margin-top: 40px; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 32px; +} + +.photo-grid figure { + margin: 0; + display: flex; + flex-direction: column; + gap: 16px; +} + +.photo-grid figcaption { + display: flex; + flex-direction: column; + gap: 8px; + font-size: 13px; + letter-spacing: -0.13px; + color: var(--color-muted); +} + +.photo-grid figcaption strong { + color: var(--color-text); + font-weight: 600; +} + +.footer { + margin-top: auto; + border-top: 1px solid var(--color-border); + padding: 128px 40px 32px; + display: flex; + flex-direction: column; + gap: 40px; +} + +.footer__top { + display: flex; + align-items: flex-end; + gap: 32px; +} + +.footer__logo img { + max-width: 350px; +} + +.footer__links { + display: flex; + gap: 32px; + font-size: 15px; + font-weight: 500; +} + +.footer__top-link { + color: var(--color-text); +} + +.footer__bottom { + border-top: 1px solid var(--color-border); + padding-top: 40px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 13px; + color: var(--color-text); + letter-spacing: -0.13px; +} + +.footer__legal { + display: flex; + align-items: center; + gap: 16px; +} + +.footer__legal a { + color: inherit; +} + +@media (max-width: 1200px) { + .page { + flex-direction: column; + } + + .sidebar { + position: static; + width: 100%; + height: auto; + border-right: none; + border-bottom: 1px solid var(--color-border); + } + + .content { + width: 100%; + } + + section { + max-width: none; + } + + .card-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .gallery__group--grid .gallery__tiles { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .swatches, + .swatches--wrap { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .type-details { + grid-template-columns: 1fr; + } + + .photo-grid { + grid-template-columns: 1fr; + } + + .footer__top { + flex-direction: column; + align-items: flex-start; + } + + .footer__links { + flex-wrap: wrap; + } + + .footer__bottom { + flex-direction: column; + gap: 16px; + align-items: flex-start; + } +} + +@media (max-width: 768px) { + .intro h1 { + font-size: 42px; + } + + .section header h2 { + font-size: 42px; + } + + .toc { + flex-direction: column; + } + + .toc ol { + font-size: 24px; + } + + .card-grid { + grid-template-columns: 1fr; + } + + .gallery__group--grid .gallery__tiles { + grid-template-columns: 1fr; + } + + .gradients { + grid-template-columns: 1fr; + } + + .swatches, + .swatches--wrap { + grid-template-columns: 1fr 1fr; + } +}