# Insilico Design

Version 1.4.15 · 10 September 2026 · Portable website style specification

A shared visual language for websites across Insilico products. This is a working design proposal, not a formally released corporate component library.

## How to use this document

Apply the language to the site the employee describes. Their request supplies purpose, audience and content; this document supplies visual direction and interaction defaults. It is usable without our conversation, a preview page or an installed skill. Optional image references are examples; no external project file is required to understand the rules.

| Level | Meaning | Examples |
| --- | --- | --- |
| **Required** | Preserve unless the user explicitly changes the brief | Supplied brand palette/logo geometry, semantic roles, accessible controls, truthful content, responsive reading order |
| **Default** | Use unless the content or context provides a concrete reason to adapt | Type sizes, spacing, component dimensions, motion timing, recommended layout relationships |
| **Example** | Illustrates one possible outcome; never mandates that subject, section or library | Named compositions, reference images, preview controls and optional effects |

Tables of numerical UI values are defaults for consistent implementation. Keep each role consistent within a site; a deliberate local exception must have a clear hierarchy or content reason. Identity and accessibility requirements still apply. Do not copy the preview’s section order, imagery subjects, edition notes or demonstration controls into an unrelated site.

Start with the visitor’s task, choose the relevant product profile, select a suitable content structure, then apply the foundations. Use only necessary interactions. Missing facts remain missing; never invent content to fill a visual pattern.

### Use the website as a reference

The [Insilico visual-language website](https://pharma-ai-design.pages.dev/style-preview/) is an optional visual and interactive companion to this document. Consult the relevant examples to understand the intended character, scale and behaviour. You do not need to inspect the entire demonstration site before starting a task.

| What to clarify | Reference | What to observe |
| --- | --- | --- |
| Colour and theme relationships | [Colour & character](https://pharma-ai-design.pages.dev/style-preview/#colour) | Neutral fields, product accents and light/dark balance |
| Typography and spatial hierarchy | [Typography](https://pharma-ai-design.pages.dev/style-preview/#type) · [Grid](https://pharma-ai-design.pages.dev/style-preview/#grid) | Relative type scale, reading order, spacing and the relationship between copy and imagery |
| Controls and navigation | [Elements](https://pharma-ai-design.pages.dev/style-preview/#elements) · [Navigation](https://pharma-ai-design.pages.dev/style-preview/#navigation) | Interactive states, focus feedback and grouping |
| Mesh becoming material | [Imagery](https://pharma-ai-design.pages.dev/style-preview/#imagery) | Sparse contours becoming a denser mesh, then a continuous material surface; restrained mesh brightness and broad transitions |
| Composition across different tasks | [Composition](https://pharma-ai-design.pages.dev/style-preview/#composition) · [Patterns](https://pharma-ai-design.pages.dev/style-preview/#patterns) | Image scale, deliberate overlap, readable text and content-driven arrangements |
| Motion and loading behaviour | [Motion](https://pharma-ai-design.pages.dev/style-preview/#motion) · [Loading & feedback](https://pharma-ai-design.pages.dev/style-preview/#loading) | Entrance timing, sequence, Replay, settled states and reduced-motion alternatives |

The user's brief remains authoritative. Within that brief, take requirements and defaults from this MD; use the website to clarify visual character, not to silently replace written rules. The live site may evolve independently of a downloaded document. If they conflict, follow this document for the current task unless the user explicitly selects the newer treatment, and note any material discrepancy in the handoff.

Examples demonstrate choices, not a page template. Adapt the composition to the new content; do not copy the entire site's section order, specific subjects or demonstration controls. The image loader is a dedicated optional example, not a required entrance for every image.

If browser tools are available, inspect the relevant section at desktop and mobile widths; compare both themes when the requested site supports them. For motion, play the example and observe its start, transition and settled state. Reading HTML or viewing a still screenshot alone does not establish how an animation behaves.

If the website or browser tools are unavailable, continue from this MD and the supplied materials. Use the artwork fallback in section 7 where needed. Do not make reference access a prerequisite or claim to have inspected visuals or motion that you could not observe.

## 1. The visual idea

A shared visual language for websites across our products.

Precise interfaces. Expressive science. An optimistic view of what comes next.

The interface is quiet and legible; the imagery is tactile, luminous and memorable. Near-black space with warm white lettering, or a cool ivory field with deep ink lettering, combines with restrained product colour and delicate organic forms. Both themes belong to the same Insilico family.

Use confident typography, open compositions and carefully placed detail. Scientific character comes from the subject and its explanation, not a costume of terminal labels, neon effects or decorative formulas. Headlines speak directly in sentence case. Copy is specific, concise and human.

Different sites share this language, not one page template. A platform can demonstrate a workflow; an event can foreground people and a programme; a research story can reveal an idea through diagrams and images.

## 2. Colour

### Shared theme foundations

| Role | Dark theme | Light theme | Application |
| --- | --- | --- | --- |
| Page | #08090B | #F7F8F5 | Main canvas |
| Raised surface | #111318 | #FFFFFF | Menus, forms, dialogs |
| Surface hover | #1B1E24 | #ECEFE9 | Interactive surface feedback |
| Primary text | #F3F2EF | #171C18 | Headings, emphasis, labels |
| Secondary text | #B9BDC6 | #4A554D | Body copy and supporting information |
| Muted text | #939AA7 | #626F65 | Captions and metadata |
| Functional border | #626875 | #7A877D | Input boundaries and neutral outlined controls |
| Quiet divider | rgba(243,242,239,0.14) | rgba(23,28,24,0.16) | Purposeful separators |
| Text on filled accent | #08090B | #08090B for Insilico; #FFFFFF for other profiles | Labels on the filled action colour |

Large surfaces stay neutral. Hierarchy comes from text, spacing and imagery rather than alternating bands of grey. Quiet dividers are separators, not control boundaries.

### Product profiles

Primary, light and dark values are the supplied brand palette. The proposed UI accents provide comfortable contrast in each theme without changing original logo colours. Insilico uses saturated brand green #00A607 for its dark-theme accent and filled buttons in both themes; labels on these green buttons are #08090B. Light-theme green text and thin outlines use #007A05 for contrast. Do not desaturate the Insilico green toward sage. Other product profiles retain their own theme accents.

| Profile | Brand primary | Light tint | Dark shade | Dark UI accent | Light UI accent |
| --- | --- | --- | --- | --- | --- |
| Insilico umbrella | #00A607 | #D7EED4 | #005303 | #00A607 | #007A05 |
| PandaOmics | #01CB83 | #C2FFE9 | #006642 | #64C8A2 | #007B57 |
| Biology42 | #82AC3D | #E7F0D6 | #616A20 | #A5BA79 | #586F2A |
| Chemistry42 | #0E8CFF | #CFE8FF | #004686 | #69ADF3 | #086BC1 |
| Medicine42 | #583BA8 | #DCD5F0 | #2C1D54 | #A792CF | #583BA8 |
| Science42 | #21965F | #C4E9D5 | #14653E | #69AA8B | #167147 |

A general Insilico site uses the umbrella profile. A product site uses its own profile. On a multi-product page, shared navigation remains in the umbrella profile and product accents appear locally.

In dark mode, use the dark UI accent for primary actions and selected states, the light tint for accent text and focus, and the dark shade for subtle secondary colour. In light mode, use the light UI accent for actions, links, outlined controls and focus; use the original light tint as a quiet wash. Artwork retains its pastel material palette rather than being tinted uniformly green or blue.

Feedback colours, dark / light: success #8AD5A1 / #216B3C, warning #E7C983 / #805B09, error #F2A5AC / #AC3444, information #9CC6F5 / #246396. Pair colour with a label or symbol. Ordinary text has at least 4.5:1 contrast; large text and essential control boundaries have at least 3:1. Artwork behind text needs its own quiet region or local scrim.

### Theme switching

Both themes use identical typography, grids, spacing, control geometry and content. The theme switch has a readable label and exposes the destination (Light or Dark). Persist the visitor's explicit choice locally when available. Start in the theme requested for the site; otherwise respect the visitor’s system preference when available. Apply stored preference before first paint. Switching themes does not reset the product profile, scroll position or form input.

Transition surface/background colours over 240 ms. Load and decode the destination artwork before changing the theme; reserve its dimensions and use a 240 ms fade-in after replacement. Keep the current theme if a required asset fails to load. Reduced motion uses an immediate asset replacement. Use theme-specific assets, never a CSS inversion filter on artwork.

## 3. Typography

Use two complementary families consistently:

— Manrope: display, page and section headings; weight 500.
— Inter: body text, navigation, controls and captions; weight 400, with 500 for labels and emphasis.
— Optional IBM Plex Mono: actual code, identifiers or scientific data that needs fixed-width alignment. Ordinary labels remain Inter.

Load the real font files, including the language coverage used by the page. The family name in CSS alone does not supply the font. Use the project's font-loading method; self-host where practical and retain the font licence. Official open-source sources: [Manrope](https://github.com/google/fonts/tree/main/ofl/manrope), [Inter](https://github.com/rsms/inter), [IBM Plex](https://github.com/IBM/plex).

Visitors do not need to install Manrope: the site serves the licensed font files through `@font-face` with `font-display: swap`. Use `Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif` for headings and `Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif` for body/UI. If Manrope is still loading or fails, Inter is used when available; otherwise the operating system’s sans-serif font, then Arial or the browser’s generic sans-serif. The fallback keeps the page usable but is not an exact visual replacement. Check wrapping and controls with font requests blocked as well as with fonts loaded.

The size ladder follows a rounded 1.25 ratio: 13, 16, 20, 25, 31, 39, 49, 61, 76 px. Line heights follow the 8 px rhythm. Values below are font-size / line-height in CSS pixels.

| Role | Desktop ≥1024 px | Tablet 720–1023 px | Mobile <720 px |
| --- | --- | --- | --- |
| Hero display | 76 / 88 | 61 / 72 | 39 / 48 |
| Page title / expressive section title | 49 / 56 | 39 / 48 | 31 / 40 |
| Informational section title | 39 / 48 | 31 / 40 | 25 / 32 |
| Group title | 25 / 32 | 25 / 32 | 20 / 24 |
| Lead paragraph | 20 / 32 | 20 / 32 | 20 / 32 |
| Body, navigation, controls | 16 / 24 | 16 / 24 | 16 / 24 |
| Caption / metadata | 13 / 16 | 13 / 16 | 13 / 16 |

Choose a heading role by importance, not because every section needs a large statement. A short mobile hero can use 49 / 56 when it fits comfortably. Fluid interpolation between listed breakpoint values is welcome.

Display tracking: −0.025em; section headings: −0.02em; body and UI: normal. Let short headings and introductory sentences wrap naturally to the available width. Do not hard-code a break between every sentence or word; add a deliberate break only when it strengthens the meaning at that viewport. Measure the resulting lines for animation. Keep paragraphs around 45–68 characters per line. Left-align explanatory text; a centred short statement can be an intentional pause. Four or five text roles in one viewport are usually enough.

## 4. Grid, space and alignment

### Page grid

| Viewport | Columns | Outer gutter, each side | Column gap | Maximum content width |
| --- | --- | --- | --- | --- |
| ≥1024 px | 12 | 48 px | 24 px | 1440 px |
| 720–1023 px | 12 | 32 px | 24 px | Available width |
| 360–719 px | 4 | 24 px | 16 px | Available width |
| <360 px | 4 | 16 px | 16 px | Available width |

The content shell is centred: width = the smaller of 1440 px and viewport minus both gutters. Header, main sections and footer share this shell and the same column-gap token. Align the outer edges of content groups to column tracks; controls inside a group retain their intrinsic widths, padding and 8/16 px internal spacing. Use the same 24 px desktop or 16 px mobile column gap for half-width and third-width groups so their shared boundaries stay on the page grid. Keep vertical spacing independent. Do not stretch a small set of metadata or controls across the entire page with space-between. Media may deliberately bleed only when the composition explicitly calls for it.

### Spacing scale

8, 16, 24, 32, 40, 48, 64, 80, 96, 128 px. A 4 px half-step is for fine control details only.

| Relationship | Desktop | Mobile |
| --- | --- | --- |
| Label to control / icon to label | 8 px | 8 px |
| Caption to image | 16 px | 16 px |
| Heading to supporting copy | 24 px | 16 px |
| Paragraph to paragraph | 16 px | 16 px |
| Copy to action group | 32 px | 24 px |
| Related content groups | 32–48 px | 24–32 px |
| Typical section vertical padding | 64 px per edge | 40 px per edge |
| Major opening / closing moment | 96 px per edge | 64 px per edge |
| Menu, form or dialog inner padding | 32 px | 24 px |

Adjacent section padding adds together: two typical sections create a 128 px desktop separation. Use a single shared gap when their content forms one continuous story. Let content determine height; whitespace groups information rather than filling a preset screen. Broad editorial frames can be roughly half negative space, while programme rows, forms and data comparisons are intentionally denser. Section introductions keep their title and explanation together: normally stack with 16–24 px separation, rather than pushing a short explanation to the opposite edge. Specification values form a compact group of adjacent columns. Leave 16 px between a control row and its explanatory note.

### Vertical rhythm and optical alignment

Body baselines repeat every 24 px; other text roles use line heights divisible by 8. Align related text on a shared 8 px baseline grid where the composition calls for it. Use loaded-font metrics or an inline baseline probe to establish the first baseline, then apply a small optical offset to the text only. Keep buttons, images and painted surfaces stable, and retain line heights divisible by 8 so following baselines stay aligned.

For side-by-side text and imagery, align the top of the image with the first line's lowercase x-height, or the bottom of the image with the last text baseline, excluding descenders. These are optical alignments, not the top and bottom of a CSS line box. Small metric-based corrections are appropriate; legibility and unclipped glyphs take priority. On mobile, stack in reading order with the standard spacing.

Layout guides are development aids, hidden on visitor-facing sites. They must not change layout or intercept input. Do not ship teaching controls unless the requested site itself teaches layout.

### Corner radius: softness follows scale

Use an 8 px radius rhythm. Select a radius by the displayed size and role of the surface, not by the pixel resolution of the source image.

| Surface | Wide-screen default | Compact screen, below 720 px |
|---|---:|---:|
| Fields and small surfaces | 16 px | 16 px |
| Colour swatches and panels | 24 px | 16 px |
| Editorial image frames | 40 px | 24 px |
| Large full-width image features | 64 px | 32 px |

Apply the radius to the image frame and clip media inside it; keep captions outside. Preserve useful detail at corners. Standalone mesh/glass silhouettes that merge into the page remain complete and unframed. Buttons retain their common pill geometry; established menus, tooltips and dialogs retain their task-specific radii.

## 5. Composition and content patterns

Use open, grid-aligned groups rather than marketing cards or boxed bento layouts. A page should alternate expressive visual moments and concise, useful information. Related items sit close together; different ideas get space. Each view has a clear focal point established through at least two of placement, scale, contrast, colour and space.

### Choose patterns from the task

The visitor’s task, the employee’s request and the available content determine the structure and interactions. The patterns below, any accompanying catalogue and the HTML demonstrations are an open set of examples, not an exhaustive list of permitted solutions or a required section sequence.

- Use a pattern only when it helps the visitor understand something or complete a relevant action. Its presence in the catalogue is not a reason to include it.
- Adapt, combine or create patterns when the task calls for them. If no listed pattern fits, design an appropriate interaction; do not force the task into the nearest example.
- Choose the simplest sufficient presentation. Text and a link may be enough; add tours, filters, tabs or comparisons only when the content and task justify them. Do not invent content or requirements to fill a pattern.
- New patterns must preserve this visual language, accessibility, responsive behaviour and relevant interaction states. Demonstrations illustrate execution quality and behaviour, not the limits of the system.

The following compositions are options:

| Pattern | Composition | Suitable content |
| --- | --- | --- |
| Integrated opening | Short title anchored to the grid; a large image occupies the surrounding field; lead and action live in a quiet region | A product, initiative or campaign introduction |
| Offset statement + detail | Title across columns 1–7, concise detail across 9–12; the next section changes the balance | Positioning or a central idea |
| Visual explanation | Image or diagram takes 7–8 columns; annotations occupy nearby grid anchors, tied to visible details | A process, mechanism or meaningful comparison |
| Media-led story | A wide image or film with a short adjacent caption; supporting text follows at a smaller scale | Research, people, a laboratory or an event |
| Open collection | Aligned rows or unequal image/text groups, with consistent title and metadata roles | Capabilities, publications, speakers or resources |
| Comparison | Shared labels and aligned values in open columns; actions sit directly with their corresponding option | Plans, features or alternatives |
| Closing action | One concise proposition and a clear action, with a quieter supporting link if useful | Contact, access, registration or further reading |

An asymmetric page remains orderly because edges and baselines repeat. The balance can change between sections without changing the grid. Avoid turning all content into large headings, all imagery into background decoration, or every section into another hero.

Choose the medium that communicates the subject: screenshots show software, diagrams explain relationships, portraits identify people, video shows change over time, and organic artwork provides atmosphere. A caption explains the relevant detail. Concrete content carries the story; decorative material supports it.

On mobile, recompose rather than shrink. Bring each explanation next to its visual, stack open comparisons in a readable sequence, and keep text out of detailed imagery. Wide factual diagrams may have a labelled full-size view.

## 6. Elements and behaviour

### Buttons and links

Text buttons are fully rounded pills; icon-only buttons are circles. All variants share geometry so emphasis can change without shifting the layout.

| Size | Minimum height | Horizontal padding | Text | Icon |
| --- | --- | --- | --- | --- |
| Compact | 44 px | 16 px | Inter 500, 16 / 24 | 16 px |
| Default | 48 px | 24 px | Inter 500, 16 / 24 | 20 px |
| Large | 56 px | 32 px | Inter 500, 16 / 24 | 20 px |

Keep button labels centred inside the control. Apply any optical offset to the whole control, never displace its label independently.

Radius: 999 px. Label/icon gap: 8 px. Action-group gap: 16 px. Allow multiline labels to increase height with at least 12 px vertical padding. On narrow screens, long action groups can stack with the primary first.

| Variant | Default | Hover / pressed |
| --- | --- | --- |
| Filled | Insilico: #00A607 background and #08090B label in both themes. Other profiles: theme UI accent with #08090B label on dark, #FFFFFF on light. Transparent border | Insilico: #00B808 hover, #009606 pressed. Other profiles: hover mixes 16% white on dark or 8% on light; pressed mixes 8% page colour |
| Outline / Stroke | Transparent; 1 px theme-accent border; Insilico uses the saturated dark UI accent for its label on dark; other profiles use light tint. All use light UI accent labels on light | Hover: 10% accent wash. Pressed: 18% accent wash |
| Ghost | Transparent, no visible border; primary or light-tint label | Hover: 8% foreground wash. Pressed: 14% foreground wash |

Use Filled for the principal action, Outline for a supporting action, Ghost for a quiet action. Hover and press transitions take 150 ms. Keyboard focus smoothly thickens the control’s existing edge from 1 to 3 px over 180 ms, using its theme-appropriate line colour. Grow inward without changing dimensions or adding a detached outer ring. Ghost controls gain an inset edge; tabs thicken their underline. Respect reduced motion. Retain a visible system-colour outline fallback in forced-colours mode. Disabled controls use muted treatment and expose their disabled state; loading preserves the button's width and names the current action.

Text links use a distinct, chromatic profile colour: for Insilico on dark, use saturated #00A607; for other products on dark, mix 82% of the dark UI accent with 18% white; on light, use the light UI accent. Links and text-styled actions have no underline at rest. Hover lightens the link colour by 12% white on dark or deepens it by 12% black on light, with a 150 ms transition. Show a 1 px solid underline at 55% of the text colour, offset .3em below the baseline so it clears descenders; retain ink skipping. Keyboard focus shows a full-colour 3 px underline. Use a small 16 px up-right arrow (↗) only when navigating to another website. Same-site pages, section jumps and on-page actions have no external arrow. A same-page action such as opening a dialog uses a semantic button styled as a text link; navigation uses an anchor. Full pill buttons keep their button treatment; file downloads may use the explicit download icon. Header navigation is the exception to the default link colour: use primary text at rest, accent colour and medium weight for the current section, and expose aria-current="location". Header-menu hover changes colour only, with no underline. Keyboard focus uses a visible 2 px outline offset 6 px from the link. Update the current section as the visitor scrolls. Group destinations by visitor intent; a parent navigation item may cover its following subsections until the next listed destination. Do not expose every specimen section as a mandatory navigation item.

Keep the text column continuous between a pattern response and the principles beneath it. Place a decorative leading arrow outside that column, in the available gutter, so it does not indent the heading, body or flow labels. Hide this optional arrow when the layout stacks on mobile.

### Fixed header and navigation

Height: 72 px desktop, 64 px mobile. Fixed at the top from the first frame. Dark background rgba(8,9,11,0.82); light background rgba(247,248,245,0.86). Both use backdrop blur 8 px and saturation 105%. Fallback opacity is 0.96 dark / 0.97 light when blur is unavailable or reduced transparency is preferred. Text and logos remain fully opaque. The header has no decorative outline.

Place the genuine Insilico symbol to the left of Insilico, preserving the supplied vector geometry and colours. Use a 40 px symbol with a 12 px gap on desktop, 32 px with an 8 px gap on mobile, following the logo application defaults in section 10. Navigation gaps: 32 px; action gap: 16 px. Page content and anchor positions account for the fixed header height.

Mobile navigation uses a 44 px menu control and a readable panel beneath the header. Links have at least 44 px tap height, 16 px separation between groups, visible keyboard focus and a clear open/close state. Opening the menu, selecting a destination and pressing Escape have predictable behaviour.

### Inputs and selection

Inputs and selects: minimum 48 px high, 16 px horizontal padding, 16 px corner radius, raised-surface fill, 1 px functional border and Inter 16 / 24. Selects have one downward chevron, 20 px canvas, inset 16 px from the right edge and vertically centred; reserve 48 px of right padding for the icon. Preserve native selection and keyboard behaviour. Labels sit above at 16 / 24 with an 8 px gap. Help or error text sits 8 px below at 13 / 16. Focus changes the input’s existing 1 px border to the focus colour without an extra inset ring or thickness change. Selects and search follow the same rule. Invalid fields retain one 1 px error-colour edge both at rest and on focus; the error colour remains authoritative. Errors also have a written explanation. A form is a functional group with 24–32 px inner space, not a marketing card.

Checkboxes and radio marks are 20 px within at least a 44 px clickable label area. A switch is 40 × 24 px, with a 20 px thumb. Selected controls use the profile accent with a contrasting mark; Insilico retains saturated green. Labels make state understandable without colour alone.

### Tabs, accordions and overlays

Tabs use Inter 500 at 16 / 24, 48 px minimum height and 24 px spacing. The selected tab has a 2 px accent underline. Content follows 24 px below; keyboard selection and focus remain visible.

Accordions are open rows rather than separate cards: 24 px vertical padding, title 20 / 24, 20 px expand icon, answer 16 / 24. A quiet divider may separate rows. Expanded content sits 16 px below its title.

Menus use a 16 px radius. Dialogs use a 32 px radius on desktop and 24 px on mobile. Both use the raised surface, 24–32 px padding and a soft shadow: 0 16px 48px rgba(0,0,0,0.32). A dialog has a visible close action, appropriate focus handling, Escape dismissal and returns focus to its actual trigger. An informational dialog also closes when both pointer-down and click occur outside its rectangle. Clicks on its padding/content and drags that begin inside must not dismiss it. For an informational dialog, initial focus can go to its title (tabindex=-1) so the close icon is not highlighted on opening. The close action remains keyboard-accessible; keyboard focus can thicken the icon strokes without a surrounding halo. This containment serves an interaction; ordinary page content stays open.

### Tooltips

Use concise, supplementary hints; essential information remains visible in the page. Default treatment: Inter 14 / 20, 8 px vertical and 12 px horizontal padding, 16 px radius, a 1 px quiet border, no pointer triangle or shadow. Dark: #1B1E24 surface, #373B43 border, primary light text. Light: #FFFFFF surface, #E6E8E4 border, primary dark text. Maximum width 288 px with at least 12 px viewport inset; place 8 px above the trigger, flip below when necessary, and allow wrapping on narrow screens.

Show after 350 ms pointer dwell, immediately on keyboard focus, and on tap. Keep the hint visible while the pointer is over the trigger or tooltip; allow 160 ms to cross the gap. Escape, blur, outside tap or scrolling dismisses it. Use role=tooltip and aria-describedby on the owner while visible. Keep tooltip content non-interactive. Use a popover or dialog for interactive content.

### Loading and optional effects

**Required:** reserve media dimensions, decode before an authored reveal, retain loaded content, and provide readable failure and reduced-motion states. Important images must not wait for a decorative delay. Show honest text status for long-running work; never invent percentages.

**Default:** ordinary images with a restrained entrance. A generated website does not inherit img-fx, Border Beam, Thinking Orbs, React or WebGL merely because the preview demonstrates them.

**Optional examples:** img-fx can demonstrate image reveal; Border Beam can emphasize a relevant active control; Thinking Orbs can accompany genuine indeterminate activity. Add a library only when the requested experience benefits from it. Keep a static fallback and local text status, pause offscreen, respect reduced motion and retain upstream licences. Do not show decorative loaders for content already available. Exact demo presets and package versions belong to implementation notes, not this visual contract.


### Icons, media and footer

Use a single outline icon family or consistently drawn SVG geometry: 20 or 24 px canvas, approximately 1.5 px stroke, rounded joins. Small arrows in buttons are 16–20 px. Icons identify actions or information; diagrams have their own meaningful geometry.

Media uses its natural aspect ratio or a deliberate crop that preserves the subject. Preserve a complete subject when its form matters; crop only intentional atmosphere or unused field. Keep an explanation adjacent to its image. Conceptual artwork must not be mistaken for evidence. Default media corners are square; the organic subject provides softness. Captions sit 16 px from media. Genuine product UI retains its original appearance and can be shown as an inset artifact within the dark page.

The footer brand link uses secondary text, shifting to muted text on hover without an underline; it must not compete with primary copy. Keyboard focus remains visible.

Footer: shared page grid, 64 px top and 32 px bottom padding, brand at columns 1–4, up to four link groups across the remaining columns. Titles use primary text and Inter 500, 16 / 24; links use neutral secondary text and 16 / 24 with 8 px vertical spacing. Footer group links do not use the green accent: hover and keyboard focus bring them to primary text, with existing underline/focus feedback retained. On mobile, place the brand first, then two columns of links with 32 px group gaps, then a full-width final information row.

## 7. Images and art direction

### The central idea: from mesh to matter

Our signature imagery expresses a computational form gradually acquiring material presence. A fine mesh first describes a possibility. Its contours gain depth, catch light and become a tangible surface. This is a visual metaphor for the passage from computational exploration toward material possibility, not a claim that a pictured result has been produced or validated.

Mesh detail also develops across the form: sparse flowing contours at the free edge gradually subdivide into a finer, denser network toward materialization. Keep the lines readable, with soft mint/blue contrast; boundary lines have no extra bright rim or thick outline.

The transition carries the meaning. Mesh and glass should read as two states of one continuous form, with a broad, gradual zone between them. Preserve the apparent contours through the change; let surface, thickness and soft reflections emerge progressively. Avoid an abrupt split or a grid pasted onto a finished object.

In website copy, introduce the idea before describing palette or finish. A concise headline such as “From mesh to matter” establishes the story; nearby image descriptions explain how the specific subject gains substance. Vary the subject and phrasing while keeping that relationship legible. This narrative belongs to signature computational artwork; documentary photographs and explanatory figures serve their own purposes.


### Direction: a future you can feel

Expressive science and human possibilities share a quiet, precise interface. Imagery can be expansive, tactile and optimistic. Choose the subject from the employee’s task, then choose a treatment. The following collection is open: use, adapt, combine or create. It is not a required list of subjects or website sections.

### Material, colour and light

The defining glass is smooth and satin-matte, with diffuse transmission: the contents are faintly visible and softened by the material. Show actual thickness, fitted edges, occlusion and continuous geometry. Use broad, restrained highlights and selective edge light. Avoid a uniform translucent overlay, porous glass, excessive glare, cotton-like volume or plastic-looking blobs. Pores belong only to a relevant depicted structure, not to the glass shader.

Menthol and pale sage anchor the imagery; ice blue, soft lilac and small pastel blush accents add variation. Keep colours desaturated enough to feel integrated into the material. Interior light should reveal depth rather than create a hot spot or fluorescent glow. Let the subject stay luminous against a near-black field. Daylight scenes retain natural contrast, readable architecture and believable focus.

Human subjects retain natural skin texture and coherent anatomy. Humanoid concepts combine skin with warm ivory organic polymer and integrated matte-glass sections. Transitions need thickness and fitted contours; glass must feel built into the body. An internal glow stays faint. Backgrounds should be intentionally composed, not faded or indiscriminately blurred.

Mesh is a second representation of the same form: fine lines register to its surface and become sparse where useful. Use it to express computational exploration, construction or relationships. Do not add random grids, pseudo-data, arbitrary glowing connections or decorative scientific labels.

### Select the medium from the job

| Medium | Visitor needs | Shared direction | Avoid |
| --- | --- | --- | --- |
| Signature material artwork | A memorable idea, discovery or computation | Satin glass, coherent form, registered mesh, selective pastel reflection | Using one protein silhouette for every story; claiming it is evidence |
| Explanatory illustration | Relationships, structure, scale or a process | Quiet field, purposeful callouts, related overview and detail, controlled mint/blue | Decorative labels, fabricated results, tiny essential details |
| Photography and product media | Actual people, work, places or software | Intentional light, natural colour, readable action and consistent framing | Converting reality into glass; synthetic people presented as staff |

These media can coexist. Connect them through hierarchy, colour temperature, light and editorial treatment. Do not force the same renderer or glass material onto every subject. Use one dominant medium per story; a second must add information.

### Real photography

Show a specific action, person or place. Choose broad soft light, natural skin colour, restrained contrast and clear separation from the background. Preserve genuine laboratory detail. Use coherent exposure and white balance across a set; retain important equipment, gestures and identifying features when cropping. Do not apply a mint wash to skin or replace a real background just to match the page. When the original scene already has coloured instrument or venue light, preserve that context without intensifying its colour cast; explain unusual lighting in the caption where useful. Keep faces and the main action clear of any dark gradient behind a title. A pale photo may sit as an intentional rectangle on a dark site.

Portraits need consistent eye-line, crop and scale within a group. Group and event photographs should retain context and human interaction. Avoid rows of mismatched circular headshots unless the requested layout requires them. Documentary images need relevant captions and credit where supplied. Fictional or generated scenes remain clearly distinct from documentary evidence.

Choose collection proportions from the subjects and their purpose. Related images share deliberate frame heights and alignment; choose each focal crop to preserve its important content. Overlaid headings are optional. Keep credits and explanatory captions outside image frames.

Bring a set together with restrained saturation, clear contrast and coherent framing. Retain natural skin colour, real equipment, logos and the light of the place. These presentation adjustments must not invent or replace photographed content. Offer the complete, ungraded frame in the image viewer. This is editorial treatment of documentary photography, distinct from mesh-to-material conceptual artwork.

### Speculative humans and instruments

Keep the human action understandable before adding futuristic materials. Check hands, face/body transitions, joints, repeated wells, tube caps, cables, housing edges and contact shadows at full size. Glass panels are fitted volumes, not painted overlays; internal light remains subtle. A humanoid belongs to a speculative story and never substitutes for a real employee portrait. Use fewer coherent pieces rather than many unconvincing details. Preserve an approved person's identity and scene through a local edit.

### Light and dark treatment

For artwork intended to merge into a page, prepare a matching field: #08090B dark or #F7F8F5 light. Relight rather than invert. In light scenes, retain midtone sage/blue-grey depth inside concave folds, visible mesh and glass thickness; do not let most of the subject disappear into white. In dark scenes, preserve interior detail and soft highlights without a neon rim. Test actual page scale as well as full resolution. Keep pastel highlights subordinate to form.

Preserve composition and meaning between theme companions. Do not claim a matching companion exists when only one source is available; use the existing image as a deliberate framed photograph or prepare another treatment. Never use brightness changes or colour inversion that corrupt the subject merely to hide a rectangular background.

### Compose across viewports

A closing material statement can pair a large live headline, explanation and action on the left with a complete form on the right. The form may extend beyond the section boundary; overlap is optional and must preserve text contrast. On mobile, a clear sequence of headline, explanation/actions and then a substantial artwork field is appropriate. Do not force an overlap that makes the copy harder to read.

Avoid enlarging a soft source through an additional cover crop. Keep native aspect ratio, preserve fine mesh detail in delivery, and inspect the actual displayed size. Assess the available source dimensions before choosing display scale; do not describe an enlarged raster as newly resolved detail.

Use a large form when its contour matters, and a quiet area for live text. Text may overlap atmosphere if local contrast remains reliable; keep it clear of essential scientific detail. On mobile, give signature artwork its own substantial field: near the title in an opening, or after the explanation in a closing sequence. Keep the relationship clear rather than shrinking the artwork to a decorative strip. Diagrams keep complete callouts and can offer an accessible full-size view. Reserve dimensions and keep related image/copy closer than unrelated sections.

### Brief a new image

Specify: purpose and audience; subject/action; chosen medium; silhouette and framing; material and lighting; page theme/field; space needed for live copy; invariants from any reference; and factual or conceptual status. Generate variation through new subjects, silhouettes and viewpoints while retaining the material law. Avoid repeating one hero composition throughout a site. Add logos as approved vector artwork after raster edits; never ask a generator to redraw exact brand geometry.

### When artwork or references are unavailable

A finished typographic composition is a valid expression of this language. If no approved signature artwork, style reference or image-generation capability is available, continue with the shared colour roles, real typography, open composition and clear hierarchy. Omit optional artwork and recompose the space; do not leave an empty hero slot or invent a substitute logo, employee portrait, product screenshot or scientific result.

If the brief explicitly calls for new conceptual artwork and generation is available, the written material rules can guide a first study without an image reference. Treat it as a new proposal for review, not as an exact reproduction of an approved asset. Use an approved style image when supplied. If exact visual matching or a particular generation tool is essential but unavailable, finish the independent layout/content work and identify the missing dependency in the handoff.

For missing speaker portraits, use a consistent text-led list with the supplied names and roles. For missing product media, explain only the workflow facts supplied by the brief; do not fabricate a screenshot. If an essential factual figure is absent, identify the missing source in the draft and handoff rather than replacing evidence with decoration. Keep internal asset-approval notes out of the visitor-facing page unless their status matters to the visitor. Never present a preview without those essential materials as ready for publication.

### Evidence boundaries

Concept artwork is not microscopy, a validated molecular structure, an assay result, actual equipment or proof of deployed robots. Use real product screenshots and verified source visuals where evidence is required. Preserve source geometry, labels, units and uncertainty in factual figures and obtain the relevant expert review. Do not invent company capabilities, people, performance claims or research findings to fill a layout.

## 8. Motion

The signature entrance is a headline rising through a separate mask for each rendered line. The first line leads; following lines emerge in a short sequence. Supporting copy arrives next, while imagery opens and settles into its frame. Controls and native scrolling stay immediately usable throughout.

| Role | Starting values | Character |
| --- | --- | --- |
| Button / link feedback | 150 ms | Direct colour and state response |
| Menu / accordion transition | 240 ms | Short, interruptible change |
| Headline line | 900 ms; translateY(calc(100% + .4em)) → 0 | Each line rises from below its own crop; 110 ms between lines, capped at 330 ms total stagger |
| Supporting text | 650 ms; 24 px rise desktop, 16 px mobile | Opacity 0 → 1; starts 180 ms after its group becomes visible |
| Image entrance | 1100 ms; image scale 1.09 → 1 | Frame opens from a 16% top crop (10% mobile); opacity 0.35 → 1 |
| Section / opening sequence | Typically 1320 ms total | Headline at 0 ms, supporting text at 180 ms, image at 220 ms, action at 300 ms |
| Diagram / scene transition | 400–600 ms | Reveal, mask or crossfade that preserves the relationship |
| Theme transition | 240 ms | Surface colours transition; decoded artwork fades in after replacement |

Entrance easing: `cubic-bezier(0.22,1,0.36,1)`. Routine transition easing: `cubic-bezier(0.16,1,0.3,1)`. Routine controls retain their faster feedback. These timings are recommended expressive defaults, not compulsory waits. Use the sequence at meaningful focal points, without delaying every small label or control. Judge pace in live scrolling before shortening or extending it.

### Headline and image recipe

Measure actual headline line breaks after fonts are ready. Preserve both natural wrapping and explicit breaks. Put each visual line inside a temporary mask and animate the inner line upward from its height plus .4em. Allow .2em above and .35em below the line box for glyph extents and optical baseline offsets; this allowance must not change line-box height. Remove the mask after completion or cancellation so descenders are never clipped in settled text. Replay restores it only for the entrance. Preserve the complete accessible heading name once; hide only the duplicate visual fragments from assistive technology. Do not split editable typography specimens. Recalculate lines after a width change and when revealing previously hidden content; restore the original markup before measuring again. Cancel unfinished line motion before rebuilding.

Use IntersectionObserver with rootMargin `0px 0px -8% 0px` and threshold 0. Observe the headline, supporting copy and image as separate meaningful units, not a whole long section. Trigger once when a unit enters the lower 92% viewport boundary. An opening uses the same sequence; animate a caption only if the composition has one. Captions are independently observed supporting-text targets; they must not appear static beside animated imagery after reload. Reload creates a fresh entrance cycle, including when the browser restores a scrolled position. Each separately visible group owns its delays; delays do not accumulate down the page.

Use Web Animations API or equivalent CSS. Delayed animations hold their first frame only during their delay and return to ordinary visible styling when completed or cancelled. Never animate an ancestor and descendant with competing transforms. Groups containing interactive controls fade in without vertical travel so cancelling motion on focus cannot move a control between pointer-down and click. Headline and image motion retains its full character. For imagery, crop the fixed-size outer frame while the image inside settles from 1.09× scale; the outer frame does not move or scale. Create the media frame before observing or decoding the image, reserve its natural dimensions, and prepare images within 600 px of the viewport. Hold an unready image inside that frame, then reveal it once after decoding; never show the final image and subsequently rewrap or reset it. Keep an already displayed image stable when its source has not changed. Skip entrance motion if decoding finishes offscreen. Reduced motion and loading failures release the pending state.

Default HTML and CSS render all content visibly. Failed scripts or observers must not hide content. Do not replay an entrance over a focused control; finish or cancel container motion when focus enters. Disabling motion or enabling reduced motion cancels existing entrances and displays their final content immediately. Replay cancels previous motion before starting the new sequence. Ordinary sites play scroll entrances once per page load. Add replay only when the visitor needs to inspect or repeat the demonstration.

Scroll motion may reveal a process, move focus toward an image detail or connect two scenes. Native scrolling remains under the visitor's control. A sticky composition suits a story that benefits from comparison; a linear layout suits mobile reading. Neither is a universal page template.

Organic video motion uses subtle unfolding, deformation, drift and shifting reflections of the forms themselves. Choose loop length from the motion; keep it silent with a matching still poster. Do not speed up a slow organic change to meet an arbitrary duration. Verify its join and internal structure in continuous playback. This is imagery, not a mouse-rotated 3D viewer. Continuous motion has a pause control and rests when offscreen. Reduced motion uses the still or gentler state changes while preserving all content and interaction.

## 9. Adapt to the site

The employee request determines page structure. The following are examples of content needs, not mandatory sections. Keep common foundations and change the hierarchy, density and medium.

| Site | First visitor question | Useful content and interaction | Visual emphasis |
| --- | --- | --- | --- |
| Product | What does this do, and how can I evaluate it? | A clear proposition, real workflow/screenshots, relevant comparisons, an honest next action | One expressive opening; compact evidence and workflow sections |
| Event | Is it relevant, when is it, and how do I attend? | Date/time zone/place, programme, speakers, registration, access information | Human photography or a purposeful event image; scannable schedule rows |
| Research story | What was studied, what is supported, and where is the source? | Question, methods/context, figures with captions, limitations, sources, related work | Readable editorial column; figures at usable scale |

Events: group sessions by day or track only when needed. Keep time and time zone explicit, put speaker/venue with their session, and keep registration reachable. A map needs a text address. Do not invent speakers or venue details; label missing information honestly.

Research/editorial: default reading measure 60–70 characters, body at least 16/24 (18/28 for sustained reading when space allows), 24px paragraph rhythm. Add anchors for a long article. Give captions, source links, footnotes and references consistent roles. Evidence remains more prominent than decorative art.

Product screenshots: show real supplied UI with readable labels and honest scale. Explain the part relevant to the visitor. Do not recolour the product interface to match the marketing page or generate fictional results as if captured from the product.

### Tables and figures

Use semantic tables with clear row/column labels, units in headings and tabular numerals. Keep text left-aligned and comparable numbers right-aligned. Use quiet horizontal separators; avoid boxing each cell. On narrow screens preserve relationships, allow a clearly labelled horizontal region when necessary, and offer a textual takeaway. Do not compress important data into illegibility.

Charts use neutral fields, legible labels and a restrained series palette. Use direct labels, symbols or line styles as well as colour. Keep a consistent scale where comparison requires it; show units, source and the relevant context. Preserve uncertainty supplied by the source. Empty or missing values are not zero. Illustrative fixtures must be labelled examples, not results.

## 10. Brand assets and delivery

**Required:** preserve supplied product colours and the original Insilico vector geometry. Do not invent a simplified or monochrome mark. Use an approved variant only when supplied by the brand owner. Keep the symbol with its wordmark for identification at small scale; do not promise legibility of its internal circuit details at the compact 32 px size. Allow clear space of at least one quarter of the symbol width as a layout default, subject to any supplied brand guide. Test actual rendered size; enlarge or use the authorised wordmark when the lockup is unreadable. A product profile is an accent system, not permission to recolour an official logo.

### Proposed logo application defaults

Use the original symbol with the product name: 40 px symbol and 12 px gap in desktop headers; 32 px symbol and 8 px gap in compact headers. These are specimen-tested layout defaults, not an official replacement brand manual. Do not shrink the detailed symbol below 32 px in this lockup; use a plain text product name when less space is available. Small reproduction preserves identification, not every internal circuit detail.

Reserve at least one quarter of the symbol width on all sides, including the gap to the name. Keep the lockup on a quiet contrasting field. Use larger artwork for standalone detailed presentations and assess it at actual output size. Preserve the supplied vector and colours. Do not generate a simplified icon or monochrome variant without approved source artwork.

Asset handoff: when this document travels with its companion files, use the [supplied Insilico mark](style-preview/assets/insilico-mark.svg). Relative links resolve from this document's directory; preserve the companion folder when copying it. With the MD alone, an unavailable mark is not a blocker to drafting: use a plain text product name and identify the missing approved asset before publication. Do not reconstruct the symbol. Use Manrope and Inter from supplied licensed files or their official font distributions; use a system sans-serif fallback until those files are available. If no named product profile matches, use the shared Insilico profile and confirm a product-specific accent later.

Before delivery, check wide and narrow layouts in both supported themes; complete image contours where required; text/background contrast; fonts and natural wrapping; keyboard/focus paths; honest loading, empty and error states; no horizontal page overflow; reduced motion and static fallbacks; real links/actions; and factual labels. Watch motion in continuous playback rather than certifying it from screenshots.

For portability, give a new builder only this document and the employee’s content brief. Test at least a product, event and research composition. Compare shared identity, task-specific hierarchy and missing assumptions. A passing preview is not proof that every future site works; record the tested briefs and remaining gaps.

Keep consistent: colour roles, product identity, typography, control geometry, grid, spacing rhythm, material treatment and motion character. Adapt section count/order, density, subject matter, medium and narrative.

## Appendix — optional image examples

These examples show how the material language can carry different subjects. They are not a required catalogue, fixed page sequence or runtime dependency. Descriptions work without image files. The local links are conveniences for this project only; use equivalent approved assets or create a new brief when working elsewhere.


The examples below demonstrate nine optional compositions, including available theme companions. Their detailed descriptions are usable without the files. Relative preview links work in the supplied project; the HTML detail viewer offers downloadable WebP copies. They are optional visual references, not runtime dependencies of a website built from this MD.

#### Molecular form

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.

**Use:** Product openings · discovery stories · campaign imagery.

**Art direction:** Keep a coherent silhouette, readable depth and room around the form. A protein-inspired concept, not a validated molecular model.

![Molecular form — conceptual art direction](style-preview/assets/imagery/protein-clear.webp)

#### 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.

**Use:** AI methods · exploration · platform narratives.

**Art direction:** 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.

![Computational atlas — conceptual art direction](style-preview/assets/imagery/computation.webp)

#### 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.

**Use:** Editorial explainers · research introductions · educational stories.

**Art direction:** Keep the overview and enlargement visually connected. This is a conceptual illustration, not microscopy or an experimental result.

![Biological atlas, dark treatment](style-preview/assets/imagery/biology-dark.webp)

[Light treatment](style-preview/assets/imagery/biology-light.webp) · [Dark treatment](style-preview/assets/imagery/biology-dark.webp)

#### Inside the object

An open optical assembly reveals its layered construction. Sparse contours become denser mesh, then resolve into curved glass elements and an ivory housing. Use translucency where the object calls for glass; let solid supports keep their own quieter material. Keep the whole section readable.

**Use:** Product anatomy · optical studies · explanatory layouts.

![Mesh-to-material optical cutaway](style-preview/assets/imagery/optical-study.webp)

[Light treatment](style-preview/assets/imagery/optical-study-light.webp). Conceptual ImageGen interpretation, not an engineering drawing or exact optical prescription. Geometry and materials are reimagined from the visual reference by [Martin Vorel / Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Nikon_SLR_Camera_cutaway.jpg), [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/); preserve attribution and share-alike terms with these illustrations.

#### 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.

**Use:** Future vision · innovation stories · concept presentations.

**Art direction:** Material transitions need thickness, joints and a reason to exist. Present the device as a design concept.

![Speculative instrument — conceptual art direction](style-preview/assets/imagery/instrument.webp)

#### From model to prototype

One channel layout begins as sparse mesh, refines, and gradually gains a transparent physical body. The material reveals the same geometry that computation describes. Avoid unrelated glass ribbons or molecular decoration.

**Use:** Design process · prototyping stories · computational craft.

**Art direction:** Keep the channel path continuous across the transition. This generated illustration is a prototype concept, not documentation of a manufactured or tested device.

![Model-to-prototype concept](style-preview/assets/imagery/model-to-prototype.webp)

#### Embodied intelligence

Make the future feel human. Natural skin and warm ivory polymer meet inset matte-glass parts. A faint internal glow reveals depth. Clear daylight gives the laboratory its own presence.

**Use:** Speculative automation · future-of-work stories · brand vision.

**Art direction:** Glass belongs to the body through continuous contours and fitted edges. This is a fictional humanoid and laboratory, not an existing Insilico deployment.

![Embodied intelligence — conceptual art direction](style-preview/assets/imagery/humanoid-v12.webp)



### Molecular references, expressive imagery

For new brand imagery in this specimen, the selected generator is the current built-in ImageGen; use an approved style image when available. In another agent environment, follow “When artwork or references are unavailable” rather than assuming that tool or a local reference exists. Here the computational atlas is the material reference: fine flowing mesh gradually gains substance and becomes milky satin glass. Keep a broad, curved transition on the same apparent surface, with menthol depth and restrained blue/blush reflections. Avoid a hard split, pasted mesh patch or a change to a generic 3D-render style. Create a separately relit light companion rather than inverting the dark image.

Real molecular structures may guide subject and silhouette. Name generated results as inspired interpretations; they do not guarantee the source fold, connectivity or atomic positions. Exact scientific diagrams require a separate, explicitly requested and validated workflow. Do not substitute that workflow for this artistic direction.

![Ubiquitin-inspired protein fold: mesh gradually becomes satin glass](style-preview/assets/imagery/ubiquitin-art.webp)

**Protein fold.** Fine contours gather into a compact translucent form. The mesh gradually fills with material across a broad transition, revealing inner folds and soft menthol depth. Ubiquitin is the visual subject reference, not a claim of preserved atomic geometry. [Structural reference: RCSB PDB 1UBQ](https://www.rcsb.org/structure/1UBQ). [Light treatment](style-preview/assets/imagery/ubiquitin-art-light.webp).

![DNA-inspired double helix: airy mesh gradually becomes translucent strands](style-preview/assets/imagery/dna-art.webp)

**DNA double helix.** A diagonal mesh gradually becomes translucent strands. The B-DNA reference guides the idea of a double helix; this generated composition is not an exact depiction of the deposited dodecamer. [Structural reference: RCSB PDB 1BNA](https://www.rcsb.org/structure/1BNA). [Light treatment](style-preview/assets/imagery/dna-art-light.webp).

Both examples are AI-generated artistic interpretations, not atom-accurate models or validated scientific diagrams.

## Appendix B — local specimen decisions

The current specimen applies a reversible display-only `#00A607` Soft Light glaze to conceptual artwork: 18% on dark fields, 12% on light fields and 6% on the humanoid to preserve skin. Blending is isolated to the image; dark-field cleanup follows it. Genuine photographs, logos, text, source downloads and the signature video are excluded. Image detail and the loading demonstration use the same treatment. This is a local styling experiment, not a mandatory rule for other sites.

These details describe the demonstration website only. They are not requirements for other sites made from this document. The general rules above take precedence; reproduce these demonstrations only when the brief calls for them.

### Typography and composition

The opening uses Manrope at 88/104 on desktop, 68/80 on tablet and 44/56 on mobile as a local expressive exception to the default ladder. The header wordmark uses Manrope 600 at 22/32. These choices do not redefine heading roles on every generated site.

The closing material example places headline, explanation and actions together on the left, with the full artwork on the right. Its mobile order is headline, explanation/actions, then artwork. The opening has its own mobile composition with artwork immediately after the title.

### Logo and radius demonstrations

The standalone logo presentation is 112 px to show its details and clear space; this is not a universal minimum. Large-image radius 64 px follows the eight-pixel scale and implements the approximately 60 px treatment requested for this specimen.

The specimen shows the four radius steps separately. Its logo clearspace guide uses a slow, continuous moving dash with a 3 px dash and 3 px gap; animate only its offset, preserving the fine 1 px line and the original logo. Disable the dash animation for reduced motion and pause it when page motion is turned off.

### Photography collection

The specimen uses three official Insilico Medicine media-kit photographs: Alex Zhavoronkov observing equipment through glass, a deep perspective along the Suzhou laboratory corridor and a close view of pipette tips above transparent plates. Select for a clear gesture, spatial depth and a precise point of focus; avoid a repetitive row of posed portraits and densely packed equipment enclosures. Compose them as equal-height 4:5 frames on aligned columns, with a deliberate focal point per image. Large live headings overlap the lower part of each photograph. A local dark gradient supports pale text without obscuring faces or the essential action. Keep descriptive captions and credits outside the frame. Use the same photographic treatment in light and dark page themes.

The [official Insilico media kit](https://insilico.com/mediakit) is the source for these three photographs. Attribution, original URLs and rights status travel with the files in `style-preview/assets/photography/SOURCES.json`; no open licence is asserted. The optical cutaway illustration has a separately credited photographic reference.

### Image delivery

The refreshed mesh masters are 1672 × 941 pixels, newly resolved ImageGen edits rather than 4K masters. This is provenance of these examples, not a required resolution for future artwork.

### Interactive demonstrations

In a library specimen, let the demonstration lead the composition. A large image may share its field with an overlapping live headline, with explanation and replay beside it. Compact controls and loaders can use a narrower explanatory column next to working examples. Preserve a clear reading order on small screens and keep focus, status and error messages readable. This is one optional presentation, not a required section template.

The specimen’s timeline fills each bar from left to right, using that row’s actual delay and duration. The horizontal offset still represents its start time. Play once when the chart enters the viewport and again on an explicit Replay or mode change; keep the completed bars visible. Use linear fill so elapsed time is represented faithfully.

Duration values in the specimen table count up to their specified numbers once on entry, over 1100 ms with a gentle ease-out. Reserve four tabular-numeral positions to prevent shifting. Keep the final value available to assistive technology throughout; animated digits are decorative and never a live announcement. Replay may restart the demonstration. Reduced motion, disabling page motion or leaving the page shows final numbers immediately. These are timing demonstrations, not loading percentages or changing measurements.

The spacing-scale bars reveal once on scroll from left to right, each over 480 ms with an 80 ms stagger. Labels and measured dimensions stay stable. Reduced motion shows the completed scale immediately.

The dedicated img-fx example uses Gradient Sweep (`sweep-gradient`), matching the lower-right card in the author’s demo: a diagonal reveal with subtle cell flicker. Its reveal stages are proportionally shortened to 450 ms, with no artificial wait or image blur. It is optional and does not change the default entrance for ordinary website images. Its completion has no visible “Image ready” label; relevant loading/error states remain available.