first commit
This commit is contained in:
douboer
690
index.html
Normal file
690
index.html
Normal file
@@ -0,0 +1,690 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Redo Brand Guidelines</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..144&family=Rethink+Sans:wght@400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page" id="top">
|
||||||
|
<aside class="sidebar">
|
||||||
|
<div class="sidebar__logo">
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/35c1cadbcb67190b92301c6ea34e19098d35d7f4.svg"
|
||||||
|
alt="Redo 公司标志"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<nav class="sidebar__nav" aria-label="目录">
|
||||||
|
<a href="#strategy">
|
||||||
|
<span>Brand Strategy</span>
|
||||||
|
<span class="sidebar__index">01</span>
|
||||||
|
</a>
|
||||||
|
<a href="#personality">
|
||||||
|
<span>Personality</span>
|
||||||
|
<span class="sidebar__index">02</span>
|
||||||
|
</a>
|
||||||
|
<a href="#logo">
|
||||||
|
<span>Logo</span>
|
||||||
|
<span class="sidebar__index">03</span>
|
||||||
|
</a>
|
||||||
|
<a href="#color">
|
||||||
|
<span>Color</span>
|
||||||
|
<span class="sidebar__index">04</span>
|
||||||
|
</a>
|
||||||
|
<a href="#typography">
|
||||||
|
<span>Typography</span>
|
||||||
|
<span class="sidebar__index">05</span>
|
||||||
|
</a>
|
||||||
|
<a href="#art-direction">
|
||||||
|
<span>Art Direction</span>
|
||||||
|
<span class="sidebar__index">06</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
<div class="sidebar__links">
|
||||||
|
<a href="https://www.figma.com/sites" target="_blank" rel="noreferrer"
|
||||||
|
>Download Kit</a
|
||||||
|
>
|
||||||
|
<a href="https://www.figma.com/sites" target="_blank" rel="noreferrer"
|
||||||
|
>Contact Us</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<header class="hero">
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/2647bd88bf2e652f8f47ea40cab516c31fd3722e.png"
|
||||||
|
alt="Redo 品牌主视觉"
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="intro">
|
||||||
|
<div class="intro__text">
|
||||||
|
<h1>Brand Guidelines</h1>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="toc" aria-label="内容目录">
|
||||||
|
<h2>Contents</h2>
|
||||||
|
<ol>
|
||||||
|
<li><span>01</span> Brand Strategy</li>
|
||||||
|
<li><span>02</span> Personality</li>
|
||||||
|
<li><span>03</span> Logo</li>
|
||||||
|
<li><span>04</span> Color</li>
|
||||||
|
<li><span>05</span> Typography</li>
|
||||||
|
<li><span>06</span> Art Direction</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="strategy" class="section section--strategy">
|
||||||
|
<header>
|
||||||
|
<h2><span>01</span> Brand Strategy</h2>
|
||||||
|
</header>
|
||||||
|
<div class="section__body">
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/9e3e69d410e2b4cb89fa65823701fc41770f171b.png"
|
||||||
|
alt="团队合作的插画"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="personality" class="section section--personality">
|
||||||
|
<header>
|
||||||
|
<h2><span>02</span> Personality</h2>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<figure class="section__media">
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/d80221821ae223649e8b2f7216864cefd44272d8.png"
|
||||||
|
alt="品牌性格关键词"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<div class="section__grid section__grid--tone">
|
||||||
|
<h3>Tone & Voice</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Our Vision: why we exist</strong>
|
||||||
|
<span>To create a future where every business maximizes their potential.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Our Mission: what we do</strong>
|
||||||
|
<span>Correct financial errors and optimize balance sheets.</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Our Promise: how we help</strong>
|
||||||
|
<span>Empower businesses to move forward with accuracy and efficiency.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="section__grid section__grid--samples">
|
||||||
|
<h3>Sample Copy</h3>
|
||||||
|
<div class="card-grid">
|
||||||
|
<article>
|
||||||
|
<h4>Your Finances, Fixed the Right Way</h4>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h4>We Handle the Fix, You Focus on What Matters</h4>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h4>Mistakes Don’t Have to Cost You—We’ve Got Your Back</h4>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h4>See an Error? We’ll Make It Right.</h4>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="logo" class="section section--logo">
|
||||||
|
<header>
|
||||||
|
<h2><span>03</span> Logo</h2>
|
||||||
|
<p>
|
||||||
|
The Redo logo is a sleek, modern arrow that curves backward,
|
||||||
|
symbolizing the power to rewind, correct, and optimize financial
|
||||||
|
decisions. The reversed motion represents our core
|
||||||
|
mission—helping businesses go back, fix errors, and recover lost
|
||||||
|
value.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Designed with clean, sharp lines, the arrow conveys precision
|
||||||
|
and efficiency, while its fluid motion suggests agility and
|
||||||
|
adaptability in financial correction. The color palette
|
||||||
|
reinforces trust and clarity—deep blues or greens for stability,
|
||||||
|
complemented by bold accents to signify action and resolution.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
More than just a symbol, the Redo logo embodies our commitment
|
||||||
|
to turning financial missteps into opportunities for
|
||||||
|
growth—because in business, every mistake deserves a second
|
||||||
|
chance.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div class="gallery">
|
||||||
|
<div class="gallery__group">
|
||||||
|
<h3>Primary Lockup</h3>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/d587b7edf024e1dfe440e0d7aab56e714aaa90ea.png"
|
||||||
|
alt="Redo 主标志"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="gallery__group">
|
||||||
|
<h3>Clearspace</h3>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/e246b307db7858875c4ab997c79a4e5dac235221.png"
|
||||||
|
alt="Redo 标志安全留白"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="gallery__group">
|
||||||
|
<h3>Secondary Lockups</h3>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/f71100f3c3cc5527b658e530cc2c65f3ce7e084b.png"
|
||||||
|
alt="Redo 次级标志组合"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="gallery__group gallery__group--grid">
|
||||||
|
<h3>Incorrect Usage</h3>
|
||||||
|
<div class="gallery__tiles">
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/54631e3ee92200dde5f4b5773ac4d79e0c327d1b.png"
|
||||||
|
alt="错误尺寸示例"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/c842dcf168f3288441c14835891443b5275d3411.svg"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span>Do not resize the mark</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/3f90bcf89a2d0ff5f4a56ce8e1f56171e020b390.png"
|
||||||
|
alt="错误旋转示例"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/c842dcf168f3288441c14835891443b5275d3411.svg"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span>Do not rotate the logo</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/531fe144f97bd42e170b9dd78a6fd9e593acfd7a.png"
|
||||||
|
alt="错误配色示例"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/c842dcf168f3288441c14835891443b5275d3411.svg"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span>Do not change the color of the mark alone</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/ba43717b3bfb4419fe61acbc84b232e3935c62dd.png"
|
||||||
|
alt="错误描边示例"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/c842dcf168f3288441c14835891443b5275d3411.svg"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span>Do not outline the logo</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/0d56df29b770bd61627e15752eb0bece17277dc5.png"
|
||||||
|
alt="错误倒置示例"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/c842dcf168f3288441c14835891443b5275d3411.svg"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span>Do not reverse the lockup</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/ce388d9a50576825c6d5269ba20e69e4e70366fa.png"
|
||||||
|
alt="错误渐变示例"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/c842dcf168f3288441c14835891443b5275d3411.svg"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span>Do not add gradients to the logo</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gallery__group">
|
||||||
|
<h3>Partnerships</h3>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/f601bdb06822f42601f98ad9bdd2e7a00df5cef8.png"
|
||||||
|
alt="合作伙伴标志使用示例"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="color" class="section section--color">
|
||||||
|
<header>
|
||||||
|
<h2><span>04</span> Color</h2>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div class="palette">
|
||||||
|
<div class="palette__group">
|
||||||
|
<h3>Primary Palette</h3>
|
||||||
|
<div class="swatches">
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #fa9819"></span>
|
||||||
|
<p>Orange</p>
|
||||||
|
<p class="swatch__code">Hex: #FA9819</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #b6c9cf"></span>
|
||||||
|
<p>Blue Tint</p>
|
||||||
|
<p class="swatch__code">Hex: #B6C9CF</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span
|
||||||
|
class="swatch__color swatch__color--border"
|
||||||
|
style="--swatch: #ffffff"
|
||||||
|
></span>
|
||||||
|
<p>White</p>
|
||||||
|
<p class="swatch__code">Hex: #FFFFFF</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #c6ebf7"></span>
|
||||||
|
<p>Baby Blue</p>
|
||||||
|
<p class="swatch__code">Hex: #C6EBF7</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="palette__group">
|
||||||
|
<h3>Secondary Palette</h3>
|
||||||
|
<div class="swatches swatches--wrap">
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #1e3d59"></span>
|
||||||
|
<p>Navy</p>
|
||||||
|
<p class="swatch__code">Hex: #1E3D59</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #48749e"></span>
|
||||||
|
<p>Caption</p>
|
||||||
|
<p class="swatch__code">Hex: #48749E</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #deeefe"></span>
|
||||||
|
<p>Sky Blue</p>
|
||||||
|
<p class="swatch__code">Hex: #DEEEFE</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #e8ebef"></span>
|
||||||
|
<p>Off-blue</p>
|
||||||
|
<p class="swatch__code">Hex: #E8EBEF</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #f45f00"></span>
|
||||||
|
<p>Deep Orange</p>
|
||||||
|
<p class="swatch__code">Hex: #F45F00</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #000000"></span>
|
||||||
|
<p>Black</p>
|
||||||
|
<p class="swatch__code">Hex: #000000</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #a3a3a3"></span>
|
||||||
|
<p>Dark Grey</p>
|
||||||
|
<p class="swatch__code">Hex: #A3A3A3</p>
|
||||||
|
</div>
|
||||||
|
<div class="swatch">
|
||||||
|
<span class="swatch__color" style="--swatch: #e5e5e5"></span>
|
||||||
|
<p>Grey</p>
|
||||||
|
<p class="swatch__code">Hex: #E5E5E5</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="palette__group">
|
||||||
|
<h3>Gradient Palette</h3>
|
||||||
|
<div class="gradients">
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/09d469ad80f54bf22d0f0c6eb5202d72fe22deb1.png"
|
||||||
|
alt="渐变 1"
|
||||||
|
/>
|
||||||
|
<figcaption>Gradient 1</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/fb50f2cfef6a46b03a3845c3f1e185c248776b22.png"
|
||||||
|
alt="渐变 2"
|
||||||
|
/>
|
||||||
|
<figcaption>Gradient 2</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/5f5ba4089e0ab088927557165f53e6157c004932.png"
|
||||||
|
alt="渐变 3"
|
||||||
|
/>
|
||||||
|
<figcaption>Gradient 3</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/40680016abd32e966ae8688bd9aa63a8964667e8.png"
|
||||||
|
alt="渐变 4"
|
||||||
|
/>
|
||||||
|
<figcaption>Gradient 4</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="typography" class="section section--typography">
|
||||||
|
<header>
|
||||||
|
<h2><span>05</span> Typography</h2>
|
||||||
|
<div class="section__body">
|
||||||
|
<p>
|
||||||
|
Redo’s typography balances clarity and professionalism with a
|
||||||
|
modern yet timeless type pairing, reinforcing our commitment
|
||||||
|
to accuracy, efficiency, and financial stability.
|
||||||
|
</p>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/11985e79ac7ac6bc48f9c95ee9381fa1b343172d.png"
|
||||||
|
alt="Redo 字体示例"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<p>
|
||||||
|
Primary Sans-Serif <span class="highlight">(Rethink Sans Reg)</span>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Secondary Serif <span class="highlight">(Hedvig Letters Serif)</span>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="type-details">
|
||||||
|
<div class="type-details__group">
|
||||||
|
<h3>Primary Typeface</h3>
|
||||||
|
<p class="type-details__sample type-details__sample--sans">
|
||||||
|
Rethink Sans Reg
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="type-details__group">
|
||||||
|
<h3>Secondary Typeface</h3>
|
||||||
|
<p class="type-details__sample type-details__sample--serif">
|
||||||
|
Hedvig Letters Serif
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="type-sizing">
|
||||||
|
<h3>Sizing</h3>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p class="type-sizing__heading size--xl">
|
||||||
|
Clear Up Confusion, Gain Peace of Mind
|
||||||
|
</p>
|
||||||
|
<div class="type-sizing__meta">
|
||||||
|
<span>Type Sizes > 72pt/px</span>
|
||||||
|
<span>100% Leading</span>
|
||||||
|
<span>-2% Tracking</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="type-sizing__heading size--lg">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<div class="type-sizing__meta">
|
||||||
|
<span>Type Sizes 55–72pt/px</span>
|
||||||
|
<span>110% Leading</span>
|
||||||
|
<span>-2% Tracking</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="type-sizing__heading size--md">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<div class="type-sizing__meta">
|
||||||
|
<span>Type Sizes 24–55pt/px</span>
|
||||||
|
<span>120% Leading</span>
|
||||||
|
<span>-1% Tracking</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="type-sizing__heading size--sm">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<div class="type-sizing__meta">
|
||||||
|
<span>Type Sizes 0–24pt/px</span>
|
||||||
|
<span>130% Leading</span>
|
||||||
|
<span>0% Tracking</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="art-direction" class="section section--art">
|
||||||
|
<header>
|
||||||
|
<h2><span>06</span> Art Direction</h2>
|
||||||
|
<p>
|
||||||
|
Redo’s photography style reinforces our brand’s core values—
|
||||||
|
trust, clarity, and financial empowerment—by showcasing visuals
|
||||||
|
that reflect professionalism, accuracy, and control.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div class="photo-grid">
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/6478c217273757a655a984c8a0e5d361a6657555.png"
|
||||||
|
alt="现代办公空间照片"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<strong>Clean & Casual</strong>
|
||||||
|
<span
|
||||||
|
>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.</span
|
||||||
|
>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/9cec9446cde58bb130b64e8d067253839260d2d5.png"
|
||||||
|
alt="科技场景照片"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<strong>Subtle Technology Integration</strong>
|
||||||
|
<span
|
||||||
|
>Include financial technology elements—dashboards, tablets, or
|
||||||
|
hands interacting with tools—to highlight Redo’s tech-driven
|
||||||
|
approach.</span
|
||||||
|
>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/b1209199bcb4d964af7b2731b6a86e8dba75f367.png"
|
||||||
|
alt="团队讨论照片"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<strong>Financial Storytelling</strong>
|
||||||
|
<span
|
||||||
|
>Capture real-world financial scenarios—professionals analyzing
|
||||||
|
reports and teams discussing strategies—to reinforce control of
|
||||||
|
finances.</span
|
||||||
|
>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/1191b19feec60c41ddb32f779f3a5007cf369453.png"
|
||||||
|
alt="自信专注的人物照片"
|
||||||
|
/>
|
||||||
|
<figcaption>
|
||||||
|
<strong>People with Confidence & Focus</strong>
|
||||||
|
<span
|
||||||
|
>Show people who feel empowered and in control, highlighting the
|
||||||
|
clarity Redo brings to financial lives.</span
|
||||||
|
>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__top">
|
||||||
|
<div class="footer__logo">
|
||||||
|
<img
|
||||||
|
src="http://localhost:3845/assets/75fdc12f7efbf1ff5a683c7bee1127e8930f2baf.svg"
|
||||||
|
alt="Redo 页脚标志"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="footer__links">
|
||||||
|
<a href="https://www.figma.com/sites" target="_blank" rel="noreferrer"
|
||||||
|
>Download Kit</a
|
||||||
|
>
|
||||||
|
<a href="https://www.figma.com/sites" target="_blank" rel="noreferrer"
|
||||||
|
>Contact Us</a
|
||||||
|
>
|
||||||
|
<a href="#top" class="footer__top-link">Back to the top</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer__bottom">
|
||||||
|
<div class="footer__legal">
|
||||||
|
<span>© Redo</span>
|
||||||
|
<a href="https://figma.com/sites" target="_blank" rel="noreferrer">Legal</a>
|
||||||
|
<a href="https://figma.com/sites" target="_blank" rel="noreferrer">Privacy</a>
|
||||||
|
</div>
|
||||||
|
<span>All Rights Reserved</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
learn.md
Normal file
32
learn.md
Normal file
@@ -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. 渐变色
|
||||||
|
|
||||||
|
|
||||||
16
note.md
Normal file
16
note.md
Normal file
@@ -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
|
||||||
|
❓❓❓
|
||||||
|
|
||||||
628
styles.css
Normal file
628
styles.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user