gavin/Figma-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
douboer
2025-10-19 21:22:27 +08:00
commit a6305f356c
4 changed files with 1366 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

690
index.html Normal file
View 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 &amp; 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 &gt; 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 &amp; 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 &amp; 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
View 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
View 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
View 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;
}
}