[Design systems](/design-systems/) / Long Tail # Long Tail design system longtailhealth.com Read from Long Tail's public website by Clinical Terminal. Not reviewed by Long Tail. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Long Tail homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100917841.jpg?alt=media) ## Palette - Ground \#FFFFFF \--brand--white - Ink \#040046 - Accent on the ground \#4F4D7E - Primary \#4F4D7E - On primary \#FFFFFF \--brand--white - Secondary accent \#146EF5 - Dark \#040046 \--box-shadow--bs-neutral-small - Site background \#FFFFFF \--brand--white ## Color ramps Colors System Green 100 \#EEF9F5 200 \#E2FBEA 300 \#ADECBB 400 \#74D184 Colors System Yellow 100 \#FFFAE9 200 \#FAEDBF 300 \#FBE080 400 \#EFC42C Colors System Red 100 \#FFF5F6 200 \#FAC6D0 300 \#FB93A3 400 \#FE566B Colors System Blue 100 \#E3EFFF 200 \#C3DDFF 300 \#8DC1FF 400 \#64A7FF ## Other named colors - \--box-shadow--bs-neutral-small #040046 - \--box-shadow--bs-neutral-medium #040046 - \--box-shadow--bs-neutral-large #040046 - \--box-shadow--bs-neutral-regular #040046 - \--brand--cool #F3F7F8 - \--brand--pacific #080099 - \--brand--deep-sea #040046 - \--brand--white #FFFFFF - \--brand--card #E8EFF1 - \--brand--mist #AFC6EB - \--brand--coral #FF760F - \--brand--neutral #FFFAF4 - \--brand--coral-tint #FFC193 - \--brand--starfish #FF91FF - \--brand--warm #FFF6E9 - \--brand--deep-sea-70 #040046 ## Type Headings Archivo · closest free match for Syne Long Tail at a glance Body DM Sans Clear, readable paragraphs for clinicians, buyers and patients alike. - 40pxLong Tail - 38pxLong Tail - 32pxLong Tail - 28pxLong Tail - 24pxLong Tail - 21pxLong Tail - 18pxLong Tail - 16pxLong Tail ## Shape & depth Cards and panels: 16px corners · buttons and chips: 300px. ### Corner radii - 999px used in 8 rules - 24px used in 7 rules - 16px used in 6 rules - 50% used in 5 rules - 2px used in 3 rules - 32px used in 3 rules - 12px used in 3 rules - 3px used in 2 rules - 100% used in 2 rules - 300px used in 1 rule ### Shadows - 0 1px 3px #0400460f used in 3 rules - 0 8px 24px #0400461a used in 3 rules - 0 2px 4px #19213d14 used in 2 rules - 0 0 #0000 used in 2 rules - 0 0 0 1px #0000001a, 0 1px 3px #0000001a used in 1 rule - 0 0 3px #3336 used in 1 rule ### Gradients - linear-gradient(135deg, #ff760f 0%, #ff91ff 100%) used in 4 rules - linear-gradient(#08080899, #08080899) used in 3 rules - linear-gradient(#080808b3, #080808b3) used in 3 rules - linear-gradient(90deg, #f8f8f800, #f8f8f8 95%) used in 2 rules - linear-gradient(135deg, #8423ffb5, #ff881900) used in 1 rule - radial-gradient(circle, #fa2d9b, #ff9467 81%, #ffd231) used in 1 rule Breakpoints: 479px · 767px · 768px · 991px · 1440px · 1920px ## 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%2F100917841.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Long Tail" domain: "longtailhealth.com" colors: primary: "#4F4D7E" onPrimary: "#FFFFFF" dark: "#040046" accent: "#146EF5" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#040046" accent: "#4F4D7E" fonts: heading: "Archivo" body: "DM Sans" radius: card: "16px" button: "300px" --- # Design System — Long Tail > Read from Long Tail's public website (longtailhealth.com) by Clinical Terminal. Not reviewed by Long Tail. > Use it as inspiration: borrow the ideas, not Long Tail's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Long Tail's site background #FFFFFF. Pages and panels sit on it. - Main text: #040046 (19.2:1 on the ground). - Secondary text is #040046 at 88% / 76% / 60%; hairlines and plate borders #040046 at 16%. ## Color - **Accent on the ground: #4F4D7E** (7.79:1). Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #4F4D7E** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.79:1). - Secondary accent #146EF5: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **DM Sans**. Both on Google Fonts. - Long Tail's site uses Syne / DM Sans; these are the closest free look-alikes. ## Shape - Cards and panels: 16px corners. Buttons and chips: 300px. ## Voice - Tone: professional. Energy: low. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Color ramps - **Colors System Green** (`--colors--system--green-N`): 100 `#EEF9F5` · 200 `#E2FBEA` · 300 `#ADECBB` · 400 `#74D184` - **Colors System Yellow** (`--colors--system--yellow-N`): 100 `#FFFAE9` · 200 `#FAEDBF` · 300 `#FBE080` · 400 `#EFC42C` - **Colors System Red** (`--colors--system--red-N`): 100 `#FFF5F6` · 200 `#FAC6D0` · 300 `#FB93A3` · 400 `#FE566B` - **Colors System Blue** (`--colors--system--blue-N`): 100 `#E3EFFF` · 200 `#C3DDFF` · 300 `#8DC1FF` · 400 `#64A7FF` ### Other named colors - `--box-shadow--bs-neutral-small`: `#040046` - `--box-shadow--bs-neutral-medium`: `#040046` - `--box-shadow--bs-neutral-large`: `#040046` - `--box-shadow--bs-neutral-regular`: `#040046` - `--brand--cool`: `#F3F7F8` - `--brand--pacific`: `#080099` - `--brand--deep-sea`: `#040046` - `--brand--white`: `#FFFFFF` - `--brand--card`: `#E8EFF1` - `--brand--mist`: `#AFC6EB` - `--brand--coral`: `#FF760F` - `--brand--neutral`: `#FFFAF4` - `--brand--coral-tint`: `#FFC193` - `--brand--starfish`: `#FF91FF` - `--brand--warm`: `#FFF6E9` - `--brand--deep-sea-70`: `#040046` ### Typefaces - DM Sans (`--core--fonts--family--primary-font`) — on Google Fonts - Syne (`--core--fonts--family--headlines`) - Uncut Sans ### Type scale (most-used sizes) `40px` · `38px` · `32px` · `28px` · `24px` · `21px` · `18px` · `16px` · `14px` · `13px` · `12px` · `11px` ### Letter-spacing `-.54px` (5) · `1.4px` (4) · `.08em` (3) · `-1px` (3) · `-.5px` (3) · `-.72px` (2) ### Corner radii (most-used) `999px` · `24px` · `16px` · `50%` · `2px` · `32px` · `12px` · `3px` · `100%` · `300px` ### Shadows - `0 1px 3px #0400460f` - `0 8px 24px #0400461a` - `0 2px 4px #19213d14` - `0 0 #0000` - `0 0 0 1px #0000001a, 0 1px 3px #0000001a` - `0 0 3px #3336` ### Gradients - `linear-gradient(135deg, #ff760f 0%, #ff91ff 100%)` - `linear-gradient(#08080899, #08080899)` - `linear-gradient(#080808b3, #080808b3)` - `linear-gradient(90deg, #f8f8f800, #f8f8f8 95%)` - `linear-gradient(135deg, #8423ffb5, #ff881900)` - `radial-gradient(circle, #fa2d9b, #ff9467 81%, #ffd231)` ### Breakpoints 479px · 767px · 768px · 991px · 1440px · 1920px ```