Precise interfaces. Expressive science. An optimistic view of what comes next.
The Pharma.ai style, made tangible. A shared visual language for websites across our products.
Explore the system
The neutral foundation stays shared. Choose a product to see its accents across the entire specimen.
Click a swatch to copy its value. Text contrast: at least 4.5:1. Large text and essential control boundaries: at least 3:1.
Light and dark share the same geometry. Colours and artwork are adapted deliberately; neither theme is an inverted version of the other.
Give the original mark room to breathe. At small sizes, the product name carries identification while the symbol retains its character.
Pharma.aiDesktop header · 40 px symbol · 12 px gap
Pharma.aiCompact header · 32 px symbol · 8 px gap
Keep the supplied geometry and colours. Place the lockup on a quiet, contrasting field, clear of artwork and controls.
For this specimen, 32 px is the minimum symbol size alongside the name. If space is tighter, use the product name as text. Detailed standalone uses need a larger treatment.
Download the original markProposed application sizes for this design system. Simplified and monochrome variants require approved brand artwork.
A small surface needs a quiet curve. A larger image can carry a more generous radius. Keep the steps on the 8 px rhythm.
On compact screens: 16 px panels, 24 px editorial images, 32 px large features. Free-standing mesh forms retain their complete silhouette. Buttons keep their shared pill shape.
Manrope gives headings their character. Inter keeps reading and interaction effortless. Both families are served locally.
Headings · −0.025em / −0.02em
Text and interface · normal tracking
These specimens are editable. Click the text and try your own heading. Measurements reflect the current viewport.
IBM Plex Mono is optional for actual code and identifiers. Everyday labels stay in Inter. Aim for 45–68 characters per line of body copy.
The grid connects edges. The rhythm gives ideas room. Switch the guides, rearrange the composition and inspect how every element finds its place.
Shared edges connect the headline, explanation and action. Space sets their pace.
Explore patterns
Choose an element to see its anchors. Hide the guides: the alignment and spacing remain.
Maximum content width: 1440 px. *Below 360 px, use 16 px outer margins. The specimen’s text baselines are measured after fonts load and aligned to the blue 8 px guides. Page columns extends only the vertical guides. The 8 px baseline demonstration stays in this composition.
The same unit connects line heights, gaps and control sizes. Every spacing option above is a multiple of 8 px. Optical alignment still needs a visual check.
Shared geometry, different levels of emphasis. Hover, press Tab, or try the elements to inspect their behaviour.
999 px radius · 16 / 24 / 32 px horizontal padding · 8 px icon gap · 16 px between actions · Focus smoothly thickens the control’s own edge from 1 to 3 px. No separate outer ring.
Open composition, shared edges and varied density. Content determines the shape of the page.
Keyboard access, visible focus and predictable responses. Tab moves focus; arrow keys switch tabs.
Proximity and the grid group ordinary content. Containment serves an interaction: a menu, a form or a dialog.
Twelve columns become four. Copy and imagery recompose in reading order, rather than shrinking as one canvas.
Switch: 40 × 24 · thumb: 20. The hit area is at least 44 px.
Colour identifies links. A soft underline appears on hover; a small ↗ marks links to another website only.
One consistent family: 20–24 px, 1.5 px stroke, rounded ends. Icons identify meaning; they do not fill empty space.
Image loading on our websites, focused interface effects and loaders for heavy content. Three libraries, each with a distinct role.
Loading the interactive demonstration…
Short, useful hints follow the page theme.
Hover, focus or tap. Escape dismisses the hint.
Computation takes material form.
A fine mesh describes a possibility. Its contours gain depth, catch the light and gradually become a tangible surface. This passage from a digital model to a material presence is the defining gesture of our imagery.
Conceptual artwork inspired by science.
A computational form gaining substance gives discovery a visual language. Choose a subject whose transformation carries the story.
Cutaways, diagrams and illustrations make structure readable. Connect each annotation to the detail it explains.
Use genuine photography for people, events and laboratories. Keep natural skin, recognisable surroundings and accurate captions.
Give an idea material presence.
Sparse contours describe the outer fold. Toward the centre, the mesh becomes finer and denser, then gradually gains a satin-glass surface. An open pocket and translucent ribbons carry the structure through the change.
Product openings · discovery stories · campaign imagery
Keep a coherent silhouette, readable depth and room around the form. A protein-inspired concept, not a validated molecular model.
Watch a possibility become tangible.
Fine mesh forms suggest possibilities under exploration. Along the main form, open lines gradually gather into a translucent surface. The same contours carry through the transition: computation acquires a material presence.
AI methods · exploration · platform narratives
Let the mesh and surface share one continuous form. A broad, gradual transition carries the idea of discovery; the paths are a visual metaphor for exploration.
A possibility takes substance.
The fold begins as a delicate network of contours. Across its surface, the open mesh gradually fills with milky glass. Interior depth and soft reflections give the computational form a sense of substance.
Ubiquitin-inspired · molecular storytelling
One structure, becoming tangible.
Follow the helix from open mesh to translucent strands. Its structure continues through the change as fine lines gradually acquire volume and catch the light. The diagonal lets the eye follow this passage into material form.
B-DNA-inspired · discovery narratives
Artistic interpretations informed by molecular references. Generated geometry is not atom-accurate or validated for scientific analysis.
Move between scales.
An opened cellular form and a close detail share a delicate illustrative language. Pale mint holds the composition together; blue and lilac separate the internal features.
Editorial explainers · research introductions · educational stories
Keep the overview and enlargement visually connected. This is a conceptual illustration, not microscopy or an experimental result.
From contours to optical depth.
An open lens assembly brings its inner structure into view. Sparse contours gather into a finer mesh, then resolve into curved glass elements and an ivory housing. The section lets the eye follow the layers and the spaces between them.
Product anatomy · optical studies · explanatory layouts
Use material to explain the object: glass for the lenses, a quieter solid finish for the housing. This conceptual illustration is not an engineering drawing or an exact optical prescription.
A future with physical presence.
A softly translucent enclosure meets precise supports, fasteners and a clear viewing window. Daylight and a grounded shadow make the imagined object feel built.
Future vision · innovation stories · concept presentations
Material transitions need thickness, joints and a reason to exist. Present the device as a design concept.
One geometry. Growing presence.
A channel layout begins as a sparse computational mesh. The mesh refines and gradually acquires a transparent body, keeping the same path legible from model to material.
Design process · prototyping stories · computational craft
Transparency reveals the channel; the material serves the subject. This generated concept does not document a manufactured or tested device.
Make the future feel human.
Natural skin and warm ivory polymer meet inset matte-glass parts. Precise laboratory objects and soft daylight keep the materials clear and evenly lit.
Speculative automation · future-of-work stories · brand vision
Glass belongs to the body through continuous contours and fitted edges. This is a fictional humanoid and laboratory, not an existing Insilico deployment.
Find the extraordinary in the work.
An attentive gesture. A corridor that draws the eye. A detail held in focus. Insilico’s own photographs bring the visual language into the world: through light, depth and a deliberate point of view.
Insilico Medicine · Suzhou robotics laboratory
Alex Zhavoronkov observing the robotic laboratory through glass. The attentive gesture and foreground equipment put the person inside the work.
A long view through the Suzhou laboratory. Glass, reflected light and a clear vanishing point give the space depth.
Pipette tips and transparent plates, seen close up. A precise point of focus lets the surrounding reflections fall away.
Choose a point of view, not just a subject. Preserve the light of the place; balance a human moment, spatial depth and a close detail. Open any photograph to see its complete original frame.
The mesh describes a form; the glass gives it presence. Between them, a wide, continuous transition lets the eye follow the emergence of surface and depth. Menthol, ice blue and a trace of blush reveal the material as it takes shape.
Carry this idea into new subjects and silhouettes. Use it where computation becoming tangible serves the story; photographs, diagrams and illustrations retain their own roles in the wider visual language.
Get the imagery guidanceThese studies express two moments in one visual idea: a structure taking shape in computation, and the material presence it gradually acquires.
A single form gains definition: sparse contours become fine mesh, then a translucent material surface.
The passage into material: fine mesh follows the same contours as the glass it gradually becomes.
The conceptual images demonstrate visual direction, not real proteins, microscopy, equipment or deployed robots. The protein and DNA studies use molecular references as inspiration; their generated geometry is illustrative. The humanoid carries the supplied Insilico mark in a sage finish. This is an open collection: adapt these treatments or create another when the task calls for it.
The same visual language can tell different stories. These are layout diagrams, not mandatory website sections.
Title in columns 1–7. Detail in 9–12.
Imagery across 7–8 columns, annotations nearby.
Inside the structureA section reveals the interior. Nearby copy directs attention to the lenses and housing.Shared edges, aligned rows and clear hierarchy.
Three independent demonstration pages explore how the specification adapts to a different visitor task.
A proposition, a workflow and an interactive comparison.
A programme, clear practical details and event information.
An editorial column, explanatory figure and comparison table.
The visitor’s goal, your brief and the available content shape the page. The catalogue is open: every pattern is an option, and new solutions are welcome.
One file. One clear destination.
A title, useful context and a direct download can be enough. A tour or a filter would add work without helping this visitor.
People first. Details when they help.
Keep each person and their details together. Add a topic filter only if the size and content of the collection justify it.
A new task can need a new interaction.
If no example fits, design a suitable interaction. Topic selection and a reviewable list could serve this request; the nearest catalogue entry need not.
Adapt, combine or create patterns while keeping the typography, spacing, controls, accessibility and responsive behaviour consistent.
Choose the simplest sufficient solution. Never force a task into an example or invent content to fill one. These demonstrations show quality and behaviour; they do not limit what can be built.
Get the complete guidanceHeadlines rise into view, one line at a time. Supporting text follows; the image settles into view. Replay the sequence to see how each part enters.
Headline lines · 900 ms · 110 ms stagger · masked rise.
Entrance easing: cubic-bezier(0.22,1,0.36,1). Headlines use the actual line breaks at each screen width; each line has its own mask. Entrances play once as content reaches the lower 92% viewport line. Reduced motion shows everything immediately. Scrolling and controls remain available throughout.