[Design systems](/design-systems/) / Syntra # Syntra design system syntra.com Read from Syntra's public website by Clinical Terminal. Not reviewed by Syntra. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Syntra homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100054.jpg?alt=media) ## Palette - Ground \#FFFFFF \--white - Ink \#000000 - Accent on the ground \#0077D3 - Primary \#0997F5 - On primary \#000000 \--black - Dark \#000000 \--black - Site background \#FFFFFF \--white ## Color ramps Slate 50 \#F8FAFC 100 \#F1F5F9 200 \#E2E8F0 300 \#CBD5E1 400 \#94A3B8 500 \#64748B 600 \#475569 700 \#334155 800 \#1E293B 900 \#0F172A 950 \#020617 Gray 50 \#F9FAFB 100 \#F3F4F6 200 \#E5E7EB 300 \#D1D5DB 400 \#9CA3AF 500 \#6B7280 600 \#4B5563 700 \#374151 800 \#1F2937 900 \#111827 950 \#030712 Zinc 50 \#FAFAFA 100 \#F4F4F5 200 \#E4E4E7 300 \#D4D4D8 400 \#A1A1AA 500 \#71717A 600 \#52525B 700 \#3F3F46 800 \#27272A 900 \#18181B 950 \#09090B Neutral 50 \#FAFAFA 100 \#F5F5F5 200 \#E5E5E5 300 \#D4D4D4 400 \#A3A3A3 500 \#737373 600 \#525252 700 \#404040 800 \#262626 900 \#171717 950 \#0A0A0A Stone 50 \#FAFAF9 100 \#F5F5F4 200 \#E7E5E4 300 \#D6D3D1 400 \#A8A29E 500 \#78716C 600 \#57534E 700 \#44403C 800 \#292524 900 \#1C1917 950 \#0C0A09 Red 50 \#FEF2F2 100 \#FEE2E2 200 \#FECACA 300 \#FCA5A5 400 \#F87171 500 \#EF4444 600 \#DC2626 700 \#B91C1C 800 \#991B1B 900 \#7F1D1D 950 \#450A0A Orange 50 \#FFF7ED 100 \#FFEDD5 200 \#FED7AA 300 \#FDBA74 400 \#FB923C 500 \#F97316 600 \#EA580C 700 \#C2410C 800 \#9A3412 900 \#7C2D12 950 \#431407 Amber 50 \#FFFBEB 100 \#FEF3C7 200 \#FDE68A 300 \#FCD34D 400 \#FBBF24 500 \#F59E0B 600 \#D97706 700 \#B45309 800 \#92400E 900 \#78350F 950 \#451A03 Yellow 50 \#FEFCE8 100 \#FEF9C3 200 \#FEF08A 300 \#FDE047 400 \#FACC15 500 \#EAB308 600 \#CA8A04 700 \#A16207 800 \#854D0E 900 \#713F12 950 \#422006 Lime 50 \#F7FEE7 100 \#ECFCCB 200 \#D9F99D 300 \#BEF264 400 \#A3E635 500 \#84CC16 600 \#65A30D 700 \#4D7C0F 800 \#3F6212 900 \#365314 950 \#1A2E05 Green 50 \#F0FDF4 100 \#DCFCE7 200 \#BBF7D0 300 \#86EFAC 400 \#4ADE80 500 \#22C55E 600 \#16A34A 700 \#15803D 800 \#166534 900 \#14532D 950 \#052E16 Emerald 50 \#ECFDF5 100 \#D1FAE5 200 \#A7F3D0 300 \#6EE7B7 400 \#34D399 500 \#10B981 600 \#059669 700 \#047857 800 \#065F46 900 \#064E3B 950 \#022C22 ## Other named colors - \--black #000000 - \--white #FFFFFF ## Type Headings Archivo · closest free match for RecklessNeue Syntra at a glance Body Archivo · closest free match for ui-sans-serif Clear, readable paragraphs for clinicians, buyers and patients alike. - 3.75rem · 60pxSyntra - 3rem · 48pxSyntra - 2.25rem · 36pxSyntra - 1.875rem · 30pxSyntra - 1.5rem · 24pxSyntra - 1.25rem · 20pxSyntra - 1.125rem · 18pxSyntra - 1rem · 16pxSyntra ## Shape & depth Cards and panels: 24px corners · buttons and chips: 24px. ### Corner radii - 1rem used in 3 rules - 1.5rem used in 2 rules - 2.5rem used in 2 rules - 2rem used in 2 rules - 3rem used in 2 rules - 4rem used in 2 rules - 1.75rem used in 1 rule - 9999px used in 1 rule - .75rem used in 1 rule ### Shadows - 0 10px 40px -10px rgba(43,82,146,.1) used in 1 rule ### Gradients - radial-gradient(#000000 .5px,transparent 0) used in 2 rules - radial-gradient(ellipse at center,rgba(126,182,255,.12),transparent 62%) used in 1 rule - radial-gradient(ellipse at center,black,transparent) used in 1 rule - radial-gradient(ellipse at center,black,transparent 70%) used in 1 rule - radial-gradient(ellipse at top right,black,transparent 70%) used in 1 rule Breakpoints: 640px · 768px · 1024px · 1280px ## Voice Tone: professional. Energy: low. Written for businesses. ## DESIGN.md The file Copy design system puts on your clipboard. [Open the raw file](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100054.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Syntra" domain: "syntra.com" colors: primary: "#0997F5" onPrimary: "#000000" dark: "#000000" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#000000" accent: "#0077D3" fonts: heading: "Archivo" body: "Archivo" radius: card: "24px" button: "24px" --- # Design System — Syntra > Read from Syntra's public website (syntra.com) by Clinical Terminal. Not reviewed by Syntra. > Use it as inspiration: borrow the ideas, not Syntra's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Syntra's site background #FFFFFF. Pages and panels sit on it. - Main text: #000000 (21:1 on the ground). - Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%. ## Color - **Accent on the ground: #0077D3** (4.59:1), adjusted from Syntra's primary #0997F5 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #0997F5** for filled shapes (buttons, chips, bars), with #000000 text on it (6.76:1). - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Syntra's site uses RecklessNeue / ui-sans-serif; these are the closest free look-alikes. ## Shape - Cards and panels: 24px corners. Buttons and chips: 24px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Slate** (`--slate-N`): 50 `#F8FAFC` · 100 `#F1F5F9` · 200 `#E2E8F0` · 300 `#CBD5E1` · 400 `#94A3B8` · 500 `#64748B` · 600 `#475569` · 700 `#334155` · 800 `#1E293B` · 900 `#0F172A` · 950 `#020617` - **Gray** (`--gray-N`): 50 `#F9FAFB` · 100 `#F3F4F6` · 200 `#E5E7EB` · 300 `#D1D5DB` · 400 `#9CA3AF` · 500 `#6B7280` · 600 `#4B5563` · 700 `#374151` · 800 `#1F2937` · 900 `#111827` · 950 `#030712` - **Zinc** (`--zinc-N`): 50 `#FAFAFA` · 100 `#F4F4F5` · 200 `#E4E4E7` · 300 `#D4D4D8` · 400 `#A1A1AA` · 500 `#71717A` · 600 `#52525B` · 700 `#3F3F46` · 800 `#27272A` · 900 `#18181B` · 950 `#09090B` - **Neutral** (`--neutral-N`): 50 `#FAFAFA` · 100 `#F5F5F5` · 200 `#E5E5E5` · 300 `#D4D4D4` · 400 `#A3A3A3` · 500 `#737373` · 600 `#525252` · 700 `#404040` · 800 `#262626` · 900 `#171717` · 950 `#0A0A0A` - **Stone** (`--stone-N`): 50 `#FAFAF9` · 100 `#F5F5F4` · 200 `#E7E5E4` · 300 `#D6D3D1` · 400 `#A8A29E` · 500 `#78716C` · 600 `#57534E` · 700 `#44403C` · 800 `#292524` · 900 `#1C1917` · 950 `#0C0A09` - **Red** (`--red-N`): 50 `#FEF2F2` · 100 `#FEE2E2` · 200 `#FECACA` · 300 `#FCA5A5` · 400 `#F87171` · 500 `#EF4444` · 600 `#DC2626` · 700 `#B91C1C` · 800 `#991B1B` · 900 `#7F1D1D` · 950 `#450A0A` - **Orange** (`--orange-N`): 50 `#FFF7ED` · 100 `#FFEDD5` · 200 `#FED7AA` · 300 `#FDBA74` · 400 `#FB923C` · 500 `#F97316` · 600 `#EA580C` · 700 `#C2410C` · 800 `#9A3412` · 900 `#7C2D12` · 950 `#431407` - **Amber** (`--amber-N`): 50 `#FFFBEB` · 100 `#FEF3C7` · 200 `#FDE68A` · 300 `#FCD34D` · 400 `#FBBF24` · 500 `#F59E0B` · 600 `#D97706` · 700 `#B45309` · 800 `#92400E` · 900 `#78350F` · 950 `#451A03` - **Yellow** (`--yellow-N`): 50 `#FEFCE8` · 100 `#FEF9C3` · 200 `#FEF08A` · 300 `#FDE047` · 400 `#FACC15` · 500 `#EAB308` · 600 `#CA8A04` · 700 `#A16207` · 800 `#854D0E` · 900 `#713F12` · 950 `#422006` - **Lime** (`--lime-N`): 50 `#F7FEE7` · 100 `#ECFCCB` · 200 `#D9F99D` · 300 `#BEF264` · 400 `#A3E635` · 500 `#84CC16` · 600 `#65A30D` · 700 `#4D7C0F` · 800 `#3F6212` · 900 `#365314` · 950 `#1A2E05` - **Green** (`--green-N`): 50 `#F0FDF4` · 100 `#DCFCE7` · 200 `#BBF7D0` · 300 `#86EFAC` · 400 `#4ADE80` · 500 `#22C55E` · 600 `#16A34A` · 700 `#15803D` · 800 `#166534` · 900 `#14532D` · 950 `#052E16` - **Emerald** (`--emerald-N`): 50 `#ECFDF5` · 100 `#D1FAE5` · 200 `#A7F3D0` · 300 `#6EE7B7` · 400 `#34D399` · 500 `#10B981` · 600 `#059669` · 700 `#047857` · 800 `#065F46` · 900 `#064E3B` · 950 `#022C22` - **Teal** (`--teal-N`): 50 `#F0FDFA` · 100 `#CCFBF1` · 200 `#99F6E4` · 300 `#5EEAD4` · 400 `#2DD4BF` · 500 `#14B8A6` · 600 `#0D9488` · 700 `#0F766E` · 800 `#115E59` · 900 `#134E4A` · 950 `#042F2E` - **Cyan** (`--cyan-N`): 50 `#ECFEFF` · 100 `#CFFAFE` · 200 `#A5F3FC` · 300 `#67E8F9` · 400 `#22D3EE` · 500 `#06B6D4` · 600 `#0891B2` · 700 `#0E7490` · 800 `#155E75` · 900 `#164E63` · 950 `#083344` - **Sky** (`--sky-N`): 50 `#F0F9FF` · 100 `#E0F2FE` · 200 `#BAE6FD` · 300 `#7DD3FC` · 400 `#38BDF8` · 500 `#0EA5E9` · 600 `#0284C7` · 700 `#0369A1` · 800 `#075985` · 900 `#0C4A6E` · 950 `#082F49` - **Blue** (`--blue-N`): 50 `#EFF6FF` · 100 `#DBEAFE` · 200 `#BFDBFE` · 300 `#93C5FD` · 400 `#60A5FA` · 500 `#3B82F6` · 600 `#2563EB` · 700 `#1D4ED8` · 800 `#1E40AF` · 900 `#1E3A8A` · 950 `#172554` - **Indigo** (`--indigo-N`): 50 `#EEF2FF` · 100 `#E0E7FF` · 200 `#C7D2FE` · 300 `#A5B4FC` · 400 `#818CF8` · 500 `#6366F1` · 600 `#4F46E5` · 700 `#4338CA` · 800 `#3730A3` · 900 `#312E81` · 950 `#1E1B4B` - **Violet** (`--violet-N`): 50 `#F5F3FF` · 100 `#EDE9FE` · 200 `#DDD6FE` · 300 `#C4B5FD` · 400 `#A78BFA` · 500 `#8B5CF6` · 600 `#7C3AED` · 700 `#6D28D9` · 800 `#5B21B6` · 900 `#4C1D95` · 950 `#2E1065` - **Purple** (`--purple-N`): 50 `#FAF5FF` · 100 `#F3E8FF` · 200 `#E9D5FF` · 300 `#D8B4FE` · 400 `#C084FC` · 500 `#A855F7` · 600 `#9333EA` · 700 `#7E22CE` · 800 `#6B21A8` · 900 `#581C87` · 950 `#3B0764` - **Fuchsia** (`--fuchsia-N`): 50 `#FDF4FF` · 100 `#FAE8FF` · 200 `#F5D0FE` · 300 `#F0ABFC` · 400 `#E879F9` · 500 `#D946EF` · 600 `#C026D3` · 700 `#A21CAF` · 800 `#86198F` · 900 `#701A75` · 950 `#4A044E` - **Pink** (`--pink-N`): 50 `#FDF2F8` · 100 `#FCE7F3` · 200 `#FBCFE8` · 300 `#F9A8D4` · 400 `#F472B6` · 500 `#EC4899` · 600 `#DB2777` · 700 `#BE185D` · 800 `#9D174D` · 900 `#831843` · 950 `#500724` - **Rose** (`--rose-N`): 50 `#FFF1F2` · 100 `#FFE4E6` · 200 `#FECDD3` · 300 `#FDA4AF` · 400 `#FB7185` · 500 `#F43F5E` · 600 `#E11D48` · 700 `#BE123C` · 800 `#9F1239` · 900 `#881337` · 950 `#4C0519` ### Other named colors - `--black`: `#000000` - `--white`: `#FFFFFF` ### Typefaces - Geist (`--font-geist-sans`) - Geist Mono (`--font-geist-mono`) - RecklessNeue - Geist Fallback - Geist Mono Fallback ### Type scale (most-used sizes) `3.75rem` · `3rem` · `2.25rem` · `1.875rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `.75rem` · `11px` · `10px` ### Letter-spacing `.22em` (2) · `-.03em` (1) · `.16em` (1) · `.18em` (1) · `.2em` (1) · `-.025em` (1) ### Corner radii (most-used) `1rem` · `1.5rem` · `2.5rem` · `2rem` · `3rem` · `4rem` · `1.75rem` · `9999px` · `.75rem` ### Shadows - `0 10px 40px -10px rgba(43,82,146,.1)` ### Gradients - `radial-gradient(#000000 .5px,transparent 0)` - `radial-gradient(ellipse at center,rgba(126,182,255,.12),transparent 62%)` - `radial-gradient(ellipse at center,black,transparent)` - `radial-gradient(ellipse at center,black,transparent 70%)` - `radial-gradient(ellipse at top right,black,transparent 70%)` ### Breakpoints 640px · 768px · 1024px · 1280px ```