@timebraid/tokens 1.3.0 → 1.5.0

package/README.md

@@ -20,7 +20,7 @@ Light is `:root`; dark is `[data-theme="dark"]` on the root element, set by `wat
 - `tokens/base.css` - element defaults.
 - `tokens/fonts.css` - font stacks. Currently loads Instrument Sans + JetBrains Mono from Google Fonts; swap for local `@font-face` when licensed files exist.
 - `tokens/v1/` - the 1.2 theme, kept for one release behind `styles-v1.css`.
-- `assets/` - `logo.svg` (64px+), `logo-small.svg` (16/32), PNG exports 16→1024.
+- `assets/` - the stopwatch icon: `logo.svg` (the indigo plate, 64px+), `logo-small.svg` (flat mark below 64px), `mark-transparent.svg`, `mark-mono.svg`, `icon-light.svg`, PNG exports 16 to 1024; see `assets/icon-README.md`. Centred masters since 1.5.0. A PNG export can also be imported directly by path (e.g. `@timebraid/tokens/assets/icon-256.png`) as a plain URL when a consumer needs a static image outside `TLogo`, such as a placeholder avatar photo.
 
 ## Rails
 

package/assets/icon-README.md

@@ -1,32 +1,47 @@
-# Timebraid - app icon
+# Timebraid app icon
 
-Four white uprights and an amber fifth mark drawn as a growth curve, on a deep indigo
-gradient. `TLogo` in `@timebraid/vue` is the only component that renders it.
+A stopwatch on an indigo squircle plate. Brushed-steel case with a knurled bezel, an amber start crown at 12 and two side pushers. The dial is split by a diagonal from bottom-left to top-right: the top-left half is an analog stopwatch face (black hands, amber seconds hand, indigo minute track), the bottom-right half is an LCD stacking the timers being tracked - Design 0:41, Call 1:08, API build 2:14 - growing toward the amber total, 3 timers 3:22. Amber centre pin.
 
-## Files
-
-- `logo.svg` - vector master, rounded square with padding. Use for 64 px and up, macOS, Windows and Linux icons.
-- `logo-small.svg` - 16 and 32 px artwork. Three uprights instead of four, strokes widened 68 to 104. At 16 px the icon shape is only 12.9 px wide, which fits three strokes with usable gaps but not four; the full mark turns to grey haze.
-- `logo-square.svg` - the master cropped to the icon square with square corners, for platforms that apply their own mask (iOS, Android launcher background, apple-touch-icon).
-- `logo-glyph.svg` - bars and curve only on transparency, for the Android adaptive-icon foreground.
-- `icon-16.png` to `icon-1024.png` - flat exports. 16 and 32 come from `logo-small.svg`, the rest from `logo.svg`.
-
-## Regenerate
-
-```
-packages/tokens/scripts/export-logo.sh
-```
+One instrument, two faces: the watch you know, and what Timebraid adds - several timers at once, one honest total.
 
-Needs `rsvg-convert` (librsvg). The app repository builds its platform icon sets from these files with `pnpm icons`. For a macOS `.icns`, copy the PNGs into an `.iconset` directory under Apple's names and run `iconutil -c icns Timebraid.iconset -o Timebraid.icns`.
+Centred export, 20 September 2026: the watch now sits centred on the plate (the first export sat about 14 px low). The files keep their names, so consumers only regenerate.
 
-## Specs
-
-1024 x 1024 canvas, icon shape 824 wide and centred, corner radius 181.3 (22%),
-transparent outside the shape, no baked shadow.
-
-Background `#4A57D2` to `#2C3391` to `#151A54`, with a 16% white lift from the top edge.
-Marks `#FFFFFF`. Curve `#F5A524`.
+## Files
 
-The curve is one cubic Bezier with a round cap. Its control points sit symmetrically about
-the chord, which is what keeps the bend even along the whole stroke - if you edit it, keep
-them mirrored or it develops an elbow.
+| File | Use |
+|---|---|
+| `logo.svg` (= `icon-indigo.svg`), `icon-1024.png`, `icon-{512,256,128,64}.png` | App icon on every platform. Indigo plate, full detail. |
+| `icon-light.svg`, `icon-light-1024.png` | Light-plate alternate. Only where the OS asks for a light variant, or on the marketing page beside the indigo one. |
+| `mark-transparent.svg`, `mark-transparent-1024.png`, `mark-512.png` | The watch without a plate. Marketing hero, OG image, About screen, the Android adaptive-icon foreground. |
+| `logo-small.svg` (= `mark-small-on-indigo.svg`), `mark-small.svg`, `icon-{48,32,16}.png` | Flat simplified mark for 48 px and below: case, split dial, hands, crown, pin. No text, pushers or knurl. Favicons, tab bars, notification icons. |
+| `mark-mono.svg` | One-colour mark in `currentColor`. Site header and footer, invoices, PDF report header, the macOS menu bar template image, monochrome contexts. |
+| `legacy/` | The previous tally-mark artwork, kept for reference only. Never ship it beside the watch. |
+
+The detailed SVGs set their text in JetBrains Mono 700 (times) and Instrument Sans 600 (labels) with system fallbacks. Use the PNGs for app icons: they are rendered with the right fonts, and an SVG opened without them falls back.
+
+## Size rule
+
+- 64 px and up: `logo.svg` or the PNG of the nearest size.
+- Below 64 px: `logo-small.svg` (on the plate) or `mark-small.svg` (bare). Never scale the detailed icon below 64 px - the LCD turns to noise.
+- One colour: `mark-mono.svg`.
+
+## Platform targets
+
+| Platform | Source | Output |
+|---|---|---|
+| macOS (Tauri) | `icon-1024.png` | `.icns` whose every slot is the plate scaled to 824/1024 of the slot and centred on transparency (Apple's macOS icon grid); `icon-16.png` and `icon-32.png` feed the small slots the same way |
+| Windows (Tauri) | `icon-1024.png` | `.ico` with 256/64/48/32/16 layers, the 48/32/16 layers from the small-mark PNGs |
+| Linux | `icon-{512,256,128,64}.png` | hicolor set |
+| iOS | `icon-1024.png` | one 1024 App Store icon; Xcode derives the sizes |
+| Android | `mark-transparent-1024.png` foreground on a solid `#2C3391` background | adaptive icon, `mark-mono.svg` as the monochrome layer |
+| Web favicon | `icon-32.png`, `icon-16.png`, `logo-small.svg` | `favicon.png`, `favicon.svg`, `apple-touch-icon.png` (180 px from `icon-1024.png`) |
+| macOS menu bar | `mark-mono.svg` as a template image (16 and 32 px) | |
+| Android notification | `mark-mono.svg` as a white vector drawable | |
+
+## Rules
+
+- Do not redraw, restyle or recolour the watch. Use the files.
+- Do not rotate the diagonal, move the crown or change the LCD contents.
+- Put the detailed icon only on its own plate or on transparency.
+- The steel tones inside the icon (`#C9CFDD`, `#9AA2B4`) are icon-internal and are not tokens.
+- Never show the old tally mark and the watch in the same view.

package/assets/icon-indigo.svg

@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" xmlns:c2pa="http://c2pa.org/manifest">
+<defs>
+
+<linearGradient id="plate" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset=".52" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
+<linearGradient id="lift" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".16"></stop><stop offset=".46" stop-color="#fff" stop-opacity="0"></stop></linearGradient>
+<linearGradient id="steel" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"></stop><stop offset=".22" stop-color="#C9CFDD"></stop><stop offset=".5" stop-color="#F2F4F8"></stop><stop offset=".78" stop-color="#9AA2B4"></stop><stop offset="1" stop-color="#E4E8F0"></stop></linearGradient>
+<linearGradient id="steelDark" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#8B93A5"></stop><stop offset=".5" stop-color="#DDE2EC"></stop><stop offset="1" stop-color="#697084"></stop></linearGradient>
+<linearGradient id="face" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"></stop><stop offset="1" stop-color="#E6E9F2"></stop></linearGradient>
+<linearGradient id="lcd" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#101335"></stop><stop offset="1" stop-color="#1B2160"></stop></linearGradient>
+<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".38"></stop><stop offset=".45" stop-color="#fff" stop-opacity="0"></stop></linearGradient>
+<radialGradient id="innerShade" cx=".5" cy=".5" r=".5"><stop offset=".82" stop-color="#000" stop-opacity="0"></stop><stop offset="1" stop-color="#000" stop-opacity=".35"></stop></radialGradient>
+<linearGradient id="amber" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FBCC7C"></stop><stop offset="1" stop-color="#D98C10"></stop></linearGradient>
+<filter id="drop" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#050718" flood-opacity=".45"></feDropShadow></filter>
+<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#050718" flood-opacity=".35"></feDropShadow></filter>
+<clipPath id="tl"><polygon points="0,0 1024,0 0,1024"></polygon></clipPath>
+<clipPath id="br"><polygon points="1024,0 1024,1024 0,1024"></polygon></clipPath>
+<clipPath id="dial"><circle cx="512" cy="548" r="272"></circle></clipPath>
+<symbol id="watch" viewBox="0 0 1024 1024">
+ 
+ <g filter="url(#soft)">
+  <rect x="474" y="160" width="76" height="110" rx="18" fill="url(#steel)"></rect>
+  <rect x="486" y="160" width="52" height="34" rx="12" fill="url(#amber)"></rect>
+  <g transform="rotate(-42 512 548)"><rect x="476" y="178" width="64" height="86" rx="16" fill="url(#steelDark)"></rect></g>
+  <g transform="rotate(42 512 548)"><rect x="484" y="178" width="64" height="86" rx="16" fill="url(#steelDark)"></rect></g>
+  <rect x="496" y="255" width="32" height="40" fill="url(#steelDark)"></rect>
+ </g>
+ 
+ <g filter="url(#drop)"><circle cx="512" cy="548" r="330" fill="url(#steel)"></circle></g>
+ <circle cx="512" cy="548" r="330" fill="none" stroke="#5C6178" stroke-width="3" opacity=".5"></circle>
+ 
+ <g stroke="#5C6178" stroke-width="7" opacity=".55" stroke-linecap="round">
+  <g id="k"><line x1="512" y1="228" x2="512" y2="244"></line></g>
+  <use href="#k" transform="rotate(15 512 548)"></use><use href="#k" transform="rotate(30 512 548)"></use><use href="#k" transform="rotate(45 512 548)"></use><use href="#k" transform="rotate(60 512 548)"></use><use href="#k" transform="rotate(75 512 548)"></use><use href="#k" transform="rotate(90 512 548)"></use><use href="#k" transform="rotate(105 512 548)"></use><use href="#k" transform="rotate(120 512 548)"></use><use href="#k" transform="rotate(135 512 548)"></use><use href="#k" transform="rotate(150 512 548)"></use><use href="#k" transform="rotate(165 512 548)"></use><use href="#k" transform="rotate(180 512 548)"></use><use href="#k" transform="rotate(195 512 548)"></use><use href="#k" transform="rotate(210 512 548)"></use><use href="#k" transform="rotate(225 512 548)"></use><use href="#k" transform="rotate(240 512 548)"></use><use href="#k" transform="rotate(255 512 548)"></use><use href="#k" transform="rotate(270 512 548)"></use><use href="#k" transform="rotate(285 512 548)"></use><use href="#k" transform="rotate(300 512 548)"></use><use href="#k" transform="rotate(315 512 548)"></use><use href="#k" transform="rotate(330 512 548)"></use><use href="#k" transform="rotate(345 512 548)"></use>
+ </g>
+ <circle cx="512" cy="548" r="286" fill="#2B3143"></circle>
+ 
+ <g clip-path="url(#dial)">
+  <circle cx="512" cy="548" r="272" fill="url(#face)"></circle>
+  <g clip-path="url(#br)"><circle cx="512" cy="548" r="272" fill="url(#lcd)"></circle></g>
+  
+  <g clip-path="url(#tl)" stroke="#2C3391" stroke-linecap="round">
+   <g id="m" stroke-width="6"><line x1="512" y1="290" x2="512" y2="306"></line></g>
+   <use href="#m" transform="rotate(6 512 548)"></use><use href="#m" transform="rotate(12 512 548)"></use><use href="#m" transform="rotate(18 512 548)"></use><use href="#m" transform="rotate(24 512 548)"></use><use href="#m" transform="rotate(36 512 548)"></use><use href="#m" transform="rotate(-6 512 548)"></use><use href="#m" transform="rotate(-12 512 548)"></use><use href="#m" transform="rotate(-18 512 548)"></use><use href="#m" transform="rotate(-24 512 548)"></use><use href="#m" transform="rotate(-36 512 548)"></use><use href="#m" transform="rotate(-42 512 548)"></use><use href="#m" transform="rotate(-48 512 548)"></use><use href="#m" transform="rotate(-54 512 548)"></use><use href="#m" transform="rotate(-66 512 548)"></use><use href="#m" transform="rotate(-72 512 548)"></use><use href="#m" transform="rotate(-78 512 548)"></use><use href="#m" transform="rotate(-84 512 548)"></use><use href="#m" transform="rotate(-96 512 548)"></use><use href="#m" transform="rotate(-102 512 548)"></use><use href="#m" transform="rotate(-108 512 548)"></use><use href="#m" transform="rotate(-114 512 548)"></use><use href="#m" transform="rotate(-126 512 548)"></use><use href="#m" transform="rotate(-132 512 548)"></use><use href="#m" transform="rotate(-138 512 548)"></use><use href="#m" transform="rotate(-144 512 548)"></use>
+   <g stroke-width="16"><line x1="512" y1="286" x2="512" y2="324"></line><g transform="rotate(-30 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-60 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(30 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-90 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-120 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-150 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g></g>
+   
+   <g filter="url(#soft)"><line x1="512" y1="548" x2="512" y2="380" stroke="#10131C" stroke-width="26"></line><line x1="512" y1="548" x2="392" y2="616" stroke="#10131C" stroke-width="26"></line></g>
+   <line x1="512" y1="548" x2="360" y2="452" stroke="#F5A524" stroke-width="10"></line>
+  </g>
+  
+  <line x1="170" y1="890" x2="854" y2="206" stroke="#C9CFDD" stroke-width="40"></line>
+  <line x1="170" y1="890" x2="854" y2="206" stroke="#fff" stroke-width="6" opacity=".7"></line>
+  
+  <g clip-path="url(#br)" font-family="JetBrains Mono, SF Mono, Menlo, Consolas, monospace" font-weight="700">
+   <g fill="#8A93EC" opacity=".45"><text x="614" y="572" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="17" letter-spacing="1.5">DESIGN</text><text x="760" y="572" text-anchor="end" font-size="26" letter-spacing="-1">0:41</text></g>
+   <g fill="#8A93EC" opacity=".6"><text x="572" y="620" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="19" letter-spacing="1.5">CALL</text><text x="754" y="622" text-anchor="end" font-size="34" letter-spacing="-1">1:08</text></g>
+   <g fill="#8A93EC" opacity=".8"><text x="500" y="676" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="21" letter-spacing="1.5">API BUILD</text><text x="728" y="680" text-anchor="end" font-size="40" letter-spacing="-1">2:14</text></g>
+   <g><circle cx="418" cy="722" r="5" fill="#F5A524"></circle><text x="434" y="730" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="23" letter-spacing="2.5" fill="#8A93EC">3 TIMERS</text><text x="686" y="738" text-anchor="end" font-size="48" fill="#F5A524" letter-spacing="-2">3:22</text></g>
+  </g>
+  <circle cx="512" cy="548" r="272" fill="url(#innerShade)"></circle>
+  <circle cx="512" cy="548" r="272" fill="url(#glass)"></circle>
+ </g>
+ 
+ <circle cx="512" cy="548" r="22" fill="url(#amber)" filter="url(#soft)"></circle><circle cx="512" cy="548" r="8" fill="#10131C"></circle>
+</symbol>
+</defs>
+<rect width="1024" height="1024" rx="225" fill="url(#plate)"></rect><rect width="1024" height="1024" rx="225" fill="url(#lift)"></rect>
+<g transform="translate(512 512) scale(1.12) translate(-512 -530)"><use href="#watch"></use></g>
+</svg>

package/assets/icon-light.svg

@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" xmlns:c2pa="http://c2pa.org/manifest">
+<defs>
+
+<linearGradient id="plate" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset=".52" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
+<linearGradient id="lift" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".16"></stop><stop offset=".46" stop-color="#fff" stop-opacity="0"></stop></linearGradient>
+<linearGradient id="steel" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"></stop><stop offset=".22" stop-color="#C9CFDD"></stop><stop offset=".5" stop-color="#F2F4F8"></stop><stop offset=".78" stop-color="#9AA2B4"></stop><stop offset="1" stop-color="#E4E8F0"></stop></linearGradient>
+<linearGradient id="steelDark" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#8B93A5"></stop><stop offset=".5" stop-color="#DDE2EC"></stop><stop offset="1" stop-color="#697084"></stop></linearGradient>
+<linearGradient id="face" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"></stop><stop offset="1" stop-color="#E6E9F2"></stop></linearGradient>
+<linearGradient id="lcd" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#101335"></stop><stop offset="1" stop-color="#1B2160"></stop></linearGradient>
+<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".38"></stop><stop offset=".45" stop-color="#fff" stop-opacity="0"></stop></linearGradient>
+<radialGradient id="innerShade" cx=".5" cy=".5" r=".5"><stop offset=".82" stop-color="#000" stop-opacity="0"></stop><stop offset="1" stop-color="#000" stop-opacity=".35"></stop></radialGradient>
+<linearGradient id="amber" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FBCC7C"></stop><stop offset="1" stop-color="#D98C10"></stop></linearGradient>
+<filter id="drop" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#050718" flood-opacity=".45"></feDropShadow></filter>
+<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#050718" flood-opacity=".35"></feDropShadow></filter>
+<clipPath id="tl"><polygon points="0,0 1024,0 0,1024"></polygon></clipPath>
+<clipPath id="br"><polygon points="1024,0 1024,1024 0,1024"></polygon></clipPath>
+<clipPath id="dial"><circle cx="512" cy="548" r="272"></circle></clipPath>
+<symbol id="watch" viewBox="0 0 1024 1024">
+ 
+ <g filter="url(#soft)">
+  <rect x="474" y="160" width="76" height="110" rx="18" fill="url(#steel)"></rect>
+  <rect x="486" y="160" width="52" height="34" rx="12" fill="url(#amber)"></rect>
+  <g transform="rotate(-42 512 548)"><rect x="476" y="178" width="64" height="86" rx="16" fill="url(#steelDark)"></rect></g>
+  <g transform="rotate(42 512 548)"><rect x="484" y="178" width="64" height="86" rx="16" fill="url(#steelDark)"></rect></g>
+  <rect x="496" y="255" width="32" height="40" fill="url(#steelDark)"></rect>
+ </g>
+ 
+ <g filter="url(#drop)"><circle cx="512" cy="548" r="330" fill="url(#steel)"></circle></g>
+ <circle cx="512" cy="548" r="330" fill="none" stroke="#5C6178" stroke-width="3" opacity=".5"></circle>
+ 
+ <g stroke="#5C6178" stroke-width="7" opacity=".55" stroke-linecap="round">
+  <g id="k"><line x1="512" y1="228" x2="512" y2="244"></line></g>
+  <use href="#k" transform="rotate(15 512 548)"></use><use href="#k" transform="rotate(30 512 548)"></use><use href="#k" transform="rotate(45 512 548)"></use><use href="#k" transform="rotate(60 512 548)"></use><use href="#k" transform="rotate(75 512 548)"></use><use href="#k" transform="rotate(90 512 548)"></use><use href="#k" transform="rotate(105 512 548)"></use><use href="#k" transform="rotate(120 512 548)"></use><use href="#k" transform="rotate(135 512 548)"></use><use href="#k" transform="rotate(150 512 548)"></use><use href="#k" transform="rotate(165 512 548)"></use><use href="#k" transform="rotate(180 512 548)"></use><use href="#k" transform="rotate(195 512 548)"></use><use href="#k" transform="rotate(210 512 548)"></use><use href="#k" transform="rotate(225 512 548)"></use><use href="#k" transform="rotate(240 512 548)"></use><use href="#k" transform="rotate(255 512 548)"></use><use href="#k" transform="rotate(270 512 548)"></use><use href="#k" transform="rotate(285 512 548)"></use><use href="#k" transform="rotate(300 512 548)"></use><use href="#k" transform="rotate(315 512 548)"></use><use href="#k" transform="rotate(330 512 548)"></use><use href="#k" transform="rotate(345 512 548)"></use>
+ </g>
+ <circle cx="512" cy="548" r="286" fill="#2B3143"></circle>
+ 
+ <g clip-path="url(#dial)">
+  <circle cx="512" cy="548" r="272" fill="url(#face)"></circle>
+  <g clip-path="url(#br)"><circle cx="512" cy="548" r="272" fill="url(#lcd)"></circle></g>
+  
+  <g clip-path="url(#tl)" stroke="#2C3391" stroke-linecap="round">
+   <g id="m" stroke-width="6"><line x1="512" y1="290" x2="512" y2="306"></line></g>
+   <use href="#m" transform="rotate(6 512 548)"></use><use href="#m" transform="rotate(12 512 548)"></use><use href="#m" transform="rotate(18 512 548)"></use><use href="#m" transform="rotate(24 512 548)"></use><use href="#m" transform="rotate(36 512 548)"></use><use href="#m" transform="rotate(-6 512 548)"></use><use href="#m" transform="rotate(-12 512 548)"></use><use href="#m" transform="rotate(-18 512 548)"></use><use href="#m" transform="rotate(-24 512 548)"></use><use href="#m" transform="rotate(-36 512 548)"></use><use href="#m" transform="rotate(-42 512 548)"></use><use href="#m" transform="rotate(-48 512 548)"></use><use href="#m" transform="rotate(-54 512 548)"></use><use href="#m" transform="rotate(-66 512 548)"></use><use href="#m" transform="rotate(-72 512 548)"></use><use href="#m" transform="rotate(-78 512 548)"></use><use href="#m" transform="rotate(-84 512 548)"></use><use href="#m" transform="rotate(-96 512 548)"></use><use href="#m" transform="rotate(-102 512 548)"></use><use href="#m" transform="rotate(-108 512 548)"></use><use href="#m" transform="rotate(-114 512 548)"></use><use href="#m" transform="rotate(-126 512 548)"></use><use href="#m" transform="rotate(-132 512 548)"></use><use href="#m" transform="rotate(-138 512 548)"></use><use href="#m" transform="rotate(-144 512 548)"></use>
+   <g stroke-width="16"><line x1="512" y1="286" x2="512" y2="324"></line><g transform="rotate(-30 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-60 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(30 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-90 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-120 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-150 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g></g>
+   
+   <g filter="url(#soft)"><line x1="512" y1="548" x2="512" y2="380" stroke="#10131C" stroke-width="26"></line><line x1="512" y1="548" x2="392" y2="616" stroke="#10131C" stroke-width="26"></line></g>
+   <line x1="512" y1="548" x2="360" y2="452" stroke="#F5A524" stroke-width="10"></line>
+  </g>
+  
+  <line x1="170" y1="890" x2="854" y2="206" stroke="#C9CFDD" stroke-width="40"></line>
+  <line x1="170" y1="890" x2="854" y2="206" stroke="#fff" stroke-width="6" opacity=".7"></line>
+  
+  <g clip-path="url(#br)" font-family="JetBrains Mono, SF Mono, Menlo, Consolas, monospace" font-weight="700">
+   <g fill="#8A93EC" opacity=".45"><text x="614" y="572" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="17" letter-spacing="1.5">DESIGN</text><text x="760" y="572" text-anchor="end" font-size="26" letter-spacing="-1">0:41</text></g>
+   <g fill="#8A93EC" opacity=".6"><text x="572" y="620" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="19" letter-spacing="1.5">CALL</text><text x="754" y="622" text-anchor="end" font-size="34" letter-spacing="-1">1:08</text></g>
+   <g fill="#8A93EC" opacity=".8"><text x="500" y="676" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="21" letter-spacing="1.5">API BUILD</text><text x="728" y="680" text-anchor="end" font-size="40" letter-spacing="-1">2:14</text></g>
+   <g><circle cx="418" cy="722" r="5" fill="#F5A524"></circle><text x="434" y="730" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="23" letter-spacing="2.5" fill="#8A93EC">3 TIMERS</text><text x="686" y="738" text-anchor="end" font-size="48" fill="#F5A524" letter-spacing="-2">3:22</text></g>
+  </g>
+  <circle cx="512" cy="548" r="272" fill="url(#innerShade)"></circle>
+  <circle cx="512" cy="548" r="272" fill="url(#glass)"></circle>
+ </g>
+ 
+ <circle cx="512" cy="548" r="22" fill="url(#amber)" filter="url(#soft)"></circle><circle cx="512" cy="548" r="8" fill="#10131C"></circle>
+</symbol>
+</defs>
+<rect width="1024" height="1024" rx="225" fill="#EEF0F6"></rect>
+<g transform="translate(512 512) scale(1.12) translate(-512 -530)"><use href="#watch"></use></g>
+</svg>

package/assets/legacy/logo-small.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0.35" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset="0.55" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
+<radialGradient id="lift" cx="0.5" cy="0.06" r="0.85"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.16"></stop><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"></stop></radialGradient>
+<clipPath id="mask"><rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3"></rect></clipPath>
+</defs>
+<rect id="icon-shape" x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#bg)"></rect>
+<rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#lift)"></rect>
+<g clip-path="url(#mask)">
+<line x1="332" y1="300" x2="332" y2="724" stroke="#FFFFFF" stroke-width="104" stroke-linecap="round"></line>
+<line x1="512" y1="300" x2="512" y2="724" stroke="#FFFFFF" stroke-width="104" stroke-linecap="round"></line>
+<line x1="692" y1="300" x2="692" y2="724" stroke="#FFFFFF" stroke-width="104" stroke-linecap="round"></line>
+<path d="M 272 714 C 482.5 611.9, 615.8 497.1, 748 304" fill="none" stroke="#F5A524" stroke-width="110" stroke-linecap="round"></path>
+</g>
+</svg>

package/assets/legacy/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0.35" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset="0.55" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
+<radialGradient id="lift" cx="0.5" cy="0.06" r="0.85"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.16"></stop><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"></stop></radialGradient>
+<clipPath id="mask"><rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3"></rect></clipPath>
+</defs>
+<rect id="icon-shape" x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#bg)"></rect>
+<rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#lift)"></rect>
+<g clip-path="url(#mask)">
+<line x1="308" y1="296" x2="308" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="444" y1="296" x2="444" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="580" y1="296" x2="580" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="716" y1="296" x2="716" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<path d="M 248 716 C 478.0 619.0, 626.4 504.2, 778 306" fill="none" stroke="#F5A524" stroke-width="80" stroke-linecap="round"></path>
+</g>
+</svg>

package/assets/logo-small.svg

@@ -1,15 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
-<defs>
-<linearGradient id="bg" x1="0" y1="0" x2="0.35" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset="0.55" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
-<radialGradient id="lift" cx="0.5" cy="0.06" r="0.85"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.16"></stop><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"></stop></radialGradient>
-<clipPath id="mask"><rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3"></rect></clipPath>
-</defs>
-<rect id="icon-shape" x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#bg)"></rect>
-<rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#lift)"></rect>
-<g clip-path="url(#mask)">
-<line x1="332" y1="300" x2="332" y2="724" stroke="#FFFFFF" stroke-width="104" stroke-linecap="round"></line>
-<line x1="512" y1="300" x2="512" y2="724" stroke="#FFFFFF" stroke-width="104" stroke-linecap="round"></line>
-<line x1="692" y1="300" x2="692" y2="724" stroke="#FFFFFF" stroke-width="104" stroke-linecap="round"></line>
-<path d="M 272 714 C 482.5 611.9, 615.8 497.1, 748 304" fill="none" stroke="#F5A524" stroke-width="110" stroke-linecap="round"></path>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" xmlns:c2pa="http://c2pa.org/manifest">
+<defs><clipPath id="d"><circle cx="512" cy="560" r="300"></circle></clipPath><clipPath id="br"><polygon points="1024,0 1024,1024 0,1024"></polygon></clipPath></defs>
+<rect width="1024" height="1024" rx="225" fill="#2C3391"></rect>
+<rect x="464" y="130" width="96" height="120" rx="24" fill="#FFFFFF"></rect>
+<circle cx="512" cy="560" r="340" fill="#FFFFFF"></circle>
+<circle cx="512" cy="560" r="300" fill="#EEF0F6"></circle>
+<g clip-path="url(#d)"><rect width="1024" height="1024" fill="#151A54" clip-path="url(#br)"></rect><line x1="140" y1="932" x2="932" y2="140" stroke="#FFFFFF" stroke-width="44"></line></g>
+<g stroke="#FFFFFF" stroke-linecap="round" stroke-width="40"><line x1="512" y1="560" x2="512" y2="360"></line><line x1="512" y1="560" x2="372" y2="640"></line></g>
+<line x1="512" y1="560" x2="340" y2="452" stroke="#F5A524" stroke-width="18" stroke-linecap="round"></line>
+<circle cx="512" cy="560" r="34" fill="#F5A524"></circle>
 </svg>

package/assets/logo.svg

@@ -1,16 +1,68 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" xmlns:c2pa="http://c2pa.org/manifest">
 <defs>
-<linearGradient id="bg" x1="0" y1="0" x2="0.35" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset="0.55" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
-<radialGradient id="lift" cx="0.5" cy="0.06" r="0.85"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.16"></stop><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"></stop></radialGradient>
-<clipPath id="mask"><rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3"></rect></clipPath>
+
+<linearGradient id="plate" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset=".52" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
+<linearGradient id="lift" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".16"></stop><stop offset=".46" stop-color="#fff" stop-opacity="0"></stop></linearGradient>
+<linearGradient id="steel" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"></stop><stop offset=".22" stop-color="#C9CFDD"></stop><stop offset=".5" stop-color="#F2F4F8"></stop><stop offset=".78" stop-color="#9AA2B4"></stop><stop offset="1" stop-color="#E4E8F0"></stop></linearGradient>
+<linearGradient id="steelDark" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#8B93A5"></stop><stop offset=".5" stop-color="#DDE2EC"></stop><stop offset="1" stop-color="#697084"></stop></linearGradient>
+<linearGradient id="face" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"></stop><stop offset="1" stop-color="#E6E9F2"></stop></linearGradient>
+<linearGradient id="lcd" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#101335"></stop><stop offset="1" stop-color="#1B2160"></stop></linearGradient>
+<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".38"></stop><stop offset=".45" stop-color="#fff" stop-opacity="0"></stop></linearGradient>
+<radialGradient id="innerShade" cx=".5" cy=".5" r=".5"><stop offset=".82" stop-color="#000" stop-opacity="0"></stop><stop offset="1" stop-color="#000" stop-opacity=".35"></stop></radialGradient>
+<linearGradient id="amber" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FBCC7C"></stop><stop offset="1" stop-color="#D98C10"></stop></linearGradient>
+<filter id="drop" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#050718" flood-opacity=".45"></feDropShadow></filter>
+<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#050718" flood-opacity=".35"></feDropShadow></filter>
+<clipPath id="tl"><polygon points="0,0 1024,0 0,1024"></polygon></clipPath>
+<clipPath id="br"><polygon points="1024,0 1024,1024 0,1024"></polygon></clipPath>
+<clipPath id="dial"><circle cx="512" cy="548" r="272"></circle></clipPath>
+<symbol id="watch" viewBox="0 0 1024 1024">
+ 
+ <g filter="url(#soft)">
+  <rect x="474" y="160" width="76" height="110" rx="18" fill="url(#steel)"></rect>
+  <rect x="486" y="160" width="52" height="34" rx="12" fill="url(#amber)"></rect>
+  <g transform="rotate(-42 512 548)"><rect x="476" y="178" width="64" height="86" rx="16" fill="url(#steelDark)"></rect></g>
+  <g transform="rotate(42 512 548)"><rect x="484" y="178" width="64" height="86" rx="16" fill="url(#steelDark)"></rect></g>
+  <rect x="496" y="255" width="32" height="40" fill="url(#steelDark)"></rect>
+ </g>
+ 
+ <g filter="url(#drop)"><circle cx="512" cy="548" r="330" fill="url(#steel)"></circle></g>
+ <circle cx="512" cy="548" r="330" fill="none" stroke="#5C6178" stroke-width="3" opacity=".5"></circle>
+ 
+ <g stroke="#5C6178" stroke-width="7" opacity=".55" stroke-linecap="round">
+  <g id="k"><line x1="512" y1="228" x2="512" y2="244"></line></g>
+  <use href="#k" transform="rotate(15 512 548)"></use><use href="#k" transform="rotate(30 512 548)"></use><use href="#k" transform="rotate(45 512 548)"></use><use href="#k" transform="rotate(60 512 548)"></use><use href="#k" transform="rotate(75 512 548)"></use><use href="#k" transform="rotate(90 512 548)"></use><use href="#k" transform="rotate(105 512 548)"></use><use href="#k" transform="rotate(120 512 548)"></use><use href="#k" transform="rotate(135 512 548)"></use><use href="#k" transform="rotate(150 512 548)"></use><use href="#k" transform="rotate(165 512 548)"></use><use href="#k" transform="rotate(180 512 548)"></use><use href="#k" transform="rotate(195 512 548)"></use><use href="#k" transform="rotate(210 512 548)"></use><use href="#k" transform="rotate(225 512 548)"></use><use href="#k" transform="rotate(240 512 548)"></use><use href="#k" transform="rotate(255 512 548)"></use><use href="#k" transform="rotate(270 512 548)"></use><use href="#k" transform="rotate(285 512 548)"></use><use href="#k" transform="rotate(300 512 548)"></use><use href="#k" transform="rotate(315 512 548)"></use><use href="#k" transform="rotate(330 512 548)"></use><use href="#k" transform="rotate(345 512 548)"></use>
+ </g>
+ <circle cx="512" cy="548" r="286" fill="#2B3143"></circle>
+ 
+ <g clip-path="url(#dial)">
+  <circle cx="512" cy="548" r="272" fill="url(#face)"></circle>
+  <g clip-path="url(#br)"><circle cx="512" cy="548" r="272" fill="url(#lcd)"></circle></g>
+  
+  <g clip-path="url(#tl)" stroke="#2C3391" stroke-linecap="round">
+   <g id="m" stroke-width="6"><line x1="512" y1="290" x2="512" y2="306"></line></g>
+   <use href="#m" transform="rotate(6 512 548)"></use><use href="#m" transform="rotate(12 512 548)"></use><use href="#m" transform="rotate(18 512 548)"></use><use href="#m" transform="rotate(24 512 548)"></use><use href="#m" transform="rotate(36 512 548)"></use><use href="#m" transform="rotate(-6 512 548)"></use><use href="#m" transform="rotate(-12 512 548)"></use><use href="#m" transform="rotate(-18 512 548)"></use><use href="#m" transform="rotate(-24 512 548)"></use><use href="#m" transform="rotate(-36 512 548)"></use><use href="#m" transform="rotate(-42 512 548)"></use><use href="#m" transform="rotate(-48 512 548)"></use><use href="#m" transform="rotate(-54 512 548)"></use><use href="#m" transform="rotate(-66 512 548)"></use><use href="#m" transform="rotate(-72 512 548)"></use><use href="#m" transform="rotate(-78 512 548)"></use><use href="#m" transform="rotate(-84 512 548)"></use><use href="#m" transform="rotate(-96 512 548)"></use><use href="#m" transform="rotate(-102 512 548)"></use><use href="#m" transform="rotate(-108 512 548)"></use><use href="#m" transform="rotate(-114 512 548)"></use><use href="#m" transform="rotate(-126 512 548)"></use><use href="#m" transform="rotate(-132 512 548)"></use><use href="#m" transform="rotate(-138 512 548)"></use><use href="#m" transform="rotate(-144 512 548)"></use>
+   <g stroke-width="16"><line x1="512" y1="286" x2="512" y2="324"></line><g transform="rotate(-30 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-60 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(30 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-90 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-120 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-150 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g></g>
+   
+   <g filter="url(#soft)"><line x1="512" y1="548" x2="512" y2="380" stroke="#10131C" stroke-width="26"></line><line x1="512" y1="548" x2="392" y2="616" stroke="#10131C" stroke-width="26"></line></g>
+   <line x1="512" y1="548" x2="360" y2="452" stroke="#F5A524" stroke-width="10"></line>
+  </g>
+  
+  <line x1="170" y1="890" x2="854" y2="206" stroke="#C9CFDD" stroke-width="40"></line>
+  <line x1="170" y1="890" x2="854" y2="206" stroke="#fff" stroke-width="6" opacity=".7"></line>
+  
+  <g clip-path="url(#br)" font-family="JetBrains Mono, SF Mono, Menlo, Consolas, monospace" font-weight="700">
+   <g fill="#8A93EC" opacity=".45"><text x="614" y="572" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="17" letter-spacing="1.5">DESIGN</text><text x="760" y="572" text-anchor="end" font-size="26" letter-spacing="-1">0:41</text></g>
+   <g fill="#8A93EC" opacity=".6"><text x="572" y="620" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="19" letter-spacing="1.5">CALL</text><text x="754" y="622" text-anchor="end" font-size="34" letter-spacing="-1">1:08</text></g>
+   <g fill="#8A93EC" opacity=".8"><text x="500" y="676" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="21" letter-spacing="1.5">API BUILD</text><text x="728" y="680" text-anchor="end" font-size="40" letter-spacing="-1">2:14</text></g>
+   <g><circle cx="418" cy="722" r="5" fill="#F5A524"></circle><text x="434" y="730" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="23" letter-spacing="2.5" fill="#8A93EC">3 TIMERS</text><text x="686" y="738" text-anchor="end" font-size="48" fill="#F5A524" letter-spacing="-2">3:22</text></g>
+  </g>
+  <circle cx="512" cy="548" r="272" fill="url(#innerShade)"></circle>
+  <circle cx="512" cy="548" r="272" fill="url(#glass)"></circle>
+ </g>
+ 
+ <circle cx="512" cy="548" r="22" fill="url(#amber)" filter="url(#soft)"></circle><circle cx="512" cy="548" r="8" fill="#10131C"></circle>
+</symbol>
 </defs>
-<rect id="icon-shape" x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#bg)"></rect>
-<rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#lift)"></rect>
-<g clip-path="url(#mask)">
-<line x1="308" y1="296" x2="308" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
-<line x1="444" y1="296" x2="444" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
-<line x1="580" y1="296" x2="580" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
-<line x1="716" y1="296" x2="716" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
-<path d="M 248 716 C 478.0 619.0, 626.4 504.2, 778 306" fill="none" stroke="#F5A524" stroke-width="80" stroke-linecap="round"></path>
-</g>
+<rect width="1024" height="1024" rx="225" fill="url(#plate)"></rect><rect width="1024" height="1024" rx="225" fill="url(#lift)"></rect>
+<g transform="translate(512 512) scale(1.12) translate(-512 -530)"><use href="#watch"></use></g>
 </svg>

package/assets/mark-mono.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" xmlns:c2pa="http://c2pa.org/manifest">
+<defs><clipPath id="d"><circle cx="512" cy="560" r="300"></circle></clipPath><clipPath id="br"><polygon points="1024,0 1024,1024 0,1024"></polygon></clipPath></defs>
+<g fill="currentColor">
+<rect x="464" y="130" width="96" height="120" rx="24"></rect>
+<circle cx="512" cy="560" r="340" fill="none" stroke="currentColor" stroke-width="44"></circle>
+<g clip-path="url(#d)"><rect width="1024" height="1024" clip-path="url(#br)"></rect></g>
+<line x1="512" y1="560" x2="512" y2="360" stroke="currentColor" stroke-width="44" stroke-linecap="round"></line><line x1="512" y1="560" x2="372" y2="640" stroke="currentColor" stroke-width="44" stroke-linecap="round"></line>
+<circle cx="512" cy="560" r="40"></circle>
+</g>
+</svg>

package/assets/mark-small-on-indigo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" xmlns:c2pa="http://c2pa.org/manifest">
+<defs><clipPath id="d"><circle cx="512" cy="560" r="300"></circle></clipPath><clipPath id="br"><polygon points="1024,0 1024,1024 0,1024"></polygon></clipPath></defs>
+<rect width="1024" height="1024" rx="225" fill="#2C3391"></rect>
+<rect x="464" y="130" width="96" height="120" rx="24" fill="#FFFFFF"></rect>
+<circle cx="512" cy="560" r="340" fill="#FFFFFF"></circle>
+<circle cx="512" cy="560" r="300" fill="#EEF0F6"></circle>
+<g clip-path="url(#d)"><rect width="1024" height="1024" fill="#151A54" clip-path="url(#br)"></rect><line x1="140" y1="932" x2="932" y2="140" stroke="#FFFFFF" stroke-width="44"></line></g>
+<g stroke="#FFFFFF" stroke-linecap="round" stroke-width="40"><line x1="512" y1="560" x2="512" y2="360"></line><line x1="512" y1="560" x2="372" y2="640"></line></g>
+<line x1="512" y1="560" x2="340" y2="452" stroke="#F5A524" stroke-width="18" stroke-linecap="round"></line>
+<circle cx="512" cy="560" r="34" fill="#F5A524"></circle>
+</svg>

package/assets/mark-small.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" xmlns:c2pa="http://c2pa.org/manifest">
+<defs><clipPath id="d"><circle cx="512" cy="560" r="300"></circle></clipPath><clipPath id="br"><polygon points="1024,0 1024,1024 0,1024"></polygon></clipPath></defs>
+
+<rect x="464" y="130" width="96" height="120" rx="24" fill="#2C3391"></rect>
+<circle cx="512" cy="560" r="340" fill="#2C3391"></circle>
+<circle cx="512" cy="560" r="300" fill="#FFFFFF"></circle>
+<g clip-path="url(#d)"><rect width="1024" height="1024" fill="#151A54" clip-path="url(#br)"></rect><line x1="140" y1="932" x2="932" y2="140" stroke="#2C3391" stroke-width="44"></line></g>
+<g stroke="#2C3391" stroke-linecap="round" stroke-width="40"><line x1="512" y1="560" x2="512" y2="360"></line><line x1="512" y1="560" x2="372" y2="640"></line></g>
+<line x1="512" y1="560" x2="340" y2="452" stroke="#F5A524" stroke-width="18" stroke-linecap="round"></line>
+<circle cx="512" cy="560" r="34" fill="#F5A524"></circle>
+</svg>

package/assets/mark-transparent.svg

@@ -0,0 +1,67 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" xmlns:c2pa="http://c2pa.org/manifest">
+<defs>
+
+<linearGradient id="plate" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset=".52" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
+<linearGradient id="lift" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".16"></stop><stop offset=".46" stop-color="#fff" stop-opacity="0"></stop></linearGradient>
+<linearGradient id="steel" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"></stop><stop offset=".22" stop-color="#C9CFDD"></stop><stop offset=".5" stop-color="#F2F4F8"></stop><stop offset=".78" stop-color="#9AA2B4"></stop><stop offset="1" stop-color="#E4E8F0"></stop></linearGradient>
+<linearGradient id="steelDark" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#8B93A5"></stop><stop offset=".5" stop-color="#DDE2EC"></stop><stop offset="1" stop-color="#697084"></stop></linearGradient>
+<linearGradient id="face" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFFFFF"></stop><stop offset="1" stop-color="#E6E9F2"></stop></linearGradient>
+<linearGradient id="lcd" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#101335"></stop><stop offset="1" stop-color="#1B2160"></stop></linearGradient>
+<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".38"></stop><stop offset=".45" stop-color="#fff" stop-opacity="0"></stop></linearGradient>
+<radialGradient id="innerShade" cx=".5" cy=".5" r=".5"><stop offset=".82" stop-color="#000" stop-opacity="0"></stop><stop offset="1" stop-color="#000" stop-opacity=".35"></stop></radialGradient>
+<linearGradient id="amber" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FBCC7C"></stop><stop offset="1" stop-color="#D98C10"></stop></linearGradient>
+<filter id="drop" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#050718" flood-opacity=".45"></feDropShadow></filter>
+<filter id="soft" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#050718" flood-opacity=".35"></feDropShadow></filter>
+<clipPath id="tl"><polygon points="0,0 1024,0 0,1024"></polygon></clipPath>
+<clipPath id="br"><polygon points="1024,0 1024,1024 0,1024"></polygon></clipPath>
+<clipPath id="dial"><circle cx="512" cy="548" r="272"></circle></clipPath>
+<symbol id="watch" viewBox="0 0 1024 1024">
+ 
+ <g filter="url(#soft)">
+  <rect x="474" y="160" width="76" height="110" rx="18" fill="url(#steel)"></rect>
+  <rect x="486" y="160" width="52" height="34" rx="12" fill="url(#amber)"></rect>
+  <g transform="rotate(-42 512 548)"><rect x="476" y="178" width="64" height="86" rx="16" fill="url(#steelDark)"></rect></g>
+  <g transform="rotate(42 512 548)"><rect x="484" y="178" width="64" height="86" rx="16" fill="url(#steelDark)"></rect></g>
+  <rect x="496" y="255" width="32" height="40" fill="url(#steelDark)"></rect>
+ </g>
+ 
+ <g filter="url(#drop)"><circle cx="512" cy="548" r="330" fill="url(#steel)"></circle></g>
+ <circle cx="512" cy="548" r="330" fill="none" stroke="#5C6178" stroke-width="3" opacity=".5"></circle>
+ 
+ <g stroke="#5C6178" stroke-width="7" opacity=".55" stroke-linecap="round">
+  <g id="k"><line x1="512" y1="228" x2="512" y2="244"></line></g>
+  <use href="#k" transform="rotate(15 512 548)"></use><use href="#k" transform="rotate(30 512 548)"></use><use href="#k" transform="rotate(45 512 548)"></use><use href="#k" transform="rotate(60 512 548)"></use><use href="#k" transform="rotate(75 512 548)"></use><use href="#k" transform="rotate(90 512 548)"></use><use href="#k" transform="rotate(105 512 548)"></use><use href="#k" transform="rotate(120 512 548)"></use><use href="#k" transform="rotate(135 512 548)"></use><use href="#k" transform="rotate(150 512 548)"></use><use href="#k" transform="rotate(165 512 548)"></use><use href="#k" transform="rotate(180 512 548)"></use><use href="#k" transform="rotate(195 512 548)"></use><use href="#k" transform="rotate(210 512 548)"></use><use href="#k" transform="rotate(225 512 548)"></use><use href="#k" transform="rotate(240 512 548)"></use><use href="#k" transform="rotate(255 512 548)"></use><use href="#k" transform="rotate(270 512 548)"></use><use href="#k" transform="rotate(285 512 548)"></use><use href="#k" transform="rotate(300 512 548)"></use><use href="#k" transform="rotate(315 512 548)"></use><use href="#k" transform="rotate(330 512 548)"></use><use href="#k" transform="rotate(345 512 548)"></use>
+ </g>
+ <circle cx="512" cy="548" r="286" fill="#2B3143"></circle>
+ 
+ <g clip-path="url(#dial)">
+  <circle cx="512" cy="548" r="272" fill="url(#face)"></circle>
+  <g clip-path="url(#br)"><circle cx="512" cy="548" r="272" fill="url(#lcd)"></circle></g>
+  
+  <g clip-path="url(#tl)" stroke="#2C3391" stroke-linecap="round">
+   <g id="m" stroke-width="6"><line x1="512" y1="290" x2="512" y2="306"></line></g>
+   <use href="#m" transform="rotate(6 512 548)"></use><use href="#m" transform="rotate(12 512 548)"></use><use href="#m" transform="rotate(18 512 548)"></use><use href="#m" transform="rotate(24 512 548)"></use><use href="#m" transform="rotate(36 512 548)"></use><use href="#m" transform="rotate(-6 512 548)"></use><use href="#m" transform="rotate(-12 512 548)"></use><use href="#m" transform="rotate(-18 512 548)"></use><use href="#m" transform="rotate(-24 512 548)"></use><use href="#m" transform="rotate(-36 512 548)"></use><use href="#m" transform="rotate(-42 512 548)"></use><use href="#m" transform="rotate(-48 512 548)"></use><use href="#m" transform="rotate(-54 512 548)"></use><use href="#m" transform="rotate(-66 512 548)"></use><use href="#m" transform="rotate(-72 512 548)"></use><use href="#m" transform="rotate(-78 512 548)"></use><use href="#m" transform="rotate(-84 512 548)"></use><use href="#m" transform="rotate(-96 512 548)"></use><use href="#m" transform="rotate(-102 512 548)"></use><use href="#m" transform="rotate(-108 512 548)"></use><use href="#m" transform="rotate(-114 512 548)"></use><use href="#m" transform="rotate(-126 512 548)"></use><use href="#m" transform="rotate(-132 512 548)"></use><use href="#m" transform="rotate(-138 512 548)"></use><use href="#m" transform="rotate(-144 512 548)"></use>
+   <g stroke-width="16"><line x1="512" y1="286" x2="512" y2="324"></line><g transform="rotate(-30 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-60 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(30 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-90 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-120 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g><g transform="rotate(-150 512 548)"><line x1="512" y1="286" x2="512" y2="318"></line></g></g>
+   
+   <g filter="url(#soft)"><line x1="512" y1="548" x2="512" y2="380" stroke="#10131C" stroke-width="26"></line><line x1="512" y1="548" x2="392" y2="616" stroke="#10131C" stroke-width="26"></line></g>
+   <line x1="512" y1="548" x2="360" y2="452" stroke="#F5A524" stroke-width="10"></line>
+  </g>
+  
+  <line x1="170" y1="890" x2="854" y2="206" stroke="#C9CFDD" stroke-width="40"></line>
+  <line x1="170" y1="890" x2="854" y2="206" stroke="#fff" stroke-width="6" opacity=".7"></line>
+  
+  <g clip-path="url(#br)" font-family="JetBrains Mono, SF Mono, Menlo, Consolas, monospace" font-weight="700">
+   <g fill="#8A93EC" opacity=".45"><text x="614" y="572" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="17" letter-spacing="1.5">DESIGN</text><text x="760" y="572" text-anchor="end" font-size="26" letter-spacing="-1">0:41</text></g>
+   <g fill="#8A93EC" opacity=".6"><text x="572" y="620" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="19" letter-spacing="1.5">CALL</text><text x="754" y="622" text-anchor="end" font-size="34" letter-spacing="-1">1:08</text></g>
+   <g fill="#8A93EC" opacity=".8"><text x="500" y="676" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="21" letter-spacing="1.5">API BUILD</text><text x="728" y="680" text-anchor="end" font-size="40" letter-spacing="-1">2:14</text></g>
+   <g><circle cx="418" cy="722" r="5" fill="#F5A524"></circle><text x="434" y="730" font-family="Instrument Sans, Helvetica Neue, Arial, sans-serif" font-weight="600" font-size="23" letter-spacing="2.5" fill="#8A93EC">3 TIMERS</text><text x="686" y="738" text-anchor="end" font-size="48" fill="#F5A524" letter-spacing="-2">3:22</text></g>
+  </g>
+  <circle cx="512" cy="548" r="272" fill="url(#innerShade)"></circle>
+  <circle cx="512" cy="548" r="272" fill="url(#glass)"></circle>
+ </g>
+ 
+ <circle cx="512" cy="548" r="22" fill="url(#amber)" filter="url(#soft)"></circle><circle cx="512" cy="548" r="8" fill="#10131C"></circle>
+</symbol>
+</defs>
+<g transform="translate(512 512) scale(1.12) translate(-512 -530)"><use href="#watch"></use></g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timebraid/tokens",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Timebraid design tokens: CSS custom properties, base styles, fonts and brand assets.",
   "license": "MIT",
   "publishConfig": {

package/tokens/base.css

@@ -12,6 +12,7 @@ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[t
 @keyframes t-pulse{0%,100%{opacity:1}50%{opacity:.35}}
 @keyframes t-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
 @keyframes t-sheet{from{transform:translateY(100%)}to{transform:none}}
+@keyframes t-drawer{from{transform:translateX(-100%)}to{transform:none}}
 @keyframes t-scrim{from{opacity:0}to{opacity:1}}
 @keyframes t-pop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
 @keyframes t-island{from{transform:scaleX(.6);opacity:.4}to{transform:none;opacity:1}}

package/tokens/spacing.css

@@ -23,15 +23,15 @@
   --gutter:24px;
 
   --sidebar-w:232px;
-  --content-max:860px;
-  --content-max-narrow:680px;
+  --content-max:1040px;
+  --content-max-narrow:760px;
   --gutter-phone:16px;
 
   --row-h:46px;
   --row-h-sub:56px;
   --row-h-dense:40px;
-  --control-h-sm:28px;
-  --control-h-md:34px;
+  --control-h-sm:30px;
+  --control-h-md:36px;
   --control-h-lg:44px;
   --control-h-xl:50px;
   --pill-h:46px;
@@ -45,6 +45,7 @@
   --toggle-w:46px;
   --toggle-h:28px;
   --field-h:38px;
-  --seg-h:32px;
+  --seg-h:36px;
+  --seg-h-sm:30px;
   --icon-square:28px;
 }

package/tokens/theme.css

@@ -38,7 +38,7 @@
   --sh-card:0 1px 2px rgba(14,16,36,.04),0 0 0 1px rgba(14,16,36,.04);
   --sh-float:0 12px 32px -8px rgba(14,16,36,.22),0 2px 6px rgba(14,16,36,.08),0 0 0 1px rgba(14,16,36,.05);
   --sh-sheet:0 -8px 40px -8px rgba(14,16,36,.24);
-  --sh-thumb:0 2px 6px rgba(0,0,0,.25);--sh-seg:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);
+  --sh-thumb:0 2px 6px rgba(0,0,0,.25);--sh-seg:0 1px 2px rgba(0,0,0,.14),0 3px 8px -2px rgba(0,0,0,.12),0 0 0 .5px var(--sep);
   --blur:saturate(180%) blur(22px);
   --scrim:rgba(10,11,20,.42);
   --dash:rgba(255,255,255,.7);