--- 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