Tinker — baw się AI i ożywiaj swoje pomysły

Design Specification — Tinker — baw się AI i ożywiaj swoje pomysły

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#01711F). All type is set in Inter-Variable,Helvetica,Arial,sans-serif. Detected font weights: 300, 330, 360, 400, 420, 450, 550, 700. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://cdn.shopify.com/b/shopify-brochure2-assets/7b8412a87f9c56116f6fdb240a96863c.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(#0000 87.5%,#000 100%)
• linear-gradient(#0000 75%,#000 87.5% 100%)
• linear-gradient(#0000 62.5%,#000 75% 87.5%,#0000 100%)
• linear-gradient(#0000 50%,#000 62.5% 75%,#0000 87.5%)
• linear-gradient(#0000 37.5%,#000 50% 62.5%,#0000 75%)
• linear-gradient(#0000 25%,#000 37.5% 50%,#0000 62.5%)
• linear-gradient(#0000 12.5%,#000 25% 37.5%,#0000 50%)
• linear-gradient(#0000 0%,#000 12.5% 25%,#0000 37.5%)
• linear-gradient(#fff3 0%,#f7f7f700 100%)

> 4 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Inter-Variable — stack: Inter-Variable,Helvetica,Arial,sans-serif

Font stacks (most used first)

• Inter-Variable,Helvetica,Arial,sans-serif
• Inter-Variable
• var(--font-mono)
• var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)
• var(--font-base,Inter-Variable,Helvetica,Arial,sans-serif)

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 330, 360, 400, 420, 450, 550, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Animation & Motion

Transitions

• grid-template-rows .3s ease-out
• none

Easing curves

• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.6,-.28,.735,.045)
• cubic-bezier(.6,.04,.98,.335)
• cubic-bezier(.55,.055,.675,.19)
• cubic-bezier(.95,.05,.795,.035)
• cubic-bezier(.55,.085,.68,.53)

Keyframes

@keyframes marquee-ltr { 0%{transform:translate(-100%)}to{transform:translate(0)} }
@keyframes marquee-rtl { 0%{transform:translate(0)}to{transform:translate(-100%)} }
@keyframes floating { 0%,to{transform:translateY(0)}50%{transform:translateY(-8px)} }

Animations

• var(--animate-marquee-ltr)
• var(--animate-marquee-rtl)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-secondary — sample text: “Pobierz aplikację”

button-primary — sample text: “Pobierz zApp Store”

badge

CTA labels found on page

• Pobierz aplikację

Effects

• backdrop-filter: blur(.078125px)
• backdrop-filter: blur(.15625px)
• backdrop-filter: blur(.3125px)
• backdrop-filter: blur(.625px)
• backdrop-filter: blur(1.25px)
• backdrop-filter: blur(2.5px)
• backdrop-filter: blur(5px)
• backdrop-filter: blur(10px)

Source Design Tokens (CSS custom properties)

:root {
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-red-100: #f7e0e0;
  --color-red-400: #f37474;
  --color-red-500: #f54344;
  --color-red-700: #a71a1b;
  --color-orange-100: #ffeadb;
  --color-orange-300: #ffb55c;
  --color-orange-400: #ee9d00;
  --color-orange-500: #c38000;
  --color-orange-700: #764c00;
  --color-lime-100: #c7f47f;
  --color-lime-200: #afda67;
  --color-lime-300: #95bf47;
  --color-lime-600: #56693a;
  --color-lime-700: #42502f;
  --color-green-100: #b9f7c4;
  --color-green-200: #70e089;
  --color-green-500: #15883b;
  --color-green-700: #20562d;
  --color-blue-50: oklch(97% .014 254.604);
  --color-blue-500: oklch(62.3% .214 259.815);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-purple-50: #f5f2fe;
  --color-purple-100: #e8e2fe;
  --color-purple-200: #d2c4fc;
  --color-purple-300: #bfaafb;
  --color-purple-400: #aa8bfa;
  --color-purple-500: #986bf9;
  --color-purple-700: #751be9;
  --color-purple-800: #4d0f9f;
  --color-pink-400: oklch(71.8% .202 349.761);
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-200: oklch(92.8% .006 264.531);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-900: oklch(21% .034 264.665);
  --color-zinc-600: oklch(44.2% .017 285.786);
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --breakpoint-xl: 1600px;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --text-xs: .75rem;
  --text-xs--line-height: 1rem;
  --text-sm: .875rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.75rem;
}

Do's and Don'ts

Do

• Do reserve the accent #01711F for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 330, 360, 400, 420, 450, 550, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #FF4500;
  --color-accent: #01711F;
  --color-background: #FFFFFF;
  --color-surface: #F4F4F5;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #D4D4D8;
  --color-border: #E4E4E7;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F4F4F5;
  --color-surface-container: #E9E9E9;
  --color-surface-container-high: #E4E4E7;
  --color-surface-container-highest: #D4D4D8;
  --font-sans: Inter-Variable,Helvetica,Arial,sans-serif;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-md: 16px;
  --font-size-label-sm: 12px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 29px;
  --space-xs: 6px;
  --space-sm: 15px;
  --space-md: 16px;
  --space-lg: 50px;
  --space-xl: 90px;
  --tracking-display: -.01em;
  --container-max: 768px;
}