AI helps us explore possibilities and develop new ideas. Research and experimentation turn them into tangible results.
A shared visual language for Insilico websites: expressive science, clear interfaces and a consistent identity.
Brand & logo
Give the original mark room to breathe. At small sizes, the product name carries identification while the symbol retains its character.
Clear space · at least ¼ of the symbol width
Insilico
Desktop header · 40 px symbol · 12 px gap
Insilico
Compact header · 32 px symbol · 8 px gap
Preserve the original.
Keep the supplied geometry and colors. 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.
Proposed application sizes for this design system. Simplified and monochrome variants require approved brand artwork.
Color & character
The neutral foundation stays shared. Choose a product to see its accents across the entire specimen.
Original palette + proposed theme-specific UI accents
Brand primary identifies the product. Accent on dark and Accent on light describe the background they are used on. Light filled is the button background; it can differ from the color of links and outlines.
The neutral foundation
Click a swatch to copy its value. Text contrast: at least 4.5:1. Large text and essential control boundaries: at least 3:1.
SuccessWarningErrorInformation
Light and dark share the same geometry. Colors and artwork are adapted deliberately; neither theme is an inverted version of the other.
Softness follows scale.
A small surface needs a quiet curve. A larger image can carry a more generous radius. Keep the steps on the 8 px rhythm.
8 pxCompact icon containers16 pxFields & small surfaces24 pxPanels & editorial images32 pxLarge image features
On compact screens: 16 px panels and editorial images, 24 px large features. Free-standing mesh forms retain their complete silhouette. Buttons keep their shared pill shape.
Typography
Manrope gives headings their character. Inter keeps reading and interaction effortless. Both families are served locally; visitors do not need to install them.
If Manrope cannot load, headings use Inter. If neither web font is available, headings and body text use Arial, then the system sans-serif. Text remains visible while the fonts load.
Aa Bb
Manrope 500
Headings · −0.025em / −0.02em
Aa Bb
Inter 400 / 500
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.
Sentence case throughout — headings, labels, buttons and navigation. No text-transform: uppercase. No full stop at the end of a heading, title or button label. Generated copy uses American English.
Grid & rhythm
The grid connects edges. The rhythm gives ideas room. Switch the guides, rearrange the composition and inspect how every element finds its place.
Space gives ideas structure.
24 px
Shared edges connect the headline, explanation and action. Space sets their pace.
Choose an element to see its anchors. Hide the guides: the alignment and spacing remain.
Desktop 12 columns · 24 gap · 48 marginsTablet 12 columns · 24 gap · 32 marginsMobile 4 columns · 16 gap · 24 margins*
Conceptual protein fold: the complete form shares the grid with the headline and action. 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 spacing scale
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.
Interface elements
Shared geometry, different levels of emphasis. Hover, press Tab, or try the elements to inspect their behavior.
Buttons
Variants · 48 px
Sizes
States
999 px radius · 16 / 24 / 32 px horizontal padding · 8 px icon gap · 16 px between actions · Filled buttons darken on hover and press in every profile and theme. Focus smoothly thickens the control’s own edge from 1 to 3 px. No separate outer ring.
Inputs & selection
Collect information with a clear label, a predictable control and useful feedback.
Navigation & disclosure
Move between views, reveal details and adjust a setting without losing context.
Open composition, shared edges and varied density. Content determines the shape of the page.
Color identifies links. A soft underline appears on hover; a small ↗ marks links to another website only.
One outline family across the whole site: stroke weight is size ÷ 12 (16 px → 1.33, 20 px → 1.67, 24 px → 2, 48 px → 4), rounded caps and joins. Every icon — interface glyph, domain symbol or animated variant — comes from the Insilico icon library. Never generate, hand-draw or import from a generic set (no Font Awesome, Material Icons, Heroicons, Feather or similar).
The Insilico icon library
The single source for every icon on the site, including animated variants. The library is an MCP server the agent searches and fetches from at build time; the finished page embeds the chosen files directly — visitors never need an account or a key.
Static and animated sets are separate
Not every static icon has an animated counterpart. Match by name and tags, then confirm the shape reads the same in both states. If there is no matching animation, keep the static icon — motion is never a reason to compromise meaning or family coherence.
Connect before building
Check the library is reachable at the start of the work, not when the first icon is needed. In Claude Code, add the server once: claude mcp add --transport http insilico-icons https://mcp.iconly.pro/mcp. If it is not yet connected, offer setup — never substitute a hand-drawn or generated glyph while waiting.
Animated-icon behavior
Motion on an icon is an interaction cue, not decoration. Every animated icon follows this contract.
RuleRequirement
TriggerPointer enters the whole owning block — button, card or row — not only the glyph. Plays once; returns to resting state when the animation completes. Re-entering during playback is ignored — the current play runs to completion.
Keyboard & touchPlay on focus, rest on blur — same as pointer. On touch, guard with (hover: hover) so a tap never triggers hover-bound animation.
Real state onlyA success check plays only after the operation succeeds. A loading indicator runs only while work is pending. Hovering must never imply an action has already happened.
No decorative motionNothing animates continuously without interaction. Keep element dimensions, label positions and hit targets fixed while the icon animates. Pause offscreen and in hidden tabs.
Reduced motion & failureUnder prefers-reduced-motion: reduce, show the static resting state only. If the animation fails to load, the static icon and the control's meaning remain — the action never depends on motion.
Accessible namesAn icon-only control still carries a concise accessible name. The animation is decorative (aria-hidden) and never the only signal.
Fetch each icon through the library and embed locally — search results are signed, expiring URLs; never hot-link them from the page.
Loading & interaction
Image loading on our websites, focused interface effects and loaders for heavy content. Three behaviors, each with a distinct role.
Image loading
Loading the interactive demonstration…
Focused attention
Progress & activity
Tooltips
Short, useful hints follow the page theme.
Hover, focus or tap. Escape dismisses the hint.
Frosted navigation
The live specimen is fixed above. Scroll imagery behind it to see the blur; lettering stays fully opaque in either theme.
No decorative outline. A near-opaque background is the fallback when backdrop blur is unavailable. Anchor positions account for the fixed header.
Images & graphics.
One language. Different ways to see.
Express a possibility, reveal a relationship or bring real work into view. Choose the image for what it helps the reader understand.
Express an idea
A computational form gaining substance gives discovery a visual language. Choose a subject whose transformation carries the story.
Explain a relationship
Cutaways, diagrams and illustrations make structure readable. Connect each annotation to the detail it explains.
Document the real
Use genuine photography for people, events and laboratories. Keep natural skin, recognizable surroundings and accurate captions.
Computational atlas
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
Selected concept · Dark field
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.
Protein fold
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.
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.
Artistic interpretations inspired by molecular references. Generated geometry is not validated for scientific analysis.
See the transition in motion
The transition is the signature.
From computational possibility to physical reality. AI helps us explore and shape ideas; research and experimentation test, refine and realize them.
Our imagery gives that journey a visible form. Sparse lines become a denser mesh; the mesh gains depth and gradually becomes a material surface. A continuous transition connects exploration with creation, while a subtle shade of Insilico green carries our identity.
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.
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.
A process, in focus.
Make the action visible.
A pipette tip holds a droplet above a well. Along the plate’s edge, fine construction lines gather into a transparent body. The material reveals the geometry; the action gives it a purpose.
Conceptual process imagery · laboratory narratives
Process concept · Dark field
An artistic study of a laboratory action, not a photograph of Insilico equipment or a validated protocol.
Inside the object
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.
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.
Explore scale and structure
Biological atlas
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
Two lighting treatments · Dark field
Keep the overview and enlargement visually connected. This is a conceptual illustration, not microscopy or an experimental result.
Imagined possibilities, clearly separated from today’s people, laboratories and products.
Speculative instrument
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.
Glass belongs to the body through continuous contours and fitted edges. This is a fictional humanoid and laboratory, not an existing Insilico deployment.
Choose a subject for the story. Conceptual artwork expresses an idea; explanatory graphics reveal relationships; documentary photography records real people and places. These examples offer directions, not a required set of images.
Same purpose. Different screens.
Follow the same content from a wide canvas to a focused reading flow. Explore three working examples and see what changes at each size.
Desktop · 1440 × 900
Scroll inside the preview to explore the page. The preview scales to fit the available space. All three examples contain demonstration content.
Composition, not a template
Let the relationship between ideas shape the page. Explore a statement, an explanation, a process and a set of independent destinations.
Insilico Medicine · Suzhou robotics laboratory · Media kit ↗
Curiosity, in context.
An attentive gesture, framed by the equipment and light of a working laboratory. The photograph brings a human point of view into the story.
A real photograph can lead a statement. Keep the person and their surroundings visible; group the headline and supporting copy beside the image. Either side can lead the composition. On a phone, keep the text together and show the complete photograph below. Preserve the scene’s own light and color.
See how the parts belong together.
A cutaway brings the structure into view. The explanation points to visible materials and their relationships.
Mesh · left
Open contours reveal the outer shape before a continuous surface appears.
Glass · center
Curved, translucent elements make the internal layers and the spaces between them visible.
Housing · outer edge
The quieter ivory shell frames the glass and helps the reader distinguish the enclosure from the interior.
Conceptual optical study. An artistic interpretation, not an engineering drawing.
Choose an object, diagram or genuine interface when its details explain the subject. Keep annotations tied to visible features. Preserve the complete object on mobile and place its explanation immediately after it.
A concept, taking shape.
The same channel geometry carries through the study. Each design decision gives the next stage its starting point.
A visual study of progression, not a manufactured or tested device.
Trace the path
Set out the channel path and its openings as a connected outline.
Hand overOne continuous path to develop.
Refine the structure
Build a finer mesh around that path, preserving the channel and its connections.
Hand overA coherent geometry for the material study.
Give it material
Explore a transparent body around the same geometry, keeping the interior visible.
ResultA rendered concept ready for discussion.
Number a real sequence, with an explicit handover between steps. Desktop reads left to right; tablet pairs each step with its output; phone reads top to bottom. Numbering indicates order, not completed progress.
Three ways into the work.
People, place and detail offer different perspectives. Explore any one first; these are independent stories, not stages of a process.
People
An attentive moment in the laboratory puts the person inside the work.
Place
A view through the laboratory reveals depth, light and the setting for the work.
Detail
A close view of tools draws attention to a different scale of the same environment.
Group independent stories by purpose, with equal heading levels. Add an action only when there is a useful next step. Do not add step numbers or connecting arrows. Stacking them on mobile changes the layout, not their relationship.
Images, video, diagrams and typography can all lead a composition. Choose the medium for the task; these examples do not prescribe a subject, page structure or amount of imagery. Compare full pages across screen sizes.
Start with the task.
The visitor’s goal, your brief and the available content shape the page. The catalog is open: every pattern is an option, and new solutions are welcome.
“I need this document.”
One file. One clear destination.
Use a simple link.
A title, useful context and a direct download can be enough. A tour or a filter would add work without helping this visitor.
Title & context
Open or download
“Let me explore the speakers.”
People first. Details when they help.
Adapt a profile collection.
Keep each person and their details together. Add a topic filter only if the size and content of the collection justify it.
People
Relevant details
Next step
“Help me build a reading list.”
A new task can need a new interaction.
Create what the task needs.
If no example fits, design a suitable interaction. Topic selection and a reviewable list could serve this request; the nearest catalog entry need not.
Choose topics
Review selection
Save list
Shared foundations. Open possibilities.
Adapt, combine or create patterns while keeping the typography, spacing, controls, accessibility and responsive behavior consistent.
Choose the simplest sufficient solution. Never force a task into an example or invent content to fill one. These demonstrations show quality and behavior; they do not limit what can be built.
Headline lines · 900 ms · 110 ms stagger · masked rise.
RoleDurationBehavior
Control feedback150 msColor and state response
Menu / disclosure240 msShort, interruptible reveal
Headline lines900 ms / lineLine-height + .4em rise through each line’s mask · 110 ms stagger
Supporting text650 ms24 px rise (16 px on mobile) · starts at 180 ms
Other image entrances1100 msScale 1.09 → 1 · 16% top crop opens (10% on mobile)
Section sequence1320 msHeadline 0 ms · detail 180 ms · action 300 ms · image 220 ms
Theme change240 msSurface color and image fade-in
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.
