Dokturek UI kit (Copy) Design GuidelinesLegacy format

Headline

Body

Label

Typography

XS/LightGeist Light · 12px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

XS/RegularGeist Regular · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

XS/MediumGeist Medium · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

XS/Semi BoldGeist SemiBold · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

XS/BoldGeist Bold · 12px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SM/LightGeist Light · 14px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SM/RegularGeist Regular · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SM/MediumGeist Medium · 14px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SM/Semi BoldGeist SemiBold · 14px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SM/BoldGeist Bold · 14px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Base/LightGeist Light · 16px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Base/RegularGeist Regular · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Base/MediumGeist Medium · 16px · 50อล

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Elevation & Depth

Shadow lvl 1

Shadow lvl 2

Shadow lvl 3

Do's & Don'ts

Do

Refine this file after extraction to add brand context and rationale.

Keep token names synchronized with Figma styles and variables.

Add usage examples and anti-patterns for critical components.

Source

• Figma file: Dokturek UI kit (Copy)

• Figma page: ↳ Final design

• Extracted at: 2026-07-27T22:17:22.623Z

Variable Collections

• ☀️ Mode

• 💨 Tailwind

• 📱 Responsive

• 🚀 Themes

• 🎨 Brand colors

• 🎨🎨 Color mode

Color Tokens

• avatar-2: image

• avatar-1: image

• avatar-3: image

• avatar-4: image

• avatar-5: image

• avatar-6: image

• avatar-7: image

• avatar-8: image

• avatar-9: image

• avatar-10: image

• avatar-11: image

• avatar-12: image

• avatar-13: image

• avatar-14: image

• avatar-15: image

• avatar-16: image

• avatar-17: image

• avatar-18: image

• avatar-19: image

• avatar-20: image

• bg-gradient: gradient_linear(#FFFFFF 0% | #09090B 100%)

• primary-gradient: gradient_linear(#171717 0% | #6D28D9 100%)

• SVG Line: gradient_linear(#76717F00 0% | #737373 25% | #737373 75%, ...)

• Primary Gredient: gradient_linear(#171717 0% | #6D28D9 100%)

• card Gredient: gradient_linear(#0F172A 0% | #334155 100%)

• Gredient 2: gradient_linear(#171717 0% | #DC2626 100%)

• Button Overlay: gradient_linear(#00000033 0% | #00000000 100%)

• Fill glass effect: gradient_angular(#9C9C9C80 3% | #9C9C9C59 9% | #FFFFFF80 17%, ...)

• Fill glass effect white: gradient_linear(#FFFFFF80 0% | #D9D9D933 100%)

• Stroke Glass effect V2: pattern

• Background gradient: gradient_linear(#F2E7FE 40% | #FFEDD5 100%)

• Violet: #F4EEFB

• button gradient: gradient_radial(#D6B6FD 0% | #F2E7FE 67%)

• button gradient hover: gradient_radial(#7A13F9 0% | #C292FC 67%)

• Border card: gradient_linear(#FFFFFF 0% | #E8E8E8 41% | #FFFFFF 100%)

• Button konverzní: gradient_radial(#D6B6FD 0% | #6F11E3 100%)

• Ghost button: gradient_radial(#F9FAFB 0% | #E5E7EB 100%)

• tab gradient: gradient_radial(#F2E7FE 37% | #A661FB 100%)

• Tab gradient: gradient_radial(#7A13F926 35% | #FFFFFF0D 100%)

• Brand color/Violet/violet-50: #330869

Motion Tokens

• 🚀 Themes/shadow/xl/2/spread-radius: -6

• 🚀 Themes/shadow/xl/1/spread-radius: -5

• 🚀 Themes/shadow/xl/1/blur-radius: 25

• 🚀 Themes/shadow/lg/2/spread-radius: -4

• 🚀 Themes/shadow/lg/2/blur-radius: 6

• 🚀 Themes/shadow/lg/2/offset-y: 4

• 🚀 Themes/shadow/lg/1/offset-y: 10

• 🚀 Themes/shadow/xl/2/blur-radius: 10

• 🚀 Themes/shadow/xs/offset-x: 0

• 🚀 Themes/shadow/lg/2/offset-x: 0

• 🚀 Themes/shadow/md/2/offset-y: 2

• 🚀 Themes/shadow/xl/2/offset-y: 8

• 🚀 Themes/shadow/md/2/offset-x: 0

• 🚀 Themes/shadow/sm/2/blur-radius: 2

• 🚀 Themes/shadow/sm/2/offset-x: 0

• 🚀 Themes/shadow/sm/1/spread-radius: 0

• 🚀 Themes/shadow/sm/2/spread-radius: -1

• 🚀 Themes/shadow/sm/1/blur-radius: 3

• 🚀 Themes/shadow/2xl/blur-radius: 50

• 🚀 Themes/shadow/2xl/offset-x: 0

• 🚀 Themes/shadow/xs/spread-radius: 0

• 🚀 Themes/shadow/xs/blur-radius: 2

• 🚀 Themes/shadow/xs/offset-y: 1

• 🚀 Themes/shadow/md/1/blur-radius: 6

• 🚀 Themes/shadow/xl/1/offset-x: 0

• 🚀 Themes/shadow/lg/1/spread-radius: -3

• 🚀 Themes/shadow/lg/1/offset-x: 0

• 🚀 Themes/shadow/md/1/spread-radius: -1

• 🚀 Themes/shadow/xl/1/offset-y: 20

• 🚀 Themes/shadow/sm/1/offset-x: 0

• 🚀 Themes/shadow/md/2/blur-radius: 4

• 🚀 Themes/shadow/md/1/offset-y: 4

• 🚀 Themes/shadow/md/1/offset-x: 0

• 🚀 Themes/shadow/sm/2/offset-y: 1

• 🚀 Themes/shadow/md/2/spread-radius: -2

• 🚀 Themes/shadow/2xl/offset-y: 25

• 🚀 Themes/shadow/2xs/spread-radius: 0

• 🚀 Themes/shadow/2xl/spread-radius: -12

• 🚀 Themes/shadow/2xs/offset-x: 0

• 🚀 Themes/shadow/xl/2/offset-x: 0

Effect Styles

• card-bg-blur: background_blur 8px

• shadow ring: drop_shadow 0px offset 0 0 #A1A1AA80

• TEST-card (A): drop_shadow 4px offset 0 4 #6366F10D + noise + ...

• Card Glass effect: background_blur 3.9px + inner_shadow 22px offset 0 0 #F2F2F280 + ...

• Effect Glass effect V2: drop_shadow 40px offset 0 16 #26516329 + inner_shadow 17.14px offset -4.29 -8.57 #FFFFFF33 + ...

• Shadow lvl 1: drop_shadow 40px offset 0 20 #7A13F91A + inner_shadow 17.14px offset -4.29 -8.57 #FFFFFF33 + ...

• Shadow lvl 2: drop_shadow 40px offset 0 24 #7A13F933 + inner_shadow 17.14px offset -4.29 -8.57 #FFFFFF33 + ...

• Shadow lvl 3: drop_shadow 40px offset 0 32 #7A13F940 + inner_shadow 17.14px offset -4.29 -8.57 #FFFFFF33 + ...

• button shadow: drop_shadow 10px offset 0 5 #7A13F940 + inner_shadow 17.14px offset -4.29 -8.57 #FFFFFF33 + ...

• Light/bg-blur/none: background_blur 0px

• Light/bg-blur/sm: background_blur 4px

• Light/bg-blur/blur: background_blur 8px

• Light/bg-blur/md: background_blur 12px

• Light/bg-blur/lg: background_blur 16px

• Light/bg-blur/xl: background_blur 24px

• Light/bg-blur/2xl: background_blur 40px

• Light/bg-blur/3xl: background_blur 64px

• Light/layer-blur/none: layer_blur 0px

• Light/layer-blur/sm: layer_blur 4px

• Light/layer-blur/blur: layer_blur 8px

• Light/layer-blur/md: layer_blur 12px

• Light/layer-blur/lg: layer_blur 16px

• Light/layer-blur/xl: layer_blur 24px

• Light/layer-blur/2xl: layer_blur 40px

• Light/layer-blur/3xl: layer_blur 64px

• Light/box-shadow/default/2xs: drop_shadow 0px offset 0 1 #00000040

• Light/box-shadow/default/xs: drop_shadow 2px offset 0 1 #0000000D

• Light/box-shadow/default/sm: drop_shadow 2px offset 0 1 #3E245C1A + drop_shadow 3px offset 0 1 #3E245C1A

• Light/box-shadow/default/md: drop_shadow 4px offset 0 2 #0000001A + drop_shadow 6px offset 0 4 #0000001A

• Light/box-shadow/default/lg: drop_shadow 6px offset 0 4 #0000001A + drop_shadow 15px offset 0 10 #0000001A

• Light/box-shadow/default/xl: drop_shadow 10px offset 0 8 #0000001A + drop_shadow 25px offset 0 20 #0000001A

• Light/box-shadow/default/2xl: drop_shadow 50px offset 0 25 #00000040

• Light/box-shadow/primary/xs: drop_shadow 2px offset 0 1 #0000000D

• Light/box-shadow/primary/sm: drop_shadow 2px offset 0 1 #0000001A + drop_shadow 3px offset 0 1 #0000001A

• Light/box-shadow/primary/md: drop_shadow 4px offset 0 2 #0000001A + drop_shadow 6px offset 0 4 #0000001A

• Light/box-shadow/primary/lg: drop_shadow 6px offset 0 4 #0000001A + drop_shadow 15px offset 0 10 #0000001A

• Light/box-shadow/primary/xl: drop_shadow 10px offset 0 8 #0000001A + drop_shadow 25px offset 0 20 #0000001A

• Light/box-shadow/primary/2xl: drop_shadow 50px offset 0 25 #00000040

• Light/box-shadow/primary/2xs: drop_shadow 0px offset 0 1 #0000000D

• Light/box-shadow/secondary/xs: drop_shadow 2px offset 0 1 #00000033

Grid Styles

• No local grid styles found.

Component Families

• No components were found on the current page. Add component sets to improve guideline coverage.

Editing Notes

• Refine this file after extraction to add brand context and rationale.

• Keep token names synchronized with Figma styles and variables.

• Add usage examples and anti-patterns for critical components.

Download .md

Petr Sovadina @petrsovadina

License MIT

Uploaded 2 months ago

Version v1

File size 12.3 KB

Downloads 48

Copies 5

bold dark glassmorphism tailwind

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/petrsovadina/dokturek-ui-kit-copy-design-guidelines and implement it in my code

Don't have the MCP? Install it here