v0.0.01b
This commit is contained in:
53
.design/system/BRAND-SYSTEM.md
Normal file
53
.design/system/BRAND-SYSTEM.md
Normal file
@@ -0,0 +1,53 @@
|
||||
# Malenia — brand system
|
||||
|
||||
Generated by the branding-agent engine from a single **seed** (20 fields).
|
||||
Everything below is *derived* — no token here was hand-authored.
|
||||
|
||||
- **slug:** `malenia`
|
||||
- **source:** https://malenia.space/
|
||||
- **primary seed color:** `#c9a84c`
|
||||
- **derived tokens per theme:** 218
|
||||
- **themes:** default · dark · compact (same seed, different algorithm)
|
||||
|
||||
## Files
|
||||
|
||||
| Path | What it is |
|
||||
| --- | --- |
|
||||
| `seed.json` | Generated snapshot of the effective seed; persistent overrides live in `brand.json.seed`. |
|
||||
| `tokens.default.json` | Full derived DesignTokens (light). |
|
||||
| `tokens.dark.json` | Same seed, dark algorithm. |
|
||||
| `tokens.compact.json` | Same seed, compact (dense) algorithm. |
|
||||
| `variables.css` | `:root{}` + `.dark{}` CSS custom properties (`--brand-*`). |
|
||||
| `variables.dark.css` | Standalone `:root{}` for the dark theme. |
|
||||
| `theme.json` | antd `ConfigProvider` theme (token + algorithm). |
|
||||
| `kit.html` | Themed component showcase (light). |
|
||||
| `kit.dark.html` | Themed component showcase (dark). |
|
||||
| `artifacts/landing.html` | Full landing page (hero → features → pricing → FAQ → CTA). |
|
||||
| `artifacts/deck.html` | 9-slide 16:9 pitch deck with keyboard navigation. |
|
||||
| `artifacts/poster.html` | 3:4 print-style poster. |
|
||||
| `artifacts/email.html` | A marketing email. |
|
||||
| `artifacts/newsletter.html` | Multi-story digest email. |
|
||||
| `artifacts/form.html` | Split-screen contact / signup page. |
|
||||
| `index.html` | Gallery linking everything + live component preview. |
|
||||
|
||||
## How to re-theme
|
||||
|
||||
The whole system is regenerated from `brand.json` and optional
|
||||
`brand.json.seed` overrides. Persist authored overrides there, then run
|
||||
`od brand finalize <brand-id>` — every downstream token, component and artifact
|
||||
follows. Do not edit `system/seed.json` directly; finalize replaces it.
|
||||
|
||||
- **Change the brand color:** edit the accent role or `seed.colorPrimary` in `brand.json`.
|
||||
The 10-step palette, all interaction states, the primary background/border and
|
||||
every component that references `var(--brand-color-primary)` update together.
|
||||
- **Light → dark:** the dark theme is the same seed run through the `"dark"`
|
||||
algorithm — load `variables.dark.css` (or add the `.dark` class).
|
||||
- **Density:** the `"compact"` algorithm tightens spacing & control heights
|
||||
while keeping colors identical.
|
||||
|
||||
## Add a new artifact type
|
||||
|
||||
`renderArtifact(kind, brand, tokens)` already accepts every `AssetKind`
|
||||
(`landing | deck | poster | email | newsletter | form`). Add the kind to the
|
||||
build's artifact list to ship it in the bundle; kinds without a bespoke layout
|
||||
fall back to a sensible card+button page.
|
||||
782
.design/system/artifacts/deck.html
Normal file
782
.design/system/artifacts/deck.html
Normal file
@@ -0,0 +1,782 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style data-brand-fonts>
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-600.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Tenor Sans";
|
||||
src: url("../../fonts/tenor-sans-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Malenia — Pitch deck</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap" />
|
||||
<style>
|
||||
:root {
|
||||
--brand-color-primary: #c9a84c;
|
||||
--brand-color-primary-bg: #fffef0;
|
||||
--brand-color-primary-bg-hover: #fcfaed;
|
||||
--brand-color-primary-border: #f0eace;
|
||||
--brand-color-primary-border-hover: #e3d69f;
|
||||
--brand-color-primary-hover: #d6bf74;
|
||||
--brand-color-primary-active: #a38336;
|
||||
--brand-color-primary-text: #573e14;
|
||||
--brand-color-success: #52c41a;
|
||||
--brand-color-success-bg: #f6ffed;
|
||||
--brand-color-success-border: #b6eb8f;
|
||||
--brand-color-success-hover: #72d13d;
|
||||
--brand-color-success-active: #389e0d;
|
||||
--brand-color-warning: #faad14;
|
||||
--brand-color-warning-bg: #fffbe6;
|
||||
--brand-color-warning-border: #ffe58f;
|
||||
--brand-color-warning-hover: #ffc53d;
|
||||
--brand-color-warning-active: #d48806;
|
||||
--brand-color-error: #ff4d4f;
|
||||
--brand-color-error-bg: #fff2f0;
|
||||
--brand-color-error-border: #ffccc7;
|
||||
--brand-color-error-hover: #ff7875;
|
||||
--brand-color-error-active: #d9363d;
|
||||
--brand-color-info: #c9a84c;
|
||||
--brand-color-info-bg: #fffef0;
|
||||
--brand-color-info-border: #f0eace;
|
||||
--brand-color-link: #c9a84c;
|
||||
--brand-color-link-hover: #d6bf74;
|
||||
--brand-color-link-active: #a38336;
|
||||
--brand-color-text: #35312b;
|
||||
--brand-color-text-secondary: #68655f;
|
||||
--brand-color-text-tertiary: #95928c;
|
||||
--brand-color-text-quaternary: #c2bfba;
|
||||
--brand-color-fill: #d8d5d0;
|
||||
--brand-color-fill-secondary: #ede9e4;
|
||||
--brand-color-fill-tertiary: #f1eee9;
|
||||
--brand-color-fill-quaternary: #f6f3ed;
|
||||
--brand-color-bg-layout: #f1eee9;
|
||||
--brand-color-bg-container: #faf7f2;
|
||||
--brand-color-bg-elevated: #faf7f2;
|
||||
--brand-color-border: #d8d5d0;
|
||||
--brand-color-border-secondary: #ede9e4;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #fffef0;
|
||||
--brand-primary-palette-2: #fcfaed;
|
||||
--brand-primary-palette-3: #f0eace;
|
||||
--brand-primary-palette-4: #e3d69f;
|
||||
--brand-primary-palette-5: #d6bf74;
|
||||
--brand-primary-palette-6: #c9a84c;
|
||||
--brand-primary-palette-7: #a38336;
|
||||
--brand-primary-palette-8: #7d5f23;
|
||||
--brand-primary-palette-9: #573e14;
|
||||
--brand-primary-palette-10: #30210b;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--brand-font-family);
|
||||
font-size: var(--brand-font-size);
|
||||
line-height: var(--brand-line-height);
|
||||
color: var(--brand-color-text);
|
||||
background: var(--brand-color-bg-layout);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
a { color: var(--brand-color-link); text-decoration: none; }
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
font-family: var(--display-family);
|
||||
line-height: var(--brand-line-height-heading);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-text);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
p { margin: 0; overflow-wrap: break-word; }
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
|
||||
.kicker {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: var(--brand-font-size-sm);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-primary);
|
||||
margin-bottom: var(--brand-size-sm);
|
||||
}
|
||||
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.clamp-2 { -webkit-line-clamp: 2; }
|
||||
.clamp-3 { -webkit-line-clamp: 3; }
|
||||
a[role="button"]{transition:filter .15s ease,transform .15s ease}
|
||||
a[role="button"]:hover{filter:brightness(1.07)}
|
||||
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
|
||||
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
|
||||
details.kit-acc>summary{list-style:none;cursor:pointer}
|
||||
details.kit-acc>summary::-webkit-details-marker{display:none}
|
||||
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
|
||||
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
|
||||
|
||||
html, body { height: 100%; overflow: hidden; }
|
||||
.deck { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
|
||||
.slide { height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 24px; }
|
||||
.frame {
|
||||
position: relative; aspect-ratio: 16 / 9;
|
||||
width: min(1280px, 94vw, calc((100vh - 48px) * 16 / 9));
|
||||
container-type: size;
|
||||
background: var(--brand-color-bg-container);
|
||||
border: var(--brand-line-width) solid var(--brand-color-border-secondary);
|
||||
border-radius: var(--brand-border-radius-lg);
|
||||
box-shadow: 0 24px 64px -24px var(--brand-color-fill-secondary), 0 2px 8px var(--brand-color-fill-quaternary);
|
||||
overflow: hidden; display: flex; flex-direction: column;
|
||||
}
|
||||
/* solid-accent slides (cover + traction + ask): restrained 3-page accent budget */
|
||||
.frame--accent { background: var(--brand-color-primary); border-color: transparent; }
|
||||
.frame--accent .s-kicker { color: rgba(255,255,255,0.72); }
|
||||
.frame--accent .s-kicker::before { background: rgba(255,255,255,0.85); }
|
||||
.frame--accent .s-title, .frame--accent .s-mega, .frame--accent .s-num { color: #fff; }
|
||||
.frame--accent .s-lede, .frame--accent .s-eyebrow { color: rgba(255,255,255,0.85); }
|
||||
.frame--accent .f-head, .frame--accent .f-foot { color: rgba(255,255,255,0.62); }
|
||||
.frame--accent .f-head .rule, .frame--accent .f-foot .rule { background: rgba(255,255,255,0.2); }
|
||||
/* surface slides (alternate bg per §3 视觉一致) */
|
||||
.frame--surface { background: var(--brand-color-bg-layout); }
|
||||
|
||||
.f-head { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; padding: 3cqi 5cqi 0; color: var(--brand-color-text-quaternary); font-size: 1.35cqi; }
|
||||
.f-head .wm { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 1.7cqi; letter-spacing: -0.01em; color: inherit; }
|
||||
.f-head .rule { flex: 1; height: var(--brand-line-width); background: var(--brand-color-border-secondary); }
|
||||
.f-head .ix { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
|
||||
.f-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 5cqi; min-height: 0; overflow: hidden; }
|
||||
/* shrink-to-fit layer: the runtime scales this down about its centre when
|
||||
a slide's content would otherwise exceed the fixed frame (no-clip).
|
||||
flex:none keeps its natural (unshrunk) height so the runtime can
|
||||
measure the true overflow instead of a flex-shrunk box. */
|
||||
.f-fit { flex: none; width: 100%; transform-origin: center center; will-change: transform; }
|
||||
.f-foot { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; padding: 0 5cqi 3cqi; color: var(--brand-color-text-quaternary); font-size: 1.25cqi; }
|
||||
.f-foot .rule { flex: 1; height: var(--brand-line-width); background: var(--brand-color-border-secondary); }
|
||||
|
||||
.s-kicker { display: inline-flex; align-items: center; gap: 1.1cqi; text-transform: uppercase; letter-spacing: 0.18em; font-size: 1.3cqi; color: var(--brand-color-primary); font-weight: var(--brand-font-weight-strong); margin-bottom: 2cqi; }
|
||||
.s-kicker::before { content: ""; width: 2.6cqi; height: 0.32cqi; border-radius: 1cqi; background: var(--brand-color-primary); }
|
||||
.s-eyebrow { font-size: 1.7cqi; color: var(--brand-color-text-tertiary); margin: 0 0 1.6cqi; max-width: 70cqi; }
|
||||
.s-title { font-family: var(--display-family); font-size: 4.6cqi; line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: var(--brand-color-text); max-width: 82cqi; }
|
||||
.s-mega { font-family: var(--display-family); font-size: 8cqi; line-height: 1.02; letter-spacing: -0.025em; margin: 0; color: var(--brand-color-text); }
|
||||
.s-lede { font-size: 1.95cqi; line-height: 1.5; color: var(--brand-color-text-secondary); max-width: 66cqi; margin: 2.4cqi 0 0; }
|
||||
.s-accent { color: var(--brand-color-primary); }
|
||||
.frame--accent .s-accent { color: #fff; }
|
||||
|
||||
.s-grid { display: grid; gap: 2cqi; margin-top: 4cqi; }
|
||||
.s-card { position: relative; background: var(--brand-color-bg-container); border: var(--brand-line-width) solid var(--brand-color-border-secondary); border-radius: 1.4cqi; padding: 2.6cqi; min-width: 0; }
|
||||
.frame--surface .s-card { background: var(--brand-color-bg-container); }
|
||||
.s-card h3 { font-size: 2cqi; line-height: 1.22; margin: 0 0 1cqi; letter-spacing: -0.01em; }
|
||||
.s-card p { font-size: 1.55cqi; line-height: 1.5; color: var(--brand-color-text-secondary); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
|
||||
.s-card .tick { display: inline-flex; align-items: center; justify-content: center; width: 3.4cqi; height: 3.4cqi; border-radius: 1cqi; background: var(--brand-color-primary-bg); color: var(--brand-color-primary); margin-bottom: 1.6cqi; }
|
||||
.s-card .tick svg { width: 1.9cqi; height: 1.9cqi; }
|
||||
|
||||
.s-num { font-family: var(--display-family); font-size: 3.4cqi; font-weight: var(--brand-font-weight-strong); line-height: 1; color: var(--brand-color-primary); margin-bottom: 1.4cqi; letter-spacing: -0.02em; }
|
||||
|
||||
/* metric tiles (market / traction) */
|
||||
.s-metric { min-width: 0; }
|
||||
.s-metric .v { font-family: var(--display-family); font-size: 5cqi; font-weight: var(--brand-font-weight-strong); line-height: 1; letter-spacing: -0.03em; color: var(--brand-color-text); }
|
||||
.frame--accent .s-metric .v { color: #fff; }
|
||||
.s-metric .l { margin-top: 1.2cqi; font-size: 1.5cqi; line-height: 1.35; color: var(--brand-color-text-tertiary); }
|
||||
.frame--accent .s-metric .l { color: rgba(255,255,255,0.78); }
|
||||
|
||||
/* market funnel bars — value labels live OUTSIDE the proportional track in
|
||||
their own auto column, so a long label can never wrap/clip the bar. */
|
||||
.s-bars { display: flex; flex-direction: column; gap: 1.8cqi; margin-top: 3.4cqi; max-width: 82cqi; }
|
||||
.s-bar { display: grid; grid-template-columns: 12cqi 1fr auto; align-items: center; gap: 2cqi; }
|
||||
.s-bar .tag { font-size: 1.5cqi; font-weight: var(--brand-font-weight-strong); color: var(--brand-color-text-secondary); letter-spacing: 0.04em; }
|
||||
.s-bar .lane { min-width: 0; }
|
||||
.s-bar .track { height: 4.2cqi; border-radius: 0.8cqi; }
|
||||
.s-bar .val { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 1.9cqi; color: var(--brand-color-text); white-space: nowrap; }
|
||||
.frame--accent .s-bar .val { color: #fff; }
|
||||
|
||||
/* competition matrix */
|
||||
.s-matrix { display: grid; gap: 1.6cqi; margin-top: 3.4cqi; }
|
||||
.s-matrix .row { display: grid; align-items: center; gap: 1.6cqi; padding: 1.8cqi 2.4cqi; border-radius: 1.2cqi; }
|
||||
.s-matrix .row.head { color: var(--brand-color-text-tertiary); font-size: 1.4cqi; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0; padding-bottom: 0; }
|
||||
.s-matrix .row.them { background: var(--brand-color-bg-container); border: var(--brand-line-width) solid var(--brand-color-border-secondary); }
|
||||
.s-matrix .row.us { background: var(--brand-color-primary-bg); border: 1.5px solid var(--brand-color-primary-border); }
|
||||
.s-matrix .cell { font-size: 1.6cqi; min-width: 0; }
|
||||
.s-matrix .who { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 1.85cqi; letter-spacing: -0.01em; }
|
||||
.s-matrix .us .who { color: var(--brand-color-primary); }
|
||||
.s-matrix .mk { display: inline-flex; align-items: center; justify-content: center; width: 3cqi; height: 3cqi; border-radius: 50%; }
|
||||
.s-matrix .mk svg { width: 1.7cqi; height: 1.7cqi; }
|
||||
.s-matrix .yes { background: var(--brand-color-primary); color: #fff; }
|
||||
.s-matrix .no { background: var(--brand-color-fill-tertiary); color: var(--brand-color-text-quaternary); }
|
||||
|
||||
/* team initials */
|
||||
.s-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; margin-top: 4cqi; }
|
||||
.s-avatar { display: inline-flex; align-items: center; justify-content: center; width: 7cqi; height: 7cqi; border-radius: 50%; font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.6cqi; background: var(--brand-color-primary-bg); color: var(--brand-color-primary); margin-bottom: 1.6cqi; letter-spacing: 0.02em; }
|
||||
|
||||
/* quote / why-now */
|
||||
.s-quote { font-family: var(--display-family); font-size: 3.4cqi; line-height: 1.32; letter-spacing: -0.015em; color: var(--brand-color-text); max-width: 80cqi; margin: 0; }
|
||||
.s-byline { display: flex; align-items: center; gap: 1.8cqi; margin-top: 3.6cqi; }
|
||||
.s-byline .av { display: inline-flex; align-items: center; justify-content: center; width: 4.6cqi; height: 4.6cqi; border-radius: 50%; background: var(--brand-color-primary-bg); color: var(--brand-color-primary); font-weight: var(--brand-font-weight-strong); font-size: 1.7cqi; }
|
||||
.s-byline .n { font-weight: var(--brand-font-weight-strong); font-size: 1.75cqi; color: var(--brand-color-text); }
|
||||
.s-byline .r { font-size: 1.45cqi; color: var(--brand-color-text-tertiary); }
|
||||
|
||||
/* ask checklist */
|
||||
.s-ask { display: flex; flex-direction: column; gap: 1.8cqi; margin-top: 3.6cqi; max-width: 70cqi; }
|
||||
.s-ask .item { display: flex; align-items: flex-start; gap: 1.8cqi; font-size: 2cqi; line-height: 1.4; color: #fff; }
|
||||
.s-ask .item .b { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3.4cqi; height: 3.4cqi; border-radius: 0.9cqi; background: rgba(255,255,255,0.16); margin-top: 0.2cqi; }
|
||||
.s-ask .item .b svg { width: 1.9cqi; height: 1.9cqi; }
|
||||
.s-ask .item .k { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); }
|
||||
.s-cta { display: inline-flex; align-items: center; gap: 1.4cqi; margin-top: 4cqi; height: 6cqi; padding: 0 3.4cqi; border-radius: 1.2cqi; background: #fff; color: var(--brand-color-primary); font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.1cqi; letter-spacing: -0.01em; }
|
||||
.s-cta svg { width: 2cqi; height: 2cqi; }
|
||||
|
||||
/* product wireframe motif (div/SVG, no screenshots) */
|
||||
.s-screen { margin-top: 3.6cqi; border-radius: 1.6cqi; border: var(--brand-line-width) solid var(--brand-color-border-secondary); background: var(--brand-color-bg-container); overflow: hidden; box-shadow: 0 12px 32px -16px var(--brand-color-fill-secondary); }
|
||||
.s-screen .bar { display: flex; align-items: center; gap: 1cqi; padding: 1.4cqi 1.8cqi; border-bottom: var(--brand-line-width) solid var(--brand-color-border-secondary); }
|
||||
.s-screen .bar i { width: 1.2cqi; height: 1.2cqi; border-radius: 50%; background: var(--brand-color-fill-tertiary); }
|
||||
.s-screen .bar .url { margin-left: 1cqi; height: 2.4cqi; flex: 1; max-width: 36cqi; border-radius: 1cqi; background: var(--brand-color-fill-quaternary); }
|
||||
.s-screen .canvas { display: grid; grid-template-columns: 16cqi 1fr; min-height: 22cqi; }
|
||||
.s-screen .nav { border-right: var(--brand-line-width) solid var(--brand-color-border-secondary); padding: 2cqi 1.6cqi; display: flex; flex-direction: column; gap: 1.4cqi; }
|
||||
.s-screen .nav span { height: 1.5cqi; border-radius: 1cqi; background: var(--brand-color-fill-quaternary); }
|
||||
.s-screen .nav span:first-child { background: var(--brand-color-primary); width: 70%; }
|
||||
.s-screen .main { padding: 2.4cqi; display: flex; flex-direction: column; gap: 1.6cqi; }
|
||||
.s-screen .main .h { height: 3cqi; width: 44%; border-radius: 0.8cqi; background: var(--brand-color-fill-tertiary); }
|
||||
.s-screen .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqi; }
|
||||
.s-screen .tiles i { height: 9cqi; border-radius: 1.2cqi; background: var(--brand-color-fill-quaternary); border: var(--brand-line-width) solid var(--brand-color-border-secondary); }
|
||||
.s-screen .tiles i:first-child { background: var(--brand-color-primary-bg); border-color: var(--brand-color-primary-border); }
|
||||
|
||||
/* solution: oversized signature line */
|
||||
.s-pillars { display: flex; flex-wrap: wrap; gap: 1.2cqi; margin-top: 3.6cqi; }
|
||||
.s-pill { display: inline-flex; align-items: center; gap: 1cqi; padding: 1.2cqi 2cqi; border-radius: 6cqi; border: var(--brand-line-width) solid var(--brand-color-border); font-size: 1.6cqi; font-weight: var(--brand-font-weight-strong); color: var(--brand-color-text-secondary); }
|
||||
.s-pill .dot { width: 1cqi; height: 1cqi; border-radius: 50%; background: var(--brand-color-primary); }
|
||||
|
||||
/* pager UI */
|
||||
.deck-ui { position: fixed; right: 24px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 10px; }
|
||||
.deck-ui button {
|
||||
width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
|
||||
border: var(--brand-line-width) solid var(--brand-color-border);
|
||||
background: var(--brand-color-bg-container); color: var(--brand-color-text-secondary);
|
||||
font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
|
||||
transition: border-color .15s ease, color .15s ease;
|
||||
}
|
||||
.deck-ui button:hover { border-color: var(--brand-color-primary); color: var(--brand-color-primary); }
|
||||
.deck-counter { font-size: 12px; color: var(--brand-color-text-tertiary); font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; letter-spacing: 0.04em; }
|
||||
.deck-dots { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 30; display: flex; gap: 8px; }
|
||||
.deck-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-color-fill); cursor: pointer; transition: all .2s ease; }
|
||||
.deck-dot.on { background: var(--brand-color-primary); transform: scale(1.3); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="deck">
|
||||
<section class="slide">
|
||||
<div class="frame frame--accent">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">SOPHISTICATED · QUIET · ESSENTIAL</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">Sophisticated · Quiet · Essential</span>
|
||||
<h1 class="s-mega">Malenia</h1>
|
||||
<p class="s-lede" style="font-size:2.6cqi;color:rgba(255,255,255,0.92);">Свобода. Практика. Простота.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">01 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame frame--surface">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">THE PROBLEM</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">The problem</span>
|
||||
<h2 class="s-title">Getting this category right is still painfully hard.</h2>
|
||||
<p class="s-lede">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</p>
|
||||
<div class="s-grid" style="grid-template-columns:repeat(3,1fr);">
|
||||
<div class="s-card"><span class="tick"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span><h3>Tools don't talk</h3><p>Work scatters across apps that never share a source of truth, so context is lost on every handoff.</p></div>
|
||||
<div class="s-card"><span class="tick"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span><h3>Every loop costs a day</h3><p>Iteration stalls in coordination — approvals, exports, re-dos — long before anything ships.</p></div>
|
||||
<div class="s-card"><span class="tick"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span><h3>Quality is a coin flip</h3><p>Output depends on whoever happened to do the work, not on a standard you can rely on.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">02 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">THE SOLUTION</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">The solution</span>
|
||||
<h2 class="s-title"><span class="s-accent">Malenia</span> is how teams get свобода. Практика. Простота</h2>
|
||||
<div class="s-pillars">
|
||||
<span class="s-pill"><span class="dot"></span>Network freedom</span>
|
||||
<span class="s-pill"><span class="dot"></span>Practical simplicity</span>
|
||||
<span class="s-pill"><span class="dot"></span>Aesthetic restraint</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">03 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">WHY NOW</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">Why now</span>
|
||||
<p class="s-quote">The shift toward <span class="s-accent">sophisticated</span>, accountable this category is happening now — and the teams that move first set the standard.</p>
|
||||
<div class="s-byline">
|
||||
<span class="av">M</span>
|
||||
<div><div class="n">Malenia</div><div class="r">malenia.space</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">04 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame frame--surface">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">MARKET</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">Market</span>
|
||||
<h2 class="s-title">The opportunity is large and still wide open.</h2>
|
||||
<div class="s-bars">
|
||||
<div class="s-bar"><span class="tag">TAM</span>
|
||||
<div class="lane"><div class="track" style="width:100%;background:var(--brand-color-primary);"></div></div>
|
||||
<span class="val">$48B total market</span></div>
|
||||
<div class="s-bar"><span class="tag">SAM</span>
|
||||
<div class="lane"><div class="track" style="width:64%;background:var(--brand-color-primary-hover);"></div></div>
|
||||
<span class="val">$12B reachable today</span></div>
|
||||
<div class="s-bar"><span class="tag">SOM</span>
|
||||
<div class="lane"><div class="track" style="width:30%;background:var(--brand-color-primary-active);"></div></div>
|
||||
<span class="val">$1.4B near-term wedge</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">05 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">PRODUCT</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">Product</span>
|
||||
<h2 class="s-title">Malenia is real, shipping, and good to use today.</h2>
|
||||
<div class="s-screen">
|
||||
<div class="bar"><i></i><i></i><i></i><span class="url"></span></div>
|
||||
<div class="canvas">
|
||||
<div class="nav"><span></span><span></span><span></span><span></span><span></span></div>
|
||||
<div class="main"><div class="h"></div><div class="tiles"><i></i><i></i><i></i></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">06 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame frame--surface">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">BUSINESS MODEL</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">Business model</span>
|
||||
<h2 class="s-title">We make money the moment we create value.</h2>
|
||||
<div class="s-grid" style="grid-template-columns:repeat(3,1fr);">
|
||||
<div class="s-card">
|
||||
<h3>Starter</h3>
|
||||
<div style="font-family:var(--display-family);font-size:3.4cqi;font-weight:var(--brand-font-weight-strong);letter-spacing:-0.02em;color:var(--brand-color-text);margin:0.6cqi 0 1.4cqi;">$0<span style="font-size:1.3cqi;color:var(--brand-color-text-tertiary);font-weight:400;"> / mo</span></div>
|
||||
<p style="-webkit-line-clamp:3;">Up to 3 projects · Network freedom · Community support</p>
|
||||
</div>
|
||||
<div class="s-card" style="border-color:var(--brand-color-primary);border-width:1.5px;">
|
||||
<h3>Pro</h3>
|
||||
<div style="font-family:var(--display-family);font-size:3.4cqi;font-weight:var(--brand-font-weight-strong);letter-spacing:-0.02em;color:var(--brand-color-text);margin:0.6cqi 0 1.4cqi;">$29<span style="font-size:1.3cqi;color:var(--brand-color-text-tertiary);font-weight:400;"> / mo</span></div>
|
||||
<p style="-webkit-line-clamp:3;">Unlimited projects · Practical simplicity · Aesthetic restraint</p>
|
||||
</div>
|
||||
<div class="s-card">
|
||||
<h3>Enterprise</h3>
|
||||
<div style="font-family:var(--display-family);font-size:3.4cqi;font-weight:var(--brand-font-weight-strong);letter-spacing:-0.02em;color:var(--brand-color-text);margin:0.6cqi 0 1.4cqi;">Custom<span style="font-size:1.3cqi;color:var(--brand-color-text-tertiary);font-weight:400;"> </span></div>
|
||||
<p style="-webkit-line-clamp:3;">SSO & audit logs · Dedicated success manager · Custom contracts & SLA</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">07 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">COMPETITION & MOAT</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">Competition & moat</span>
|
||||
<h2 class="s-title">Only Malenia is built sophisticated from the ground up.</h2>
|
||||
<div class="s-matrix" style="grid-template-columns:1fr;">
|
||||
<div class="row head" style="grid-template-columns:18cqi repeat(3,1fr);">
|
||||
<span></span><span class="cell">Built for teams</span><span class="cell">Fast to value</span><span class="cell">On-brand by default</span>
|
||||
</div>
|
||||
<div class="row them" style="grid-template-columns:18cqi repeat(3,1fr);">
|
||||
<span class="cell who" style="color:var(--brand-color-text);">Fieldnote</span>
|
||||
<span class="cell"><span class="mk no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></span><span class="cell"><span class="mk no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></span><span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span>
|
||||
</div>
|
||||
<div class="row them" style="grid-template-columns:18cqi repeat(3,1fr);">
|
||||
<span class="cell who" style="color:var(--brand-color-text);">Arcadia</span>
|
||||
<span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="cell"><span class="mk no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></span><span class="cell"><span class="mk no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></span>
|
||||
</div>
|
||||
<div class="row us" style="grid-template-columns:18cqi repeat(3,1fr);">
|
||||
<span class="cell who">Malenia</span>
|
||||
<span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">08 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame frame--accent">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">TRACTION</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">Traction</span>
|
||||
<h2 class="s-title" style="font-size:5cqi;">People already want this — and the line is going up.</h2>
|
||||
<div class="s-grid" style="grid-template-columns:repeat(4,1fr);margin-top:5cqi;">
|
||||
<div class="s-metric"><div class="v">10k+</div><div class="l">Teams onboard</div></div>
|
||||
<div class="s-metric"><div class="v">99.9%</div><div class="l">Uptime SLA</div></div>
|
||||
<div class="s-metric"><div class="v">4.9/5</div><div class="l">Average rating</div></div>
|
||||
<div class="s-metric"><div class="v">120+</div><div class="l">Integrations</div></div>
|
||||
</div>
|
||||
<p class="s-lede" style="color:rgba(255,255,255,0.78);font-size:1.5cqi;max-width:64cqi;margin-top:3.4cqi;">Illustrative figures — replace with your live numbers before pitching.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">09 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame frame--surface">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">TEAM</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">Team</span>
|
||||
<h2 class="s-title">The people behind Malenia have done this before.</h2>
|
||||
<div class="s-team">
|
||||
<div class="s-card" style="background:transparent;border:none;padding:0;">
|
||||
<span class="s-avatar">MC</span>
|
||||
<h3 style="font-size:1.9cqi;margin:0 0 0.4cqi;">Maya Chen</h3>
|
||||
<p style="-webkit-line-clamp:2;">Head of Design, Northwind</p>
|
||||
</div>
|
||||
<div class="s-card" style="background:transparent;border:none;padding:0;">
|
||||
<span class="s-avatar">JW</span>
|
||||
<h3 style="font-size:1.9cqi;margin:0 0 0.4cqi;">Jonas Weber</h3>
|
||||
<p style="-webkit-line-clamp:2;">Engineering Lead, Lumen Labs</p>
|
||||
</div>
|
||||
<div class="s-card" style="background:transparent;border:none;padding:0;">
|
||||
<span class="s-avatar">PN</span>
|
||||
<h3 style="font-size:1.9cqi;margin:0 0 0.4cqi;">Priya Natarajan</h3>
|
||||
<p style="-webkit-line-clamp:2;">Founder, Fieldnote</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">10 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="frame frame--accent">
|
||||
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">THE ASK</span></div>
|
||||
<div class="f-body">
|
||||
<div class="f-fit">
|
||||
<span class="s-kicker">The ask</span>
|
||||
<h2 class="s-mega" style="font-size:6.4cqi;">Let's build the future of this category together.</h2>
|
||||
<div class="s-ask">
|
||||
<div class="item"><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span><span class="k">Partner with us</span> — back the team building the sophisticated standard for this market.</span></div>
|
||||
<div class="item"><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span><span class="k">Fuel the next phase</span> — scale the product, the go-to-market motion, and the team.</span></div>
|
||||
<div class="item"><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span><span class="k">Hit the milestone</span> — reach the next tier of customers and revenue within 12 months.</span></div>
|
||||
</div>
|
||||
<a class="s-cta">Talk to us · malenia.space <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">11 / 11</span></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<div class="deck-dots"><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span></div>
|
||||
<div class="deck-ui">
|
||||
<button class="deck-prev" aria-label="Previous slide">←</button>
|
||||
<span class="deck-counter">1 / 11</span>
|
||||
<button class="deck-next" aria-label="Next slide">→</button>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
/* od-deck-fit: shrink-to-fit guarantee — keep every slide's content inside
|
||||
the fixed 16:9 frame so brand copy of any length never clips. */
|
||||
function fitFrame(body) {
|
||||
var fit = body.querySelector('.f-fit');
|
||||
if (!fit) return;
|
||||
fit.style.transform = 'none';
|
||||
var availH = body.clientHeight;
|
||||
var availW = fit.clientWidth;
|
||||
if (availH <= 0 || availW <= 0) return;
|
||||
var naturalH = fit.offsetHeight;
|
||||
var naturalW = fit.scrollWidth;
|
||||
var scale = Math.min(1, availH / naturalH, availW / naturalW);
|
||||
if (scale < 1) {
|
||||
// small safety margin so descenders never touch the clip edge
|
||||
fit.style.transform = 'scale(' + (scale * 0.98) + ')';
|
||||
}
|
||||
}
|
||||
function fitAll() {
|
||||
[].forEach.call(document.querySelectorAll('.f-body'), fitFrame);
|
||||
}
|
||||
// Fit synchronously rather than via requestAnimationFrame: rAF callbacks are
|
||||
// throttled while the deck is offscreen/occluded, which would leave a slide
|
||||
// unscaled (and clipped) until first paint. A trailing settle pass catches
|
||||
// late reflow (web-font swap, image load).
|
||||
var fitTimer;
|
||||
function scheduleFit() {
|
||||
fitAll();
|
||||
if (fitTimer) clearTimeout(fitTimer);
|
||||
fitTimer = setTimeout(fitAll, 150);
|
||||
}
|
||||
window.addEventListener('resize', scheduleFit);
|
||||
if (document.fonts && document.fonts.ready) {
|
||||
document.fonts.ready.then(fitAll).catch(function () {});
|
||||
}
|
||||
window.addEventListener('load', fitAll);
|
||||
scheduleFit();
|
||||
|
||||
var deck = document.querySelector('.deck');
|
||||
var slides = [].slice.call(document.querySelectorAll('.slide'));
|
||||
var dots = [].slice.call(document.querySelectorAll('.deck-dot'));
|
||||
var counter = document.querySelector('.deck-counter');
|
||||
var idx = 0;
|
||||
function render() {
|
||||
if (counter) counter.textContent = (idx + 1) + ' / ' + slides.length;
|
||||
dots.forEach(function (d, n) { d.classList.toggle('on', n === idx); });
|
||||
}
|
||||
function go(i) {
|
||||
idx = Math.max(0, Math.min(slides.length - 1, i));
|
||||
slides[idx].scrollIntoView({ behavior: 'smooth' });
|
||||
render();
|
||||
}
|
||||
deck.addEventListener('scroll', function () {
|
||||
requestAnimationFrame(function () {
|
||||
var i = Math.round(deck.scrollTop / deck.clientHeight);
|
||||
if (i !== idx && i >= 0 && i < slides.length) { idx = i; render(); }
|
||||
});
|
||||
});
|
||||
window.addEventListener('keydown', function (e) {
|
||||
if (['ArrowDown', 'ArrowRight', 'PageDown', ' '].indexOf(e.key) > -1) { e.preventDefault(); go(idx + 1); }
|
||||
else if (['ArrowUp', 'ArrowLeft', 'PageUp'].indexOf(e.key) > -1) { e.preventDefault(); go(idx - 1); }
|
||||
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
||||
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
||||
});
|
||||
dots.forEach(function (d, n) { d.addEventListener('click', function () { go(n); }); });
|
||||
document.querySelector('.deck-prev').addEventListener('click', function () { go(idx - 1); });
|
||||
document.querySelector('.deck-next').addEventListener('click', function () { go(idx + 1); });
|
||||
render();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
439
.design/system/artifacts/email.html
Normal file
439
.design/system/artifacts/email.html
Normal file
@@ -0,0 +1,439 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style data-brand-fonts>
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-600.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Tenor Sans";
|
||||
src: url("../../fonts/tenor-sans-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Свобода. Практика. Простота — from Malenia</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap" />
|
||||
<style>
|
||||
:root {
|
||||
--brand-color-primary: #c9a84c;
|
||||
--brand-color-primary-bg: #fffef0;
|
||||
--brand-color-primary-bg-hover: #fcfaed;
|
||||
--brand-color-primary-border: #f0eace;
|
||||
--brand-color-primary-border-hover: #e3d69f;
|
||||
--brand-color-primary-hover: #d6bf74;
|
||||
--brand-color-primary-active: #a38336;
|
||||
--brand-color-primary-text: #573e14;
|
||||
--brand-color-success: #52c41a;
|
||||
--brand-color-success-bg: #f6ffed;
|
||||
--brand-color-success-border: #b6eb8f;
|
||||
--brand-color-success-hover: #72d13d;
|
||||
--brand-color-success-active: #389e0d;
|
||||
--brand-color-warning: #faad14;
|
||||
--brand-color-warning-bg: #fffbe6;
|
||||
--brand-color-warning-border: #ffe58f;
|
||||
--brand-color-warning-hover: #ffc53d;
|
||||
--brand-color-warning-active: #d48806;
|
||||
--brand-color-error: #ff4d4f;
|
||||
--brand-color-error-bg: #fff2f0;
|
||||
--brand-color-error-border: #ffccc7;
|
||||
--brand-color-error-hover: #ff7875;
|
||||
--brand-color-error-active: #d9363d;
|
||||
--brand-color-info: #c9a84c;
|
||||
--brand-color-info-bg: #fffef0;
|
||||
--brand-color-info-border: #f0eace;
|
||||
--brand-color-link: #c9a84c;
|
||||
--brand-color-link-hover: #d6bf74;
|
||||
--brand-color-link-active: #a38336;
|
||||
--brand-color-text: #35312b;
|
||||
--brand-color-text-secondary: #68655f;
|
||||
--brand-color-text-tertiary: #95928c;
|
||||
--brand-color-text-quaternary: #c2bfba;
|
||||
--brand-color-fill: #d8d5d0;
|
||||
--brand-color-fill-secondary: #ede9e4;
|
||||
--brand-color-fill-tertiary: #f1eee9;
|
||||
--brand-color-fill-quaternary: #f6f3ed;
|
||||
--brand-color-bg-layout: #f1eee9;
|
||||
--brand-color-bg-container: #faf7f2;
|
||||
--brand-color-bg-elevated: #faf7f2;
|
||||
--brand-color-border: #d8d5d0;
|
||||
--brand-color-border-secondary: #ede9e4;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #fffef0;
|
||||
--brand-primary-palette-2: #fcfaed;
|
||||
--brand-primary-palette-3: #f0eace;
|
||||
--brand-primary-palette-4: #e3d69f;
|
||||
--brand-primary-palette-5: #d6bf74;
|
||||
--brand-primary-palette-6: #c9a84c;
|
||||
--brand-primary-palette-7: #a38336;
|
||||
--brand-primary-palette-8: #7d5f23;
|
||||
--brand-primary-palette-9: #573e14;
|
||||
--brand-primary-palette-10: #30210b;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--brand-font-family);
|
||||
font-size: var(--brand-font-size);
|
||||
line-height: var(--brand-line-height);
|
||||
color: var(--brand-color-text);
|
||||
background: var(--brand-color-bg-layout);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
a { color: var(--brand-color-link); text-decoration: none; }
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
font-family: var(--display-family);
|
||||
line-height: var(--brand-line-height-heading);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-text);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
p { margin: 0; overflow-wrap: break-word; }
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
|
||||
.kicker {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: var(--brand-font-size-sm);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-primary);
|
||||
margin-bottom: var(--brand-size-sm);
|
||||
}
|
||||
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.clamp-2 { -webkit-line-clamp: 2; }
|
||||
.clamp-3 { -webkit-line-clamp: 3; }
|
||||
a[role="button"]{transition:filter .15s ease,transform .15s ease}
|
||||
a[role="button"]:hover{filter:brightness(1.07)}
|
||||
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
|
||||
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
|
||||
details.kit-acc>summary{list-style:none;cursor:pointer}
|
||||
details.kit-acc>summary::-webkit-details-marker{display:none}
|
||||
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
|
||||
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
|
||||
img{border:0;outline:none;text-decoration:none;}table{border-spacing:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- hidden preheader: earns the open, complements the subject, never repeats it -->
|
||||
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:var(--brand-color-bg-layout);opacity:0;">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</div>
|
||||
<!-- whitespace eater so the body copy does not leak into the inbox preview -->
|
||||
<div style="display:none;max-height:0;overflow:hidden;">͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
|
||||
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:var(--brand-color-bg-layout);margin:0;padding:0;">
|
||||
<tr>
|
||||
<td align="center" style="padding:var(--brand-size-xl) var(--brand-size-md);">
|
||||
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:600px;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;">
|
||||
|
||||
<!-- Header: logo only, generous whitespace, no nav -->
|
||||
<tr>
|
||||
<td style="padding:var(--brand-size-lg) var(--brand-size-xl);text-align:center;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);">
|
||||
<span style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);letter-spacing:-0.01em;color:var(--brand-color-text);white-space:nowrap;">Malenia</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Hero: inverted pyramid — conclusion first, then why it matters, then the one CTA -->
|
||||
<tr>
|
||||
<td style="padding:var(--brand-size-xxl) var(--brand-size-xl) var(--brand-size-lg);text-align:center;background:var(--brand-color-primary-bg);">
|
||||
<p style="margin:0 0 var(--brand-size-sm);font-family:var(--brand-font-family);text-transform:uppercase;letter-spacing:0.16em;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-primary);">Sophisticated</p>
|
||||
<h1 style="margin:0 0 var(--brand-size-md);font-family:var(--display-family);font-size:var(--brand-font-size-heading-2);line-height:1.15;letter-spacing:-0.015em;color:var(--brand-color-text);">Свобода. Практика. Простота.</h1>
|
||||
<p style="margin:0 auto var(--brand-size-xl);max-width:46ch;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);line-height:1.55;color:var(--brand-color-text-secondary);">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</p>
|
||||
<!-- the one primary CTA, above the fold -->
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;border-collapse:separate;line-height:100%;">
|
||||
<tr>
|
||||
<td align="center" bgcolor="var(--brand-color-primary)" style="border-radius:var(--brand-border-radius-lg);">
|
||||
<a href="#" target="_blank" style="display:inline-block;min-width:200px;padding:16px var(--brand-size-xl);font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:#ffffff;text-decoration:none;text-align:center;border-radius:var(--brand-border-radius-lg);border:2px solid var(--brand-color-primary);">Get started with Malenia</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Body: scannable, human, one idea per block -->
|
||||
<tr>
|
||||
<td style="padding:var(--brand-size-xl) var(--brand-size-xl) var(--brand-size-sm);">
|
||||
<p style="margin:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:16px;line-height:1.6;color:var(--brand-color-text);">Hi there,</p>
|
||||
<p style="margin:0 0 var(--brand-size-lg);font-family:var(--brand-font-family);font-size:16px;line-height:1.6;color:var(--brand-color-text-secondary);">Here is what Malenia gives your team from the first day — no migration project, no setup tax:</p>
|
||||
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
|
||||
<tr>
|
||||
<td valign="top" style="width:40px;padding:var(--brand-size-sm) var(--brand-size-sm) var(--brand-size-sm) 0;"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;" aria-hidden="true"><circle cx="10" cy="10" r="9" stroke="var(--brand-color-primary)" stroke-width="1.5" opacity="0.45"/><path d="M6 10.2l2.6 2.6L14.2 7.4" stroke="var(--brand-color-primary)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></td>
|
||||
<td valign="top" style="padding:var(--brand-size-sm) 0;">
|
||||
<p style="margin:0 0 4px;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1.3;">Network freedom</p>
|
||||
<p style="margin:0;font-family:var(--brand-font-family);font-size:16px;color:var(--brand-color-text-secondary);line-height:1.55;">Network freedom is built into Malenia from day one — not bolted on later.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" style="width:40px;padding:var(--brand-size-sm) var(--brand-size-sm) var(--brand-size-sm) 0;"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;" aria-hidden="true"><circle cx="10" cy="10" r="9" stroke="var(--brand-color-primary)" stroke-width="1.5" opacity="0.45"/><path d="M6 10.2l2.6 2.6L14.2 7.4" stroke="var(--brand-color-primary)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></td>
|
||||
<td valign="top" style="padding:var(--brand-size-sm) 0;">
|
||||
<p style="margin:0 0 4px;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1.3;">Practical simplicity</p>
|
||||
<p style="margin:0;font-family:var(--brand-font-family);font-size:16px;color:var(--brand-color-text-secondary);line-height:1.55;">Practical simplicity is built into Malenia from day one — not bolted on later.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" style="width:40px;padding:var(--brand-size-sm) var(--brand-size-sm) var(--brand-size-sm) 0;"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;" aria-hidden="true"><circle cx="10" cy="10" r="9" stroke="var(--brand-color-primary)" stroke-width="1.5" opacity="0.45"/><path d="M6 10.2l2.6 2.6L14.2 7.4" stroke="var(--brand-color-primary)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></td>
|
||||
<td valign="top" style="padding:var(--brand-size-sm) 0;">
|
||||
<p style="margin:0 0 4px;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1.3;">Aesthetic restraint</p>
|
||||
<p style="margin:0;font-family:var(--brand-font-family);font-size:16px;color:var(--brand-color-text-secondary);line-height:1.55;">Aesthetic restraint is built into Malenia from day one — not bolted on later.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- One named proof point: a person beats a paragraph of adjectives -->
|
||||
<tr>
|
||||
<td style="padding:0 var(--brand-size-xl) var(--brand-size-lg);">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td style="padding:var(--brand-size-lg);background:var(--brand-color-fill-quaternary);border-left:3px solid var(--brand-color-primary);border-radius:var(--brand-border-radius);">
|
||||
<p style="margin:0 0 var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);line-height:1.55;color:var(--brand-color-text);">“Malenia is the first tool here that actually feels Sophisticated. It was part of our daily flow inside a week.”</p>
|
||||
<p style="margin:0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);"><strong style="color:var(--brand-color-text);font-weight:var(--brand-font-weight-strong);">Maya Chen</strong> · Head of Design, Northwind</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- CTA repeated once near the end — same single action -->
|
||||
<tr>
|
||||
<td style="padding:var(--brand-size-sm) var(--brand-size-xl) var(--brand-size-xl);text-align:center;">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;border-collapse:separate;line-height:100%;">
|
||||
<tr>
|
||||
<td align="center" bgcolor="var(--brand-color-primary)" style="border-radius:var(--brand-border-radius-lg);">
|
||||
<a href="#" target="_blank" style="display:inline-block;min-width:200px;padding:16px var(--brand-size-xl);font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:#ffffff;text-decoration:none;text-align:center;border-radius:var(--brand-border-radius-lg);border:2px solid var(--brand-color-primary);">Get started with Malenia</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin:var(--brand-size-md) 0 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.5;">Questions? Just reply to this email — a real person reads every message.</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer: working unsubscribe + physical address placeholder + brand -->
|
||||
<tr>
|
||||
<td style="padding:var(--brand-size-xl) var(--brand-size-xl);background:var(--brand-color-fill-quaternary);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);text-align:center;">
|
||||
<p style="margin:0 0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.5;">You are receiving this because you signed up to hear from Malenia.</p>
|
||||
<p style="margin:0 0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.5;"><a href="#" target="_blank" style="color:var(--brand-color-text-tertiary);text-decoration:underline;">Update preferences</a> · <a href="#" target="_blank" style="color:var(--brand-color-text-tertiary);text-decoration:underline;">Unsubscribe</a></p>
|
||||
<p style="margin:0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-quaternary);line-height:1.5;">Malenia · 100 Market Street, Suite 200 · malenia.space</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
442
.design/system/artifacts/form.html
Normal file
442
.design/system/artifacts/form.html
Normal file
@@ -0,0 +1,442 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style data-brand-fonts>
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-600.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Tenor Sans";
|
||||
src: url("../../fonts/tenor-sans-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Malenia — Get started</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap" />
|
||||
<style>
|
||||
:root {
|
||||
--brand-color-primary: #c9a84c;
|
||||
--brand-color-primary-bg: #fffef0;
|
||||
--brand-color-primary-bg-hover: #fcfaed;
|
||||
--brand-color-primary-border: #f0eace;
|
||||
--brand-color-primary-border-hover: #e3d69f;
|
||||
--brand-color-primary-hover: #d6bf74;
|
||||
--brand-color-primary-active: #a38336;
|
||||
--brand-color-primary-text: #573e14;
|
||||
--brand-color-success: #52c41a;
|
||||
--brand-color-success-bg: #f6ffed;
|
||||
--brand-color-success-border: #b6eb8f;
|
||||
--brand-color-success-hover: #72d13d;
|
||||
--brand-color-success-active: #389e0d;
|
||||
--brand-color-warning: #faad14;
|
||||
--brand-color-warning-bg: #fffbe6;
|
||||
--brand-color-warning-border: #ffe58f;
|
||||
--brand-color-warning-hover: #ffc53d;
|
||||
--brand-color-warning-active: #d48806;
|
||||
--brand-color-error: #ff4d4f;
|
||||
--brand-color-error-bg: #fff2f0;
|
||||
--brand-color-error-border: #ffccc7;
|
||||
--brand-color-error-hover: #ff7875;
|
||||
--brand-color-error-active: #d9363d;
|
||||
--brand-color-info: #c9a84c;
|
||||
--brand-color-info-bg: #fffef0;
|
||||
--brand-color-info-border: #f0eace;
|
||||
--brand-color-link: #c9a84c;
|
||||
--brand-color-link-hover: #d6bf74;
|
||||
--brand-color-link-active: #a38336;
|
||||
--brand-color-text: #35312b;
|
||||
--brand-color-text-secondary: #68655f;
|
||||
--brand-color-text-tertiary: #95928c;
|
||||
--brand-color-text-quaternary: #c2bfba;
|
||||
--brand-color-fill: #d8d5d0;
|
||||
--brand-color-fill-secondary: #ede9e4;
|
||||
--brand-color-fill-tertiary: #f1eee9;
|
||||
--brand-color-fill-quaternary: #f6f3ed;
|
||||
--brand-color-bg-layout: #f1eee9;
|
||||
--brand-color-bg-container: #faf7f2;
|
||||
--brand-color-bg-elevated: #faf7f2;
|
||||
--brand-color-border: #d8d5d0;
|
||||
--brand-color-border-secondary: #ede9e4;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #fffef0;
|
||||
--brand-primary-palette-2: #fcfaed;
|
||||
--brand-primary-palette-3: #f0eace;
|
||||
--brand-primary-palette-4: #e3d69f;
|
||||
--brand-primary-palette-5: #d6bf74;
|
||||
--brand-primary-palette-6: #c9a84c;
|
||||
--brand-primary-palette-7: #a38336;
|
||||
--brand-primary-palette-8: #7d5f23;
|
||||
--brand-primary-palette-9: #573e14;
|
||||
--brand-primary-palette-10: #30210b;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--brand-font-family);
|
||||
font-size: var(--brand-font-size);
|
||||
line-height: var(--brand-line-height);
|
||||
color: var(--brand-color-text);
|
||||
background: var(--brand-color-bg-layout);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
a { color: var(--brand-color-link); text-decoration: none; }
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
font-family: var(--display-family);
|
||||
line-height: var(--brand-line-height-heading);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-text);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
p { margin: 0; overflow-wrap: break-word; }
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
|
||||
.kicker {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: var(--brand-font-size-sm);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-primary);
|
||||
margin-bottom: var(--brand-size-sm);
|
||||
}
|
||||
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.clamp-2 { -webkit-line-clamp: 2; }
|
||||
.clamp-3 { -webkit-line-clamp: 3; }
|
||||
a[role="button"]{transition:filter .15s ease,transform .15s ease}
|
||||
a[role="button"]:hover{filter:brightness(1.07)}
|
||||
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
|
||||
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
|
||||
details.kit-acc>summary{list-style:none;cursor:pointer}
|
||||
details.kit-acc>summary::-webkit-details-marker{display:none}
|
||||
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
|
||||
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
|
||||
|
||||
.form-split { display: grid; grid-template-columns: minmax(320px, 4.6fr) minmax(380px, 5.4fr); min-height: 100vh; }
|
||||
@media (max-width: 900px) { .form-split { grid-template-columns: 1fr; } .form-brand { min-height: 340px; } }
|
||||
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--brand-size); }
|
||||
@media (max-width: 540px) { .form-grid-2 { grid-template-columns: 1fr; } }
|
||||
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color: var(--brand-color-primary) !important; box-shadow: 0 0 0 3px var(--brand-color-primary-bg); }
|
||||
.fld input:invalid:not(:placeholder-shown) { border-color: var(--brand-color-error); }
|
||||
.fld input:invalid:not(:placeholder-shown) ~ .fld-err { display: block; }
|
||||
.fld-err { display: none; margin: var(--brand-size-xxs) 0 0; font-size: var(--brand-font-size-sm); color: var(--brand-color-error); }
|
||||
.form-card { transition: box-shadow var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-split">
|
||||
<div class="form-brand" style="background:var(--brand-color-primary);color:#fff;padding:clamp(32px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--brand-size-xl);position:relative;overflow:hidden;">
|
||||
<svg width="220" height="220" viewBox="0 0 220 220" fill="none" aria-hidden="true" style="position:absolute;top:-40px;right:-40px;opacity:0.18;color:#fff;"><defs><pattern id="fdot" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.6" fill="currentColor"/></pattern></defs><rect width="220" height="220" fill="url(#fdot)"/></svg>
|
||||
<div style="position:absolute;bottom:-140px;left:-100px;width:320px;height:320px;border-radius:50%;background:var(--brand-color-primary-active);opacity:0.45;"></div>
|
||||
<div style="position:relative;display:flex;align-items:center;gap:var(--brand-size-sm);">
|
||||
<span style="display:inline-flex;width:30px;height:30px;border-radius:var(--brand-border-radius);background:rgba(255,255,255,0.16);align-items:center;justify-content:center;">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M1.5 7l3.5 3.5L12.5 3" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
<span style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);letter-spacing:-0.01em;color:#fff;white-space:nowrap;">Malenia</span>
|
||||
</div>
|
||||
<div style="position:relative;max-width:42ch;">
|
||||
<h1 style="color:#fff;font-size:clamp(28px,3.4vw,42px);letter-spacing:-0.02em;line-height:1.08;margin-bottom:var(--brand-size-md);">Свобода. Практика. Простота.</h1>
|
||||
<p class="clamp-3" style="color:rgba(255,255,255,0.82);font-size:var(--brand-font-size-lg);line-height:1.55;margin-bottom:var(--brand-size-lg);">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</p>
|
||||
<ul style="list-style:none;margin:0;padding:0;"><li style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-xs) 0;color:rgba(255,255,255,0.92);font-size:var(--brand-font-size-lg);line-height:1.45;">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" style="flex:0 0 auto;margin-top:3px;"><path d="M3.5 9.5L7 13l7.5-8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>Network freedom</span>
|
||||
</li><li style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-xs) 0;color:rgba(255,255,255,0.92);font-size:var(--brand-font-size-lg);line-height:1.45;">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" style="flex:0 0 auto;margin-top:3px;"><path d="M3.5 9.5L7 13l7.5-8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>Practical simplicity</span>
|
||||
</li><li style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-xs) 0;color:rgba(255,255,255,0.92);font-size:var(--brand-font-size-lg);line-height:1.45;">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" style="flex:0 0 auto;margin-top:3px;"><path d="M3.5 9.5L7 13l7.5-8" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>Aesthetic restraint</span>
|
||||
</li></ul>
|
||||
</div>
|
||||
<div style="position:relative;display:flex;align-items:center;gap:var(--brand-size-sm);color:rgba(255,255,255,0.7);font-size:var(--brand-font-size-sm);">
|
||||
<span style="display:inline-flex;width:8px;height:8px;border-radius:50%;background:var(--brand-color-success);box-shadow:0 0 0 4px rgba(255,255,255,0.12);"></span>
|
||||
<span>Restrained, archival, sophisticated, and minimal.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,64px);background:var(--brand-color-bg-layout);">
|
||||
<div class="form-card" style="width:100%;max-width:520px;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:clamp(28px,4vw,44px);box-shadow:0 24px 60px var(--brand-color-fill-quaternary), 0 2px 8px var(--brand-color-fill-quaternary);">
|
||||
<header style="margin-bottom:var(--brand-size-lg);">
|
||||
<h2 style="font-size:var(--brand-font-size-heading-3);letter-spacing:-0.015em;margin-bottom:var(--brand-size-xs);">Tell us where to start</h2>
|
||||
<p style="color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size);">A couple of details and Malenia takes it from there — no account needed yet.</p>
|
||||
</header>
|
||||
|
||||
<form novalidate onsubmit="this.querySelector('.form-body').style.display='none';var s=this.querySelector('.form-success');s.hidden=false;s.style.display='flex';return false;">
|
||||
<div class="form-body" style="display:flex;flex-direction:column;gap:var(--brand-size-lg);">
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-lg);">
|
||||
<div class="form-grid-2">
|
||||
<div class="fld">
|
||||
<label style="display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);"><span>First name</span></label>
|
||||
<input type="text" placeholder="Ada" autocomplete="given-name" style="box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size);">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="fld">
|
||||
<label style="display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);"><span>Last name</span></label>
|
||||
<input type="text" placeholder="Lovelace" autocomplete="family-name" style="box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size);">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="fld">
|
||||
<label style="display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);"><span>Work email</span></label>
|
||||
<input type="email" placeholder="you@company.com" inputmode="email" autocomplete="email" style="box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size);">
|
||||
<p class="fld-err">That doesn't look like an email yet — try name@company.com.</p>
|
||||
<p style="margin:var(--brand-size-xxs) 0 0;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.4;">We'll send your next steps here.</p>
|
||||
</div>
|
||||
<div class="fld">
|
||||
<label style="display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);"><span>What can we help with?</span></label>
|
||||
<select style="box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:var(--brand-size-xxl);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--brand-size) center;"><option value="" disabled selected>Choose one…</option><option>Network freedom</option><option>Practical simplicity</option><option>Aesthetic restraint</option></select>
|
||||
<p style="margin:var(--brand-size-xxs) 0 0;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.4;">Pick the closest — you can change direction later.</p>
|
||||
</div>
|
||||
<div class="fld">
|
||||
<label style="display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);"><span>Anything we should know?</span><span style="font-weight:400;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-quaternary);">Optional</span></label>
|
||||
<textarea rows="4" placeholder="A sentence or two about what you're trying to do with Malenia…" style="box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;display:block;min-height:var(--brand-control-height-lg);padding:var(--brand-size-sm) var(--brand-size);line-height:var(--brand-line-height);resize:vertical;"></textarea>
|
||||
|
||||
</div>
|
||||
<label class="cbx" style="display:flex;align-items:flex-start;gap:var(--brand-size-sm);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);cursor:pointer;">
|
||||
<input type="checkbox" style="accent-color:var(--brand-color-primary);width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;cursor:pointer;">
|
||||
<span>Keep me posted on what's new at Malenia. No noise, easy to turn off.</span>
|
||||
</label>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-sm);margin-top:var(--brand-size);">
|
||||
<div style="display:flex;flex-direction:column;">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Get started with Malenia</a>
|
||||
</div>
|
||||
<p style="display:flex;align-items:center;justify-content:center;gap:var(--brand-size-xs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);text-align:center;">
|
||||
<svg width="13" height="14" viewBox="0 0 13 14" fill="none" aria-hidden="true" style="flex:0 0 auto;"><path d="M2 6V4.5a4.5 4.5 0 019 0V6m-10 0h11v7H1.5z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>No spam, ever. Unsubscribe in one click — your data stays yours.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-success" hidden style="display:none;flex-direction:column;align-items:center;text-align:center;gap:var(--brand-size-md);padding:var(--brand-size-xl) 0;">
|
||||
<span style="display:inline-flex;width:56px;height:56px;border-radius:50%;background:var(--brand-color-success-bg);align-items:center;justify-content:center;">
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true"><path d="M6 13.5l4.5 4.5L20 7" stroke="var(--brand-color-success)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
<h2 style="font-size:var(--brand-font-size-heading-4);">You're in.</h2>
|
||||
<p style="color:var(--brand-color-text-secondary);max-width:34ch;">Check your inbox for a note from Malenia — your next step is waiting there. We usually reply within one business day.</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div style="margin-top:var(--brand-size-lg);padding-top:var(--brand-size-lg);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-sm);color:var(--brand-color-text-quaternary);font-size:var(--brand-font-size-sm);">
|
||||
<span style="display:inline-flex;align-items:center;gap:var(--brand-size-xs);"><span style="flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--brand-border-radius-sm);background:var(--brand-color-primary-bg);"><svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 6h7M6 2.5L9.5 6 6 9.5" stroke="var(--brand-color-primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span style="color:var(--brand-color-text-tertiary);">Свобода. Практика. Простота</span></span>
|
||||
<span>malenia.space</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
822
.design/system/artifacts/landing.html
Normal file
822
.design/system/artifacts/landing.html
Normal file
@@ -0,0 +1,822 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style data-brand-fonts>
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-600.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Tenor Sans";
|
||||
src: url("../../fonts/tenor-sans-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Malenia — Свобода. Практика. Простота.</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap" />
|
||||
<style>
|
||||
:root {
|
||||
--brand-color-primary: #c9a84c;
|
||||
--brand-color-primary-bg: #fffef0;
|
||||
--brand-color-primary-bg-hover: #fcfaed;
|
||||
--brand-color-primary-border: #f0eace;
|
||||
--brand-color-primary-border-hover: #e3d69f;
|
||||
--brand-color-primary-hover: #d6bf74;
|
||||
--brand-color-primary-active: #a38336;
|
||||
--brand-color-primary-text: #573e14;
|
||||
--brand-color-success: #52c41a;
|
||||
--brand-color-success-bg: #f6ffed;
|
||||
--brand-color-success-border: #b6eb8f;
|
||||
--brand-color-success-hover: #72d13d;
|
||||
--brand-color-success-active: #389e0d;
|
||||
--brand-color-warning: #faad14;
|
||||
--brand-color-warning-bg: #fffbe6;
|
||||
--brand-color-warning-border: #ffe58f;
|
||||
--brand-color-warning-hover: #ffc53d;
|
||||
--brand-color-warning-active: #d48806;
|
||||
--brand-color-error: #ff4d4f;
|
||||
--brand-color-error-bg: #fff2f0;
|
||||
--brand-color-error-border: #ffccc7;
|
||||
--brand-color-error-hover: #ff7875;
|
||||
--brand-color-error-active: #d9363d;
|
||||
--brand-color-info: #c9a84c;
|
||||
--brand-color-info-bg: #fffef0;
|
||||
--brand-color-info-border: #f0eace;
|
||||
--brand-color-link: #c9a84c;
|
||||
--brand-color-link-hover: #d6bf74;
|
||||
--brand-color-link-active: #a38336;
|
||||
--brand-color-text: #35312b;
|
||||
--brand-color-text-secondary: #68655f;
|
||||
--brand-color-text-tertiary: #95928c;
|
||||
--brand-color-text-quaternary: #c2bfba;
|
||||
--brand-color-fill: #d8d5d0;
|
||||
--brand-color-fill-secondary: #ede9e4;
|
||||
--brand-color-fill-tertiary: #f1eee9;
|
||||
--brand-color-fill-quaternary: #f6f3ed;
|
||||
--brand-color-bg-layout: #f1eee9;
|
||||
--brand-color-bg-container: #faf7f2;
|
||||
--brand-color-bg-elevated: #faf7f2;
|
||||
--brand-color-border: #d8d5d0;
|
||||
--brand-color-border-secondary: #ede9e4;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #fffef0;
|
||||
--brand-primary-palette-2: #fcfaed;
|
||||
--brand-primary-palette-3: #f0eace;
|
||||
--brand-primary-palette-4: #e3d69f;
|
||||
--brand-primary-palette-5: #d6bf74;
|
||||
--brand-primary-palette-6: #c9a84c;
|
||||
--brand-primary-palette-7: #a38336;
|
||||
--brand-primary-palette-8: #7d5f23;
|
||||
--brand-primary-palette-9: #573e14;
|
||||
--brand-primary-palette-10: #30210b;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--brand-font-family);
|
||||
font-size: var(--brand-font-size);
|
||||
line-height: var(--brand-line-height);
|
||||
color: var(--brand-color-text);
|
||||
background: var(--brand-color-bg-layout);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
a { color: var(--brand-color-link); text-decoration: none; }
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
font-family: var(--display-family);
|
||||
line-height: var(--brand-line-height-heading);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-text);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
p { margin: 0; overflow-wrap: break-word; }
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
|
||||
.kicker {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: var(--brand-font-size-sm);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-primary);
|
||||
margin-bottom: var(--brand-size-sm);
|
||||
}
|
||||
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.clamp-2 { -webkit-line-clamp: 2; }
|
||||
.clamp-3 { -webkit-line-clamp: 3; }
|
||||
a[role="button"]{transition:filter .15s ease,transform .15s ease}
|
||||
a[role="button"]:hover{filter:brightness(1.07)}
|
||||
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
|
||||
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
|
||||
details.kit-acc>summary{list-style:none;cursor:pointer}
|
||||
details.kit-acc>summary::-webkit-details-marker{display:none}
|
||||
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
|
||||
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
|
||||
|
||||
.nav-links { display: flex; gap: 28px; align-items: center; color: var(--brand-color-text-secondary); }
|
||||
.nav-links a { color: var(--brand-color-text-secondary); transition: color .15s ease; }
|
||||
.nav-links a:hover { color: var(--brand-color-text); }
|
||||
@media (max-width: 820px) { .nav-links { display: none; } }
|
||||
.section { padding: clamp(64px, 9vw, 104px) 0; }
|
||||
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
|
||||
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
|
||||
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
|
||||
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 20px); }
|
||||
@media (max-width: 880px) { .problem-grid { grid-template-columns: 1fr; } }
|
||||
.zig { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
|
||||
.zig + .zig { margin-top: clamp(48px, 7vw, 96px); }
|
||||
@media (max-width: 880px) { .zig { grid-template-columns: 1fr; gap: 28px; } .zig .zig-visual { order: -1; } }
|
||||
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
|
||||
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
|
||||
.mock-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 300px; }
|
||||
@media (max-width: 720px) { .mock-grid { grid-template-columns: minmax(0, 1fr); } .mock-side { display: none; } }
|
||||
.hero-trust { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header style="position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--brand-color-bg-container) 86%, transparent);backdrop-filter:blur(12px);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);">
|
||||
<div class="wrap" style="display:flex;align-items:center;justify-content:space-between;height:64px;gap:var(--brand-size-lg);">
|
||||
<span style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);letter-spacing:-0.01em;color:var(--brand-color-text);white-space:nowrap;">Malenia</span>
|
||||
<nav class="nav-links">
|
||||
<a href="#how">How it works</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
</nav>
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:center;">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-text);border-color:transparent">Sign in</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Get started free</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 2 · HERO — the 5-piece value prop -->
|
||||
<main>
|
||||
<section class="wrap" style="padding-top:clamp(56px, 9vw, 108px);text-align:center;">
|
||||
<div style="max-width:860px;margin:0 auto;">
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Sophisticated · Quiet · Essential</span>
|
||||
<h1 style="font-size:clamp(36px, 5.6vw, 64px);letter-spacing:-0.025em;line-height:1.06;margin:var(--brand-size-lg) auto var(--brand-size-md);max-width:18ch;">Свобода. Практика. Простота.</h1>
|
||||
<p style="font-size:var(--brand-font-size-xl);color:var(--brand-color-text-secondary);max-width:62ch;margin:0 auto var(--brand-size-xl);line-height:1.5;">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</p>
|
||||
<div style="display:flex;gap:var(--brand-size-sm);justify-content:center;flex-wrap:wrap;">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Get started free</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border)">See how it works</a>
|
||||
</div>
|
||||
<p style="margin-top:var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">Free plan · No credit card · 2-minute setup</p>
|
||||
</div>
|
||||
<div style="max-width:980px;margin:clamp(40px, 6vw, 68px) auto 0;">
|
||||
<div style="border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:14px;overflow:hidden;background:var(--brand-color-bg-container);box-shadow:0 32px 80px -24px var(--brand-color-fill-secondary);">
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-fill-quaternary);">
|
||||
<span style="width:10px;height:10px;border-radius:50%;background:var(--brand-color-error);opacity:.55;"></span>
|
||||
<span style="width:10px;height:10px;border-radius:50%;background:var(--brand-color-warning);opacity:.55;"></span>
|
||||
<span style="width:10px;height:10px;border-radius:50%;background:var(--brand-color-success);opacity:.55;"></span>
|
||||
<span style="flex:1;max-width:380px;margin-left:12px;height:22px;border-radius:11px;background:var(--brand-color-fill-tertiary);display:flex;align-items:center;padding:0 12px;font-size:11px;color:var(--brand-color-text-quaternary);overflow:hidden;white-space:nowrap;">malenia.space</span>
|
||||
</div>
|
||||
<div class="mock-grid">
|
||||
<div class="mock-side" style="border-right:var(--brand-line-width) solid var(--brand-color-border-secondary);padding:16px 12px;display:flex;flex-direction:column;gap:4px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--brand-border-radius-sm);background:var(--brand-color-primary-bg);">
|
||||
<div style="width:14px;height:14px;border-radius:4px;background:var(--brand-color-primary);"></div>
|
||||
<div style="width:64%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);"></div>
|
||||
</div><div style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--brand-border-radius-sm);">
|
||||
<div style="width:14px;height:14px;border-radius:4px;background:var(--brand-color-fill);"></div>
|
||||
<div style="width:52%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);"></div>
|
||||
</div><div style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--brand-border-radius-sm);">
|
||||
<div style="width:14px;height:14px;border-radius:4px;background:var(--brand-color-fill);"></div>
|
||||
<div style="width:52%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);"></div>
|
||||
</div><div style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--brand-border-radius-sm);">
|
||||
<div style="width:14px;height:14px;border-radius:4px;background:var(--brand-color-fill);"></div>
|
||||
<div style="width:52%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;">
|
||||
<div style="width:180px;height:14px;border-radius:5px;background:var(--brand-color-fill-secondary);"></div>
|
||||
<div style="width:96px;height:28px;border-radius:var(--brand-border-radius);background:var(--brand-color-primary);"></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1.4fr 1fr;gap:16px;flex:1;">
|
||||
<div style="border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:16px;display:flex;align-items:flex-end;gap:8px;min-height:160px;"><div style="flex:1;height:42%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-4);"></div><div style="flex:1;height:68%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-5);"></div><div style="flex:1;height:54%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-6);"></div><div style="flex:1;height:82%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-7);"></div><div style="flex:1;height:64%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-4);"></div><div style="flex:1;height:96%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-5);"></div><div style="flex:1;height:72%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-6);"></div><div style="flex:1;height:58%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-7);"></div></div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px;">
|
||||
<div style="border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:14px;display:flex;flex-direction:column;gap:8px;"><div style="width:40%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);"></div><div style="width:70%;height:14px;border-radius:5px;background:var(--brand-color-fill-secondary);"></div></div>
|
||||
<div style="border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:14px;display:flex;flex-direction:column;gap:8px;"><div style="width:46%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);"></div><div style="width:60%;height:14px;border-radius:5px;background:var(--brand-color-fill-secondary);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 · SOCIAL PROOF — hugs the hero -->
|
||||
<section class="wrap" style="padding:clamp(40px,6vw,64px) 0 8px;">
|
||||
<div class="hero-trust" style="margin-bottom:var(--brand-size-lg);">
|
||||
<span style="color:var(--brand-color-warning);letter-spacing:2px;">★★★★★</span>
|
||||
<span style="font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary);">Rated 4.9/5 by 12,000+ teams</span>
|
||||
</div>
|
||||
<p style="text-align:center;text-transform:uppercase;letter-spacing:0.16em;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-quaternary);margin-bottom:var(--brand-size-lg);">Trusted by teams at</p>
|
||||
<div style="display:flex;justify-content:center;align-items:center;gap:clamp(24px,5vw,56px);flex-wrap:wrap;opacity:0.9;">
|
||||
<span style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;">Northwind</span>
|
||||
<span style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;">Lumen Labs</span>
|
||||
<span style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;">Fieldnote</span>
|
||||
<span style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;">Arcadia</span>
|
||||
<span style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;">Helios</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4 · PROBLEM — PAS (P + A) -->
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="kicker">The problem</span>
|
||||
<h2 style="font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">You're not slow. Your setup is.</h2>
|
||||
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);">Sound familiar? The longer it goes unfixed, the more it quietly taxes everything Malenia is supposed to make easy.</p>
|
||||
</div>
|
||||
<div class="problem-grid">
|
||||
<div style="background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);">
|
||||
<div style="display:flex;align-items:flex-start;gap:var(--brand-size-sm);">
|
||||
<span style="flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--brand-color-error);"></span>
|
||||
<div>
|
||||
<h3 style="font-size:var(--brand-font-size-lg);margin-bottom:var(--brand-size-xxs);">Every deliverable starts from scratch</h3>
|
||||
<p class="clamp-3" style="color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size);">So the same work gets redone, the backlog grows, and shipping slips by days.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);">
|
||||
<div style="display:flex;align-items:flex-start;gap:var(--brand-size-sm);">
|
||||
<span style="flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--brand-color-error);"></span>
|
||||
<div>
|
||||
<h3 style="font-size:var(--brand-font-size-lg);margin-bottom:var(--brand-size-xxs);">The tools don't talk to each other</h3>
|
||||
<p class="clamp-3" style="color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size);">Context lives in five tabs, hand-offs break, and nobody trusts the source of truth.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);">
|
||||
<div style="display:flex;align-items:flex-start;gap:var(--brand-size-sm);">
|
||||
<span style="flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--brand-color-error);"></span>
|
||||
<div>
|
||||
<h3 style="font-size:var(--brand-font-size-lg);margin-bottom:var(--brand-size-xxs);">Quality drifts as you scale</h3>
|
||||
<p class="clamp-3" style="color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size);">What looked sharp at ten people looks inconsistent at fifty — and customers notice.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5 · VALUE PILLARS — PAS (S), FAB so each shows the benefit -->
|
||||
<section id="value" class="section" style="background:var(--brand-color-bg-container);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="kicker">Why Malenia</span>
|
||||
<h2 style="font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">Here's how that changes</h2>
|
||||
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);">Three ways Malenia turns the daily grind into something you actually look forward to.</p>
|
||||
</div>
|
||||
<div class="pillars">
|
||||
<div style="background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);box-shadow:0 1px 2px var(--brand-color-fill-quaternary);display:flex;flex-direction:column;">
|
||||
<div style="display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);margin-bottom:var(--brand-size-md);"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" style="display:block;"><path d="M5 12l4 4 10-10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<h3 class="clamp-2" style="font-size:var(--brand-font-size-heading-4);margin-bottom:var(--brand-size-xs);">Network freedom</h3>
|
||||
<p class="clamp-3" style="color:var(--brand-color-text-secondary);">Sophisticated by design — and built into every surface Malenia ships.</p>
|
||||
</div>
|
||||
<div style="background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);box-shadow:0 1px 2px var(--brand-color-fill-quaternary);display:flex;flex-direction:column;">
|
||||
<div style="display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);margin-bottom:var(--brand-size-md);"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" style="display:block;"><path d="M12 3v18M3 12h18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<h3 class="clamp-2" style="font-size:var(--brand-font-size-heading-4);margin-bottom:var(--brand-size-xs);">Practical simplicity</h3>
|
||||
<p class="clamp-3" style="color:var(--brand-color-text-secondary);">Quiet by design — and built into every surface Malenia ships.</p>
|
||||
</div>
|
||||
<div style="background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);box-shadow:0 1px 2px var(--brand-color-fill-quaternary);display:flex;flex-direction:column;">
|
||||
<div style="display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);margin-bottom:var(--brand-size-md);"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" style="display:block;"><circle cx="11" cy="11" r="6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 20l-4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<h3 class="clamp-2" style="font-size:var(--brand-font-size-heading-4);margin-bottom:var(--brand-size-xs);">Aesthetic restraint</h3>
|
||||
<p class="clamp-3" style="color:var(--brand-color-text-secondary);">Essential by design — and built into every surface Malenia ships.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 · HOW IT WORKS — 3 steps -->
|
||||
<section id="how" class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="kicker">How it works</span>
|
||||
<h2 style="font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">Up and running in three steps</h2>
|
||||
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);">No migration project. No six-week rollout.</p>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,4vw,48px);">
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-md);">
|
||||
<div style="aspect-ratio:124/108;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-layout);padding:var(--brand-size-lg);"><svg viewBox="0 0 124 108" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><rect x="14" y="40" width="92" height="9" rx="4.5" fill="var(--brand-color-border-secondary)"/><rect x="14" y="58" width="58" height="9" rx="4.5" fill="var(--brand-color-border-secondary)"/><rect x="14" y="80" width="40" height="14" rx="7" fill="var(--brand-color-primary)"/></svg></div>
|
||||
<div>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--brand-color-primary);color:#fff;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);">1</span>
|
||||
<h3 style="font-size:var(--brand-font-size-heading-4);">Connect</h3>
|
||||
</div>
|
||||
<p style="color:var(--brand-color-text-secondary);max-width:34ch;">Point Malenia at what you already have — no rebuild required.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-md);">
|
||||
<div style="aspect-ratio:124/108;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-layout);padding:var(--brand-size-lg);"><svg viewBox="0 0 124 108" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><rect x="14" y="38" width="44" height="38" rx="6" fill="none" stroke="var(--brand-color-border-secondary)" stroke-width="2"/><rect x="66" y="38" width="44" height="38" rx="6" fill="none" stroke="var(--brand-color-primary)" stroke-width="2"/><rect x="14" y="84" width="96" height="9" rx="4.5" fill="var(--brand-color-border-secondary)"/></svg></div>
|
||||
<div>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--brand-color-primary);color:#fff;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);">2</span>
|
||||
<h3 style="font-size:var(--brand-font-size-heading-4);">Make it yours</h3>
|
||||
</div>
|
||||
<p style="color:var(--brand-color-text-secondary);max-width:34ch;">Adjust the defaults until they fit the way your team works.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-md);">
|
||||
<div style="aspect-ratio:124/108;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-layout);padding:var(--brand-size-lg);"><svg viewBox="0 0 124 108" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><path d="M16 70l20 16 28-44" fill="none" stroke="var(--brand-color-primary)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><rect x="72" y="44" width="38" height="9" rx="4.5" fill="var(--brand-color-border-secondary)"/><rect x="72" y="64" width="26" height="9" rx="4.5" fill="var(--brand-color-border-secondary)"/></svg></div>
|
||||
<div>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--brand-color-primary);color:#fff;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);">3</span>
|
||||
<h3 style="font-size:var(--brand-font-size-heading-4);">Launch</h3>
|
||||
</div>
|
||||
<p style="color:var(--brand-color-text-secondary);max-width:34ch;">Go live with confidence, then iterate from real feedback.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- recurring CTA (~every 1.5 screens) — calm, the loud one is reserved for module 11 -->
|
||||
<section class="wrap" style="padding:0 0 clamp(56px,8vw,88px);">
|
||||
<div style="border:var(--brand-line-width) solid var(--brand-color-primary-border);background:var(--brand-color-primary-bg);border-radius:clamp(14px,2vw,20px);padding:clamp(24px,4vw,36px) clamp(24px,5vw,48px);display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-lg);flex-wrap:wrap;">
|
||||
<div style="min-width:0;">
|
||||
<h3 style="font-size:clamp(20px,2.4vw,26px);letter-spacing:-0.01em;">See it on your own work in minutes</h3>
|
||||
<p style="color:var(--brand-color-text-secondary);margin-top:var(--brand-size-xxs);">Free plan · No credit card · 2-minute setup</p>
|
||||
</div>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Get started free</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7 · FEATURES — zig-zag deep dive -->
|
||||
<section id="features" class="section" style="background:var(--brand-color-bg-container);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="kicker">A closer look</span>
|
||||
<h2 style="font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">Built for the way real teams work</h2>
|
||||
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);">Every capability earns its place — and translates to something you can feel.</p>
|
||||
</div>
|
||||
<div class="zig"><div>
|
||||
<span class="kicker">Capability 01</span>
|
||||
<h3 style="font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">Secure from day one</h3>
|
||||
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);max-width:46ch;">SSO, audit logs and granular permissions are built in, not bolted on.</p>
|
||||
<div style="margin-top:var(--brand-size-lg);">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent">Learn more</a>
|
||||
</div>
|
||||
</div><div class="zig-visual" style="border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-container);box-shadow:0 8px 28px -16px var(--brand-color-fill-secondary);padding:var(--brand-size-xl);min-height:240px;display:flex;flex-direction:column;gap:var(--brand-size-md);">
|
||||
<div style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" style="display:block;"><path d="M4 13l5 5L20 6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 7l3 3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div style="height:12px;width:70%;border-radius:6px;background:var(--brand-color-fill-secondary);"></div>
|
||||
<div style="height:12px;width:52%;border-radius:6px;background:var(--brand-color-fill-tertiary);"></div>
|
||||
<div style="margin-top:auto;display:flex;gap:var(--brand-size-sm);">
|
||||
<div style="flex:1;height:64px;border-radius:var(--brand-border-radius);background:var(--brand-color-primary-bg);"></div>
|
||||
<div style="flex:1;height:64px;border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid var(--brand-color-border-secondary);"></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="zig"><div class="zig-visual" style="border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-container);box-shadow:0 8px 28px -16px var(--brand-color-fill-secondary);padding:var(--brand-size-xl);min-height:240px;display:flex;flex-direction:column;gap:var(--brand-size-md);">
|
||||
<div style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" style="display:block;"><rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 12h6M12 9v6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div style="height:12px;width:70%;border-radius:6px;background:var(--brand-color-fill-secondary);"></div>
|
||||
<div style="height:12px;width:52%;border-radius:6px;background:var(--brand-color-fill-tertiary);"></div>
|
||||
<div style="margin-top:auto;display:flex;gap:var(--brand-size-sm);">
|
||||
<div style="flex:1;height:64px;border-radius:var(--brand-border-radius);background:var(--brand-color-primary-bg);"></div>
|
||||
<div style="flex:1;height:64px;border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid var(--brand-color-border-secondary);"></div>
|
||||
</div>
|
||||
</div><div>
|
||||
<span class="kicker">Capability 02</span>
|
||||
<h3 style="font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">Works where you work</h3>
|
||||
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);max-width:46ch;">Integrates with the tools your team already relies on every day.</p>
|
||||
<div style="margin-top:var(--brand-size-lg);">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent">Learn more</a>
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="zig"><div>
|
||||
<span class="kicker">Capability 03</span>
|
||||
<h3 style="font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">Insight you can act on</h3>
|
||||
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);max-width:46ch;">Reporting that reads like a story, not a spreadsheet.</p>
|
||||
<div style="margin-top:var(--brand-size-lg);">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent">Learn more</a>
|
||||
</div>
|
||||
</div><div class="zig-visual" style="border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-container);box-shadow:0 8px 28px -16px var(--brand-color-fill-secondary);padding:var(--brand-size-xl);min-height:240px;display:flex;flex-direction:column;gap:var(--brand-size-md);">
|
||||
<div style="display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" style="display:block;"><path d="M12 2l3 6 7 .9-5 4.7 1.3 6.9L12 18l-6.3 3.5L7 14.6 2 9.9 9 9z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div style="height:12px;width:70%;border-radius:6px;background:var(--brand-color-fill-secondary);"></div>
|
||||
<div style="height:12px;width:52%;border-radius:6px;background:var(--brand-color-fill-tertiary);"></div>
|
||||
<div style="margin-top:auto;display:flex;gap:var(--brand-size-sm);">
|
||||
<div style="flex:1;height:64px;border-radius:var(--brand-border-radius);background:var(--brand-color-primary-bg);"></div>
|
||||
<div style="flex:1;height:64px;border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid var(--brand-color-border-secondary);"></div>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8 · PROOF — stat band + testimonials -->
|
||||
<section style="background:var(--brand-color-primary);padding:clamp(48px,6vw,64px) 0;">
|
||||
<div class="wrap" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--brand-size-xl);">
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:var(--display-family);font-size:clamp(30px,3.6vw,46px);font-weight:var(--brand-font-weight-strong);line-height:1.05;color:#fff;letter-spacing:-0.02em;">10k+</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.78);">Teams onboard</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:var(--display-family);font-size:clamp(30px,3.6vw,46px);font-weight:var(--brand-font-weight-strong);line-height:1.05;color:#fff;letter-spacing:-0.02em;">99.9%</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.78);">Uptime SLA</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:var(--display-family);font-size:clamp(30px,3.6vw,46px);font-weight:var(--brand-font-weight-strong);line-height:1.05;color:#fff;letter-spacing:-0.02em;">4.9/5</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.78);">Average rating</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:var(--display-family);font-size:clamp(30px,3.6vw,46px);font-weight:var(--brand-font-weight-strong);line-height:1.05;color:#fff;letter-spacing:-0.02em;">120+</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.78);">Integrations</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="kicker">Proof</span>
|
||||
<h2 style="font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">Loved by the teams who use it daily</h2>
|
||||
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);">Real results, in their words — not ours.</p>
|
||||
</div>
|
||||
<div class="grid-3">
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1"><p style="margin:0 0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);line-height:1.6;color:var(--brand-color-text)">“Malenia is the first tool in this space that actually feels Sophisticated. It became part of our daily flow within a week.”</p>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">MC</span>
|
||||
<div style="min-width:0;">
|
||||
<div style="font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);font-size:var(--brand-font-size);">Maya Chen</div>
|
||||
<div style="font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">Head of Design, Northwind</div>
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1"><p style="margin:0 0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);line-height:1.6;color:var(--brand-color-text)">“We were skeptical, then we shipped our first project — genuinely Quiet — in a single afternoon. The team never looked back.”</p>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">JW</span>
|
||||
<div style="min-width:0;">
|
||||
<div style="font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);font-size:var(--brand-font-size);">Jonas Weber</div>
|
||||
<div style="font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">Engineering Lead, Lumen Labs</div>
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1"><p style="margin:0 0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);line-height:1.6;color:var(--brand-color-text)">“The quality bar out of the box is what sold us. Свобода. Практика. Простота is not just a slogan here.”</p>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">PN</span>
|
||||
<div style="min-width:0;">
|
||||
<div style="font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);font-size:var(--brand-font-size);">Priya Natarajan</div>
|
||||
<div style="font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">Founder, Fieldnote</div>
|
||||
</div>
|
||||
</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 9 · OBJECTION — FAQ -->
|
||||
<section id="faq" class="section" style="background:var(--brand-color-bg-container);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);">
|
||||
<div class="wrap" style="max-width:780px;">
|
||||
<div class="section-head">
|
||||
<span class="kicker">Before you ask</span>
|
||||
<h2 style="font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">Your questions, answered</h2>
|
||||
|
||||
</div>
|
||||
<div><details class="kit-acc" open style="border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)"><span style="min-width:0;">What is Malenia?</span><span class="kit-acc-icon" style="flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400">+</span></summary>
|
||||
<div style="padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</div>
|
||||
</details>
|
||||
<details class="kit-acc" style="border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)"><span style="min-width:0;">How long does it take to get started?</span><span class="kit-acc-icon" style="flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400">+</span></summary>
|
||||
<div style="padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch">Most teams are up and running in under an hour. There is nothing to install and no migration to plan — connect, customize, launch.</div>
|
||||
</details>
|
||||
<details class="kit-acc" style="border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)"><span style="min-width:0;">Can I try it before committing?</span><span class="kit-acc-icon" style="flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400">+</span></summary>
|
||||
<div style="padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch">Yes. Start on the free plan, invite your team, and upgrade only when you need more. No credit card required.</div>
|
||||
</details>
|
||||
<details class="kit-acc" style="border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)"><span style="min-width:0;">How does pricing work?</span><span class="kit-acc-icon" style="flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400">+</span></summary>
|
||||
<div style="padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch">Plans scale with your team. Start free, move to Pro when you need unlimited usage, and talk to us about Enterprise for custom needs.</div>
|
||||
</details>
|
||||
<details class="kit-acc" style="border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)"><span style="min-width:0;">What about security and privacy?</span><span class="kit-acc-icon" style="flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400">+</span></summary>
|
||||
<div style="padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch">Your data stays yours. Access is encrypted in transit and at rest, and granular permissions keep the right things with the right people.</div>
|
||||
</details></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 10 · PRICING — middle tier highlighted -->
|
||||
<section id="pricing" class="section">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="kicker">Pricing</span>
|
||||
<h2 style="font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);">Plans that scale with you</h2>
|
||||
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);">Start free. Upgrade only when it earns it.</p>
|
||||
</div>
|
||||
<div class="grid-3" style="max-width:1000px;margin:0 auto;">
|
||||
<div style="display:flex;flex-direction:column;position:relative;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);font-family:var(--brand-font-family);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);">
|
||||
<span style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text);">Starter</span>
|
||||
|
||||
</div>
|
||||
<p style="margin:0 0 var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">For trying things out.</p>
|
||||
<div style="display:flex;align-items:baseline;gap:var(--brand-size-xxs);margin-bottom:var(--brand-size-lg);">
|
||||
<span style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1;letter-spacing:-0.01em;">$0</span>
|
||||
<span style="color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size-sm);">/ mo</span>
|
||||
</div>
|
||||
<ul style="list-style:none;margin:0 0 var(--brand-size-xl);padding:0;flex:1;"><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Up to 3 projects</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Network freedom</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Community support</span></li></ul>
|
||||
<div style="display:flex;flex-direction:column;"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border)">Start for free</a></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;position:relative;background:var(--brand-color-bg-container);border:2px solid var(--brand-color-primary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);font-family:var(--brand-font-family);box-shadow:0 12px 32px var(--brand-color-primary-bg)">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);">
|
||||
<span style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text);">Pro</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Most popular</span>
|
||||
</div>
|
||||
<p style="margin:0 0 var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">For growing teams.</p>
|
||||
<div style="display:flex;align-items:baseline;gap:var(--brand-size-xxs);margin-bottom:var(--brand-size-lg);">
|
||||
<span style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1;letter-spacing:-0.01em;">$29</span>
|
||||
<span style="color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size-sm);">/ mo</span>
|
||||
</div>
|
||||
<ul style="list-style:none;margin:0 0 var(--brand-size-xl);padding:0;flex:1;"><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Unlimited projects</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Practical simplicity</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Aesthetic restraint</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Priority support</span></li></ul>
|
||||
<div style="display:flex;flex-direction:column;"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Start free trial</a></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;position:relative;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);font-family:var(--brand-font-family);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);">
|
||||
<span style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text);">Enterprise</span>
|
||||
|
||||
</div>
|
||||
<p style="margin:0 0 var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">For organizations at scale.</p>
|
||||
<div style="display:flex;align-items:baseline;gap:var(--brand-size-xxs);margin-bottom:var(--brand-size-lg);">
|
||||
<span style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1;letter-spacing:-0.01em;">Custom</span>
|
||||
|
||||
</div>
|
||||
<ul style="list-style:none;margin:0 0 var(--brand-size-xl);padding:0;flex:1;"><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>SSO & audit logs</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Dedicated success manager</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Custom contracts & SLA</span></li></ul>
|
||||
<div style="display:flex;flex-direction:column;"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border)">Talk to sales</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="text-align:center;margin-top:var(--brand-size-lg);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">All prices in USD · Cancel anytime · No credit card to start.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 11 · FINAL CTA — the page's strongest accent -->
|
||||
<section class="wrap" style="padding-bottom:clamp(64px,9vw,104px);">
|
||||
<div style="background:var(--brand-color-primary);border-radius:clamp(18px,2.4vw,28px);padding:clamp(48px,7vw,84px) clamp(24px,5vw,64px);text-align:center;position:relative;overflow:hidden;">
|
||||
<div style="position:absolute;top:-100px;right:-90px;width:320px;height:320px;border-radius:50%;background:var(--brand-color-primary-hover);opacity:0.5;"></div>
|
||||
<div style="position:absolute;bottom:-120px;left:-80px;width:260px;height:260px;border-radius:50%;background:var(--brand-color-primary-active);opacity:0.45;"></div>
|
||||
<div style="position:relative;">
|
||||
<h2 style="color:#fff;font-size:clamp(28px,4vw,46px);letter-spacing:-0.02em;line-height:1.08;margin-bottom:var(--brand-size-md);max-width:20ch;margin-left:auto;margin-right:auto;">Start building with Malenia today</h2>
|
||||
<p class="clamp-2" style="color:rgba(255,255,255,0.88);font-size:var(--brand-font-size-lg);max-width:540px;margin:0 auto var(--brand-size-xl);">Свобода. Практика. Простота.</p>
|
||||
<div style="display:flex;gap:var(--brand-size-sm);justify-content:center;flex-wrap:wrap;">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);background:#fff;color:var(--brand-color-primary);border:none;">Get started free</a>
|
||||
<a href="#" style="display:inline-flex;align-items:center;height:var(--brand-control-height-lg);color:rgba(255,255,255,0.92);font-weight:var(--brand-font-weight-strong);padding:0 var(--brand-size-md);">Talk to us →</a>
|
||||
</div>
|
||||
<p style="margin-top:var(--brand-size-md);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.72);">2-minute setup · Cancel anytime</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 12 · FOOTER — grey, small, restrained -->
|
||||
<footer style="background:var(--brand-color-bg-container);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);padding:clamp(48px,6vw,64px) 0 32px;">
|
||||
<div class="wrap">
|
||||
<div class="footer-cols">
|
||||
<div>
|
||||
<span style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);letter-spacing:-0.01em;color:var(--brand-color-text);white-space:nowrap;">Malenia</span>
|
||||
<p class="clamp-2" style="color:var(--brand-color-text-tertiary);max-width:36ch;margin-top:var(--brand-size-sm);font-size:var(--brand-font-size-sm);">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-sm);text-transform:uppercase;letter-spacing:0.08em;color:var(--brand-color-text-tertiary);margin-bottom:var(--brand-size-md);">Product</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-xs);">
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">How it works</a>
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Features</a>
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Pricing</a>
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Changelog</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-sm);text-transform:uppercase;letter-spacing:0.08em;color:var(--brand-color-text-tertiary);margin-bottom:var(--brand-size-md);">Company</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-xs);">
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">About</a>
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Blog</a>
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Careers</a>
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-sm);text-transform:uppercase;letter-spacing:0.08em;color:var(--brand-color-text-tertiary);margin-bottom:var(--brand-size-md);">Resources</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-xs);">
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Docs</a>
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Support</a>
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Status</a>
|
||||
<a href="#" style="color:var(--brand-color-text-secondary);">Privacy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-lg);flex-wrap:wrap;margin-top:48px;padding-top:var(--brand-size-lg);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">
|
||||
<span>© Malenia · malenia.space</span>
|
||||
<span>Sophisticated · Quiet · Essential</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
427
.design/system/artifacts/newsletter.html
Normal file
427
.design/system/artifacts/newsletter.html
Normal file
@@ -0,0 +1,427 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style data-brand-fonts>
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-600.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Tenor Sans";
|
||||
src: url("../../fonts/tenor-sans-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Malenia — Newsletter</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap" />
|
||||
<style>
|
||||
:root {
|
||||
--brand-color-primary: #c9a84c;
|
||||
--brand-color-primary-bg: #fffef0;
|
||||
--brand-color-primary-bg-hover: #fcfaed;
|
||||
--brand-color-primary-border: #f0eace;
|
||||
--brand-color-primary-border-hover: #e3d69f;
|
||||
--brand-color-primary-hover: #d6bf74;
|
||||
--brand-color-primary-active: #a38336;
|
||||
--brand-color-primary-text: #573e14;
|
||||
--brand-color-success: #52c41a;
|
||||
--brand-color-success-bg: #f6ffed;
|
||||
--brand-color-success-border: #b6eb8f;
|
||||
--brand-color-success-hover: #72d13d;
|
||||
--brand-color-success-active: #389e0d;
|
||||
--brand-color-warning: #faad14;
|
||||
--brand-color-warning-bg: #fffbe6;
|
||||
--brand-color-warning-border: #ffe58f;
|
||||
--brand-color-warning-hover: #ffc53d;
|
||||
--brand-color-warning-active: #d48806;
|
||||
--brand-color-error: #ff4d4f;
|
||||
--brand-color-error-bg: #fff2f0;
|
||||
--brand-color-error-border: #ffccc7;
|
||||
--brand-color-error-hover: #ff7875;
|
||||
--brand-color-error-active: #d9363d;
|
||||
--brand-color-info: #c9a84c;
|
||||
--brand-color-info-bg: #fffef0;
|
||||
--brand-color-info-border: #f0eace;
|
||||
--brand-color-link: #c9a84c;
|
||||
--brand-color-link-hover: #d6bf74;
|
||||
--brand-color-link-active: #a38336;
|
||||
--brand-color-text: #35312b;
|
||||
--brand-color-text-secondary: #68655f;
|
||||
--brand-color-text-tertiary: #95928c;
|
||||
--brand-color-text-quaternary: #c2bfba;
|
||||
--brand-color-fill: #d8d5d0;
|
||||
--brand-color-fill-secondary: #ede9e4;
|
||||
--brand-color-fill-tertiary: #f1eee9;
|
||||
--brand-color-fill-quaternary: #f6f3ed;
|
||||
--brand-color-bg-layout: #f1eee9;
|
||||
--brand-color-bg-container: #faf7f2;
|
||||
--brand-color-bg-elevated: #faf7f2;
|
||||
--brand-color-border: #d8d5d0;
|
||||
--brand-color-border-secondary: #ede9e4;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #fffef0;
|
||||
--brand-primary-palette-2: #fcfaed;
|
||||
--brand-primary-palette-3: #f0eace;
|
||||
--brand-primary-palette-4: #e3d69f;
|
||||
--brand-primary-palette-5: #d6bf74;
|
||||
--brand-primary-palette-6: #c9a84c;
|
||||
--brand-primary-palette-7: #a38336;
|
||||
--brand-primary-palette-8: #7d5f23;
|
||||
--brand-primary-palette-9: #573e14;
|
||||
--brand-primary-palette-10: #30210b;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--brand-font-family);
|
||||
font-size: var(--brand-font-size);
|
||||
line-height: var(--brand-line-height);
|
||||
color: var(--brand-color-text);
|
||||
background: var(--brand-color-bg-layout);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
a { color: var(--brand-color-link); text-decoration: none; }
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
font-family: var(--display-family);
|
||||
line-height: var(--brand-line-height-heading);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-text);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
p { margin: 0; overflow-wrap: break-word; }
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
|
||||
.kicker {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: var(--brand-font-size-sm);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-primary);
|
||||
margin-bottom: var(--brand-size-sm);
|
||||
}
|
||||
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.clamp-2 { -webkit-line-clamp: 2; }
|
||||
.clamp-3 { -webkit-line-clamp: 3; }
|
||||
a[role="button"]{transition:filter .15s ease,transform .15s ease}
|
||||
a[role="button"]:hover{filter:brightness(1.07)}
|
||||
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
|
||||
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
|
||||
details.kit-acc>summary{list-style:none;cursor:pointer}
|
||||
details.kit-acc>summary::-webkit-details-marker{display:none}
|
||||
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
|
||||
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="padding:var(--brand-size-xl) var(--brand-size-md);">
|
||||
<div style="max-width:600px;margin:0 auto;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;">
|
||||
<!-- preheader: shown in the inbox preview, hidden in body -->
|
||||
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:var(--brand-color-bg-container);">Свобода. Практика. Простота.</div>
|
||||
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">
|
||||
<!-- masthead -->
|
||||
<tr><td style="padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-lg);text-align:center;border-bottom:var(--brand-line-width) solid var(--brand-color-border);">
|
||||
<div style="display:inline-block;width:32px;height:var(--brand-line-width);background:var(--brand-color-primary);margin-bottom:var(--brand-size-md);"></div>
|
||||
<div style="font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-heading-3);letter-spacing:-0.02em;color:var(--brand-color-text);">Malenia</div>
|
||||
<div style="margin-top:var(--brand-size-xs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);text-transform:uppercase;letter-spacing:0.2em;">Sophisticated reads · Issue 01</div>
|
||||
</td></tr>
|
||||
|
||||
<!-- lede: inverted pyramid — core line + why-relevant, above the fold -->
|
||||
<tr><td style="padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-md);">
|
||||
<p style="margin:0 0 var(--brand-size-xs);text-transform:uppercase;letter-spacing:0.16em;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-primary);">In this issue</p>
|
||||
<h1 style="font-size:var(--brand-font-size-heading-2);line-height:1.18;letter-spacing:-0.015em;margin:0 0 var(--brand-size-sm);color:var(--brand-color-text);">Network freedom</h1>
|
||||
<p style="margin:0;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);line-height:1.6;">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</p>
|
||||
</td></tr>
|
||||
|
||||
<!-- primary CTA, surfaced above the fold (one job) -->
|
||||
<tr><td style="padding:0 var(--brand-size-xxl) var(--brand-size-xl);text-align:center;">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
|
||||
<tr><td style="border-radius:var(--brand-border-radius);"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Read this issue</a></td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
|
||||
<tr><td><div style="height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin:0 var(--brand-size-xxl);"></div></td></tr>
|
||||
|
||||
<!-- numbered stories -->
|
||||
<tr><td style="padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-lg);">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
|
||||
<tr>
|
||||
<td valign="top" style="width:54px;padding-right:var(--brand-size-md);">
|
||||
<div style="font-family:var(--display-family);font-size:var(--brand-font-size-heading-3);font-weight:var(--brand-font-weight-strong);line-height:1;color:var(--brand-color-primary);letter-spacing:-0.02em;">01</div>
|
||||
<div style="margin-top:var(--brand-size-xs);width:24px;height:var(--brand-line-width);background:var(--brand-color-primary-border);"></div>
|
||||
</td>
|
||||
<td valign="top">
|
||||
<h2 style="font-size:var(--brand-font-size-heading-4);line-height:1.25;letter-spacing:-0.01em;margin:0 0 var(--brand-size-xs);color:var(--brand-color-text);">Network freedom</h2>
|
||||
<p style="margin:0 0 var(--brand-size-md);color:var(--brand-color-text-secondary);font-size:var(--brand-font-size);line-height:var(--brand-line-height);">Sophisticated by design — and built into every surface Malenia ships.</p>
|
||||
<a href="#" style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-link);text-decoration:none;">Read the full story →</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td><div style="height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin:0 var(--brand-size-xxl);"></div></td></tr>
|
||||
<tr><td style="padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-lg);">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
|
||||
<tr>
|
||||
<td valign="top" style="width:54px;padding-right:var(--brand-size-md);">
|
||||
<div style="font-family:var(--display-family);font-size:var(--brand-font-size-heading-3);font-weight:var(--brand-font-weight-strong);line-height:1;color:var(--brand-color-primary);letter-spacing:-0.02em;">02</div>
|
||||
<div style="margin-top:var(--brand-size-xs);width:24px;height:var(--brand-line-width);background:var(--brand-color-primary-border);"></div>
|
||||
</td>
|
||||
<td valign="top">
|
||||
<h2 style="font-size:var(--brand-font-size-heading-4);line-height:1.25;letter-spacing:-0.01em;margin:0 0 var(--brand-size-xs);color:var(--brand-color-text);">Practical simplicity</h2>
|
||||
<p style="margin:0 0 var(--brand-size-md);color:var(--brand-color-text-secondary);font-size:var(--brand-font-size);line-height:var(--brand-line-height);">Quiet by design — and built into every surface Malenia ships.</p>
|
||||
<a href="#" style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-link);text-decoration:none;">See how it works →</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td><div style="height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin:0 var(--brand-size-xxl);"></div></td></tr>
|
||||
<tr><td style="padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-lg);">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
|
||||
<tr>
|
||||
<td valign="top" style="width:54px;padding-right:var(--brand-size-md);">
|
||||
<div style="font-family:var(--display-family);font-size:var(--brand-font-size-heading-3);font-weight:var(--brand-font-weight-strong);line-height:1;color:var(--brand-color-primary);letter-spacing:-0.02em;">03</div>
|
||||
<div style="margin-top:var(--brand-size-xs);width:24px;height:var(--brand-line-width);background:var(--brand-color-primary-border);"></div>
|
||||
</td>
|
||||
<td valign="top">
|
||||
<h2 style="font-size:var(--brand-font-size-heading-4);line-height:1.25;letter-spacing:-0.01em;margin:0 0 var(--brand-size-xs);color:var(--brand-color-text);">Aesthetic restraint</h2>
|
||||
<p style="margin:0 0 var(--brand-size-md);color:var(--brand-color-text-secondary);font-size:var(--brand-font-size);line-height:var(--brand-line-height);">Essential by design — and built into every surface Malenia ships.</p>
|
||||
<a href="#" style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-link);text-decoration:none;">Get the details →</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
|
||||
<tr><td><div style="height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin:0 var(--brand-size-xxl);"></div></td></tr>
|
||||
|
||||
<!-- closing CTA: same action, echoed once (email.md) -->
|
||||
<tr><td style="padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-xxl);text-align:center;">
|
||||
<p style="margin:0 0 var(--brand-size-md);color:var(--brand-color-text-secondary);font-size:var(--brand-font-size);">That's the issue. Malenia lands in your inbox next week.</p>
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
|
||||
<tr><td style="border-radius:var(--brand-border-radius);"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Read this issue</a></td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
<div style="padding:var(--brand-size-lg) var(--brand-size-xl);background:var(--brand-color-fill-quaternary);color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size-sm);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);text-align:center;">
|
||||
<p style="margin-bottom:var(--brand-size-xs);">You're receiving this because you follow Malenia.</p>
|
||||
<p><a href="#" style="color:var(--brand-color-text-tertiary);text-decoration:underline;">View in browser</a> · <a href="#" style="color:var(--brand-color-text-tertiary);text-decoration:underline;">Preferences</a> · <a href="#" style="color:var(--brand-color-text-tertiary);text-decoration:underline;">Unsubscribe</a></p>
|
||||
<p style="margin-top:var(--brand-size-xs);">© Malenia · malenia.space</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
434
.design/system/artifacts/poster.html
Normal file
434
.design/system/artifacts/poster.html
Normal file
@@ -0,0 +1,434 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style data-brand-fonts>
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-300.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../../fonts/cormorant-garamond-600.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Tenor Sans";
|
||||
src: url("../../fonts/tenor-sans-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Malenia — Poster</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap" />
|
||||
<style>
|
||||
:root {
|
||||
--brand-color-primary: #c9a84c;
|
||||
--brand-color-primary-bg: #fffef0;
|
||||
--brand-color-primary-bg-hover: #fcfaed;
|
||||
--brand-color-primary-border: #f0eace;
|
||||
--brand-color-primary-border-hover: #e3d69f;
|
||||
--brand-color-primary-hover: #d6bf74;
|
||||
--brand-color-primary-active: #a38336;
|
||||
--brand-color-primary-text: #573e14;
|
||||
--brand-color-success: #52c41a;
|
||||
--brand-color-success-bg: #f6ffed;
|
||||
--brand-color-success-border: #b6eb8f;
|
||||
--brand-color-success-hover: #72d13d;
|
||||
--brand-color-success-active: #389e0d;
|
||||
--brand-color-warning: #faad14;
|
||||
--brand-color-warning-bg: #fffbe6;
|
||||
--brand-color-warning-border: #ffe58f;
|
||||
--brand-color-warning-hover: #ffc53d;
|
||||
--brand-color-warning-active: #d48806;
|
||||
--brand-color-error: #ff4d4f;
|
||||
--brand-color-error-bg: #fff2f0;
|
||||
--brand-color-error-border: #ffccc7;
|
||||
--brand-color-error-hover: #ff7875;
|
||||
--brand-color-error-active: #d9363d;
|
||||
--brand-color-info: #c9a84c;
|
||||
--brand-color-info-bg: #fffef0;
|
||||
--brand-color-info-border: #f0eace;
|
||||
--brand-color-link: #c9a84c;
|
||||
--brand-color-link-hover: #d6bf74;
|
||||
--brand-color-link-active: #a38336;
|
||||
--brand-color-text: #35312b;
|
||||
--brand-color-text-secondary: #68655f;
|
||||
--brand-color-text-tertiary: #95928c;
|
||||
--brand-color-text-quaternary: #c2bfba;
|
||||
--brand-color-fill: #d8d5d0;
|
||||
--brand-color-fill-secondary: #ede9e4;
|
||||
--brand-color-fill-tertiary: #f1eee9;
|
||||
--brand-color-fill-quaternary: #f6f3ed;
|
||||
--brand-color-bg-layout: #f1eee9;
|
||||
--brand-color-bg-container: #faf7f2;
|
||||
--brand-color-bg-elevated: #faf7f2;
|
||||
--brand-color-border: #d8d5d0;
|
||||
--brand-color-border-secondary: #ede9e4;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #fffef0;
|
||||
--brand-primary-palette-2: #fcfaed;
|
||||
--brand-primary-palette-3: #f0eace;
|
||||
--brand-primary-palette-4: #e3d69f;
|
||||
--brand-primary-palette-5: #d6bf74;
|
||||
--brand-primary-palette-6: #c9a84c;
|
||||
--brand-primary-palette-7: #a38336;
|
||||
--brand-primary-palette-8: #7d5f23;
|
||||
--brand-primary-palette-9: #573e14;
|
||||
--brand-primary-palette-10: #30210b;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--brand-font-family);
|
||||
font-size: var(--brand-font-size);
|
||||
line-height: var(--brand-line-height);
|
||||
color: var(--brand-color-text);
|
||||
background: var(--brand-color-bg-layout);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
a { color: var(--brand-color-link); text-decoration: none; }
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
font-family: var(--display-family);
|
||||
line-height: var(--brand-line-height-heading);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-text);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
p { margin: 0; overflow-wrap: break-word; }
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
|
||||
.kicker {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: var(--brand-font-size-sm);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-primary);
|
||||
margin-bottom: var(--brand-size-sm);
|
||||
}
|
||||
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.clamp-2 { -webkit-line-clamp: 2; }
|
||||
.clamp-3 { -webkit-line-clamp: 3; }
|
||||
a[role="button"]{transition:filter .15s ease,transform .15s ease}
|
||||
a[role="button"]:hover{filter:brightness(1.07)}
|
||||
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
|
||||
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
|
||||
details.kit-acc>summary{list-style:none;cursor:pointer}
|
||||
details.kit-acc>summary::-webkit-details-marker{display:none}
|
||||
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
|
||||
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
|
||||
|
||||
.poster-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 48px); background: var(--brand-color-bg-layout); }
|
||||
.poster {
|
||||
position: relative;
|
||||
aspect-ratio: 3 / 4;
|
||||
width: min(720px, 92vw, calc((100vh - 96px) * 3 / 4));
|
||||
container-type: inline-size;
|
||||
background: var(--brand-color-bg-elevated);
|
||||
color: var(--brand-color-text);
|
||||
border: var(--brand-line-width) solid var(--brand-color-border-secondary);
|
||||
border-radius: 1.4cqi;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 36px 90px var(--brand-color-fill-secondary), 0 4px 12px var(--brand-color-fill-quaternary);
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
padding: 9cqi;
|
||||
}
|
||||
/* hairline frame inset — quiet print-mark, not a banner */
|
||||
.poster::after {
|
||||
content: "";
|
||||
position: absolute; inset: 4cqi;
|
||||
border: var(--brand-line-width) solid var(--brand-color-border-secondary);
|
||||
border-radius: 0.8cqi;
|
||||
pointer-events: none;
|
||||
}
|
||||
.poster > * { position: relative; z-index: 1; }
|
||||
|
||||
/* ── three type-size roles ────────────────────────────────────────── */
|
||||
.p-focal {
|
||||
font-family: var(--display-family);
|
||||
font-weight: var(--brand-font-weight-strong);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 0;
|
||||
text-wrap: balance;
|
||||
color: var(--brand-color-text);
|
||||
}
|
||||
.p-focal .accent { color: var(--brand-color-primary); }
|
||||
.p-sub {
|
||||
font-size: 3cqi; line-height: 1.42; margin: 0;
|
||||
color: var(--brand-color-text-secondary); max-width: 56cqi;
|
||||
}
|
||||
.p-meta {
|
||||
font-size: 1.9cqi; line-height: 1.4; letter-spacing: 0.02em;
|
||||
color: var(--brand-color-text-tertiary);
|
||||
}
|
||||
.p-kicker {
|
||||
text-transform: uppercase; letter-spacing: 0.28em;
|
||||
font-size: 1.8cqi; font-weight: var(--brand-font-weight-strong);
|
||||
color: var(--brand-color-text-tertiary); margin: 0;
|
||||
}
|
||||
|
||||
/* the single accent mark that sits on the focal */
|
||||
.p-rule { width: 12cqi; height: 0.7cqi; background: var(--brand-color-primary); border-radius: 0.4cqi; }
|
||||
|
||||
/* header band: tiny wordmark + edition tag, like a print masthead */
|
||||
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; }
|
||||
.p-wordmark { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.4cqi; letter-spacing: -0.01em; color: var(--brand-color-text); }
|
||||
|
||||
/* signature footer: logo small & confident, like a signature */
|
||||
.p-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqi; }
|
||||
.p-sign-mark { display: flex; align-items: center; gap: 1.6cqi; }
|
||||
.p-sign-dot { width: 2.6cqi; height: 2.6cqi; border-radius: 50%; background: var(--brand-color-primary); flex: 0 0 auto; }
|
||||
.p-sign-name { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.8cqi; letter-spacing: -0.01em; color: var(--brand-color-text); }
|
||||
|
||||
/* ── Event 5W grid ────────────────────────────────────────────────── */
|
||||
.p-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqi 5cqi; margin: 0; }
|
||||
.p-fact { display: flex; flex-direction: column; gap: 1cqi; min-width: 0; }
|
||||
.p-fact-k { text-transform: uppercase; letter-spacing: 0.2em; font-size: 1.6cqi; font-weight: var(--brand-font-weight-strong); color: var(--brand-color-text-tertiary); }
|
||||
.p-fact-v { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 3.4cqi; line-height: 1.12; color: var(--brand-color-text); letter-spacing: -0.01em; }
|
||||
/* When + Where are the most-looked-up facts → give them more weight */
|
||||
.p-fact--lead .p-fact-v { font-size: 4cqi; }
|
||||
|
||||
/* CTA block — one action, scan / short link, with a line-drawn code mark */
|
||||
.p-cta { display: flex; align-items: center; gap: 3.4cqi; padding-top: 4cqi; border-top: var(--brand-line-width) solid var(--brand-color-border-secondary); }
|
||||
.p-cta-copy { min-width: 0; }
|
||||
.p-cta-action { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 3cqi; color: var(--brand-color-text); margin: 0 0 0.6cqi; letter-spacing: -0.01em; }
|
||||
.p-cta-link { font-size: 2cqi; color: var(--brand-color-primary); font-weight: var(--brand-font-weight-strong); letter-spacing: 0.01em; }
|
||||
.p-code { flex: 0 0 auto; width: 17cqi; height: 17cqi; border: var(--brand-line-width) solid var(--brand-color-border); border-radius: 1cqi; padding: 1.8cqi; background: var(--brand-color-bg-container); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="poster-stage">
|
||||
<div class="poster">
|
||||
<header class="p-head">
|
||||
<span class="p-wordmark">Malenia</span>
|
||||
<span class="p-meta">malenia.space</span>
|
||||
</header>
|
||||
|
||||
<div style="display:flex;flex-direction:column;justify-content:center;gap:4cqi;padding:2cqi 0;">
|
||||
<p class="p-kicker">SOPHISTICATED · QUIET · ESSENTIAL</p>
|
||||
<h1 class="p-focal" style="font-size:12.5cqi;"><span class="accent">Свобода.</span> Практика. Простота.</h1>
|
||||
<div class="p-rule"></div>
|
||||
<p class="p-sub">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</p>
|
||||
</div>
|
||||
|
||||
<footer class="p-sign">
|
||||
<span class="p-sign-mark">
|
||||
<span class="p-sign-dot"></span>
|
||||
<span class="p-sign-name">Malenia</span>
|
||||
</span>
|
||||
<span class="p-meta" style="text-align:right;max-width:40cqi;">Sophisticated · Quiet</span>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
3769
.design/system/index.html
Normal file
3769
.design/system/index.html
Normal file
File diff suppressed because it is too large
Load Diff
587
.design/system/kit.dark.html
Normal file
587
.design/system/kit.dark.html
Normal file
@@ -0,0 +1,587 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style data-brand-fonts>
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-300.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Tenor Sans";
|
||||
src: url("../fonts/tenor-sans-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Malenia — component kit (dark)</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap" />
|
||||
<style>
|
||||
:root{
|
||||
--brand-color-primary: #b9a566;
|
||||
--brand-color-primary-bg: #292519;
|
||||
--brand-color-primary-bg-hover: #413922;
|
||||
--brand-color-primary-border: #4e4731;
|
||||
--brand-color-primary-border-hover: #6b613f;
|
||||
--brand-color-primary-hover: #cec391;
|
||||
--brand-color-primary-active: #928352;
|
||||
--brand-color-primary-text: #f5f3e6;
|
||||
--brand-color-success: #64b537;
|
||||
--brand-color-success-bg: #192913;
|
||||
--brand-color-success-border: #304d20;
|
||||
--brand-color-success-hover: #87ca5c;
|
||||
--brand-color-success-active: #518f2f;
|
||||
--brand-color-warning: #dcaa37;
|
||||
--brand-color-warning-bg: #312512;
|
||||
--brand-color-warning-border: #5b4920;
|
||||
--brand-color-warning-hover: #e8c35e;
|
||||
--brand-color-warning-active: #ad872f;
|
||||
--brand-color-error: #dc6966;
|
||||
--brand-color-error-bg: #32191a;
|
||||
--brand-color-error-border: #5b3231;
|
||||
--brand-color-error-hover: #e89590;
|
||||
--brand-color-error-active: #ad5553;
|
||||
--brand-color-info: #b9a566;
|
||||
--brand-color-info-bg: #292519;
|
||||
--brand-color-info-border: #4e4731;
|
||||
--brand-color-link: #b9a566;
|
||||
--brand-color-link-hover: #cec391;
|
||||
--brand-color-link-active: #928352;
|
||||
--brand-color-text: #dcdcdc;
|
||||
--brand-color-text-secondary: #adadad;
|
||||
--brand-color-text-tertiary: #7e7e7e;
|
||||
--brand-color-text-quaternary: #4f4f4f;
|
||||
--brand-color-fill: #3e3e3e;
|
||||
--brand-color-fill-secondary: #303030;
|
||||
--brand-color-fill-tertiary: #272727;
|
||||
--brand-color-fill-quaternary: #1d1d1d;
|
||||
--brand-color-bg-layout: #1d1d1d;
|
||||
--brand-color-bg-container: #141414;
|
||||
--brand-color-bg-elevated: #272727;
|
||||
--brand-color-border: #3e3e3e;
|
||||
--brand-color-border-secondary: #303030;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #292519;
|
||||
--brand-primary-palette-2: #413922;
|
||||
--brand-primary-palette-3: #4e4731;
|
||||
--brand-primary-palette-4: #6b613f;
|
||||
--brand-primary-palette-5: #928352;
|
||||
--brand-primary-palette-6: #b9a566;
|
||||
--brand-primary-palette-7: #cec391;
|
||||
--brand-primary-palette-8: #e5dfc5;
|
||||
--brand-primary-palette-9: #f5f3e6;
|
||||
--brand-primary-palette-10: #faf9ec;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{
|
||||
font-family:var(--brand-font-family);
|
||||
font-size:var(--brand-font-size);
|
||||
line-height:var(--brand-line-height);
|
||||
color:var(--brand-color-text);
|
||||
background:var(--brand-color-bg-layout);
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
h1,h2,h3{font-family:'Cormorant Garamond', serif, var(--brand-font-family)}
|
||||
a{color:inherit}
|
||||
a[role="button"]{transition:filter .15s ease,transform .15s ease}
|
||||
a[role="button"]:hover{filter:brightness(1.07)}
|
||||
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
|
||||
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
|
||||
details.kit-acc>summary{list-style:none;cursor:pointer}
|
||||
details.kit-acc>summary::-webkit-details-marker{display:none}
|
||||
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
|
||||
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
|
||||
.wrap{max-width:960px;margin:0 auto;padding:var(--brand-size-xxl) var(--brand-size-lg)}
|
||||
.panel{
|
||||
background:var(--brand-color-bg-container);
|
||||
border:var(--brand-line-width) solid var(--brand-color-border-secondary);
|
||||
border-radius:var(--brand-border-radius-lg);
|
||||
padding:var(--brand-size-xl);
|
||||
margin-bottom:var(--brand-size-xl);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<header style="margin-bottom:var(--brand-size-xxl)">
|
||||
<div style="display:inline-flex;align-items:center;gap:var(--brand-size-xs);padding:var(--brand-size-xxs) var(--brand-size-sm);border-radius:var(--brand-border-radius);background:var(--brand-color-primary-bg);color:var(--brand-color-primary);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong)">Malenia · dark theme</div>
|
||||
<h1 style="margin:var(--brand-size) 0 var(--brand-size-xxs);font-size:var(--brand-font-size-heading-1);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Malenia — component kit (dark)</h1>
|
||||
<p style="margin:0;max-width:60ch;font-size:var(--brand-font-size-lg);color:var(--brand-color-text-secondary)">Every component below is colored only by <code style="font-family:var(--brand-font-family-code)">var(--brand-*)</code> custom properties derived from one seed.</p>
|
||||
</header>
|
||||
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Buttons</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Five types across three sizes.</p>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Primary</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border)">Default</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border);border-style:dashed">Dashed</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-text);border-color:transparent">Text</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent">Link</a>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center;margin-top:var(--brand-size)">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Small</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Medium</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Large</a>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Form controls</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Inputs, selects, textareas, checkboxes and switches share control height, radius and focus ring.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--brand-size-lg);max-width:720px">
|
||||
<div><label style="display:block;margin-bottom:var(--brand-size-xxs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">Email</label><input type="text" placeholder="you@example.com" style="box-sizing:border-box;width:100%;height:var(--brand-control-height);padding:0 var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;transition:border-color var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out)"></div>
|
||||
<div><label style="display:block;margin-bottom:var(--brand-size-xxs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">Project name</label><input type="text" value="Malenia" style="box-sizing:border-box;width:100%;height:var(--brand-control-height);padding:0 var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;transition:border-color var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out)"></div>
|
||||
<div><label style="display:block;margin-bottom:var(--brand-size-xxs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">Team size</label><select style="box-sizing:border-box;width:100%;height:var(--brand-control-height);padding:0 var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none"><option>Just me</option><option selected>2–10</option><option>11–50</option><option>50+</option></select></div>
|
||||
<div><label style="display:block;margin-bottom:var(--brand-size-xxs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">Message</label><textarea rows="3" placeholder="Tell us what you're building…" style="box-sizing:border-box;display:block;width:100%;padding:var(--brand-size-xs) var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);resize:vertical;outline:none"></textarea></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center;margin-top:var(--brand-size-lg);gap:var(--brand-size-lg)">
|
||||
<label style="display:inline-flex;align-items:flex-start;gap:var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);cursor:pointer"><input type="checkbox" checked style="accent-color:var(--brand-color-primary);width:16px;height:16px;margin:3px 0 0;flex:0 0 auto"><span>Email me product updates</span></label>
|
||||
<label style="display:inline-flex;align-items:flex-start;gap:var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);cursor:pointer"><input type="checkbox" style="accent-color:var(--brand-color-primary);width:16px;height:16px;margin:3px 0 0;flex:0 0 auto"><span>I agree to the terms</span></label>
|
||||
<span style="display:inline-flex;align-items:center;gap:var(--brand-size-xs);"><span style="display:inline-flex;align-items:center;flex:0 0 auto;width:44px;height:24px;padding:2px;border-radius:12px;box-sizing:border-box;transition:background var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);background:var(--brand-color-primary);justify-content:flex-end"><span style="width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.2);"></span></span><span style="font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text-secondary);">Notifications</span></span>
|
||||
<span style="display:inline-flex;align-items:center;gap:var(--brand-size-xs);"><span style="display:inline-flex;align-items:center;flex:0 0 auto;width:44px;height:24px;padding:2px;border-radius:12px;box-sizing:border-box;transition:background var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);background:var(--brand-color-fill);justify-content:flex-start"><span style="width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.2);"></span></span><span style="font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text-secondary);">Public profile</span></span>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Navigation</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Tabs, breadcrumbs, pagination and steps for app shells and flows.</p>
|
||||
<div style="display:flex;gap:var(--brand-size-lg);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)"><span style="padding:var(--brand-size-xs) 2px;margin-bottom:calc(-1 * var(--brand-line-width));font-family:var(--brand-font-family);font-size:var(--brand-font-size);cursor:pointer;white-space:nowrap;color:var(--brand-color-primary);font-weight:var(--brand-font-weight-strong);border-bottom:2px solid var(--brand-color-primary)">Overview</span><span style="padding:var(--brand-size-xs) 2px;margin-bottom:calc(-1 * var(--brand-line-width));font-family:var(--brand-font-family);font-size:var(--brand-font-size);cursor:pointer;white-space:nowrap;color:var(--brand-color-text-secondary);border-bottom:2px solid transparent">Analytics</span><span style="padding:var(--brand-size-xs) 2px;margin-bottom:calc(-1 * var(--brand-line-width));font-family:var(--brand-font-family);font-size:var(--brand-font-size);cursor:pointer;white-space:nowrap;color:var(--brand-color-text-secondary);border-bottom:2px solid transparent">Reports</span><span style="padding:var(--brand-size-xs) 2px;margin-bottom:calc(-1 * var(--brand-line-width));font-family:var(--brand-font-family);font-size:var(--brand-font-size);cursor:pointer;white-space:nowrap;color:var(--brand-color-text-secondary);border-bottom:2px solid transparent">Settings</span></div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center;margin-top:var(--brand-size-lg);justify-content:space-between;gap:var(--brand-size-lg)">
|
||||
<nav style="display:inline-flex;align-items:center;gap:var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size);"><span style="color:var(--brand-color-text-tertiary);">Malenia</span><span style="color:var(--brand-color-text-quaternary);">/</span><span style="color:var(--brand-color-text-tertiary);">Projects</span><span style="color:var(--brand-color-text-quaternary);">/</span><span style="color:var(--brand-color-text);">Brand system</span></nav>
|
||||
<div style="display:inline-flex;gap:var(--brand-size-xxs);align-items:center;"><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">‹</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">1</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-primary);background:var(--brand-color-primary);color:#fff">2</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">3</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">4</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">5</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">›</span></div>
|
||||
</div>
|
||||
<div style="margin-top:var(--brand-size-xl);">
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;flex-wrap:wrap;font-family:var(--brand-font-family);"><div style="flex:0 1 auto;min-width:140px;display:flex;gap:var(--brand-size-sm);align-items:flex-start"><span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-primary);background:var(--brand-color-primary);color:#fff">✓</span><div style="min-width:0;padding-top:4px;"><div style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-text);line-height:1.3">Connect</div><div style="margin-top:2px;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:var(--brand-line-height)">Point at a source</div></div></div><div style="flex:1 1 var(--brand-size-xl);min-width:var(--brand-size-md);height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin-top:14px"></div><div style="flex:0 1 auto;min-width:140px;display:flex;gap:var(--brand-size-sm);align-items:flex-start"><span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-primary);background:var(--brand-color-primary);color:#fff">2</span><div style="min-width:0;padding-top:4px;"><div style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-text);line-height:1.3">Derive</div><div style="margin-top:2px;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:var(--brand-line-height)">Seed to tokens</div></div></div><div style="flex:1 1 var(--brand-size-xl);min-width:var(--brand-size-md);height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin-top:14px"></div><div style="flex:0 1 auto;min-width:140px;display:flex;gap:var(--brand-size-sm);align-items:flex-start"><span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border);background:var(--brand-color-bg-container);color:var(--brand-color-text-tertiary)">3</span><div style="min-width:0;padding-top:4px;"><div style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-text);line-height:1.3">Ship</div><div style="margin-top:2px;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:var(--brand-line-height)">Export everywhere</div></div></div></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Cards</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Elevated content surfaces with optional header & footer.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--brand-size-lg)">
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)">Overview</div><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1">Cards group related content on an elevated surface. Radius, border and shadow all read from the derived tokens.</div><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-fill-quaternary)"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent">Learn more</a></div></div>
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)">Usage</div><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1">Drop the same component into a dark or compact theme and it re-skins automatically — no per-variant markup.</div></div>
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1">A bodyonly card. <span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">live</span> <span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">beta</span></div></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Data display</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Tables, stats, avatars and a no-JS accordion for structured content.</p>
|
||||
<div style="border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;background:var(--brand-color-bg-container)"><table style="width:100%;border-collapse:collapse;font-family:var(--brand-font-family);"><thead><tr><th style="text-align:left;padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text-secondary);background:var(--brand-color-fill-quaternary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);white-space:nowrap">Token</th><th style="text-align:left;padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text-secondary);background:var(--brand-color-fill-quaternary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);white-space:nowrap">Role</th><th style="text-align:left;padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text-secondary);background:var(--brand-color-fill-quaternary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);white-space:nowrap">Value</th></tr></thead><tbody><tr><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">colorPrimary</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">Brand accent</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">seed</td></tr><tr><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">fontSize</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">Body type base</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">derived</td></tr><tr><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text)">borderRadius</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text)">Corner rounding</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text)">derived</td></tr></tbody></table></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--brand-size-lg);margin-top:var(--brand-size-xl)">
|
||||
<div style="font-family:var(--brand-font-family);min-width:0">
|
||||
<div style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:var(--brand-color-text);letter-spacing:-0.01em">10k+</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Teams onboard</div>
|
||||
</div>
|
||||
<div style="font-family:var(--brand-font-family);min-width:0">
|
||||
<div style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:var(--brand-color-text);letter-spacing:-0.01em">99.9%</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Uptime SLA</div>
|
||||
</div>
|
||||
<div style="font-family:var(--brand-font-family);min-width:0">
|
||||
<div style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:var(--brand-color-text);letter-spacing:-0.01em">4.9/5</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Average rating</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center;margin-top:var(--brand-size-xl)">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height-lg);height:var(--brand-control-height-lg);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">M</span>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">AL</span>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">TB</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">design</span> <span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-success);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">ops</span>
|
||||
</div>
|
||||
<div style="margin-top:var(--brand-size-xl);">
|
||||
<div><details class="kit-acc" open style="border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)"><span style="min-width:0;">What is a seed token?</span><span class="kit-acc-icon" style="flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400">+</span></summary>
|
||||
<div style="padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch">The ~20-field input every other token is derived from. Change one field and the whole system follows.</div>
|
||||
</details>
|
||||
<details class="kit-acc" style="border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)"><span style="min-width:0;">Can I theme dark mode separately?</span><span class="kit-acc-icon" style="flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400">+</span></summary>
|
||||
<div style="padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch">No need — dark is the same seed run through a different algorithm, so it can never drift from the light theme.</div>
|
||||
</details></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Marketing blocks</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Testimonials and pricing compose the primitives — landing pages are these in the right order.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--brand-size-lg)">
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1"><p style="margin:0 0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);line-height:1.6;color:var(--brand-color-text)">“We replaced three hand-maintained style guides with one generated system.”</p>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">AL</span>
|
||||
<div style="min-width:0;">
|
||||
<div style="font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);font-size:var(--brand-font-size);">Ada Lovelace</div>
|
||||
<div style="font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">Design lead</div>
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div style="display:flex;flex-direction:column;position:relative;background:var(--brand-color-bg-container);border:2px solid var(--brand-color-primary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);font-family:var(--brand-font-family);box-shadow:0 12px 32px var(--brand-color-primary-bg)">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);">
|
||||
<span style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text);">Pro</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Most popular</span>
|
||||
</div>
|
||||
<p style="margin:0 0 var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">For growing teams.</p>
|
||||
<div style="display:flex;align-items:baseline;gap:var(--brand-size-xxs);margin-bottom:var(--brand-size-lg);">
|
||||
<span style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1;letter-spacing:-0.01em;">$29</span>
|
||||
<span style="color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size-sm);">/ mo</span>
|
||||
</div>
|
||||
<ul style="list-style:none;margin:0 0 var(--brand-size-xl);padding:0;flex:1;"><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Unlimited brands</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Dark & compact themes</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Priority support</span></li></ul>
|
||||
<div style="display:flex;flex-direction:column;"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Start free trial</a></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)">Composable</div><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1">Marketing blocks (testimonials, pricing, stats) compose the same primitives — so a landing page is just kit pieces in the right order.</div><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-fill-quaternary)"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent">View artifacts</a></div></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Tags</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Compact labels keyed to functional colors.</p>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center">
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Primary</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-success);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Success</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-warning);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Warning</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-error);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Error</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-info);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Info</span>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Alerts & progress</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Semantic feedback states.</p>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size)">
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-sm) var(--brand-size);font-family:var(--brand-font-family);background:var(--brand-color-success-bg);border:var(--brand-line-width) solid var(--brand-color-success-border);border-radius:var(--brand-border-radius-lg)"><span style="flex:0 0 auto;margin-top:2px;color:var(--brand-color-success);font-size:var(--brand-font-size-lg);line-height:1">✓</span><div style="flex:1"><div style="font-size:var(--brand-font-size);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:var(--brand-line-height)">Brand system generated</div><div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size);color:var(--brand-color-text-secondary);line-height:var(--brand-line-height)">All design tokens were derived from a single seed color.</div></div></div>
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-sm) var(--brand-size);font-family:var(--brand-font-family);background:var(--brand-color-info-bg);border:var(--brand-line-width) solid var(--brand-color-info-border);border-radius:var(--brand-border-radius-lg)"><span style="flex:0 0 auto;margin-top:2px;color:var(--brand-color-info);font-size:var(--brand-font-size-lg);line-height:1">ℹ</span><div style="flex:1"><div style="font-size:var(--brand-font-size);font-weight:inherit;color:var(--brand-color-text);line-height:var(--brand-line-height)">Tokens map 1:1 onto CSS custom properties.</div></div></div>
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-sm) var(--brand-size);font-family:var(--brand-font-family);background:var(--brand-color-warning-bg);border:var(--brand-line-width) solid var(--brand-color-warning-border);border-radius:var(--brand-border-radius-lg)"><span style="flex:0 0 auto;margin-top:2px;color:var(--brand-color-warning);font-size:var(--brand-font-size-lg);line-height:1">⚠</span><div style="flex:1"><div style="font-size:var(--brand-font-size);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:var(--brand-line-height)">Wireframe mode is off</div><div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size);color:var(--brand-color-text-secondary);line-height:var(--brand-line-height)">Filled surfaces are in use for this theme.</div></div></div>
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-sm) var(--brand-size);font-family:var(--brand-font-family);background:var(--brand-color-error-bg);border:var(--brand-line-width) solid var(--brand-color-error-border);border-radius:var(--brand-border-radius-lg)"><span style="flex:0 0 auto;margin-top:2px;color:var(--brand-color-error);font-size:var(--brand-font-size-lg);line-height:1">✕</span><div style="flex:1"><div style="font-size:var(--brand-font-size);font-weight:inherit;color:var(--brand-color-text);line-height:var(--brand-line-height)">Could not reach the source URL.</div></div></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-sm);margin-top:var(--brand-size-xl);max-width:480px">
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);font-family:var(--brand-font-family);">
|
||||
<div style="flex:1;height:8px;border-radius:4px;background:var(--brand-color-fill-secondary);overflow:hidden"><div style="width:72%;height:100%;border-radius:4px;background:var(--brand-color-primary);transition:width var(--brand-motion-duration-slow) var(--brand-motion-ease-out)"></div></div>
|
||||
<span style="flex:0 0 auto;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">72%</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);font-family:var(--brand-font-family);">
|
||||
<div style="flex:1;height:8px;border-radius:4px;background:var(--brand-color-fill-secondary);overflow:hidden"><div style="width:100%;height:100%;border-radius:4px;background:var(--brand-color-success);transition:width var(--brand-motion-duration-slow) var(--brand-motion-ease-out)"></div></div>
|
||||
<span style="flex:0 0 auto;font-size:var(--brand-font-size-sm);color:var(--brand-color-success)">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Color</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">The full derived palette and neutrals.</p>
|
||||
<div style="margin-bottom:var(--brand-size-lg)">
|
||||
<div style="margin-bottom:var(--brand-size-sm);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.04em;text-transform:uppercase;color:var(--brand-color-text-tertiary)">Primary palette</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--brand-size-sm)"><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#292519"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">50</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#413922"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">200</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#4e4731"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">300</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#6b613f"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">400</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#928352"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">500</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#b9a566"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">600</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#cec391"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">700</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#e5dfc5"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">800</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#f5f3e6"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">900</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#faf9ec"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">1050</span>
|
||||
</div></div>
|
||||
</div><div style="margin-bottom:var(--brand-size-lg)">
|
||||
<div style="margin-bottom:var(--brand-size-sm);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.04em;text-transform:uppercase;color:var(--brand-color-text-tertiary)">Functional</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--brand-size-sm)"><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#b9a566"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">primary</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#64b537"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">success</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#dcaa37"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">warning</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#dc6966"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">error</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#b9a566"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">info</span>
|
||||
</div></div>
|
||||
</div><div style="margin-bottom:var(--brand-size-lg)">
|
||||
<div style="margin-bottom:var(--brand-size-sm);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.04em;text-transform:uppercase;color:var(--brand-color-text-tertiary)">Neutral text</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--brand-size-sm)"><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#dcdcdc"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">text</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#adadad"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">text/2</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#7e7e7e"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">text/3</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#4f4f4f"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">text/4</span>
|
||||
</div></div>
|
||||
</div><div style="margin-bottom:var(--brand-size-lg)">
|
||||
<div style="margin-bottom:var(--brand-size-sm);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.04em;text-transform:uppercase;color:var(--brand-color-text-tertiary)">Surfaces & borders</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--brand-size-sm)"><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#1d1d1d"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">layout</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#141414"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">container</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#272727"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">elevated</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#3e3e3e"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">border</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#303030"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">border/2</span>
|
||||
</div></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Type scale</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">A modular ramp derived from the base font size.</p>
|
||||
<div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 1 · 38px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:38px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 2 · 32px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:32px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 3 · 26px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:26px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 4 · 22px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:22px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 5 · 18px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:18px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Large · 18px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:18px;font-weight:inherit;line-height:var(--brand-line-height);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Body · 14px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:14px;font-weight:inherit;line-height:var(--brand-line-height);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Small · 12px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:12px;font-weight:inherit;line-height:var(--brand-line-height);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div>
|
||||
</section></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
587
.design/system/kit.html
Normal file
587
.design/system/kit.html
Normal file
@@ -0,0 +1,587 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style data-brand-fonts>
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-300.woff2") format("woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Cormorant Garamond";
|
||||
src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Tenor Sans";
|
||||
src: url("../fonts/tenor-sans-400.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Malenia — component kit</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap" />
|
||||
<style>
|
||||
:root{
|
||||
--brand-color-primary: #c9a84c;
|
||||
--brand-color-primary-bg: #fffef0;
|
||||
--brand-color-primary-bg-hover: #fcfaed;
|
||||
--brand-color-primary-border: #f0eace;
|
||||
--brand-color-primary-border-hover: #e3d69f;
|
||||
--brand-color-primary-hover: #d6bf74;
|
||||
--brand-color-primary-active: #a38336;
|
||||
--brand-color-primary-text: #573e14;
|
||||
--brand-color-success: #52c41a;
|
||||
--brand-color-success-bg: #f6ffed;
|
||||
--brand-color-success-border: #b6eb8f;
|
||||
--brand-color-success-hover: #72d13d;
|
||||
--brand-color-success-active: #389e0d;
|
||||
--brand-color-warning: #faad14;
|
||||
--brand-color-warning-bg: #fffbe6;
|
||||
--brand-color-warning-border: #ffe58f;
|
||||
--brand-color-warning-hover: #ffc53d;
|
||||
--brand-color-warning-active: #d48806;
|
||||
--brand-color-error: #ff4d4f;
|
||||
--brand-color-error-bg: #fff2f0;
|
||||
--brand-color-error-border: #ffccc7;
|
||||
--brand-color-error-hover: #ff7875;
|
||||
--brand-color-error-active: #d9363d;
|
||||
--brand-color-info: #c9a84c;
|
||||
--brand-color-info-bg: #fffef0;
|
||||
--brand-color-info-border: #f0eace;
|
||||
--brand-color-link: #c9a84c;
|
||||
--brand-color-link-hover: #d6bf74;
|
||||
--brand-color-link-active: #a38336;
|
||||
--brand-color-text: #35312b;
|
||||
--brand-color-text-secondary: #68655f;
|
||||
--brand-color-text-tertiary: #95928c;
|
||||
--brand-color-text-quaternary: #c2bfba;
|
||||
--brand-color-fill: #d8d5d0;
|
||||
--brand-color-fill-secondary: #ede9e4;
|
||||
--brand-color-fill-tertiary: #f1eee9;
|
||||
--brand-color-fill-quaternary: #f6f3ed;
|
||||
--brand-color-bg-layout: #f1eee9;
|
||||
--brand-color-bg-container: #faf7f2;
|
||||
--brand-color-bg-elevated: #faf7f2;
|
||||
--brand-color-border: #d8d5d0;
|
||||
--brand-color-border-secondary: #ede9e4;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #fffef0;
|
||||
--brand-primary-palette-2: #fcfaed;
|
||||
--brand-primary-palette-3: #f0eace;
|
||||
--brand-primary-palette-4: #e3d69f;
|
||||
--brand-primary-palette-5: #d6bf74;
|
||||
--brand-primary-palette-6: #c9a84c;
|
||||
--brand-primary-palette-7: #a38336;
|
||||
--brand-primary-palette-8: #7d5f23;
|
||||
--brand-primary-palette-9: #573e14;
|
||||
--brand-primary-palette-10: #30210b;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{
|
||||
font-family:var(--brand-font-family);
|
||||
font-size:var(--brand-font-size);
|
||||
line-height:var(--brand-line-height);
|
||||
color:var(--brand-color-text);
|
||||
background:var(--brand-color-bg-layout);
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
h1,h2,h3{font-family:'Cormorant Garamond', serif, var(--brand-font-family)}
|
||||
a{color:inherit}
|
||||
a[role="button"]{transition:filter .15s ease,transform .15s ease}
|
||||
a[role="button"]:hover{filter:brightness(1.07)}
|
||||
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
|
||||
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
|
||||
details.kit-acc>summary{list-style:none;cursor:pointer}
|
||||
details.kit-acc>summary::-webkit-details-marker{display:none}
|
||||
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
|
||||
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
|
||||
.wrap{max-width:960px;margin:0 auto;padding:var(--brand-size-xxl) var(--brand-size-lg)}
|
||||
.panel{
|
||||
background:var(--brand-color-bg-container);
|
||||
border:var(--brand-line-width) solid var(--brand-color-border-secondary);
|
||||
border-radius:var(--brand-border-radius-lg);
|
||||
padding:var(--brand-size-xl);
|
||||
margin-bottom:var(--brand-size-xl);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<header style="margin-bottom:var(--brand-size-xxl)">
|
||||
<div style="display:inline-flex;align-items:center;gap:var(--brand-size-xs);padding:var(--brand-size-xxs) var(--brand-size-sm);border-radius:var(--brand-border-radius);background:var(--brand-color-primary-bg);color:var(--brand-color-primary);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong)">Malenia · default theme</div>
|
||||
<h1 style="margin:var(--brand-size) 0 var(--brand-size-xxs);font-size:var(--brand-font-size-heading-1);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Malenia — component kit</h1>
|
||||
<p style="margin:0;max-width:60ch;font-size:var(--brand-font-size-lg);color:var(--brand-color-text-secondary)">Every component below is colored only by <code style="font-family:var(--brand-font-family-code)">var(--brand-*)</code> custom properties derived from one seed.</p>
|
||||
</header>
|
||||
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Buttons</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Five types across three sizes.</p>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Primary</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border)">Default</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border);border-style:dashed">Dashed</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-text);border-color:transparent">Text</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent">Link</a>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center;margin-top:var(--brand-size)">
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Small</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Medium</a>
|
||||
<a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Large</a>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Form controls</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Inputs, selects, textareas, checkboxes and switches share control height, radius and focus ring.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--brand-size-lg);max-width:720px">
|
||||
<div><label style="display:block;margin-bottom:var(--brand-size-xxs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">Email</label><input type="text" placeholder="you@example.com" style="box-sizing:border-box;width:100%;height:var(--brand-control-height);padding:0 var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;transition:border-color var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out)"></div>
|
||||
<div><label style="display:block;margin-bottom:var(--brand-size-xxs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">Project name</label><input type="text" value="Malenia" style="box-sizing:border-box;width:100%;height:var(--brand-control-height);padding:0 var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;transition:border-color var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out)"></div>
|
||||
<div><label style="display:block;margin-bottom:var(--brand-size-xxs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">Team size</label><select style="box-sizing:border-box;width:100%;height:var(--brand-control-height);padding:0 var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none"><option>Just me</option><option selected>2–10</option><option>11–50</option><option>50+</option></select></div>
|
||||
<div><label style="display:block;margin-bottom:var(--brand-size-xxs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">Message</label><textarea rows="3" placeholder="Tell us what you're building…" style="box-sizing:border-box;display:block;width:100%;padding:var(--brand-size-xs) var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);resize:vertical;outline:none"></textarea></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center;margin-top:var(--brand-size-lg);gap:var(--brand-size-lg)">
|
||||
<label style="display:inline-flex;align-items:flex-start;gap:var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);cursor:pointer"><input type="checkbox" checked style="accent-color:var(--brand-color-primary);width:16px;height:16px;margin:3px 0 0;flex:0 0 auto"><span>Email me product updates</span></label>
|
||||
<label style="display:inline-flex;align-items:flex-start;gap:var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);cursor:pointer"><input type="checkbox" style="accent-color:var(--brand-color-primary);width:16px;height:16px;margin:3px 0 0;flex:0 0 auto"><span>I agree to the terms</span></label>
|
||||
<span style="display:inline-flex;align-items:center;gap:var(--brand-size-xs);"><span style="display:inline-flex;align-items:center;flex:0 0 auto;width:44px;height:24px;padding:2px;border-radius:12px;box-sizing:border-box;transition:background var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);background:var(--brand-color-primary);justify-content:flex-end"><span style="width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.2);"></span></span><span style="font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text-secondary);">Notifications</span></span>
|
||||
<span style="display:inline-flex;align-items:center;gap:var(--brand-size-xs);"><span style="display:inline-flex;align-items:center;flex:0 0 auto;width:44px;height:24px;padding:2px;border-radius:12px;box-sizing:border-box;transition:background var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);background:var(--brand-color-fill);justify-content:flex-start"><span style="width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.2);"></span></span><span style="font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text-secondary);">Public profile</span></span>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Navigation</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Tabs, breadcrumbs, pagination and steps for app shells and flows.</p>
|
||||
<div style="display:flex;gap:var(--brand-size-lg);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)"><span style="padding:var(--brand-size-xs) 2px;margin-bottom:calc(-1 * var(--brand-line-width));font-family:var(--brand-font-family);font-size:var(--brand-font-size);cursor:pointer;white-space:nowrap;color:var(--brand-color-primary);font-weight:var(--brand-font-weight-strong);border-bottom:2px solid var(--brand-color-primary)">Overview</span><span style="padding:var(--brand-size-xs) 2px;margin-bottom:calc(-1 * var(--brand-line-width));font-family:var(--brand-font-family);font-size:var(--brand-font-size);cursor:pointer;white-space:nowrap;color:var(--brand-color-text-secondary);border-bottom:2px solid transparent">Analytics</span><span style="padding:var(--brand-size-xs) 2px;margin-bottom:calc(-1 * var(--brand-line-width));font-family:var(--brand-font-family);font-size:var(--brand-font-size);cursor:pointer;white-space:nowrap;color:var(--brand-color-text-secondary);border-bottom:2px solid transparent">Reports</span><span style="padding:var(--brand-size-xs) 2px;margin-bottom:calc(-1 * var(--brand-line-width));font-family:var(--brand-font-family);font-size:var(--brand-font-size);cursor:pointer;white-space:nowrap;color:var(--brand-color-text-secondary);border-bottom:2px solid transparent">Settings</span></div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center;margin-top:var(--brand-size-lg);justify-content:space-between;gap:var(--brand-size-lg)">
|
||||
<nav style="display:inline-flex;align-items:center;gap:var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size);"><span style="color:var(--brand-color-text-tertiary);">Malenia</span><span style="color:var(--brand-color-text-quaternary);">/</span><span style="color:var(--brand-color-text-tertiary);">Projects</span><span style="color:var(--brand-color-text-quaternary);">/</span><span style="color:var(--brand-color-text);">Brand system</span></nav>
|
||||
<div style="display:inline-flex;gap:var(--brand-size-xxs);align-items:center;"><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">‹</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">1</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-primary);background:var(--brand-color-primary);color:#fff">2</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">3</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">4</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">5</span><span style="display:inline-flex;align-items:center;justify-content:center;min-width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xxs);border-radius:var(--brand-border-radius-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);cursor:pointer;user-select:none;box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-bg-container);color:var(--brand-color-text-secondary)">›</span></div>
|
||||
</div>
|
||||
<div style="margin-top:var(--brand-size-xl);">
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;flex-wrap:wrap;font-family:var(--brand-font-family);"><div style="flex:0 1 auto;min-width:140px;display:flex;gap:var(--brand-size-sm);align-items:flex-start"><span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-primary);background:var(--brand-color-primary);color:#fff">✓</span><div style="min-width:0;padding-top:4px;"><div style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-text);line-height:1.3">Connect</div><div style="margin-top:2px;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:var(--brand-line-height)">Point at a source</div></div></div><div style="flex:1 1 var(--brand-size-xl);min-width:var(--brand-size-md);height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin-top:14px"></div><div style="flex:0 1 auto;min-width:140px;display:flex;gap:var(--brand-size-sm);align-items:flex-start"><span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-primary);background:var(--brand-color-primary);color:#fff">2</span><div style="min-width:0;padding-top:4px;"><div style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-text);line-height:1.3">Derive</div><div style="margin-top:2px;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:var(--brand-line-height)">Seed to tokens</div></div></div><div style="flex:1 1 var(--brand-size-xl);min-width:var(--brand-size-md);height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin-top:14px"></div><div style="flex:0 1 auto;min-width:140px;display:flex;gap:var(--brand-size-sm);align-items:flex-start"><span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);box-sizing:border-box;border:var(--brand-line-width) solid var(--brand-color-border);background:var(--brand-color-bg-container);color:var(--brand-color-text-tertiary)">3</span><div style="min-width:0;padding-top:4px;"><div style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-text);line-height:1.3">Ship</div><div style="margin-top:2px;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:var(--brand-line-height)">Export everywhere</div></div></div></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Cards</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Elevated content surfaces with optional header & footer.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--brand-size-lg)">
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)">Overview</div><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1">Cards group related content on an elevated surface. Radius, border and shadow all read from the derived tokens.</div><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-fill-quaternary)"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent">Learn more</a></div></div>
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)">Usage</div><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1">Drop the same component into a dark or compact theme and it re-skins automatically — no per-variant markup.</div></div>
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1">A bodyonly card. <span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">live</span> <span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">beta</span></div></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Data display</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Tables, stats, avatars and a no-JS accordion for structured content.</p>
|
||||
<div style="border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;background:var(--brand-color-bg-container)"><table style="width:100%;border-collapse:collapse;font-family:var(--brand-font-family);"><thead><tr><th style="text-align:left;padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text-secondary);background:var(--brand-color-fill-quaternary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);white-space:nowrap">Token</th><th style="text-align:left;padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text-secondary);background:var(--brand-color-fill-quaternary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);white-space:nowrap">Role</th><th style="text-align:left;padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text-secondary);background:var(--brand-color-fill-quaternary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);white-space:nowrap">Value</th></tr></thead><tbody><tr><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">colorPrimary</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">Brand accent</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">seed</td></tr><tr><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">fontSize</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">Body type base</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">derived</td></tr><tr><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text)">borderRadius</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text)">Corner rounding</td><td style="padding:var(--brand-size-sm) var(--brand-size-md);font-size:var(--brand-font-size);color:var(--brand-color-text)">derived</td></tr></tbody></table></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--brand-size-lg);margin-top:var(--brand-size-xl)">
|
||||
<div style="font-family:var(--brand-font-family);min-width:0">
|
||||
<div style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:var(--brand-color-text);letter-spacing:-0.01em">10k+</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Teams onboard</div>
|
||||
</div>
|
||||
<div style="font-family:var(--brand-font-family);min-width:0">
|
||||
<div style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:var(--brand-color-text);letter-spacing:-0.01em">99.9%</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Uptime SLA</div>
|
||||
</div>
|
||||
<div style="font-family:var(--brand-font-family);min-width:0">
|
||||
<div style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:var(--brand-color-text);letter-spacing:-0.01em">4.9/5</div>
|
||||
<div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Average rating</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center;margin-top:var(--brand-size-xl)">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height-lg);height:var(--brand-control-height-lg);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">M</span>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">AL</span>
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height-sm);height:var(--brand-control-height-sm);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">TB</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">design</span> <span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-success);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">ops</span>
|
||||
</div>
|
||||
<div style="margin-top:var(--brand-size-xl);">
|
||||
<div><details class="kit-acc" open style="border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)"><span style="min-width:0;">What is a seed token?</span><span class="kit-acc-icon" style="flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400">+</span></summary>
|
||||
<div style="padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch">The ~20-field input every other token is derived from. Change one field and the whole system follows.</div>
|
||||
</details>
|
||||
<details class="kit-acc" style="border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<summary style="display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)"><span style="min-width:0;">Can I theme dark mode separately?</span><span class="kit-acc-icon" style="flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400">+</span></summary>
|
||||
<div style="padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch">No need — dark is the same seed run through a different algorithm, so it can never drift from the light theme.</div>
|
||||
</details></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Marketing blocks</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Testimonials and pricing compose the primitives — landing pages are these in the right order.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--brand-size-lg)">
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1"><p style="margin:0 0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);line-height:1.6;color:var(--brand-color-text)">“We replaced three hand-maintained style guides with one generated system.”</p>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none">AL</span>
|
||||
<div style="min-width:0;">
|
||||
<div style="font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);font-size:var(--brand-font-size);">Ada Lovelace</div>
|
||||
<div style="font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">Design lead</div>
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div style="display:flex;flex-direction:column;position:relative;background:var(--brand-color-bg-container);border:2px solid var(--brand-color-primary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);font-family:var(--brand-font-family);box-shadow:0 12px 32px var(--brand-color-primary-bg)">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);">
|
||||
<span style="font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text);">Pro</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Most popular</span>
|
||||
</div>
|
||||
<p style="margin:0 0 var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);">For growing teams.</p>
|
||||
<div style="display:flex;align-items:baseline;gap:var(--brand-size-xxs);margin-bottom:var(--brand-size-lg);">
|
||||
<span style="font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1;letter-spacing:-0.01em;">$29</span>
|
||||
<span style="color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size-sm);">/ mo</span>
|
||||
</div>
|
||||
<ul style="list-style:none;margin:0 0 var(--brand-size-xl);padding:0;flex:1;"><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Unlimited brands</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Dark & compact themes</span></li><li style="display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)"><span style="color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;">✓</span><span>Priority support</span></li></ul>
|
||||
<div style="display:flex;flex-direction:column;"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)">Start free trial</a></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)"><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)">Composable</div><div style="padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1">Marketing blocks (testimonials, pricing, stats) compose the same primitives — so a landing page is just kit pieces in the right order.</div><div style="padding:var(--brand-size-md) var(--brand-size-lg);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-fill-quaternary)"><a role="button" tabindex="0" style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent">View artifacts</a></div></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Tags</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Compact labels keyed to functional colors.</p>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--brand-size);align-items:center">
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Primary</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-success);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Success</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-warning);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Warning</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-error);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Error</span>
|
||||
<span style="display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-info);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)">Info</span>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Alerts & progress</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">Semantic feedback states.</p>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size)">
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-sm) var(--brand-size);font-family:var(--brand-font-family);background:var(--brand-color-success-bg);border:var(--brand-line-width) solid var(--brand-color-success-border);border-radius:var(--brand-border-radius-lg)"><span style="flex:0 0 auto;margin-top:2px;color:var(--brand-color-success);font-size:var(--brand-font-size-lg);line-height:1">✓</span><div style="flex:1"><div style="font-size:var(--brand-font-size);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:var(--brand-line-height)">Brand system generated</div><div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size);color:var(--brand-color-text-secondary);line-height:var(--brand-line-height)">All design tokens were derived from a single seed color.</div></div></div>
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-sm) var(--brand-size);font-family:var(--brand-font-family);background:var(--brand-color-info-bg);border:var(--brand-line-width) solid var(--brand-color-info-border);border-radius:var(--brand-border-radius-lg)"><span style="flex:0 0 auto;margin-top:2px;color:var(--brand-color-info);font-size:var(--brand-font-size-lg);line-height:1">ℹ</span><div style="flex:1"><div style="font-size:var(--brand-font-size);font-weight:inherit;color:var(--brand-color-text);line-height:var(--brand-line-height)">Tokens map 1:1 onto CSS custom properties.</div></div></div>
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-sm) var(--brand-size);font-family:var(--brand-font-family);background:var(--brand-color-warning-bg);border:var(--brand-line-width) solid var(--brand-color-warning-border);border-radius:var(--brand-border-radius-lg)"><span style="flex:0 0 auto;margin-top:2px;color:var(--brand-color-warning);font-size:var(--brand-font-size-lg);line-height:1">⚠</span><div style="flex:1"><div style="font-size:var(--brand-font-size);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:var(--brand-line-height)">Wireframe mode is off</div><div style="margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size);color:var(--brand-color-text-secondary);line-height:var(--brand-line-height)">Filled surfaces are in use for this theme.</div></div></div>
|
||||
<div style="display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-sm) var(--brand-size);font-family:var(--brand-font-family);background:var(--brand-color-error-bg);border:var(--brand-line-width) solid var(--brand-color-error-border);border-radius:var(--brand-border-radius-lg)"><span style="flex:0 0 auto;margin-top:2px;color:var(--brand-color-error);font-size:var(--brand-font-size-lg);line-height:1">✕</span><div style="flex:1"><div style="font-size:var(--brand-font-size);font-weight:inherit;color:var(--brand-color-text);line-height:var(--brand-line-height)">Could not reach the source URL.</div></div></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--brand-size-sm);margin-top:var(--brand-size-xl);max-width:480px">
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);font-family:var(--brand-font-family);">
|
||||
<div style="flex:1;height:8px;border-radius:4px;background:var(--brand-color-fill-secondary);overflow:hidden"><div style="width:72%;height:100%;border-radius:4px;background:var(--brand-color-primary);transition:width var(--brand-motion-duration-slow) var(--brand-motion-ease-out)"></div></div>
|
||||
<span style="flex:0 0 auto;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary)">72%</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:var(--brand-size-sm);font-family:var(--brand-font-family);">
|
||||
<div style="flex:1;height:8px;border-radius:4px;background:var(--brand-color-fill-secondary);overflow:hidden"><div style="width:100%;height:100%;border-radius:4px;background:var(--brand-color-success);transition:width var(--brand-motion-duration-slow) var(--brand-motion-ease-out)"></div></div>
|
||||
<span style="flex:0 0 auto;font-size:var(--brand-font-size-sm);color:var(--brand-color-success)">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Color</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">The full derived palette and neutrals.</p>
|
||||
<div style="margin-bottom:var(--brand-size-lg)">
|
||||
<div style="margin-bottom:var(--brand-size-sm);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.04em;text-transform:uppercase;color:var(--brand-color-text-tertiary)">Primary palette</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--brand-size-sm)"><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#fffef0"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">50</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#fcfaed"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">200</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#f0eace"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">300</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#e3d69f"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">400</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#d6bf74"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">500</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#c9a84c"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">600</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#a38336"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">700</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#7d5f23"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">800</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#573e14"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">900</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#30210b"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">1050</span>
|
||||
</div></div>
|
||||
</div><div style="margin-bottom:var(--brand-size-lg)">
|
||||
<div style="margin-bottom:var(--brand-size-sm);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.04em;text-transform:uppercase;color:var(--brand-color-text-tertiary)">Functional</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--brand-size-sm)"><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#c9a84c"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">primary</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#52c41a"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">success</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#faad14"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">warning</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#ff4d4f"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">error</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#c9a84c"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">info</span>
|
||||
</div></div>
|
||||
</div><div style="margin-bottom:var(--brand-size-lg)">
|
||||
<div style="margin-bottom:var(--brand-size-sm);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.04em;text-transform:uppercase;color:var(--brand-color-text-tertiary)">Neutral text</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--brand-size-sm)"><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#35312b"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">text</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#68655f"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">text/2</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#95928c"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">text/3</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#c2bfba"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">text/4</span>
|
||||
</div></div>
|
||||
</div><div style="margin-bottom:var(--brand-size-lg)">
|
||||
<div style="margin-bottom:var(--brand-size-sm);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.04em;text-transform:uppercase;color:var(--brand-color-text-tertiary)">Surfaces & borders</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--brand-size-sm)"><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#f1eee9"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">layout</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#faf7f2"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">container</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#faf7f2"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">elevated</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#d8d5d0"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">border</span>
|
||||
</div><div style="display:flex;flex-direction:column;gap:var(--brand-size-xxs)">
|
||||
<div style="height:48px;border-radius:var(--brand-border-radius-sm);border:var(--brand-line-width) solid var(--brand-color-border-secondary);background:#ede9e4"></div>
|
||||
<span style="font-size:11px;font-family:var(--brand-font-family-code);color:var(--brand-color-text-tertiary)">border/2</span>
|
||||
</div></div>
|
||||
</div>
|
||||
</section></div>
|
||||
<div class="panel"><section style="margin-bottom:var(--brand-size-xxl)">
|
||||
<h2 style="margin:0;font-size:var(--brand-font-size-heading-4);font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">Type scale</h2>
|
||||
<p style="margin:var(--brand-size-xxs) 0 var(--brand-size-lg);font-size:var(--brand-font-size);color:var(--brand-color-text-tertiary)">A modular ramp derived from the base font size.</p>
|
||||
<div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 1 · 38px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:38px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 2 · 32px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:32px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 3 · 26px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:26px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 4 · 22px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:22px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Heading 5 · 18px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:18px;font-weight:var(--brand-font-weight-strong);line-height:var(--brand-line-height-heading);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Large · 18px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:18px;font-weight:inherit;line-height:var(--brand-line-height);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Body · 14px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:14px;font-weight:inherit;line-height:var(--brand-line-height);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div><div style="display:flex;align-items:baseline;gap:var(--brand-size-lg);padding:var(--brand-size-sm) 0;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)">
|
||||
<span style="flex:0 0 96px;font-family:var(--brand-font-family-code);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary)">Small · 12px</span>
|
||||
<span style="font-family:var(--brand-font-family);font-size:12px;font-weight:inherit;line-height:var(--brand-line-height);color:var(--brand-color-text)">The quick brown fox</span>
|
||||
</div>
|
||||
</section></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
17
.design/system/scripts/apply-design-tokens.mjs
Normal file
17
.design/system/scripts/apply-design-tokens.mjs
Normal file
@@ -0,0 +1,17 @@
|
||||
#!/usr/bin/env node
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const target = process.argv[2];
|
||||
if (!target) {
|
||||
console.error('Usage: node scripts/apply-design-tokens.mjs <target-css-path>');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const here = path.dirname(fileURLToPath(import.meta.url));
|
||||
const source = path.resolve(here, '..', 'variables.css');
|
||||
const destination = path.resolve(process.cwd(), target);
|
||||
fs.mkdirSync(path.dirname(destination), { recursive: true });
|
||||
fs.copyFileSync(source, destination);
|
||||
console.log(`Copied design tokens to ${destination}`);
|
||||
22
.design/system/seed.json
Normal file
22
.design/system/seed.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"colorPrimary": "#c9a84c",
|
||||
"colorSuccess": "#52c41a",
|
||||
"colorWarning": "#faad14",
|
||||
"colorError": "#ff4d4f",
|
||||
"colorInfo": "#c9a84c",
|
||||
"colorLink": "",
|
||||
"colorTextBase": "#1a1610",
|
||||
"colorBgBase": "#faf7f2",
|
||||
"fontFamily": "'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
|
||||
"fontFamilyCode": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
|
||||
"fontSize": 14,
|
||||
"borderRadius": 8,
|
||||
"sizeUnit": 4,
|
||||
"sizeStep": 4,
|
||||
"controlHeight": 32,
|
||||
"lineWidth": 1,
|
||||
"motionUnit": 0.1,
|
||||
"motionBase": 0,
|
||||
"wireframe": false,
|
||||
"motion": true
|
||||
}
|
||||
24
.design/system/theme.json
Normal file
24
.design/system/theme.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"token": {
|
||||
"colorPrimary": "#c9a84c",
|
||||
"colorSuccess": "#52c41a",
|
||||
"colorWarning": "#faad14",
|
||||
"colorError": "#ff4d4f",
|
||||
"colorInfo": "#c9a84c",
|
||||
"colorTextBase": "#1a1610",
|
||||
"colorBgBase": "#faf7f2",
|
||||
"fontFamily": "'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
|
||||
"fontFamilyCode": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
|
||||
"fontSize": 14,
|
||||
"borderRadius": 8,
|
||||
"sizeUnit": 4,
|
||||
"sizeStep": 4,
|
||||
"controlHeight": 32,
|
||||
"lineWidth": 1,
|
||||
"motionUnit": 0.1,
|
||||
"motionBase": 0,
|
||||
"wireframe": false,
|
||||
"motion": true
|
||||
},
|
||||
"algorithm": "default"
|
||||
}
|
||||
251
.design/system/tokens.compact.json
Normal file
251
.design/system/tokens.compact.json
Normal file
@@ -0,0 +1,251 @@
|
||||
{
|
||||
"algorithm": "compact",
|
||||
"colorPrimary": "#c9a84c",
|
||||
"colorPrimaryBg": "#fffef0",
|
||||
"colorPrimaryBgHover": "#fcfaed",
|
||||
"colorPrimaryBorder": "#f0eace",
|
||||
"colorPrimaryBorderHover": "#e3d69f",
|
||||
"colorPrimaryHover": "#d6bf74",
|
||||
"colorPrimaryActive": "#a38336",
|
||||
"colorPrimaryText": "#573e14",
|
||||
"colorSuccess": "#52c41a",
|
||||
"colorSuccessBg": "#f6ffed",
|
||||
"colorSuccessBorder": "#b6eb8f",
|
||||
"colorSuccessHover": "#72d13d",
|
||||
"colorSuccessActive": "#389e0d",
|
||||
"colorWarning": "#faad14",
|
||||
"colorWarningBg": "#fffbe6",
|
||||
"colorWarningBorder": "#ffe58f",
|
||||
"colorWarningHover": "#ffc53d",
|
||||
"colorWarningActive": "#d48806",
|
||||
"colorError": "#ff4d4f",
|
||||
"colorErrorBg": "#fff2f0",
|
||||
"colorErrorBorder": "#ffccc7",
|
||||
"colorErrorHover": "#ff7875",
|
||||
"colorErrorActive": "#d9363d",
|
||||
"colorInfo": "#c9a84c",
|
||||
"colorInfoBg": "#fffef0",
|
||||
"colorInfoBorder": "#f0eace",
|
||||
"colorLink": "#c9a84c",
|
||||
"colorLinkHover": "#d6bf74",
|
||||
"colorLinkActive": "#a38336",
|
||||
"colorText": "#35312b",
|
||||
"colorTextSecondary": "#68655f",
|
||||
"colorTextTertiary": "#95928c",
|
||||
"colorTextQuaternary": "#c2bfba",
|
||||
"colorFill": "#d8d5d0",
|
||||
"colorFillSecondary": "#ede9e4",
|
||||
"colorFillTertiary": "#f1eee9",
|
||||
"colorFillQuaternary": "#f6f3ed",
|
||||
"colorBgLayout": "#f1eee9",
|
||||
"colorBgContainer": "#faf7f2",
|
||||
"colorBgElevated": "#faf7f2",
|
||||
"colorBorder": "#d8d5d0",
|
||||
"colorBorderSecondary": "#ede9e4",
|
||||
"fontFamily": "'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
|
||||
"fontFamilyCode": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
|
||||
"fontSize": 14,
|
||||
"fontSizeSM": 12,
|
||||
"fontSizeLG": 18,
|
||||
"fontSizeXL": 22,
|
||||
"fontSizeHeading1": 38,
|
||||
"fontSizeHeading2": 32,
|
||||
"fontSizeHeading3": 26,
|
||||
"fontSizeHeading4": 22,
|
||||
"fontSizeHeading5": 18,
|
||||
"lineHeight": 1.5714285714285714,
|
||||
"lineHeightHeading": 1.25,
|
||||
"fontWeightStrong": 600,
|
||||
"sizeXXS": 4,
|
||||
"sizeXS": 8,
|
||||
"sizeSM": 8,
|
||||
"size": 12,
|
||||
"sizeMD": 16,
|
||||
"sizeLG": 16,
|
||||
"sizeXL": 24,
|
||||
"sizeXXL": 32,
|
||||
"borderRadiusXS": 3,
|
||||
"borderRadiusSM": 5,
|
||||
"borderRadius": 8,
|
||||
"borderRadiusLG": 10,
|
||||
"lineWidth": 1,
|
||||
"controlHeightXS": 14,
|
||||
"controlHeightSM": 21,
|
||||
"controlHeight": 28,
|
||||
"controlHeightLG": 35,
|
||||
"motionDurationFast": "0.1s",
|
||||
"motionDurationMid": "0.2s",
|
||||
"motionDurationSlow": "0.3s",
|
||||
"motionEaseInOut": "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
||||
"motionEaseOut": "cubic-bezier(0.215, 0.61, 0.355, 1)",
|
||||
"primaryPalette": [
|
||||
"#fffef0",
|
||||
"#fcfaed",
|
||||
"#f0eace",
|
||||
"#e3d69f",
|
||||
"#d6bf74",
|
||||
"#c9a84c",
|
||||
"#a38336",
|
||||
"#7d5f23",
|
||||
"#573e14",
|
||||
"#30210b"
|
||||
],
|
||||
"presets": {
|
||||
"red": [
|
||||
"#fff1f0",
|
||||
"#ffcbc7",
|
||||
"#ffa39e",
|
||||
"#ff7775",
|
||||
"#ff4d50",
|
||||
"#f5222d",
|
||||
"#cf1323",
|
||||
"#a8071a",
|
||||
"#820014",
|
||||
"#5c0011"
|
||||
],
|
||||
"volcano": [
|
||||
"#fff2e8",
|
||||
"#ffd8bf",
|
||||
"#ffbb96",
|
||||
"#ff9c6e",
|
||||
"#ff7a45",
|
||||
"#fa541c",
|
||||
"#d4380d",
|
||||
"#ad2202",
|
||||
"#871500",
|
||||
"#610c00"
|
||||
],
|
||||
"orange": [
|
||||
"#fff7e6",
|
||||
"#ffe7ba",
|
||||
"#ffd591",
|
||||
"#ffc069",
|
||||
"#ffa940",
|
||||
"#fa8c16",
|
||||
"#d46b08",
|
||||
"#ad4e00",
|
||||
"#873800",
|
||||
"#612500"
|
||||
],
|
||||
"gold": [
|
||||
"#fffbe6",
|
||||
"#fff1b8",
|
||||
"#ffe58f",
|
||||
"#ffd666",
|
||||
"#ffc53d",
|
||||
"#faad14",
|
||||
"#d48806",
|
||||
"#ad6800",
|
||||
"#874c00",
|
||||
"#613400"
|
||||
],
|
||||
"yellow": [
|
||||
"#feffe6",
|
||||
"#ffffb8",
|
||||
"#fffb8f",
|
||||
"#fff566",
|
||||
"#ffeb3d",
|
||||
"#fadb14",
|
||||
"#d4b106",
|
||||
"#ad8a00",
|
||||
"#876700",
|
||||
"#614700"
|
||||
],
|
||||
"lime": [
|
||||
"#fcffe6",
|
||||
"#f4ffb8",
|
||||
"#eaff8f",
|
||||
"#d3f261",
|
||||
"#bae637",
|
||||
"#a0d911",
|
||||
"#7bb305",
|
||||
"#5b8c00",
|
||||
"#3f6600",
|
||||
"#254000"
|
||||
],
|
||||
"green": [
|
||||
"#f6ffed",
|
||||
"#d9f7be",
|
||||
"#b6eb8f",
|
||||
"#94de64",
|
||||
"#72d13d",
|
||||
"#52c41a",
|
||||
"#389e0d",
|
||||
"#227804",
|
||||
"#135200",
|
||||
"#092b00"
|
||||
],
|
||||
"cyan": [
|
||||
"#e6fffb",
|
||||
"#b5f5ec",
|
||||
"#87e8de",
|
||||
"#5cdbd3",
|
||||
"#36cfc9",
|
||||
"#13c2c2",
|
||||
"#08979c",
|
||||
"#006d75",
|
||||
"#00474f",
|
||||
"#002329"
|
||||
],
|
||||
"blue": [
|
||||
"#e6f4ff",
|
||||
"#bae0ff",
|
||||
"#91caff",
|
||||
"#69b1ff",
|
||||
"#4096ff",
|
||||
"#1677ff",
|
||||
"#0958d9",
|
||||
"#003eb3",
|
||||
"#002c8c",
|
||||
"#001d66"
|
||||
],
|
||||
"geekblue": [
|
||||
"#f0f5ff",
|
||||
"#d6e4ff",
|
||||
"#adc6ff",
|
||||
"#85a5ff",
|
||||
"#597df7",
|
||||
"#2f54eb",
|
||||
"#1d39c4",
|
||||
"#10229e",
|
||||
"#061178",
|
||||
"#030852"
|
||||
],
|
||||
"purple": [
|
||||
"#f9f0ff",
|
||||
"#efdbff",
|
||||
"#d4adf7",
|
||||
"#b37feb",
|
||||
"#9254de",
|
||||
"#722ed1",
|
||||
"#531dab",
|
||||
"#391085",
|
||||
"#22075e",
|
||||
"#120338"
|
||||
],
|
||||
"magenta": [
|
||||
"#fff0f6",
|
||||
"#ffd6e7",
|
||||
"#ffadd2",
|
||||
"#ff85bf",
|
||||
"#f759aa",
|
||||
"#eb2f96",
|
||||
"#c41d7e",
|
||||
"#9e1067",
|
||||
"#780650",
|
||||
"#520339"
|
||||
],
|
||||
"grey": [
|
||||
"#a6a6a6",
|
||||
"#999999",
|
||||
"#8c8c8c",
|
||||
"#808080",
|
||||
"#737373",
|
||||
"#666666",
|
||||
"#404040",
|
||||
"#1a1a1a",
|
||||
"#000000",
|
||||
"#000000"
|
||||
]
|
||||
}
|
||||
}
|
||||
251
.design/system/tokens.dark.json
Normal file
251
.design/system/tokens.dark.json
Normal file
@@ -0,0 +1,251 @@
|
||||
{
|
||||
"algorithm": "dark",
|
||||
"colorPrimary": "#b9a566",
|
||||
"colorPrimaryBg": "#292519",
|
||||
"colorPrimaryBgHover": "#413922",
|
||||
"colorPrimaryBorder": "#4e4731",
|
||||
"colorPrimaryBorderHover": "#6b613f",
|
||||
"colorPrimaryHover": "#cec391",
|
||||
"colorPrimaryActive": "#928352",
|
||||
"colorPrimaryText": "#f5f3e6",
|
||||
"colorSuccess": "#64b537",
|
||||
"colorSuccessBg": "#192913",
|
||||
"colorSuccessBorder": "#304d20",
|
||||
"colorSuccessHover": "#87ca5c",
|
||||
"colorSuccessActive": "#518f2f",
|
||||
"colorWarning": "#dcaa37",
|
||||
"colorWarningBg": "#312512",
|
||||
"colorWarningBorder": "#5b4920",
|
||||
"colorWarningHover": "#e8c35e",
|
||||
"colorWarningActive": "#ad872f",
|
||||
"colorError": "#dc6966",
|
||||
"colorErrorBg": "#32191a",
|
||||
"colorErrorBorder": "#5b3231",
|
||||
"colorErrorHover": "#e89590",
|
||||
"colorErrorActive": "#ad5553",
|
||||
"colorInfo": "#b9a566",
|
||||
"colorInfoBg": "#292519",
|
||||
"colorInfoBorder": "#4e4731",
|
||||
"colorLink": "#b9a566",
|
||||
"colorLinkHover": "#cec391",
|
||||
"colorLinkActive": "#928352",
|
||||
"colorText": "#dcdcdc",
|
||||
"colorTextSecondary": "#adadad",
|
||||
"colorTextTertiary": "#7e7e7e",
|
||||
"colorTextQuaternary": "#4f4f4f",
|
||||
"colorFill": "#3e3e3e",
|
||||
"colorFillSecondary": "#303030",
|
||||
"colorFillTertiary": "#272727",
|
||||
"colorFillQuaternary": "#1d1d1d",
|
||||
"colorBgLayout": "#1d1d1d",
|
||||
"colorBgContainer": "#141414",
|
||||
"colorBgElevated": "#272727",
|
||||
"colorBorder": "#3e3e3e",
|
||||
"colorBorderSecondary": "#303030",
|
||||
"fontFamily": "'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
|
||||
"fontFamilyCode": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
|
||||
"fontSize": 14,
|
||||
"fontSizeSM": 12,
|
||||
"fontSizeLG": 18,
|
||||
"fontSizeXL": 22,
|
||||
"fontSizeHeading1": 38,
|
||||
"fontSizeHeading2": 32,
|
||||
"fontSizeHeading3": 26,
|
||||
"fontSizeHeading4": 22,
|
||||
"fontSizeHeading5": 18,
|
||||
"lineHeight": 1.5714285714285714,
|
||||
"lineHeightHeading": 1.25,
|
||||
"fontWeightStrong": 600,
|
||||
"sizeXXS": 4,
|
||||
"sizeXS": 8,
|
||||
"sizeSM": 12,
|
||||
"size": 16,
|
||||
"sizeMD": 20,
|
||||
"sizeLG": 24,
|
||||
"sizeXL": 32,
|
||||
"sizeXXL": 48,
|
||||
"borderRadiusXS": 3,
|
||||
"borderRadiusSM": 5,
|
||||
"borderRadius": 8,
|
||||
"borderRadiusLG": 10,
|
||||
"lineWidth": 1,
|
||||
"controlHeightXS": 16,
|
||||
"controlHeightSM": 24,
|
||||
"controlHeight": 32,
|
||||
"controlHeightLG": 40,
|
||||
"motionDurationFast": "0.1s",
|
||||
"motionDurationMid": "0.2s",
|
||||
"motionDurationSlow": "0.3s",
|
||||
"motionEaseInOut": "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
||||
"motionEaseOut": "cubic-bezier(0.215, 0.61, 0.355, 1)",
|
||||
"primaryPalette": [
|
||||
"#292519",
|
||||
"#413922",
|
||||
"#4e4731",
|
||||
"#6b613f",
|
||||
"#928352",
|
||||
"#b9a566",
|
||||
"#cec391",
|
||||
"#e5dfc5",
|
||||
"#f5f3e6",
|
||||
"#faf9ec"
|
||||
],
|
||||
"presets": {
|
||||
"red": [
|
||||
"#fff1f0",
|
||||
"#ffcbc7",
|
||||
"#ffa39e",
|
||||
"#ff7775",
|
||||
"#ff4d50",
|
||||
"#f5222d",
|
||||
"#cf1323",
|
||||
"#a8071a",
|
||||
"#820014",
|
||||
"#5c0011"
|
||||
],
|
||||
"volcano": [
|
||||
"#fff2e8",
|
||||
"#ffd8bf",
|
||||
"#ffbb96",
|
||||
"#ff9c6e",
|
||||
"#ff7a45",
|
||||
"#fa541c",
|
||||
"#d4380d",
|
||||
"#ad2202",
|
||||
"#871500",
|
||||
"#610c00"
|
||||
],
|
||||
"orange": [
|
||||
"#fff7e6",
|
||||
"#ffe7ba",
|
||||
"#ffd591",
|
||||
"#ffc069",
|
||||
"#ffa940",
|
||||
"#fa8c16",
|
||||
"#d46b08",
|
||||
"#ad4e00",
|
||||
"#873800",
|
||||
"#612500"
|
||||
],
|
||||
"gold": [
|
||||
"#fffbe6",
|
||||
"#fff1b8",
|
||||
"#ffe58f",
|
||||
"#ffd666",
|
||||
"#ffc53d",
|
||||
"#faad14",
|
||||
"#d48806",
|
||||
"#ad6800",
|
||||
"#874c00",
|
||||
"#613400"
|
||||
],
|
||||
"yellow": [
|
||||
"#feffe6",
|
||||
"#ffffb8",
|
||||
"#fffb8f",
|
||||
"#fff566",
|
||||
"#ffeb3d",
|
||||
"#fadb14",
|
||||
"#d4b106",
|
||||
"#ad8a00",
|
||||
"#876700",
|
||||
"#614700"
|
||||
],
|
||||
"lime": [
|
||||
"#fcffe6",
|
||||
"#f4ffb8",
|
||||
"#eaff8f",
|
||||
"#d3f261",
|
||||
"#bae637",
|
||||
"#a0d911",
|
||||
"#7bb305",
|
||||
"#5b8c00",
|
||||
"#3f6600",
|
||||
"#254000"
|
||||
],
|
||||
"green": [
|
||||
"#f6ffed",
|
||||
"#d9f7be",
|
||||
"#b6eb8f",
|
||||
"#94de64",
|
||||
"#72d13d",
|
||||
"#52c41a",
|
||||
"#389e0d",
|
||||
"#227804",
|
||||
"#135200",
|
||||
"#092b00"
|
||||
],
|
||||
"cyan": [
|
||||
"#e6fffb",
|
||||
"#b5f5ec",
|
||||
"#87e8de",
|
||||
"#5cdbd3",
|
||||
"#36cfc9",
|
||||
"#13c2c2",
|
||||
"#08979c",
|
||||
"#006d75",
|
||||
"#00474f",
|
||||
"#002329"
|
||||
],
|
||||
"blue": [
|
||||
"#e6f4ff",
|
||||
"#bae0ff",
|
||||
"#91caff",
|
||||
"#69b1ff",
|
||||
"#4096ff",
|
||||
"#1677ff",
|
||||
"#0958d9",
|
||||
"#003eb3",
|
||||
"#002c8c",
|
||||
"#001d66"
|
||||
],
|
||||
"geekblue": [
|
||||
"#f0f5ff",
|
||||
"#d6e4ff",
|
||||
"#adc6ff",
|
||||
"#85a5ff",
|
||||
"#597df7",
|
||||
"#2f54eb",
|
||||
"#1d39c4",
|
||||
"#10229e",
|
||||
"#061178",
|
||||
"#030852"
|
||||
],
|
||||
"purple": [
|
||||
"#f9f0ff",
|
||||
"#efdbff",
|
||||
"#d4adf7",
|
||||
"#b37feb",
|
||||
"#9254de",
|
||||
"#722ed1",
|
||||
"#531dab",
|
||||
"#391085",
|
||||
"#22075e",
|
||||
"#120338"
|
||||
],
|
||||
"magenta": [
|
||||
"#fff0f6",
|
||||
"#ffd6e7",
|
||||
"#ffadd2",
|
||||
"#ff85bf",
|
||||
"#f759aa",
|
||||
"#eb2f96",
|
||||
"#c41d7e",
|
||||
"#9e1067",
|
||||
"#780650",
|
||||
"#520339"
|
||||
],
|
||||
"grey": [
|
||||
"#a6a6a6",
|
||||
"#999999",
|
||||
"#8c8c8c",
|
||||
"#808080",
|
||||
"#737373",
|
||||
"#666666",
|
||||
"#404040",
|
||||
"#1a1a1a",
|
||||
"#000000",
|
||||
"#000000"
|
||||
]
|
||||
}
|
||||
}
|
||||
251
.design/system/tokens.default.json
Normal file
251
.design/system/tokens.default.json
Normal file
@@ -0,0 +1,251 @@
|
||||
{
|
||||
"algorithm": "default",
|
||||
"colorPrimary": "#c9a84c",
|
||||
"colorPrimaryBg": "#fffef0",
|
||||
"colorPrimaryBgHover": "#fcfaed",
|
||||
"colorPrimaryBorder": "#f0eace",
|
||||
"colorPrimaryBorderHover": "#e3d69f",
|
||||
"colorPrimaryHover": "#d6bf74",
|
||||
"colorPrimaryActive": "#a38336",
|
||||
"colorPrimaryText": "#573e14",
|
||||
"colorSuccess": "#52c41a",
|
||||
"colorSuccessBg": "#f6ffed",
|
||||
"colorSuccessBorder": "#b6eb8f",
|
||||
"colorSuccessHover": "#72d13d",
|
||||
"colorSuccessActive": "#389e0d",
|
||||
"colorWarning": "#faad14",
|
||||
"colorWarningBg": "#fffbe6",
|
||||
"colorWarningBorder": "#ffe58f",
|
||||
"colorWarningHover": "#ffc53d",
|
||||
"colorWarningActive": "#d48806",
|
||||
"colorError": "#ff4d4f",
|
||||
"colorErrorBg": "#fff2f0",
|
||||
"colorErrorBorder": "#ffccc7",
|
||||
"colorErrorHover": "#ff7875",
|
||||
"colorErrorActive": "#d9363d",
|
||||
"colorInfo": "#c9a84c",
|
||||
"colorInfoBg": "#fffef0",
|
||||
"colorInfoBorder": "#f0eace",
|
||||
"colorLink": "#c9a84c",
|
||||
"colorLinkHover": "#d6bf74",
|
||||
"colorLinkActive": "#a38336",
|
||||
"colorText": "#35312b",
|
||||
"colorTextSecondary": "#68655f",
|
||||
"colorTextTertiary": "#95928c",
|
||||
"colorTextQuaternary": "#c2bfba",
|
||||
"colorFill": "#d8d5d0",
|
||||
"colorFillSecondary": "#ede9e4",
|
||||
"colorFillTertiary": "#f1eee9",
|
||||
"colorFillQuaternary": "#f6f3ed",
|
||||
"colorBgLayout": "#f1eee9",
|
||||
"colorBgContainer": "#faf7f2",
|
||||
"colorBgElevated": "#faf7f2",
|
||||
"colorBorder": "#d8d5d0",
|
||||
"colorBorderSecondary": "#ede9e4",
|
||||
"fontFamily": "'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
|
||||
"fontFamilyCode": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
|
||||
"fontSize": 14,
|
||||
"fontSizeSM": 12,
|
||||
"fontSizeLG": 18,
|
||||
"fontSizeXL": 22,
|
||||
"fontSizeHeading1": 38,
|
||||
"fontSizeHeading2": 32,
|
||||
"fontSizeHeading3": 26,
|
||||
"fontSizeHeading4": 22,
|
||||
"fontSizeHeading5": 18,
|
||||
"lineHeight": 1.5714285714285714,
|
||||
"lineHeightHeading": 1.25,
|
||||
"fontWeightStrong": 600,
|
||||
"sizeXXS": 4,
|
||||
"sizeXS": 8,
|
||||
"sizeSM": 12,
|
||||
"size": 16,
|
||||
"sizeMD": 20,
|
||||
"sizeLG": 24,
|
||||
"sizeXL": 32,
|
||||
"sizeXXL": 48,
|
||||
"borderRadiusXS": 3,
|
||||
"borderRadiusSM": 5,
|
||||
"borderRadius": 8,
|
||||
"borderRadiusLG": 10,
|
||||
"lineWidth": 1,
|
||||
"controlHeightXS": 16,
|
||||
"controlHeightSM": 24,
|
||||
"controlHeight": 32,
|
||||
"controlHeightLG": 40,
|
||||
"motionDurationFast": "0.1s",
|
||||
"motionDurationMid": "0.2s",
|
||||
"motionDurationSlow": "0.3s",
|
||||
"motionEaseInOut": "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
||||
"motionEaseOut": "cubic-bezier(0.215, 0.61, 0.355, 1)",
|
||||
"primaryPalette": [
|
||||
"#fffef0",
|
||||
"#fcfaed",
|
||||
"#f0eace",
|
||||
"#e3d69f",
|
||||
"#d6bf74",
|
||||
"#c9a84c",
|
||||
"#a38336",
|
||||
"#7d5f23",
|
||||
"#573e14",
|
||||
"#30210b"
|
||||
],
|
||||
"presets": {
|
||||
"red": [
|
||||
"#fff1f0",
|
||||
"#ffcbc7",
|
||||
"#ffa39e",
|
||||
"#ff7775",
|
||||
"#ff4d50",
|
||||
"#f5222d",
|
||||
"#cf1323",
|
||||
"#a8071a",
|
||||
"#820014",
|
||||
"#5c0011"
|
||||
],
|
||||
"volcano": [
|
||||
"#fff2e8",
|
||||
"#ffd8bf",
|
||||
"#ffbb96",
|
||||
"#ff9c6e",
|
||||
"#ff7a45",
|
||||
"#fa541c",
|
||||
"#d4380d",
|
||||
"#ad2202",
|
||||
"#871500",
|
||||
"#610c00"
|
||||
],
|
||||
"orange": [
|
||||
"#fff7e6",
|
||||
"#ffe7ba",
|
||||
"#ffd591",
|
||||
"#ffc069",
|
||||
"#ffa940",
|
||||
"#fa8c16",
|
||||
"#d46b08",
|
||||
"#ad4e00",
|
||||
"#873800",
|
||||
"#612500"
|
||||
],
|
||||
"gold": [
|
||||
"#fffbe6",
|
||||
"#fff1b8",
|
||||
"#ffe58f",
|
||||
"#ffd666",
|
||||
"#ffc53d",
|
||||
"#faad14",
|
||||
"#d48806",
|
||||
"#ad6800",
|
||||
"#874c00",
|
||||
"#613400"
|
||||
],
|
||||
"yellow": [
|
||||
"#feffe6",
|
||||
"#ffffb8",
|
||||
"#fffb8f",
|
||||
"#fff566",
|
||||
"#ffeb3d",
|
||||
"#fadb14",
|
||||
"#d4b106",
|
||||
"#ad8a00",
|
||||
"#876700",
|
||||
"#614700"
|
||||
],
|
||||
"lime": [
|
||||
"#fcffe6",
|
||||
"#f4ffb8",
|
||||
"#eaff8f",
|
||||
"#d3f261",
|
||||
"#bae637",
|
||||
"#a0d911",
|
||||
"#7bb305",
|
||||
"#5b8c00",
|
||||
"#3f6600",
|
||||
"#254000"
|
||||
],
|
||||
"green": [
|
||||
"#f6ffed",
|
||||
"#d9f7be",
|
||||
"#b6eb8f",
|
||||
"#94de64",
|
||||
"#72d13d",
|
||||
"#52c41a",
|
||||
"#389e0d",
|
||||
"#227804",
|
||||
"#135200",
|
||||
"#092b00"
|
||||
],
|
||||
"cyan": [
|
||||
"#e6fffb",
|
||||
"#b5f5ec",
|
||||
"#87e8de",
|
||||
"#5cdbd3",
|
||||
"#36cfc9",
|
||||
"#13c2c2",
|
||||
"#08979c",
|
||||
"#006d75",
|
||||
"#00474f",
|
||||
"#002329"
|
||||
],
|
||||
"blue": [
|
||||
"#e6f4ff",
|
||||
"#bae0ff",
|
||||
"#91caff",
|
||||
"#69b1ff",
|
||||
"#4096ff",
|
||||
"#1677ff",
|
||||
"#0958d9",
|
||||
"#003eb3",
|
||||
"#002c8c",
|
||||
"#001d66"
|
||||
],
|
||||
"geekblue": [
|
||||
"#f0f5ff",
|
||||
"#d6e4ff",
|
||||
"#adc6ff",
|
||||
"#85a5ff",
|
||||
"#597df7",
|
||||
"#2f54eb",
|
||||
"#1d39c4",
|
||||
"#10229e",
|
||||
"#061178",
|
||||
"#030852"
|
||||
],
|
||||
"purple": [
|
||||
"#f9f0ff",
|
||||
"#efdbff",
|
||||
"#d4adf7",
|
||||
"#b37feb",
|
||||
"#9254de",
|
||||
"#722ed1",
|
||||
"#531dab",
|
||||
"#391085",
|
||||
"#22075e",
|
||||
"#120338"
|
||||
],
|
||||
"magenta": [
|
||||
"#fff0f6",
|
||||
"#ffd6e7",
|
||||
"#ffadd2",
|
||||
"#ff85bf",
|
||||
"#f759aa",
|
||||
"#eb2f96",
|
||||
"#c41d7e",
|
||||
"#9e1067",
|
||||
"#780650",
|
||||
"#520339"
|
||||
],
|
||||
"grey": [
|
||||
"#a6a6a6",
|
||||
"#999999",
|
||||
"#8c8c8c",
|
||||
"#808080",
|
||||
"#737373",
|
||||
"#666666",
|
||||
"#404040",
|
||||
"#1a1a1a",
|
||||
"#000000",
|
||||
"#000000"
|
||||
]
|
||||
}
|
||||
}
|
||||
441
.design/system/variables.css
Normal file
441
.design/system/variables.css
Normal file
@@ -0,0 +1,441 @@
|
||||
:root {
|
||||
--brand-color-primary: #c9a84c;
|
||||
--brand-color-primary-bg: #fffef0;
|
||||
--brand-color-primary-bg-hover: #fcfaed;
|
||||
--brand-color-primary-border: #f0eace;
|
||||
--brand-color-primary-border-hover: #e3d69f;
|
||||
--brand-color-primary-hover: #d6bf74;
|
||||
--brand-color-primary-active: #a38336;
|
||||
--brand-color-primary-text: #573e14;
|
||||
--brand-color-success: #52c41a;
|
||||
--brand-color-success-bg: #f6ffed;
|
||||
--brand-color-success-border: #b6eb8f;
|
||||
--brand-color-success-hover: #72d13d;
|
||||
--brand-color-success-active: #389e0d;
|
||||
--brand-color-warning: #faad14;
|
||||
--brand-color-warning-bg: #fffbe6;
|
||||
--brand-color-warning-border: #ffe58f;
|
||||
--brand-color-warning-hover: #ffc53d;
|
||||
--brand-color-warning-active: #d48806;
|
||||
--brand-color-error: #ff4d4f;
|
||||
--brand-color-error-bg: #fff2f0;
|
||||
--brand-color-error-border: #ffccc7;
|
||||
--brand-color-error-hover: #ff7875;
|
||||
--brand-color-error-active: #d9363d;
|
||||
--brand-color-info: #c9a84c;
|
||||
--brand-color-info-bg: #fffef0;
|
||||
--brand-color-info-border: #f0eace;
|
||||
--brand-color-link: #c9a84c;
|
||||
--brand-color-link-hover: #d6bf74;
|
||||
--brand-color-link-active: #a38336;
|
||||
--brand-color-text: #35312b;
|
||||
--brand-color-text-secondary: #68655f;
|
||||
--brand-color-text-tertiary: #95928c;
|
||||
--brand-color-text-quaternary: #c2bfba;
|
||||
--brand-color-fill: #d8d5d0;
|
||||
--brand-color-fill-secondary: #ede9e4;
|
||||
--brand-color-fill-tertiary: #f1eee9;
|
||||
--brand-color-fill-quaternary: #f6f3ed;
|
||||
--brand-color-bg-layout: #f1eee9;
|
||||
--brand-color-bg-container: #faf7f2;
|
||||
--brand-color-bg-elevated: #faf7f2;
|
||||
--brand-color-border: #d8d5d0;
|
||||
--brand-color-border-secondary: #ede9e4;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #fffef0;
|
||||
--brand-primary-palette-2: #fcfaed;
|
||||
--brand-primary-palette-3: #f0eace;
|
||||
--brand-primary-palette-4: #e3d69f;
|
||||
--brand-primary-palette-5: #d6bf74;
|
||||
--brand-primary-palette-6: #c9a84c;
|
||||
--brand-primary-palette-7: #a38336;
|
||||
--brand-primary-palette-8: #7d5f23;
|
||||
--brand-primary-palette-9: #573e14;
|
||||
--brand-primary-palette-10: #30210b;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--brand-color-primary: #b9a566;
|
||||
--brand-color-primary-bg: #292519;
|
||||
--brand-color-primary-bg-hover: #413922;
|
||||
--brand-color-primary-border: #4e4731;
|
||||
--brand-color-primary-border-hover: #6b613f;
|
||||
--brand-color-primary-hover: #cec391;
|
||||
--brand-color-primary-active: #928352;
|
||||
--brand-color-primary-text: #f5f3e6;
|
||||
--brand-color-success: #64b537;
|
||||
--brand-color-success-bg: #192913;
|
||||
--brand-color-success-border: #304d20;
|
||||
--brand-color-success-hover: #87ca5c;
|
||||
--brand-color-success-active: #518f2f;
|
||||
--brand-color-warning: #dcaa37;
|
||||
--brand-color-warning-bg: #312512;
|
||||
--brand-color-warning-border: #5b4920;
|
||||
--brand-color-warning-hover: #e8c35e;
|
||||
--brand-color-warning-active: #ad872f;
|
||||
--brand-color-error: #dc6966;
|
||||
--brand-color-error-bg: #32191a;
|
||||
--brand-color-error-border: #5b3231;
|
||||
--brand-color-error-hover: #e89590;
|
||||
--brand-color-error-active: #ad5553;
|
||||
--brand-color-info: #b9a566;
|
||||
--brand-color-info-bg: #292519;
|
||||
--brand-color-info-border: #4e4731;
|
||||
--brand-color-link: #b9a566;
|
||||
--brand-color-link-hover: #cec391;
|
||||
--brand-color-link-active: #928352;
|
||||
--brand-color-text: #dcdcdc;
|
||||
--brand-color-text-secondary: #adadad;
|
||||
--brand-color-text-tertiary: #7e7e7e;
|
||||
--brand-color-text-quaternary: #4f4f4f;
|
||||
--brand-color-fill: #3e3e3e;
|
||||
--brand-color-fill-secondary: #303030;
|
||||
--brand-color-fill-tertiary: #272727;
|
||||
--brand-color-fill-quaternary: #1d1d1d;
|
||||
--brand-color-bg-layout: #1d1d1d;
|
||||
--brand-color-bg-container: #141414;
|
||||
--brand-color-bg-elevated: #272727;
|
||||
--brand-color-border: #3e3e3e;
|
||||
--brand-color-border-secondary: #303030;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #292519;
|
||||
--brand-primary-palette-2: #413922;
|
||||
--brand-primary-palette-3: #4e4731;
|
||||
--brand-primary-palette-4: #6b613f;
|
||||
--brand-primary-palette-5: #928352;
|
||||
--brand-primary-palette-6: #b9a566;
|
||||
--brand-primary-palette-7: #cec391;
|
||||
--brand-primary-palette-8: #e5dfc5;
|
||||
--brand-primary-palette-9: #f5f3e6;
|
||||
--brand-primary-palette-10: #faf9ec;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
220
.design/system/variables.dark.css
Normal file
220
.design/system/variables.dark.css
Normal file
@@ -0,0 +1,220 @@
|
||||
:root {
|
||||
--brand-color-primary: #b9a566;
|
||||
--brand-color-primary-bg: #292519;
|
||||
--brand-color-primary-bg-hover: #413922;
|
||||
--brand-color-primary-border: #4e4731;
|
||||
--brand-color-primary-border-hover: #6b613f;
|
||||
--brand-color-primary-hover: #cec391;
|
||||
--brand-color-primary-active: #928352;
|
||||
--brand-color-primary-text: #f5f3e6;
|
||||
--brand-color-success: #64b537;
|
||||
--brand-color-success-bg: #192913;
|
||||
--brand-color-success-border: #304d20;
|
||||
--brand-color-success-hover: #87ca5c;
|
||||
--brand-color-success-active: #518f2f;
|
||||
--brand-color-warning: #dcaa37;
|
||||
--brand-color-warning-bg: #312512;
|
||||
--brand-color-warning-border: #5b4920;
|
||||
--brand-color-warning-hover: #e8c35e;
|
||||
--brand-color-warning-active: #ad872f;
|
||||
--brand-color-error: #dc6966;
|
||||
--brand-color-error-bg: #32191a;
|
||||
--brand-color-error-border: #5b3231;
|
||||
--brand-color-error-hover: #e89590;
|
||||
--brand-color-error-active: #ad5553;
|
||||
--brand-color-info: #b9a566;
|
||||
--brand-color-info-bg: #292519;
|
||||
--brand-color-info-border: #4e4731;
|
||||
--brand-color-link: #b9a566;
|
||||
--brand-color-link-hover: #cec391;
|
||||
--brand-color-link-active: #928352;
|
||||
--brand-color-text: #dcdcdc;
|
||||
--brand-color-text-secondary: #adadad;
|
||||
--brand-color-text-tertiary: #7e7e7e;
|
||||
--brand-color-text-quaternary: #4f4f4f;
|
||||
--brand-color-fill: #3e3e3e;
|
||||
--brand-color-fill-secondary: #303030;
|
||||
--brand-color-fill-tertiary: #272727;
|
||||
--brand-color-fill-quaternary: #1d1d1d;
|
||||
--brand-color-bg-layout: #1d1d1d;
|
||||
--brand-color-bg-container: #141414;
|
||||
--brand-color-bg-elevated: #272727;
|
||||
--brand-color-border: #3e3e3e;
|
||||
--brand-color-border-secondary: #303030;
|
||||
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--brand-font-size: 14px;
|
||||
--brand-font-size-sm: 12px;
|
||||
--brand-font-size-lg: 18px;
|
||||
--brand-font-size-xl: 22px;
|
||||
--brand-font-size-heading-1: 38px;
|
||||
--brand-font-size-heading-2: 32px;
|
||||
--brand-font-size-heading-3: 26px;
|
||||
--brand-font-size-heading-4: 22px;
|
||||
--brand-font-size-heading-5: 18px;
|
||||
--brand-line-height: 1.5714285714285714;
|
||||
--brand-line-height-heading: 1.25;
|
||||
--brand-font-weight-strong: 600;
|
||||
--brand-size-xxs: 4px;
|
||||
--brand-size-xs: 8px;
|
||||
--brand-size-sm: 12px;
|
||||
--brand-size: 16px;
|
||||
--brand-size-md: 20px;
|
||||
--brand-size-lg: 24px;
|
||||
--brand-size-xl: 32px;
|
||||
--brand-size-xxl: 48px;
|
||||
--brand-border-radius-xs: 3px;
|
||||
--brand-border-radius-sm: 5px;
|
||||
--brand-border-radius: 8px;
|
||||
--brand-border-radius-lg: 10px;
|
||||
--brand-line-width: 1px;
|
||||
--brand-control-height-xs: 16px;
|
||||
--brand-control-height-sm: 24px;
|
||||
--brand-control-height: 32px;
|
||||
--brand-control-height-lg: 40px;
|
||||
--brand-motion-duration-fast: 0.1s;
|
||||
--brand-motion-duration-mid: 0.2s;
|
||||
--brand-motion-duration-slow: 0.3s;
|
||||
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--brand-primary-palette-1: #292519;
|
||||
--brand-primary-palette-2: #413922;
|
||||
--brand-primary-palette-3: #4e4731;
|
||||
--brand-primary-palette-4: #6b613f;
|
||||
--brand-primary-palette-5: #928352;
|
||||
--brand-primary-palette-6: #b9a566;
|
||||
--brand-primary-palette-7: #cec391;
|
||||
--brand-primary-palette-8: #e5dfc5;
|
||||
--brand-primary-palette-9: #f5f3e6;
|
||||
--brand-primary-palette-10: #faf9ec;
|
||||
--brand-presets-red-1: #fff1f0;
|
||||
--brand-presets-red-2: #ffcbc7;
|
||||
--brand-presets-red-3: #ffa39e;
|
||||
--brand-presets-red-4: #ff7775;
|
||||
--brand-presets-red-5: #ff4d50;
|
||||
--brand-presets-red-6: #f5222d;
|
||||
--brand-presets-red-7: #cf1323;
|
||||
--brand-presets-red-8: #a8071a;
|
||||
--brand-presets-red-9: #820014;
|
||||
--brand-presets-red-10: #5c0011;
|
||||
--brand-presets-volcano-1: #fff2e8;
|
||||
--brand-presets-volcano-2: #ffd8bf;
|
||||
--brand-presets-volcano-3: #ffbb96;
|
||||
--brand-presets-volcano-4: #ff9c6e;
|
||||
--brand-presets-volcano-5: #ff7a45;
|
||||
--brand-presets-volcano-6: #fa541c;
|
||||
--brand-presets-volcano-7: #d4380d;
|
||||
--brand-presets-volcano-8: #ad2202;
|
||||
--brand-presets-volcano-9: #871500;
|
||||
--brand-presets-volcano-10: #610c00;
|
||||
--brand-presets-orange-1: #fff7e6;
|
||||
--brand-presets-orange-2: #ffe7ba;
|
||||
--brand-presets-orange-3: #ffd591;
|
||||
--brand-presets-orange-4: #ffc069;
|
||||
--brand-presets-orange-5: #ffa940;
|
||||
--brand-presets-orange-6: #fa8c16;
|
||||
--brand-presets-orange-7: #d46b08;
|
||||
--brand-presets-orange-8: #ad4e00;
|
||||
--brand-presets-orange-9: #873800;
|
||||
--brand-presets-orange-10: #612500;
|
||||
--brand-presets-gold-1: #fffbe6;
|
||||
--brand-presets-gold-2: #fff1b8;
|
||||
--brand-presets-gold-3: #ffe58f;
|
||||
--brand-presets-gold-4: #ffd666;
|
||||
--brand-presets-gold-5: #ffc53d;
|
||||
--brand-presets-gold-6: #faad14;
|
||||
--brand-presets-gold-7: #d48806;
|
||||
--brand-presets-gold-8: #ad6800;
|
||||
--brand-presets-gold-9: #874c00;
|
||||
--brand-presets-gold-10: #613400;
|
||||
--brand-presets-yellow-1: #feffe6;
|
||||
--brand-presets-yellow-2: #ffffb8;
|
||||
--brand-presets-yellow-3: #fffb8f;
|
||||
--brand-presets-yellow-4: #fff566;
|
||||
--brand-presets-yellow-5: #ffeb3d;
|
||||
--brand-presets-yellow-6: #fadb14;
|
||||
--brand-presets-yellow-7: #d4b106;
|
||||
--brand-presets-yellow-8: #ad8a00;
|
||||
--brand-presets-yellow-9: #876700;
|
||||
--brand-presets-yellow-10: #614700;
|
||||
--brand-presets-lime-1: #fcffe6;
|
||||
--brand-presets-lime-2: #f4ffb8;
|
||||
--brand-presets-lime-3: #eaff8f;
|
||||
--brand-presets-lime-4: #d3f261;
|
||||
--brand-presets-lime-5: #bae637;
|
||||
--brand-presets-lime-6: #a0d911;
|
||||
--brand-presets-lime-7: #7bb305;
|
||||
--brand-presets-lime-8: #5b8c00;
|
||||
--brand-presets-lime-9: #3f6600;
|
||||
--brand-presets-lime-10: #254000;
|
||||
--brand-presets-green-1: #f6ffed;
|
||||
--brand-presets-green-2: #d9f7be;
|
||||
--brand-presets-green-3: #b6eb8f;
|
||||
--brand-presets-green-4: #94de64;
|
||||
--brand-presets-green-5: #72d13d;
|
||||
--brand-presets-green-6: #52c41a;
|
||||
--brand-presets-green-7: #389e0d;
|
||||
--brand-presets-green-8: #227804;
|
||||
--brand-presets-green-9: #135200;
|
||||
--brand-presets-green-10: #092b00;
|
||||
--brand-presets-cyan-1: #e6fffb;
|
||||
--brand-presets-cyan-2: #b5f5ec;
|
||||
--brand-presets-cyan-3: #87e8de;
|
||||
--brand-presets-cyan-4: #5cdbd3;
|
||||
--brand-presets-cyan-5: #36cfc9;
|
||||
--brand-presets-cyan-6: #13c2c2;
|
||||
--brand-presets-cyan-7: #08979c;
|
||||
--brand-presets-cyan-8: #006d75;
|
||||
--brand-presets-cyan-9: #00474f;
|
||||
--brand-presets-cyan-10: #002329;
|
||||
--brand-presets-blue-1: #e6f4ff;
|
||||
--brand-presets-blue-2: #bae0ff;
|
||||
--brand-presets-blue-3: #91caff;
|
||||
--brand-presets-blue-4: #69b1ff;
|
||||
--brand-presets-blue-5: #4096ff;
|
||||
--brand-presets-blue-6: #1677ff;
|
||||
--brand-presets-blue-7: #0958d9;
|
||||
--brand-presets-blue-8: #003eb3;
|
||||
--brand-presets-blue-9: #002c8c;
|
||||
--brand-presets-blue-10: #001d66;
|
||||
--brand-presets-geekblue-1: #f0f5ff;
|
||||
--brand-presets-geekblue-2: #d6e4ff;
|
||||
--brand-presets-geekblue-3: #adc6ff;
|
||||
--brand-presets-geekblue-4: #85a5ff;
|
||||
--brand-presets-geekblue-5: #597df7;
|
||||
--brand-presets-geekblue-6: #2f54eb;
|
||||
--brand-presets-geekblue-7: #1d39c4;
|
||||
--brand-presets-geekblue-8: #10229e;
|
||||
--brand-presets-geekblue-9: #061178;
|
||||
--brand-presets-geekblue-10: #030852;
|
||||
--brand-presets-purple-1: #f9f0ff;
|
||||
--brand-presets-purple-2: #efdbff;
|
||||
--brand-presets-purple-3: #d4adf7;
|
||||
--brand-presets-purple-4: #b37feb;
|
||||
--brand-presets-purple-5: #9254de;
|
||||
--brand-presets-purple-6: #722ed1;
|
||||
--brand-presets-purple-7: #531dab;
|
||||
--brand-presets-purple-8: #391085;
|
||||
--brand-presets-purple-9: #22075e;
|
||||
--brand-presets-purple-10: #120338;
|
||||
--brand-presets-magenta-1: #fff0f6;
|
||||
--brand-presets-magenta-2: #ffd6e7;
|
||||
--brand-presets-magenta-3: #ffadd2;
|
||||
--brand-presets-magenta-4: #ff85bf;
|
||||
--brand-presets-magenta-5: #f759aa;
|
||||
--brand-presets-magenta-6: #eb2f96;
|
||||
--brand-presets-magenta-7: #c41d7e;
|
||||
--brand-presets-magenta-8: #9e1067;
|
||||
--brand-presets-magenta-9: #780650;
|
||||
--brand-presets-magenta-10: #520339;
|
||||
--brand-presets-grey-1: #a6a6a6;
|
||||
--brand-presets-grey-2: #999999;
|
||||
--brand-presets-grey-3: #8c8c8c;
|
||||
--brand-presets-grey-4: #808080;
|
||||
--brand-presets-grey-5: #737373;
|
||||
--brand-presets-grey-6: #666666;
|
||||
--brand-presets-grey-7: #404040;
|
||||
--brand-presets-grey-8: #1a1a1a;
|
||||
--brand-presets-grey-9: #000000;
|
||||
--brand-presets-grey-10: #000000;
|
||||
}
|
||||
Reference in New Issue
Block a user