Daisybill design system
daisybill.com
Read from Daisybill's public website by Clinical Terminal. Not reviewed by Daisybill. Copy it and paste it into Claude as inspiration.
Corrections or removal: agent@clinicalterminal.com
Palette
- Ground#FFFFFF
- Ink#292B33
- Accent on the ground#4E6BEA
- Primary#5E7EFF
- On primary#000000
- Dark#292B33
- Site background#FFFFFF
Type
Headings
Archivo · closest free match for Proxima-Nova
Daisybill at a glance
Body
Archivo · closest free match for Proxima-Nova
Clear, readable paragraphs for clinicians, buyers and patients alike.
- 3rem · 48pxDaisybill
- 2.25rem · 36pxDaisybill
- 2rem · 32pxDaisybill
- 1.875rem · 30pxDaisybill
- 1.75rem · 28pxDaisybill
- 1.5rem · 24pxDaisybill
- 1.25rem · 20pxDaisybill
- 1.125rem · 18pxDaisybill
Shape & depth
Cards and panels: 20px corners · buttons and chips: 20px.
Corner radii
- 1.25remused in 13 rules
- 9999pxused in 8 rules
- .75remused in 7 rules
- 1.5remused in 6 rules
- 1remused in 5 rules
- .5remused in 4 rules
- 2remused in 3 rules
- 2.5remused in 1 rule
- 5pxused in 1 rule
- .25remused in 1 rule
Shadows
- 0 0 #0000,0 0 #0000,0 15px 40px rgba(13,22,113,.07)used in 11 rules
- 0 0 #0000,0 0 #0000,0 15px 40px #0d167112used in 11 rules
- 0 0 #0000,0 0 #0000,0 15px 40px rgba(32,39,99,.15)used in 6 rules
- 0 0 #0000,0 0 #0000,0 15px 40px #20276326used in 6 rules
- 0 0 #0000,0 0 #0000,0 0 #0000used in 6 rules
- 0 0 #0000,0 0 #0000,0 15px 30px rgba(13,22,113,.2)used in 4 rules
Gradients
- linear-gradient(49.94deg,#eee6ff,#f9f5ff)used in 3 rules
- linear-gradient(49.94deg,#ffd591,#fff7e6)used in 3 rules
- linear-gradient(28.52deg,#fff0f6 34.7%,#ffd6e7)used in 3 rules
- linear-gradient(49.94deg,#c4f9ff,#f5feff)used in 2 rules
- linear-gradient(49.94deg,#c4e3ff,#f5feff)used in 2 rules
- linear-gradient(28.52deg,#e9f6ff 34.7%,#bde4ff)used in 2 rules
Breakpoints: 640px · 768px · 992px · 1280px · 1536px
Voice
Tone: professional. Energy: high. Written for businesses.
DESIGN.md
The file Copy design system puts on your clipboard. Open the raw file.
--- generator: clinical-terminal-brand-kit company: "Daisybill" domain: "daisybill.com" colors: primary: "#5E7EFF" onPrimary: "#000000" dark: "#292B33" background: "#FFFFFF" ground: mode: light hex: "#FFFFFF" ink: "#292B33" accent: "#4E6BEA" fonts: heading: "Archivo" body: "Archivo" radius: card: "20px" button: "20px" --- # Design System — Daisybill > Read from Daisybill's public website (daisybill.com) by Clinical Terminal. Not reviewed by Daisybill. > Use it as inspiration: borrow the ideas, not Daisybill's name, logo or identity. ## Ground - **Light ground** (#FFFFFF), from Daisybill's site background #FFFFFF. Pages and panels sit on it. - Main text: #292B33 (14.12:1 on the ground). - Secondary text is #292B33 at 88% / 76% / 60%; hairlines and plate borders #292B33 at 16%. ## Color - **Accent on the ground: #4E6BEA** (4.55:1), adjusted from Daisybill's primary #5E7EFF so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills. - **Primary #5E7EFF** for filled shapes (buttons, chips, bars), with #000000 text on it (5.9:1). - Quote every hex exactly as written above. ## Type - Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts. - Daisybill's site uses Proxima-Nova / Proxima-Nova; these are the closest free look-alikes. ## Shape - Cards and panels: 20px corners. Buttons and chips: 20px. ## Voice - Tone: professional. Energy: high. Written for businesses. - Headlines are short and concrete. ## Tokens from the site's stylesheets ### Typefaces - GilroyRegular - GilroySemiBold - proxima-nova ### Type scale (most-used sizes) `3rem` · `2.25rem` · `2rem` · `1.875rem` · `1.75rem` · `1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.875rem` · `.75rem` · `.625rem` ### Letter-spacing `.25px` (16) · `.3em` (6) · `.016rem` (1) · `.3px` (1) · `.2em` (1) · `-.05em` (1) ### Corner radii (most-used) `1.25rem` · `9999px` · `.75rem` · `1.5rem` · `1rem` · `.5rem` · `2rem` · `2.5rem` · `5px` · `.25rem` ### Shadows - `0 0 #0000,0 0 #0000,0 15px 40px rgba(13,22,113,.07)` - `0 0 #0000,0 0 #0000,0 15px 40px #0d167112` - `0 0 #0000,0 0 #0000,0 15px 40px rgba(32,39,99,.15)` - `0 0 #0000,0 0 #0000,0 15px 40px #20276326` - `0 0 #0000,0 0 #0000,0 0 #0000` - `0 0 #0000,0 0 #0000,0 15px 30px rgba(13,22,113,.2)` ### Gradients - `linear-gradient(49.94deg,#eee6ff,#f9f5ff)` - `linear-gradient(49.94deg,#ffd591,#fff7e6)` - `linear-gradient(28.52deg,#fff0f6 34.7%,#ffd6e7)` - `linear-gradient(49.94deg,#c4f9ff,#f5feff)` - `linear-gradient(49.94deg,#c4e3ff,#f5feff)` - `linear-gradient(28.52deg,#e9f6ff 34.7%,#bde4ff)` ### Breakpoints 640px · 768px · 992px · 1280px · 1536px