Aesculap Meridian
Design Direction
This system treats authority as a spatial property. Dark backgrounds with high-output teal lighting push key elements forward without relying on decorative ornamentation. The gold accent is reserved strictly for hierarchy signaling, not decoration. Every layout decision should reinforce clarity and institutional weight.
Colour Strategy
The image is dominated by a saturated cyan-teal that radiates from the center as concentrated light, built on a near-black base. The gold calligraphy cuts across this cool field as the sole warm tone, placing a textbook complementary pairing of teal and amber at its core. The gold is kept narrow in surface area, which is deliberate: too much warm tone would neutralize the coolness of the dominant teal rather than tension against it.
Typography Strategy
Chakra Petch is a condensed geometric sans with technical grid structure built into its letterforms, which matches the architectural cube motif and the medical-tech positioning of the brand. IBM Plex Sans for body text is neutral enough to stay out of the way of the display type, while its mono-influenced design details carry the precision the brand requires.
Colour Palette
primary
#46d3c5
secondary
#50aac8
accent
#e1b737
neutral
#889190
success
#4ace97
warning
#dabb3e
error
#ce4a65
info
#4a8cce
Typography
Design is intelligence made visible
Great typography is the foundation of great design. The pairing of heading and body typefaces creates a visual hierarchy that guides the reader through content with clarity and purpose, while expressing personality at every level.
Selection colour · highlighted text looks like this · try selecting any text on this page
Spacing
4px base unit · balanced density
Border radius
none
0px
sm
2px
md
5px
lg
10px
xl
16px
full
9999px
Elevation
Shadows
0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(70, 211, 197, 0.1)
0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(70, 211, 197, 0.15)
0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(70, 211, 197, 0.2)
Texture
canvas · opacity 1 · normal blend
Grid
compact · 12 columns · 16px gutter · 24px margin · 1280px max
Motion
Hover, click, and interact to see the motion tokens in action.
100ms
200ms
400ms
600ms
800ms
Easings
Hover states, colour changes, most transitions
cubic-bezier(0.65, 0, 0.35, 1)
Elements appearing - modals, dropdowns, toasts
cubic-bezier(0.33, 0, 0, 1)
Elements leaving - dismissals, close animations
cubic-bezier(0.67, 0, 1, 0.67)
Playful feedback - toggles, badges, confirmations
cubic-bezier(0.22, 1.6, 0.36, 1)
Physics-based - drag, gestures, elastic effects
cubic-bezier(0.16, 1.3, 0.3, 1)
Iconography
Icon style derived from the system's personality, mood, and visual tokens.
Recommended library
Material Symbols
Comprehensive icon system with variable weight and fill
Browse Material Symbols ↗Also consider Lucide — Clean geometric icons with consistent stroke weight
Stroke weight
1.5px
Matches border width (1px)
Corner rounding
2px
Use for icon containers
Icon set preview (luxury) — 1.5px stroke
Size scale
xs
12px
sm
16px
md
20px
lg
24px
xl
32px
On colour
primary
secondary
accent
muted
error
success
ComponentsPro
Component showcase is a Pro feature
Upgrade to see fully themed buttons, inputs, cards, badges, and more - all wired to this system's tokens.
PatternsPro
Patterns are a Pro feature
Upgrade to see fully themed form layouts, empty states, loading skeletons, and error handling - all built with this system's tokens.
Export
:root {
/* ─── Colors: Primary ─── */
--color-primary-50: #f6f9f8;
--color-primary-100: #eaf0f0;
--color-primary-200: #d2eae8;
--color-primary-300: #a4e9e3;
--color-primary-400: #7be0d6;
--color-primary-500: #46d3c5;
--color-primary-600: #2cb9ab;
--color-primary-700: #24988d;
--color-primary-800: #2f6560;
--color-primary-900: #2c3f3d;
--color-primary-950: #1d2a29;
/* ─── Colors: Secondary ─── */
--color-secondary-50: #f6f8f9;
--color-secondary-100: #eaeff0;
--color-secondary-200: #d3e3e8;
--color-secondary-300: #aad6e4;
--color-secondary-400: #83c3d8;
--color-secondary-500: #50aac8;
--color-secondary-600: #3791af;
--color-secondary-700: #2d7790;
--color-secondary-800: #335661;
--color-secondary-900: #2d3a3e;
--color-secondary-950: #1e2729;
/* ─── Colors: Accent ─── */
--color-accent-50: #f9f8f6;
--color-accent-100: #f1efe9;
--color-accent-200: #ede5cf;
--color-accent-300: #f0dc9d;
--color-accent-400: #eacc71;
--color-accent-500: #e1b737;
--color-accent-600: #c89d1e;
--color-accent-700: #a48119;
--color-accent-800: #6b5a29;
--color-accent-900: #413b2a;
--color-accent-950: #2c281c;
/* ─── Colors: Neutral ─── */
--color-neutral-50: #f7f8f8;
--color-neutral-100: #eceeee;
--color-neutral-200: #dddfdf;
--color-neutral-300: #c5c9c9;
--color-neutral-400: #aab1b0;
--color-neutral-500: #889190;
--color-neutral-600: #6e7776;
--color-neutral-700: #5b6261;
--color-neutral-800: #474d4c;
--color-neutral-900: #333837;
--color-neutral-950: #222525;
/* ─── Colors: Semantic ─── */
--color-success: #4ace97;
--color-success-light: #202d27;
--color-warning: #dabb3e;
--color-warning-light: #2e2b1e;
--color-error: #ce4a65;
--color-error-light: #2d2022;
--color-info: #4a8cce;
--color-info-light: #20262d;
/* ─── Colors: Surface ─── */
--color-background: #0e1110;
--color-foreground: #e4e7e6;
--color-card: #1a1e1d;
--color-card-foreground: #e4e7e6;
--color-muted: #242827;
--color-muted-foreground: #909897;
--color-border: #2c302f;
--color-input: #222525;
--color-ring: #47d1c3;
/* ─── Typography ─── */
--font-heading: Chakra Petch, sans-serif;
--font-body: IBM Plex Sans, sans-serif;
--font-mono: JetBrains Mono, monospace;
/* ─── Spacing ─── */
--space-lg: 24px;
--space-md: 16px;
--space-sm: 8px;
--space-xl: 32px;
--space-xs: 4px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
/* ─── Border Radius ─── */
--radius-lg: 10px;
--radius-md: 5px;
--radius-sm: 2px;
--radius-xl: 16px;
--radius-full: 9999px;
--radius-none: 0px;
/* ─── Shadows ─── */
--shadow-low: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(70, 211, 197, 0.1);
--shadow-mid: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(70, 211, 197, 0.15);
--shadow-high: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(70, 211, 197, 0.2);
--shadow-glow: 0 0 40px rgba(70, 211, 197, 0.3), 0 0 80px rgba(70, 211, 197, 0.15);
/* ─── Motion ─── */
--duration-micro: 100ms;
--duration-fast: 200ms;
--duration-normal: 400ms;
--duration-slow: 600ms;
--duration-glacial: 800ms;
--easing-default: cubic-bezier(0.65, 0, 0.35, 1);
--easing-entrance: cubic-bezier(0.33, 0, 0, 1);
--easing-exit: cubic-bezier(0.67, 0, 1, 0.67);
--easing-bounce: cubic-bezier(0.22, 1.6, 0.36, 1);
--easing-spring: cubic-bezier(0.16, 1.3, 0.3, 1);
/* ─── Elevation ─── */
--elevation-sunken: #050605;
--elevation-base: #0c0e0e;
--elevation-raised: #1c2121;
--elevation-floating: #2a3231;
--elevation-overlay: #3d4847;
/* ─── Component Scale (balanced) ─── */
--comp-padding-x: 16px;
--comp-padding-y: 10px;
--comp-gap: 10px;
--comp-border-width: 1px;
--comp-font-size: 14px;
--comp-input-height: 40px;
--comp-button-height: 40px;
--comp-icon-size: 16px;
/* ─── Grid (compact) ─── */
--grid-columns: 12;
--grid-gutter: 16px;
--grid-margin: 24px;
--grid-max-width: 1280px;
/* ─── Selection ─── */
--selection-bg: #2f6560;
--selection-fg: #eaf0f0;
}Brand Guidelines
Standalone HTML, print to PDF. Colours, typography, spacing, all in one page.
Presentation Deck
PPTX template with palette, typography, and blank slides in your brand.
Figma Tokens
JSON for Tokens Studio plugin. Import colours, type, spacing straight into Figma.
PDF Brand Guide
Full brand guidelines as a real PDF file. Colours and typography rendered exactly.
AI Skill
System prompt you can paste into Cursor or any AI tool to generate on-brand UI instantly.