Soft edges. Precise alignment.
Intelligence
in focus.
Clear by design.
Connected by signals.
A clear, approachable system for financial risk intelligence. Rounded surfaces give content room to breathe. Precise graphics explain the work. Amlok blue and purposeful signals connect every experience.
Explore the systemSTRUCTURE / SIGNAL / HUMAN CONTROLN 04 / E 08
WEB · MARKETING · PRODUCTINTER / JETBRAINS MONOVERSION 2.1.1 / 2026-11-03
Attention has a purpose.
People own the decision.
A recognizable identity.
The Amlok A is the primary mark. Its straight edges and internal negative space anchor our illustrations. Rounded interface surfaces complement the mark while preserving its original geometry.
SOLID BLUE / LIGHT SURFACES
HERO GRADIENT / LIGHT SURFACES
FULL LOGO / DARK SURFACESSYMBOL / ORIGINAL GEOMETRY
Blue full logo · SVGGradient full logo · SVGWhite full logo · SVGIcon + wordmark · transparent background · outlined lettering
amlokTalk to us
Header identity: use the hero gradient for the logo on white surfaces and for the Talk to us button with white text. Use the white logo over the blue hero. The gradient SVGs preserve the original geometry and include outlined lettering on a transparent background.
White on Amlok blue.
The default profile logo for social channels and company accounts. Use the solid #052698 background and the original white symbol. The square asset includes safe space for platforms that crop profile pictures into circles.
1024 × 1024px PNG · Scalable SVG · Keep the supplied padding
Protect the mark
Keep one symbol-width of clear space around the logo. Use the supplied SVG. Minimum symbol size: 24px; minimum wordmark width: 112px. Use the symbol alone in compact navigation.
One identity, two signatures
Amlok is the written name. The established lowercase wordmark is the visual signature. Use solid blue or the hero-gradient version on light surfaces and white on dark fields. Never stretch, outline, crop, rotate, or add glow to the mark.
Shield as a supporting motif
Use an angular shield in illustrations and protection-related signals. It is not a replacement logo or an unearned security certification. The existing avatar remains a separate, unchanged brand asset.
Rounded surfaces. Precise graphics.
A softer frame for the same intelligence. Use generous card corners, pill-shaped marketing actions, and a compact radius for working controls. Keep the logo, diagrams, and illustration geometry intact.
Review evidence
Inputs and product actions stay compact and easy to align.
A clearer picture.One calm surface for related information.
Cards and media share a generous, consistent corner.
Evidence connected
Primary calls to action and category filters feel approachable.
| Element | Radius / token | Usage |
|---|---|---|
| Checkboxes / keycaps | 4px / --radius-xs | Small rectangles retain a clear selection shape. |
| Navigation items / compact badges | 8px / --radius-sm | Use subtle rounding within dense interfaces. |
| Inputs / product buttons | 10px / --radius-control | 44px minimum preferred target height; persistent labels. |
| Nested cards / selected rows | 12px / --radius-inner | A smaller corner inside a larger parent. |
| Menus / popovers / toasts | 16px / --radius-overlay | A distinct floating surface with room for focus outlines. |
| Marketing cards / photography | 20px / --radius-card, --radius-media | Clip only the media surface, never an interactive parent’s focus ring. |
| Major panels / dialogs / hero video | 24px / --radius-panel | Use for large standalone surfaces, not every nested item. |
| Marketing CTAs / category filters | 999px / --radius-pill | Pill actions; circular 44px icon controls. Text links stay unboxed. |
| Logo / diagrams / illustration objects | Original geometry | Preserve angular planes, chart bars, signal fields, and photo overlays. Round only the outer presentation frame. |
| Avatar / profile assets | Original artwork | Preserve the supplied assets and their safe area. |
A rounded frame, an exact composition
Amlok pairs open layouts and rounded calls to action with quiet surfaces, fine edges, and restrained depth. Our blue palette, Inter typography, hero gradient, and precise graphics form one consistent visual identity.
Nest deliberately
Pair a 20–24px outer card with 12px inner surfaces and 24–32px content padding. For flush media, inherit the outer corner. Avoid repeating a full-size radius on every nested element.
Keep function recognizable
Circles suit icon actions, radio controls, switch thumbs, and signals. Pills suit marketing actions and filters. Reading panels and form fields remain rounded rectangles.
Quiet edges. Measured depth.
White and soft gray do most of the work. A fine edge separates a card; a diffuse shadow indicates elevation. Keep the interface calm so the content and graphics carry the story.
Content surface
A subtle 1px edge. No shadow on every card.
--border-subtleFocused content
An inset edge and a soft, low-opacity lift.
--edge-inset + --shadow-raisedA layer above
More separation for a menu or dialog.
--edge-inset + --shadow-overlay| Treatment | Rule | Application |
|---|---|---|
| Resting structure | 1px subtle edge or surface contrast | Cards, separators, and reading panels. Use --border-subtle or --border-default. |
| Interactive boundaries | Visible control outline and selected state | Form fields use --line-strong; selected controls use blue plus text or icon. Decorative hairlines never identify an input alone. |
| Raised surface | Inset translucent ring + diffuse shadow | Use --edge-inset with --shadow-raised; avoid stacking an opaque border with a heavy shadow. |
| Floating surface | Overlay shadow + 16–24px radius | Menus, search results, toasts, and dialogs. Preserve focus and escape behavior. |
| Blue surfaces | Existing Amlok gradient or solid brand field | White text and --on-brand-line edges. Keep shadows restrained and avoid colored glow. |
| Hover / pressed / focus | 150–200ms, no layout shift | Change edge, fill, or shadow. Keep focus an immediate 2px outline with a 3px offset. |
| Dark theme | Semantic foreground / surface / edge pairs | Derived edge and shadow tokens adapt to the theme. Do not invert photography, logos, or graphics. |
Rounded corners should feel designed, not inflated. Avoid glossy highlights, blur on reading panels, thick outlines, floating every element, or adding a wrapper around an already complete graphic.
Calm fields. Clear signals.
Amlok blue anchors the identity. White and cobalt fields provide contrast; secondary colors carry specific meaning. One semantic palette supports both light and dark interfaces.
Cobalt blue #1239B0 is the supporting field for reversed logos, signal illustrations, and marketing panels. Pair it with white text. Amlok blue #052698 remains the primary identity and action color; Ink #101828 remains the reading color.
Use the shared color tokens throughout the website. Blue fields use --on-brand for headings, --on-brand-muted for supporting copy, and the paired line and surface tokens for structure. Derive tints with color-mix(); do not introduce separate navy panels or one-off gray and blue values.
The hero field, now a palette material.
Use this radial gradient for blue marketing surfaces and focal blue elements inside illustrations. It is the same field used by the homepage hero: a lighter center at 50% across and 42% down, falling into Amlok blue at the edges.
Stops: #1B4FE0 at 0%, #1140C3 at 42%, and #052698 at 100%. Pair it with white or the shared on-brand text colors. Keep grid lines, signals, and motion as separate layers.
Use background: var(--gradient-hero) for CSS and the matching radial fill for SVG artwork. The header logo and Talk to us button also use this gradient. The white logo remains the signature on dark fields; product controls and the social profile mark retain their solid colors. The downloadable token stylesheet includes this gradient.
SelectedVerifiedNeeds reviewAction requiredNot evaluated
Every state needs a label. Brand orange and green are accent colors; status text uses the darker semantic foreground tokens. A bright dot alone is never evidence that something is safe.
Light is the working default
White supports reading and decisions. Surface gray groups related information. Keep most of the canvas neutral; reserve blue for navigation, selection, and one primary action.
Dark is a designed theme
Use the theme control above to inspect the entire guide. Dark mode changes foregrounds, borders, surfaces, and status pairs together. Do not simply invert colors. Cobalt brand panels use white or pale-blue text; dark UI surfaces use the semantic theme pairs.
Use color with intent
Violet distinguishes simulation. Orange draws attention. Green signals a confirmed positive state. Separate categorical charts from severity scales, and label every series.
Gradient palette.
Five supporting color fields alongside the Amlok hero gradient. Use a soft wash of color to give illustrations depth while preserving their precise geometry.
Amlok’s supporting gradients create depth behind product illustrations. Keep angular graphics precise and use rounded presentation panels to frame the composition.
Periwinkle blue
The closest companion to Amlok blue for product imagery.
Same graphic, different field. The blue focal object and white evidence surfaces stay consistent.
--gradient-periwinkle180° · #D8E3FA at 0% · #7198F4 at 100%
The five new fields are available in the downloadable tokens for exploration. The current homepage, logo, action colors, and hero gradient retain their existing palette. Grain is a separate, static layer and can be switched off.
Color supports the graphic
Use one gradient family per image panel. Keep the product object blue and its reading surfaces solid. These are background colors, not new logo, button, or status colors.
Keep the construction simple
Use the documented two-stop, 180° linear gradients for the new fields. Lavender light reverses the usual direction, with deeper color at the top. Add a subtle static grain layer only behind the artwork; keep text and controls crisp.
Separate identity from exploration
The radial Amlok hero field remains the primary brand gradient. These five complementary fields are an image-background exploration. Their colors do not communicate approval, severity, or financial outcomes.
A consistent voice in type.
Inter carries the conversation. JetBrains Mono labels structured information. Use a small, repeatable hierarchy instead of resizing each section independently.
Every signal.
A clearer decision.
Amlok / EVIDENCE 024 / REVIEW READY| Role | Desktop → mobile | Weight / line height | Use |
|---|---|---|---|
| Display | 64–88px → 40–48px | 600 / 1.02 | One hero per page. |
| Section heading | 48–62px; 40px compact → 32–36px | 600 / 1.08 | The same scale for every main section. |
| Feature / card heading | 24–28px → 20–24px | 600 / 1.25 | Card titles and headings under imagery. |
| UI heading | 20px | 600 / 1.3 | Panel and dialog titles. |
| Body / section description | 16–18px → 16px | 400 / 1.6 | Reading width: 45–65 characters. |
| Secondary text | 14px | 400 / 1.5 | Metadata and supporting copy. |
| Overline / telemetry | 12px | 500 / 1.4 | Monospace, short labels only. |
Keep headings concise. Fit a one-line card title through column width or shorter copy before shrinking it. On narrow screens, let it wrap; never clip text or reduce it to unreadable sizes.
One width. A consistent rhythm.
A centered, 1,280px content area anchors our marketing pages. Align section content with the logo on the left and the header action on the right. Full-width backgrounds sit outside this shared grid.
1280pxMaximum content width
48pxMinimum desktop margin
20pxMargin below 1024px
80px1280px content80px
AmlokAction
Amlok’s desktop layout uses 1,280px of content width with 48px gutters. On smaller screens, the content adapts to the available width with 20px gutters. Shared tokens keep headings, imagery, and navigation aligned.
| Screen width | Previous Amlok | New shared width | Side margin |
|---|---|---|---|
| 390px | 350px | 350px | 20px |
| 768px | 672px | 728px | 20px |
| 1024px | 928px | 928px | 48px |
| 1440px | 1344px | 1280px | 80px |
| 1920px | 1344px | 1280px | 320px |
Spacing within the grid
4812162432486496One grid, from navigation to footer.
12 columns on desktop · 8 on tablet · 4 on mobile
| Relationship | Default | Responsive behavior |
|---|---|---|
| Content container | 1,280px maximum | Use --site-content-width and auto inline margins. No additional horizontal padding on the containing section. |
| Outer gutter | 48px minimum at 1,024px and above; 20px below | Center the content. Above 1,376px, margins grow equally while content remains 1,280px. |
| Columns | 12 desktop / 8 tablet / 4 mobile | Desktop ≥1,024px; tablet 768–1,023px; mobile <768px. Components may stack earlier to preserve readability. |
| Narrow content | 65ch reading measure / 1,088px hero video | Nest intentional narrow blocks inside the shared container. Keep media aspect ratios and align surrounding grids. |
| Section inset | 64–112px | 64px on mobile; use viewport-aware space when content fits. |
| Heading → description | 24px | Keep this relationship consistent. |
| Description → actions | 24px | Group related actions with 12–16px gaps. |
| Actions → imagery | 32–48px | Give the visual its own clear region. |
| Image → title → body | 16px / 12px | Use the same rhythm across feature cards. |
| Card padding / grid gap | 24–32px / 24px | 16–24px padding and 16–24px gaps on mobile. Keep text clear of rounded corners. |
| Nested surfaces | 12px inner / 20–24px outer radius | Use 12–16px between related items. Flush media inherits the parent corner; controls keep their own radius. |
| Product density | 44px controls / 48–56px rows | 40px compact controls only with adequate target spacing. |
Navigation menus
| Element | Desktop size | Guideline |
|---|---|---|
| Links / card titles | 14px / 16px | Use the shared menu typography tokens; keep arrows consistent across links. |
| Descriptions / category labels | 12px / 10px | Descriptions use 1.5–1.6 line height; category labels use the mono family. |
| Panel inset / column gap | 24px / 24px | Use the shared page width and radius tokens; avoid enlarging type to fill spare space. |
| Photo / console feature | 292px tall | Keep team faces visible. Console text uses 12px mono with 1.85 line height and a static reduced-motion state. |
| Link targets | 44px minimum in menu link columns | Use comfortable targets and consistent spacing without stretching the typography. A tall Solutions directory may scroll within its panel. |
One owner for the gutter
Use the shared content-width token for navigation, section headings, card grids, sliders, and the footer. A section background spans the viewport; its inner container owns the margins. Do not add a second gutter inside it.
Marketing and product layouts
Use the 1,280px frame for public pages. Product workspaces and this guide may keep a sidebar and fluid work area; apply the same spacing scale within that available region. Long-form text uses the narrower reading measure.
Use the available viewport
A desktop overview can fill the area below the header when its contents fit comfortably. Allocate space to media and relationships before adding empty margins.
Compact desktop rhythm
At widths of 1200px or more and heights of 820px or less, use 40px section headings, 20–24px outer insets, and 16–24px content gaps. Keep reading text at 16px, secondary copy at 14px, and interaction targets at least 44px.
Let content remain readable
Sliders and long feature sections may span multiple viewports. On small screens or with larger text, use natural document flow. Never crop a section to force a viewport-height layout.
Keep a predictable reading path
Stack columns in reading order. Put the image before its caption. Keep tables in their own scroll regions. A horizontal scrollbar must never appear on the whole page.
Fields with structure.
Photography adds human context; precise illustrations explain the product. Present both in softly rounded media frames with consistent spacing, preserving the artwork and its original geometry.
Clarity under pressure.
Image placeholder
Use light to describe the object
Keep reading surfaces solid. Within marketing artwork, a restrained Signal blue → Cobalt → Amlok blue gradient gives a focal object dimension. Use the shared Amlok hero radial gradient for primary blue fields. The Gradient palette section explores complementary image backdrops. Object lighting remains consistent from the upper left; keep multicolor effects out of control borders and text.
Build with angular planes
Use overlapping evidence surfaces, shallow extrusions, square scan fields, and deliberate diagonal joins that echo the logo. Preserve the original mark itself. Keep these angles inside the artwork. Use the shared 20px media radius around photography and illustration panels; avoid arbitrary silhouettes, ornamental diamonds, and unrelated 3D objects.
Photography and overlays
Choose real work and real environments with cool daylight, pale blue, wood, and brick. Keep faces, hands, and the essential activity visible. Preserve the existing blue graphic overlays and corner brackets; round the photograph’s outer crop only. Credit the source below the image.
Protect the integrity of imagery
Use real product screenshots with readable, sanitized sample data. Preserve aspect ratio. Do not imply a client relationship through logos without permission. Identify illustrative work as such.
Shield. Signal. Scan.
Three distinct expressions, each with a job. Their restraint is what makes the system feel precise and modern.
Shield / stewardship
A straight-edged enclosure that protects the center. Use in brand imagery and protection-related concepts.
Signal / relevance
A small dot plus a clear label. Halo, color, and intensity are supporting cues, never the entire message.
Scan / discovery
A linear pass across a square field reveals a relationship. No spinning interface or constant urgency.
Use one outline icon family, 20px or 24px on a 4px grid. Pair unfamiliar icons with text. Signal dots replace decorative diamonds. Icon-only actions require an accessible name and a 44px target.
Intelligence, illustrated.
Dimensional, precise, and unmistakably Amlok. Square silhouettes meet directional light, layered product fragments, and vivid blue focal objects. Each workflow has a distinct visual metaphor, with the logo’s angular construction guiding the family.
Evidence becomes a pattern.
Use transaction rows and a simple bar chart to connect individual deposits to recurring income.
- Construction
- Square evidence rows sit above a shared baseline. Solid bars show observed activity; hatched bars distinguish an expected pattern.
- Motion
- Bars rise subtly from their baseline over a 5-second loop. Labels and transaction values stay still.
- Keep it honest
- Use fictional, illustrative data in marketing. Real assessments need sources, units, and stable values; animation must never invent a result.
These are the same illustrations used on the homepage. Match the One platform graphics with ceramic-white faces, cobalt gradients, shallow side edges, and soft contact and lift shadows. Use the theme control to review their light and dark treatments.
An identity card is matched to a business document as a scan checks the evidence. Shared colors and geometry create consistency; the subject determines the composition. Documents, scans, conversations, modular systems, and source connections each tell a different story. All sample data is fictional.
Choose the metaphor before the layout
Begin with the action being explained. Verification can scan a document; monitoring can isolate a signal; servicing can connect a conversation with a calendar. Do not default to a chart or a dashboard card.
A family, not a repeated template
Adjacent graphics must differ in silhouette, arrangement, and focal object. Repeated topics in different sections need a new viewpoint or crop. Reuse primitives and tokens, not the same finished composition.
Charts have a specific job
Use a chart when a quantitative relationship, trend, or comparison is the actual subject. Do not use bars or curves as a generic symbol for intelligence, automation, or AI.
One graphic, one idea
Use a few recognizable objects and one clear relationship. Keep essential explanation in the surrounding title and body. Avoid recreating an entire dashboard inside a card.
Give the composition a focal point
Combine a quiet supporting plane, a clear foreground object, and one strong blue emphasis. Use overlap and scale to establish depth. Background records may recede; the focal object and its labels stay crisp. Reserve warm accents for a labeled point of attention.
Motion supports the story
Loop decorative illustrations automatically while visible. Keep values and outer captions steady; a complete illustrative object may drift up to 5px to suggest depth. Pause work offscreen and show a complete static composition for reduced motion. Essential information must never depend on an animation.
| Graphic anatomy | Standard | Application |
|---|---|---|
| Frame and field | 20px media shell · original interior geometry | Round the presentation frame only. Inside artwork, preserve ceramic-white planes, cobalt focal faces, sharp edges, and existing lighting. No extra decorative backplate. |
| Material and depth | Shared ceramic / cobalt gradients · 2px contact + 12px lift shadow | Use the live illustration library as the source. Limit depth to a few meaningful layers. Fine edges stay sharp; shadows separate objects without becoming a glow. |
| Angular construction | Straight edges · shallow extrusions · purposeful diagonal joins | Derive the feeling from the logo’s solid faces and negative space. Keep the logo intact. Diagonals belong inside conceptual graphics, never on control hit areas. |
| Visual spacing | 24px inset · 8–12px internal gaps · 16–24px to caption | Keep a consistent 250–320px graphic height within a row. Recompose on mobile rather than scaling all the text down. |
| Lines and marks | 1px grid · 2–2.5px chart line · small signal dots | Use blue for the main series. Circles belong to data marks and proportion charts. The enclosing media shell uses the shared radius; the artwork remains unchanged. |
| Color and state | Canvas / surface / ink / muted / blue / signal blue | Use labeled warning and success pairs. Hatch or dash expected values so meaning does not depend on color. |
| Type and explanation | Inter for labels and captions · JetBrains Mono for short telemetry | Keep essential copy outside the illustration at the normal body size. Tiny sample labels are supporting texture, never the only explanation. |
| Data integrity | Observed, expected, and illustrative remain distinct | Use fictional sample records. Label units and periods when showing data; never imply a live decision or validated outcome. |
| Responsive delivery | HTML / CSS / SVG · shared illustration components | Preserve line sharpness, semantic colors, and aspect ratio. Provide an accessible description when the graphic adds information. |
| Animation cadence | 4–8s for decorative loops · 14s for background data | Use linear scans, traveling signals, or a 5px depth drift. Scenario twins may shift 10px to compare layers. No spinning radar, flashing alerts, springy bouncing, or changing financial claims. |
A recognizable financial story.
Identity documents, policy gates, square signal fields, source citations, conversation threads, portfolio twins, and embedded modules. Choose the object that explains the subject. Keep the story calm enough to understand at a glance.
Decoration without meaning.
Flat wireframes with no focal point, the same dashboard in every card, unrelated 3D objects, rainbow gradients, floating glass, giant glowing shields, ornamental diamonds, and dense mock interfaces that cannot be read.
Consistency comes from the visual grammar, not identical graphics. Reuse our color, geometry, typography, line weights, and motion behavior; invent the composition around the job each component explains.
Controls that make sense.
Rounded controls share the same borders, spacing, states, and behavior. These are working examples: try validation, keyboard tabs, theme switching, and the review dialog.
One primary action.
44px default height · 16–24px horizontal inset · 8px icon gap. A filled blue primary, an outlined secondary, and an unboxed tertiary. Focus remains outside the control boundary.
A complete view of the file
Use tabs for sibling views. Keep the selected state visible with an underline and a change in text weight.
Read-only values stay selectable and readable. Disabled fields are reserved for unavailable actions.
Keep personal data out of this example. 0/400 characters.
Standard review
Describe what changed, why it matters, and who should act next. A field’s label remains visible after a value is entered.
| Pattern | Required states | Behavior |
|---|---|---|
| Button / icon action | Default, hover, focus, pressed, disabled, loading | Keep labels visible while loading. Prevent duplicate submission. |
| Input / textarea / select | Empty, filled, focused, invalid, disabled, read-only | Persistent label, helper text, inline error; preserve entered data. |
| Checkbox / switch | On, off, focus, disabled | 4px checkbox for selection; rounded track and circular switch thumb for an immediate setting. |
| Tabs / navigation | Selected, hover, focus | Visible underline or left rail; keyboard navigation and semantic selected state. |
| Dialog / drawer | Open, pending, error, complete | Move focus in, contain it, support Escape, restore focus on close. |
| Toast / inline message | Success, information, warning, error | Announce without stealing focus. Keep critical errors until resolved. |
| Menu / popover / tooltip | Open, selected, focus | 16px rounded surface. Dismiss with Escape; use labels rather than tooltip-only instructions. |
Built for real work.
Dense information can still be calm. Keep the table, the selected record, and its evidence in one understandable workspace.
| Workflow | Status | Exposure | |
|---|---|---|---|
| EX-1043 | Monitoring | Current | $180,000 |
| EX-1044 | Verification | Needs evidence | $320,000 |
| EX-1042 | Underwriting | In review | $240,000 |
Loading
Reserve the final layout. Show progress text for work that takes time. Offer cancellation for long tasks.
Empty
No evidence has been added. Explain what belongs here and offer a specific next step.
Connection interrupted
Keep the previous result visible with a stale-data label. Explain the recovery action.
Exposure by workflow
Verification
32%
Underwriting
48%
Monitoring
72%
Servicing
40%
Direct labels, visible units, a consistent baseline, and square bars. Use a table alternative for precise values; never imply that a risk signal is a probability unless it is calibrated.
Make uncertainty visible
Show source date, freshness, missing fields, and unavailable values. A dash means unavailable; zero means zero. Never hide a stale result behind a green status.
Keep context during change
Filtering, sorting, and opening a record preserve the user’s place. For bulk actions, show the selected count, scope, and a review step for consequential changes.
Design the complete lifecycle
Each workflow needs initial, loading, partial, empty, error, recovery, and completed states. Include permissions, audit history, and a safe way to return to the prior view.
Intelligence with human control.
Amlok organizes evidence and surfaces signals. The institution owns its policies, customer relationship, and final decision.
01 / SOURCE EVIDENCE02 / AI ASSESSMENT03 / HUMAN DECISION
Illustrative · review required
Ownership evidence is incomplete.
The declaration names two owners. The registry excerpt confirms one. Request the missing ownership evidence before completing verification.
Ownership declaration · example page 2Registry excerpt · example record
| Requirement | Interface treatment |
|---|---|
| Evidence before confidence | Link each material claim to its source. Separate extracted facts, interpretations, and recommendations. |
| Honest uncertainty | State what is missing or contradictory. Do not invent confidence percentages or guarantee outcomes. |
| Explicit authority | Label AI-generated content. Consequential actions require an authorized reviewer and a visible confirmation. |
| Controllable execution | Show task progress, cancel/retry controls, and completed actions. Do not imply a task is finished while it is still running. |
| Auditable decisions | Record reviewer, time, policy version, evidence, overrides, and reason. Explain access restrictions without exposing protected data. |
One brand, every surface.
Use the same grid, typography, rounded surfaces, and precise signal graphics in a website, campaign, presentation, or research publication.
Capital moves.
Intelligence keeps up.
Your team owns the final decision.
WEB / PRESENTATION · 16:9Seeing risk
in the
relationships.
RESEARCH / SOCIAL · 1:1| Surface | Composition | Delivery |
|---|---|---|
| Website | One clear proposition, one primary action, evidence below | Shared 1,280px grid; 48px minimum desktop margins, 20px below 1,024px; responsive images; semantic headings. |
| Presentation | One message per slide; large chart labels; restrained signal accents | 1920 × 1080 / 16:9. Keep content 64px from edges. |
| Social / link preview | Short headline, mark, one visual field | 1080 × 1080 or 1200 × 630. Keep text within a 64px safe area. |
| Research / PDF | Structured headings, numbered figures, sources, and a clear methodology | Accessible text, selectable charts, publication date and version. |
| One column, concise copy, one primary action | 600px content width; 16px text; live text buttons and alt text. |
Case studies describe methodology, evidence, limitations, and what was retrospectively evaluated. Never describe planned validation as completed work, or use “trusted by” for institutions that are only research subjects.
Precise. Direct. Accountable.
Write like an experienced colleague. Explain the signal, its source, and the next useful action. Avoid hype and certainty that the evidence cannot support.
| Use | Avoid |
|---|---|
| Review the ownership evidence. | Unlock next-generation verification magic. |
| Three transactions need review. | Suspicious borrower detected. |
| The source is unavailable. Your previous result is saved. Retry the connection. | Something went wrong. |
| AI-generated assessment · awaiting review | Approved by AI |
| Your team owns the final decision. | Risk-free decisions, guaranteed. |
Names and headings
Always write Amlok in text, including headings, captions, animation labels, graphics, and metadata. Keep that capitalization inside uppercase labels. Only the logo wordmark is lowercase. Use sentence case for headings, buttons, and navigation; reserve uppercase monospace for other short category labels, IDs, and telemetry.
Clear actions and errors
Name the outcome: Review evidence, Request documents, Save changes. Errors explain what happened and how to recover without blaming the user.
Consistent financial language
Use explicit currency, timezone, units, and dates when ambiguity matters. Keep precision appropriate to the source. Do not present an estimate as an observed value.
Motion reveals information.
The scan is a linear discovery gesture. Transitions connect states and guide attention. Motion never becomes the work the user has to manage.
Amlok / SIGNAL FIELDN 04 / E 08
A measured reveal.
Start the sample to see the scan pass through a square field. Animation pauses outside the viewport. Reduced-motion preferences keep it static.
| Timing | Use | Constraint |
|---|---|---|
| 150ms | Hover, focus, selection feedback | No movement needed to indicate focus. |
| 200ms | Tabs, disclosure, small state transitions | Prefer opacity and a maximum 4px translation. |
| 400ms | Section or illustration entrance | Run once. Never delay access to content. |
| 4000ms | Optional marketing scan | In view only; pause control; static under reduced motion. |
| 4–8s / website graphics | Decorative chart and signal loops | Automatic in view; values stay fixed; static under reduced motion. Whole illustrative objects may move gently. See Website graphics for patterns. |
| 0ms / reduced motion | Immediate final state | Disable pulses, scans, parallax, and smooth scroll. |
Access is part of the design.
Target WCAG 2.2 AA. These requirements guide delivery; a design system alone does not certify an implementation.
Readable contrast
Normal text needs at least 4.5:1; large text 3:1. Meaningful controls and graphical boundaries need 3:1. Check every foreground/background pair, including disabled-adjacent helper text and dark mode.
Visible keyboard access
Use native controls and a 2px focus outline with a 3px offset. Ensure sticky headers do not hide focused items. Support Escape and return focus after overlays.
Comfortable targets
Prefer 44 × 44px targets. Use adequate spacing for compact controls; do not confuse the preferred size with WCAG’s 24px minimum target rule and its exceptions.
Reflow without loss
Test 320px width, 200% text resizing, and browser zoom. Preserve reading order and let content grow. Data tables may scroll within a labeled region.
Meaning beyond color
Use text, icon shape, and selected-state semantics together. Announce validation and asynchronous results. Provide descriptive labels and meaningful image alternatives.
User preferences
Respect reduced motion and forced colors. Do not put essential text in an image. Avoid autoplaying audio, flashing content, and decorative animation in task-critical views.
The avatar stays itself.
The existing Amlok knight is preserved. Its character, artwork, and presentation remain unchanged within the updated system.
Amlok / THE SIGNAL KNIGHT
A FRIENDLY GUIDEStrong enough to protect.
Strong enough to protect.
Warm enough to trust.
The knight brings a human face to Amlok. His shield carries the A as a sign of confidence, so the mascot and identity feel like one system.
01
Keep the character
Recognizable armor, plume, and blue visor.
02
Make the mark matter
The A becomes a bold, readable shield.
03
Use with purpose
Guide onboarding, explain security, and add warmth.
SHIELD / PRIMARYAmlok blue · white A
CHARACTER ROLE
Guide, protector, companion.
Use the full knight for human moments and the shield alone when space is tight. Keep the A centered, high contrast, and large enough to read.
SMALL-SCALE MARK
Silhouette first · details second
A system that stays coherent.
The same token source powers this guide, the website, and the downloadable stylesheet. Change a foundation once, then validate its effects across components and themes.
Download CSS tokensv2.1.1 · Reviewed 2026-11-03
Color35 tokens
| Token | Value |
|---|---|
--canvas | #ffffff |
--ink | #101828 |
--surface | #f5f7fb |
--surface-raised | #ffffff |
--line | #d7deeb |
--line-strong | #8290a8 |
--muted | #58657b |
--identity-blue | #052698 |
--blue | var(--identity-blue) |
--blue-secondary | #2567ff |
--blue-secondary-hover | #174fc9 |
--blue-deep | #1b4fe0 |
--blue-soft | #eaf1ff |
--blue-field | #1239b0 |
--navy | var(--blue-field) |
--hero-blue-middle | #1140c3 |
--on-brand | #ffffff |
--on-brand-muted | color-mix(in srgb, var(--on-brand) 85%, var(--blue-field)) |
--on-brand-line | color-mix(in srgb, var(--on-brand) 24%, transparent) |
--on-brand-surface | color-mix(in srgb, var(--on-brand) 8%, transparent) |
--signal-violet | #7b3ff2 |
--signal-violet-soft | #f2ebff |
--signal-orange | #f15a24 |
--signal-orange-soft | #fff0e8 |
--signal-green | #41b978 |
--signal-green-soft | #e8f6ee |
--success-bg | #e8f6ee |
--success-fg | #087b46 |
--warning-bg | #fff7e0 |
--warning-fg | #815600 |
--danger-bg | #fff0f0 |
--danger-fg | #b42336 |
--action-fill | #052698 |
--action-ink | #ffffff |
--focus | #2567ff |
Gradient6 tokens
| Token | Value |
|---|---|
--gradient-hero | radial-gradient(ellipse at 50% 42%, var(--blue-deep) 0%, var(--hero-blue-middle) 42%, var(--identity-blue) 100%) |
--gradient-orchid | linear-gradient(180deg, #FBEAF9 0%, #E8B9E5 100%) |
--gradient-periwinkle | linear-gradient(180deg, #D8E3FA 0%, #7198F4 100%) |
--gradient-lavender | linear-gradient(180deg, #BB9FE7 0%, #E2D7F4 100%) |
--gradient-lagoon | linear-gradient(180deg, #C2EFF4 0%, #0D775E 100%) |
--gradient-apricot | linear-gradient(180deg, #FCDCCF 0%, #F8713A 100%) |
Geometry12 tokens
| Token | Value |
|---|---|
--radius-xs | 4px |
--radius-sm | 8px |
--radius-control | 10px |
--radius-inner | 12px |
--radius-card | 20px |
--radius-panel | 24px |
--radius-media | 20px |
--radius-overlay | 16px |
--radius-pill | 999px |
--radius-signal | 50% |
--border-width | 1px |
--focus-width | 2px |
Surfaces8 tokens
| Token | Value |
|---|---|
--shadow-color | #101828 |
--border-subtle | color-mix(in srgb, var(--ink) 8%, transparent) |
--border-default | color-mix(in srgb, var(--ink) 12%, transparent) |
--edge-inset | inset 0 0 0 1px var(--border-subtle) |
--shadow-button | 0 1px 2px color-mix(in srgb, var(--shadow-color) 6%, transparent) |
--shadow-raised | 0 2px 4px color-mix(in srgb, var(--shadow-color) 3%, transparent), 0 12px 32px color-mix(in srgb, var(--shadow-color) 5%, transparent) |
--shadow-overlay | 0 4px 12px color-mix(in srgb, var(--shadow-color) 6%, transparent), 0 24px 64px color-mix(in srgb, var(--shadow-color) 12%, transparent) |
--shadow-navigation | 0 4px 24px color-mix(in srgb, var(--shadow-color) 4%, transparent) |
Layout21 tokens
| Token | Value |
|---|---|
--site-content-max | 1280px |
--site-min-gutter | 48px |
--site-gutter | max(var(--site-min-gutter), calc((100vw - var(--site-content-max)) / 2)) |
--site-content-width | min(var(--site-content-max), calc(100vw - var(--site-gutter) - var(--site-gutter))) |
--page-max | 1200px |
--section-gap | 64px |
--space-section | clamp(64px, 7vw, 112px) |
--space-section-content | 48px |
--space-heading-body | 24px |
--space-copy-actions | 24px |
--space-actions-media | 32px |
--space-media-caption | 16px |
--space-card-gap | 24px |
--space-card-inset | 24px |
--media-panel-height | 240px |
--control-height | 44px |
--control-height-compact | 40px |
--control-height-marketing | 48px |
--reading-width | 65ch |
--menu-panel-padding | 24px |
--menu-media-height | 292px |
Typography14 tokens
| Token | Value |
|---|---|
--font-sans | 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif |
--font-mono | 'JetBrains Mono Variable', ui-monospace, monospace |
--text-section-heading | clamp(36px, 4.4vw, 62px) |
--text-section-description | clamp(16px, 1.25vw, 18px) |
--text-risk-card-title | clamp(18px, 2vw, 28px) |
--text-body | 16px |
--text-secondary | 14px |
--text-label | 12px |
--menu-link-size | 14px |
--menu-title-size | 16px |
--menu-description-size | 12px |
--menu-label-size | 10px |
--leading-body | 1.6 |
--leading-heading | 1.08 |
Motion5 tokens
| Token | Value |
|---|---|
--motion-fast | 150ms |
--motion-base | 200ms |
--motion-slow | 400ms |
--motion-scan | 4000ms |
--ease-out | cubic-bezier(.16, 1, .3, 1) |
Layers6 tokens
| Token | Value |
|---|---|
--z-dropdown | 20 |
--z-sticky | 30 |
--z-navigation | 40 |
--z-overlay | 50 |
--z-notification | 80 |
--z-access | 100 |
Build with semantic tokens
Use canvas, surface, ink, muted, line, action, and status pairs. Keep theme overrides together. Avoid new one-off radii, colors, or spacing values for individual sections.
Review before adding a pattern
Document its purpose, anatomy, states, keyboard behavior, responsive behavior, and content rules. Reuse a current pattern when it solves the same problem.
Ship with evidence
Review design, content, and implementation together. Check desktop and mobile, both themes, keyboard, reduced motion, errors, and loading. Record exceptions and their reason.
| Governance | Standard |
|---|---|
| Foundation changes | Update tokens and this guide first. Review impact on all consuming components. |
| Component changes | Document anatomy, interaction, density, and states; include a working specimen. |
| Versioning | Major for breaking token/behavior changes; minor for compatible patterns; patch for corrections. |
| Ownership | Design owns visual rules; engineering owns behavior; content owners approve claims; accessibility is shared. |
| Version 2.1 | Hero-gradient header logo and primary header action, with matching downloadable logo and symbol SVGs. White identity remains available for dark fields. |
| Version 2.0 | Rounded interface system: shared radius hierarchy, pill marketing actions, subtle semantic edges, layered shadows, and updated control, media, and spacing guidance. Logo, palette, hero field, photography, and illustration compositions are preserved. |
| Version 1.5 | Shared marketing layout: 1,280px maximum content width, 48px desktop / 20px compact gutters, aligned header and sections, and a responsive width comparison in Layout & spacing. |
| Version 1.4 | Gradient exploration: five reference image-background fields, exact color-stop tokens, static grain, and an interactive Amlok comparison. The current homepage palette is preserved. |
| Version 1.3.1 | Hero radial gradient added to the color palette and downloadable tokens, with matching CSS and SVG fills. Applied to blue fields in Risk operations without changing the section layout or motion. |
| Version 1.3 | Dimensional website illustrations: ceramic surfaces, directional cobalt light, angular layers, subject-specific compositions, compact variants, and motion with a static reduced-motion state. |
| Version 1.2 | Cobalt blue replaces Deep navy in brand panels, identity previews, radar examples, and campaign samples. Ink remains #101828. Use --blue-field; --navy is a compatibility alias. |
| Version 1.1 | Website graphics library with shared live illustrations, composition rules, semantic colors, and continuous decorative motion. |
| Version 1.0 | Unified square geometry, semantic light/dark themes, signal/shield language, component states, enterprise workflows, and marketing templates. |
| Attribution | Existing third-party licensing is retained in THIRD_PARTY_NOTICES.txt. The Amlok system is defined by this guide, not by a reference-site palette. |