[Design systems](/design-systems/) / Sectra # Sectra design system sectra.com Read from Sectra's public website by Clinical Terminal. Not reviewed by Sectra. Copy it and paste it into Claude as inspiration. Corrections or removal: ![Sectra homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F103146766.jpg?alt=media) ## Palette - Ground \#FFFFFF \--xxiv-background-color - Ink \#111111 - Accent on the ground \#647893 - Primary \#A9BFDC - On primary \#000000 - Secondary accent \#2860A8 \--xxiv-link-color - Dark \#2860A8 \--xxiv-link-color - Site background \#FFFFFF \--xxiv-background-color ## Other named colors - \--xxiv-background-color #FFFFFF - \--xxiv-link-color #2860A8 ## Type Headings Archivo · closest free match for Eurostile Sectra at a glance Body Open Sans Clear, readable paragraphs for clinicians, buyers and patients alike. - 2rem · 32pxSectra - 30pxSectra - 1.7rem · 27.2pxSectra - 1.4rem · 22.4pxSectra - 20pxSectra - 1.25rem · 20pxSectra - 18pxSectra - 17pxSectra ## Shape & depth Cards and panels: 4px corners · buttons and chips: 50px. ### Corner radii - 50% used in 18 rules - 50px used in 8 rules - 5px used in 7 rules - 1rem used in 4 rules - 150px used in 4 rules - 2px used in 3 rules - 14px used in 3 rules - 0.375rem used in 2 rules - 34px used in 2 rules - 10px used in 2 rules ### Shadows - 0 0 70px 0 rgba(0,0,0,.25) used in 8 rules - 0 0 0 0.25rem rgba(13, 110, 253, 0.25) used in 6 rules - none !important used in 5 rules - inset 0 0 0 1px currentColor used in 4 rules - 0 0 1px 3px #0C4DA2 used in 3 rules - 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25) used in 2 rules ### Gradients - linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%) used in 2 rules - linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) used in 1 rule - linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) used in 1 rule - linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) used in 1 rule - linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) used in 1 rule - radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) used in 1 rule Breakpoints: 350px · 479px · 483px · 486px · 550px · 551px · 576px · 600px · 767px · 768px · 900px · 991px ## Voice Tone: professional. Energy: low. Written for enterprises. ## 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%2F103146766.md?alt=media). ``` --- generator: clinical-terminal-brand-kit company: "Sectra" domain: "sectra.com" colors: primary: "#A9BFDC" onPrimary: "#000000" dark: "#2860A8" accent: "#2860A8" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#111111" accent: "#647893" fonts: heading: "Archivo" body: "Open Sans" radius: card: "4px" button: "50px" --- # Design System — Sectra > Read from Sectra's public website (sectra.com) by Clinical Terminal. Not reviewed by Sectra. > Use it as inspiration: borrow the ideas, not Sectra's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Sectra's site background #FFFFFF. Pages and panels sit on it. - Main text: #111111 (18.88:1 on the ground). - Secondary text is #111111 at 88% / 76% / 60%; hairlines and plate borders #111111 at 16%. ## Color - **Accent on the ground: #647893** (4.52:1), adjusted from Sectra's primary #A9BFDC so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #A9BFDC** for filled shapes (buttons, chips, bars), with #000000 text on it (11.17:1). - Secondary accent #2860A8: charts and a second data series only. - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Open Sans**. Both on Google Fonts. - Sectra's site uses Eurostile / Open Sans; these are the closest free look-alikes. ## Shape - Cards and panels: 4px corners. Buttons and chips: 50px. ## Voice - Tone: professional. Energy: low. Written for enterprises. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Other named colors - `--xxiv-background-color`: `#FFFFFF` - `--xxiv-link-color`: `#2860A8` ### Typefaces - icomoon - Open Sans — on Google Fonts - Eurostile - Nunito — on Google Fonts - ' ### Type scale (most-used sizes) `2rem` · `30px` · `1.7rem` · `1.4rem` · `20px` · `1.25rem` · `18px` · `17px` · `16px` · `15px` · `14px` · `12px` ### Letter-spacing `.5px` (2) · `-.3px` (2) · `.12em` (1) · `.05em` (1) ### Corner radii (most-used) `50%` · `50px` · `5px` · `1rem` · `150px` · `2px` · `14px` · `0.375rem` · `34px` · `10px` ### Shadows - `0 0 70px 0 rgba(0,0,0,.25)` - `0 0 0 0.25rem rgba(13, 110, 253, 0.25)` - `none !important` - `inset 0 0 0 1px currentColor` - `0 0 1px 3px #0C4DA2` - `0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25)` ### Gradients - `linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%)` - `linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))` - `linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)` - `linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0))` - `linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0))` - `radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0))` ### Breakpoints 350px · 479px · 483px · 486px · 550px · 551px · 576px · 600px · 767px · 768px · 900px · 991px · 992px · 1000px · 1199px · 1200px · 1215px · 1400px · 1500px ```