Dokturek.ai Design SystemLegacy format

Deep-violet medical-tech. Bold expressive display headings, calm light surfaces, saturated purple accents, soft lilac glows on dark hero backgrounds

Primary (#7C3BED
Background (#FFFFFF
Surface (#F4F3FC
Primary Hover (#6D39C6
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Brand / Primary

Hero Gradient (dark sections)

Accent / Glow

Neutrals

Text

Semantic

Typography

Hero/H1Bricolage Grotesque, system-ui, sans-serif · 72px · Extra Bold

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

Section H2Bricolage Grotesque, system-ui, sans-serif · 60px · Extra Bold

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

H3Bricolage Grotesque, system-ui, sans-serif · 32px · Extra Bold

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

Lead/IntroDM Sans, system-ui, sans-serif · 24px · Regular

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

BodyDM Sans, system-ui, sans-serif · 16px · Regular

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

Nav/LabelDM Sans, system-ui, sans-serif · 16px · Medium

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

ButtonDM Sans, system-ui, sans-serif · 14px · SemiBold

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

Caption/PillDM Sans, system-ui, sans-serif · 12px · Bold

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

Spacing

Base: 4px

Deep-violet medical-tech. Bold expressive display headings, calm light surfaces, saturated purple accents, soft lilac glows on dark hero backgrounds

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

Default

Elevation & Depth

2
Glow

Do's & Don'ts

Do

Pair Bricolage Grotesque 800 headings with DM Sans body
Alternate white → #F4F3FC → dark violet gradient for section rhythm
Use #130F3E (deep indigo) not pure black for text on light
Use pill shape consistently for buttons and badges
Reserve lilac/orchid glows for dark hero/CTA sections only
Highlight key numbers/savings in #7C3BED

Don't

Don't use pure black #000000 for text
Don't add shadows to cards (use border + fill)
Don't apply glow blobs on light sections
Don't introduce a third typeface (keep to BricolageGrotesque + DMSans)
Don't square off buttons (always pills)
Guidelines

Do

Pair expressive Bricolage Grotesque 800 headings with calm DM Sans body.

Alternate section backgrounds: white → #F4F3FC → dark violet gradient for rhythm.

Keep deep-indigo #130F3E (not pure black) for text on light.

Use the pill shape consistently for buttons and badges.

Reserve lilac/orchid glows for dark hero/CTA sections only.

Highlight key numbers/savings in #7C3BED.

Don't

Don't use pure black #000000 for text — use #130F3E.

Don't drop shadows on cards — use the lilac border + tinted fill instead.

Don't put glow blobs on light sections.

Don't mix in a third type family.

Don't square off buttons — they are always pills.

Tone of voice: Czech, empatický k lékařům, jasný, konkrétní, důvěryhodný.

Klíčové sdělení: méně administrativy, více medicíny; vracíme lékaře k pacientům.

---

Format: DESIGN.md (Google Stitch). Source: live extraction of dokturek.ai computed styles.

Download .md

License MIT
Uploaded 1 weeks ago
Version v2
File size 6.5 KB
Downloads 12
Copies 4
Inspired by Source

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/petrsovadina/dokt-rek-ai and implement it in my code

Don't have the MCP? Install it here