Brilliance, Unveiled.
The canonical reference for the VEILANCE design system. Every token, every component, every rule. Drop this in — get the entire brand identity in one fetch.
Colour System
Built in OKLCH for perceptually uniform steps, mapped to sRGB hex for delivery. Every token has a purpose — no decorative bloat. All pairings WCAG 2.1 AA verified.
Gulf Teal Range
The identity anchor. A five-step teal scale inspired by the deep waters of the Arabian Gulf.
Terracotta Accent
Three tokens enforce WCAG: fill for CTAs, hover for transient state, text-only token for small labels.
Sandstone Range (Light Mode)
Reserved for proposals, decks, email signatures, and print. Sand Mid is decorative only.
Light Surface Stack
Five explicit warm-cream surfaces, each ≥5 luminance units apart. Cards visibly lift off the page; sections sink; raised state lives on top.
Light Ink Scale (Text)
Four explicit text tiers, every value AAA-verified on every light surface. ink-3 clears AAA-large on every layer; ink-4 is AA-large only — reserved for hints and disabled states.
Accent Text on Light
Teal Light (#7FC4D4) is decorative-only on cream — at 1.57:1 on the page surface it is not legible text. Every accent text use flips to the deep Gulf Teal #0C4A5E (8.46:1 on page — AAA) via the cascade.
Neutrals & Text Tokens
Opacity Scale — Teal Light
Atmospheric effects use rgba(127,196,212, α) at deterministic stops. Mapped to --v-border-1 through --v-border-9.
Typography
Four type stacks each with a single job. Fraunces is identity-defining and NEVER above weight 300. DM Mono is ALWAYS uppercase with 3–5px tracking. Arabic surfaces use Dubai.
We architect the systems that automate, integrate, and transform your enterprise.
Fraunces 100 — the brand voice in display form. The ultra-thin weight is non-negotiable.
Outfit 300 — long-form body. Line-height 1.85 for readability. Used for descriptions, paragraph copy, and form input text.
Outfit 400 — emphasized body, nav links, outcome statements.
Outfit 500 — strong emphasis within paragraphs.
SEC.01 · CAPABILITIES · X: 0.00 Y: 0.00
CHOICE OF ARCHITECTURE
PROOF · 20+ YEARS · 7 DISCIPLINES · 100% FOUNDER-LED
IBM Plex Sans 300 — reserved for proposals, statements of work, technical specifications, and form labels that demand precision. Not the primary website body font.
نصمّم الأنظمة التي تُؤتمت، وتربط، وتُحوّل المؤسسة.
جسد فيلانس مهندس بصمت — يبني الأنظمة التي تشعر بها المؤسسة دون أن تراها. عشرون عامًا من الخبرة المتجذّرة في النسيج الرقمي لدولة الإمارات.
٢٠+ سنة · ٧ تخصصات · ١٠٠٪ بقيادة المؤسس
Type Scale
Heading at clamp 28–56px
Section Title
Subsection
Service Name
Long-form body copy at 17px.
Default body copy.
Small body for cards.
Spacing & Layout
A 4px scale powers every measurement. Sections use 80px vertical / 48px horizontal padding (60px / 24px on mobile). Containers cap at 1200px (max), 780px (readable), 580px (tight).
Containers
Breakpoints
Motion
CSS-only motion. No JavaScript animation libraries. Every continuous animation respects prefers-reduced-motion: reduce.
Durations
Easings
Atmospheric Loops
Elevation
VEILANCE is mostly flat — depth comes from layered atmosphere (grain, glow, grid) not box shadows. Use shadows only for CTAs and modals.
Radius & Borders
VEILANCE prefers crisp corners. Radius is reserved for very specific contexts (chip outlines, focus rings on toggles).
Z-index Scale
A small, deterministic z-index ladder. Don't invent new values in components — pick the role and reuse the token.
Wordmark
Fraunces Light (weight 100), uppercase, 10px letter-spacing at 18px nav size. ALWAYS in Fraunces — even on Arabic pages.
<a class="v-wordmark" href="/">VEILANCE</a> <a class="v-wordmark v-wordmark--sm" href="/">VEILANCE</a> <!-- 14px / 8px tracking --> <a class="v-wordmark v-wordmark--lg" href="/">VEILANCE</a> <!-- 24px / 14px tracking -->
V Mark
The crystalline V mark is the hero centrepiece. Always transparent background, breathing drop-shadow, three orbital rings. Minimum size 120px width.
<!-- Shorthand: brand mark + breathing glow + 3 orbital rings --> <v-vmark size="200px"></v-vmark> <!-- Or compose by hand --> <div class="v-vmark"> <v-orbital-rings></v-orbital-rings> <img src="veilance-vmark.webp" alt="VEILANCE"> </div>
Logo Kit
Every brand surface (browser tab, mobile home screen, OG card, transactional email) uses one canonical mark: the crystalline V derived from dist/veilance-vmark.webp. All scaled variants are exported alongside.
favicon.svg
favicon.png
apple-touch-icon.png
icon-192.png
icon-512.png
veilance-vmark.webp
<!-- Drop into every <head> — full kit (favicon + PWA + OG + Twitter) --> <link rel="icon" type="image/svg+xml" href="/dist/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/dist/favicon.png"> <link rel="icon" type="image/png" sizes="192x192" href="/dist/icon-192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/dist/icon-512.png"> <link rel="apple-touch-icon" sizes="180x180" href="/dist/apple-touch-icon.png"> <link rel="shortcut icon" href="/dist/favicon.ico"> <link rel="manifest" href="/dist/manifest.webmanifest"> <meta name="theme-color" content="#051E28" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#F7F4ED" media="(prefers-color-scheme: light)"> <meta name="color-scheme" content="dark light"> <!-- Open Graph + Twitter --> <meta property="og:type" content="website"> <meta property="og:site_name" content="VEILANCE"> <meta property="og:title" content="VEILANCE — Brilliance, Unveiled"> <meta property="og:description" content="Boutique IT consultancy. 20+ years, 7 disciplines, founder-led."> <meta property="og:image" content="/dist/og-image.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="/dist/og-image.jpg">
Social card · 1200×630
DIMENSIONS · 1200 × 630 · ASPECT 1.91 : 1
Asset manifest
dist/| File | Purpose | Dimensions |
|---|---|---|
veilance-vmark.webp | Canonical V mark — source of all derivatives | 1024 × 1024 |
favicon.svg | Vector favicon, scales to any size | 512 × 512 |
favicon.ico | Legacy fallback for older browsers | 32 × 32 |
favicon.png | Standard PNG favicon | 32 × 32 |
apple-touch-icon.png | iOS home-screen icon | 180 × 180 |
icon-192.png | Android home-screen / PWA | 192 × 192 |
icon-512.png | PWA splash, maskable | 512 × 512 |
og-image.jpg | Open Graph / Twitter social card | 1200 × 630 |
manifest.webmanifest | PWA install manifest | — |
veilance-icons.svg | Sprite of UI icons used by <v-icon> | — |
Hero use — V mark in context
Footer Lockup
Wordmark + 1px vertical divider + tagline. The tagline is "Brilliance, Unveiled." (EN) / "تميُّز يتكشّف" (AR).
Inputs
All form controls share one visual language: subtle teal-tinted background, 1px border, teal-light focus ring. Labels in DM Mono uppercase.
Checkbox & Radio
Custom-rendered squares (checkbox) and discs (radio) over a native input. Focus ring is the same teal-light outline used everywhere.
Toggle
A switch built on a native checkbox for screen reader correctness. The DM Mono label sits to the right (or left in RTL).
Badge / Chip / Tag
Three flavors of inline marker. Badge = status / count. Chip = removable selection. Tag = neutral metadata.
Avatar
Used sparingly. Initial in Fraunces 200 on Gulf Teal background, with a 1px Teal Light/8% border.
Spinner & Skeleton
Loading indicators. The shimmer on skeletons respects reduced-motion (frozen frame at 50%).
Progress
A single 2px bar — never tall, never neon. Indeterminate version uses a 30%-width slider.
Link
Teal Light by default. Underline reveal on hover (1px line, 300ms grow). The "quiet" variant inherits secondary text until hover.
Code & Keyboard
Inline code uses DM Mono on a 2% Teal Light tint. Keyboard hints add a 1px border at 8% Teal Light.
Open the panel with ⌘K or by calling Veilance.toast.show({title: 'Done'}).
/* veilance.css excerpt */
.v-btn--primary {
background: var(--v-terracotta);
color: #fff;
}
Card
Four surface levels (page, section, featured, footer). Three hover treatments (top bar, bottom bar, left bar). Featured cards add a grid texture overlay.
Enterprise Integration Architecture
Make disconnected systems operate as one.
Replace fragile point-to-point wiring with a governed integration layer that scales.
AI & Intelligent Automation
Replace manual volume with machine intelligence.
Classifiers, agents, and routing engines that move thousands of decisions without human touch.
Solution Architecture
Design the system before you build it.
Every engagement starts with a blueprint. Zero hours sold without one.
Process Automation
Eliminate every handoff that doesn't need a human.
Stat
Animated counter on viewport entry (1.6s ease-out). Locale-aware: numeric input animates; non-numeric strings render as-is.
Quote
Fraunces 100 statement with a 2px Terracotta accent bar (left in LTR, right in RTL). Emphasis word in Teal Light, never italic.
Our engagements don't add people. They remove manual work — permanently.
— VEILANCE Architecture Practice
Overline
A small DM Mono label preceded by a 24px Teal Light rule. Used to title every section. Use .v-overline--no-rule to drop the rule.
Every Engagement. Same Sequence.
A small DM Mono label preceded by a 24px Teal Light rule.
Blueprint Marks
Corner ticks, coordinate markers, crosshair, grid textures, dimension lines, blueprint dividers. All decorative (carry aria-hidden="true").
Tabs
Underline-reveal tab strip. Arrow keys / Home / End for keyboard nav. RTL-aware (Left/Right arrows swap).
Discovery — frame the problem, identify the constraints, surface every hidden assumption.
Design — the blueprint that makes transformation inevitable.
Build — the architecture rendered in working systems.
Operate — the handover, the runbooks, the long tail.
Accordion
Single-open by default. Add multi attribute for multi-open. + / − marker animates.
Modal
Wraps a native <dialog>. Click-outside closes; ESC closes; focus is trapped natively. Backdrop is Deepest at 85% with 8px blur.
Tooltip
Hover / focus reveal. DM Mono uppercase. Used for icon-only buttons and abbreviated metadata.
Toast
Transient notification, anchored bottom-right (bottom-left in RTL). Auto-dismisses after 4 seconds. Call Veilance.toast.show({...}).
Pagination
Square 36×36 cells. Bordered, no fills. Current page tinted with Teal-Light/6%.
Table
DM Mono headers, Outfit body. No vertical rules. Row hover at 3% Teal Light. Use <table> semantics.
| Discipline | Outcome | Lead-time |
|---|---|---|
| Enterprise Integration | Make disconnected systems operate as one | 6–10 weeks |
| AI & Automation | Replace manual volume with machine intelligence | 8–14 weeks |
| Solution Architecture | Design the system before you build it | 2–4 weeks |
Stepper
Interactive process stepper. Click or arrow-key any node. Progress line + ring states (idle / active / current).
Discover
2 WEEKSFrame the problem, identify the constraints, surface every hidden assumption. We don't start at "what should we build?" — we start at "what's actually broken?"
- Stakeholder map & intent doc
- Current-state architecture
- Risk & constraint register
┌── stakeholder ──┐ ┌── intent ──┐
│ CFO · CTO · CEO │──│ outcome │
└─────────────────┘ └────────────┘
│
┌────▼────┐
│ root │
│ cause │
└─────────┘
Design
3 WEEKSThe blueprint. Every integration point named, every data contract defined, every failure mode considered before code touches a repo.
- Solution architecture doc
- Data & integration contracts
- Decision record
┌──────────┐ ┌──────────┐
│ CRM │───▶│ Bus │
└──────────┘ └────┬─────┘
│
┌────▼─────┐
│ AI svc │
└──────────┘
Build
6–10 WEEKSArchitecture rendered in working systems. Continuous delivery, every change observable, every assumption testable.
- Production-grade integrations
- Test & observability suite
- Runbooks
deploy ├── stage ✓ ├── canary ✓ └── prod ▸
Operate
ONGOINGHandover, runbooks, the long tail. The architecture stays sound because someone designed for the day VEILANCE walks away.
- Operational handover pack
- Knowledge transfer sessions
- Optional retainer
▸ alert thresholds ▸ incident playbook ▸ owner rotation ▸ SLO targets
Atmosphere
The cinematic layer: particles, ambient glow, scan line, orbital rings, scroll indicator, film grain. All decorative, all aria-hidden, all gated by reduced-motion.
Hero
Cinematic centrepiece. V mark + orbital rings + ambient glow + 18 particles + scan line. Heading uses Fraunces 100 with Teal-Light emphasis. One CTA only.
We architect the systems that automate, integrate, and transform your enterprise.
VEILANCE is an architecture-led IT consultancy. We design the systems the enterprise feels but never sees.
20+ YEARS · 7 DISCIPLINES · 100% FOUNDER-LED
Start a ConversationCapability Strip
Five disciplines on Gulf Dark, separated by 1px Teal-Light/6% verticals. Hover tints to Gulf Teal/12%.
Stats Bar
Four counters on Gulf Dark, counter-animated on scroll. Use capability proof only — never client counts or project metrics.
Thesis Divider
Gulf-Teal bar with grid texture. One Fraunces-100 sentence, centered, Teal-Light emphasis word.
The answer is not more people, more tools, or more budget. It's architecture.
Quote Section
A single statement between the Stats bar and Services. Pair the .v-quote-block molecule with a Deepest section.
Our engagements don't add people. They remove manual work — permanently.
— Yamen Hmidan, Founder
Outcomes
Three outcome cards on a 2px-gap grid. Top hover bar in Terracotta. Outcome labels in Terracotta Text.
Eight overlapping platforms reduced to a single integration layer — same outcomes, a tenth of the surface area.
Monthly ticket triage handled by AI agents. Human queue collapsed to true edge cases.
Procurement workflow re-architected. Four approvals, zero email chains, zero spreadsheets.
Services
Featured (Gulf-Teal) card spans full width, followed by 2×3 secondary grid. Left hover bar (Teal Core, scaleY).
Enterprise Integration Architecture
Make disconnected systems operate as one.
Replace fragile point-to-point wiring with a governed integration layer that scales.
AI & Intelligent Automation
Replace manual volume with machine intelligence.
Power Platform & Portals
Turn manual processes into self-service platforms.
Solution Architecture
Design the system before you build it.
Process Automation
Eliminate every handoff that doesn't need a human.
Identity & Compliance
Govern access, enforce policy, meet UAE requirements.
Digital Strategy & Roadmaps
Align technology investment to business outcomes.
Engagement
Four engagement models on a 4-column grid. Bottom hover bar in Teal Core. Use the icon slot for a two-letter glyph.
Design
A focused architecture sprint to design the system before code touches a repo.
Build
End-to-end delivery of the architecture into production.
Oversee
Architectural oversight of an internal or partner-delivered programme.
Rescue
A failing programme stabilised, re-scoped, and re-architected.
Problem (Cinematic)
Three full-viewport scenes — one per C-suite role. Each has a giant Fraunces-100 background keyword at 6% opacity and a unique atmospheric animation.
CEO · OPERATING DRAG
Your organisation moves slower than your competitors. The cost isn't a line item — it's compounding.
Every quarter you defer the architecture conversation, the organisation pays again in cycle time and lost optionality.
CTO · INTEGRATION DEBT
Twenty platforms speaking nineteen languages. The interest payments are now larger than new feature work.
You inherited a landscape, not an architecture. We design the layer that makes it operate as one.
CFO · MARGIN BLEED
Operating cost climbs year-over-year. Every "transformation" makes the run-rate worse, not better.
Automation that doesn't replace manual volume isn't automation. It's another system to maintain.
Approach
Use the interactive <v-stepper> molecule on a Deepest section. See the Stepper component above for the full markup.
Contact
Two columns on Deepest: text + form. Email input stays LTR even in RTL pages.
Architecture is the conversation. Allocation comes next.
Tell us what's actually broken. We'll respond within 48 hours.
RTL & Arabic
Set lang="ar" and dir="rtl" on the root. The DS auto-applies the Dubai font, removes uppercase, reduces letter-spacing to 0.5px, and bumps tiny labels to 12px.
Seven Disciplines. One Layer.
Architecture-led delivery, with a single integration plane stitching every system together.
20+ YEARS · 7 DISCIPLINES · 100% FOUNDER-LED
سبعة تخصصات. طبقة واحدة.
منهج قائم على الهندسة المعمارية مع طبقة تكامل واحدة تربط كل الأنظمة.
٢٠+ سنة · ٧ تخصصات · ١٠٠٪ بقيادة المؤسس
Accessibility
VEILANCE targets WCAG 2.1 AA across every documented pairing. Decorative elements are aria-hidden. Every animation has a prefers-reduced-motion escape.
Focus Indicators
Touch Targets
Reduced Motion
When the user has reduced-motion enabled:
- All animations/transitions clamp to 0.01ms.
.v-revealclasses snap to their final state.- Particle field is suppressed entirely (no DOM nodes created).
- Stat counters jump to final value without easing.
- Scroll behavior reverts to
auto.
Semantic Structure
Voice
Quietly confident. Outcome-focused. Regional authority. Capability proof, never client counts.
Quietly Confident
VEILANCE doesn't shout. Every statement is backed by substance. The confidence comes from 20 years of doing the work — not from marketing copy.
Precise, Not Technical
We speak to decision-makers, not developers. The language is clear, direct, and outcome-focused. Jargon is reserved for the implementation — never the conversation.
Regional Authority
VEILANCE isn't learning the Gulf — it grew up here. Geography is communicated through context and credibility, not explicit labels.
Impact Over Activity
The voice always points to outcomes, never hours. We measure in processes eliminated, decisions accelerated, complexity dissolved.
Words We Use
Words We Avoid
Tone Spectrum
Don'ts Gallery
A reference of brand violations. Every example here is a violation — do not copy these patterns.
Architecture That Works
Heavy Fraunces breaks identitySection 01 · Capabilities
DM Mono must be uppercaseDecorative-only colour fails contrast.
Decorative tokens never become textSmall terracotta text fails AA (3.54:1).
Use --v-terracotta-text (6.12:1) insteadautomate, integrate, transform
Emphasis = colour only, never italicفيلانس
Wordmark stays Fraunces, even in AR"Trusted by 47 enterprises across the GCC."
Capability proof only — no client dataQuickstart
Three integration paths. Pick the one that matches your stack.
A · Plain HTML / CDN
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],100;9..144,200;9..144,300&family=Outfit:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;500&family=DM+Mono:wght@300;400;500&family=Cairo:wght@300;400;500;700&display=swap"> <link rel="stylesheet" href="/dist/veilance.css?v=1779882879"> <script type="module" src="/dist/veilance.js?v=1779882879"></script> <body class="v-body" data-theme="dark"> <a href="#main" class="v-skip-link">Skip to content</a> <!-- your content --> </body>
B · npm
npm install @veilance/ds # In your entry file: import '@veilance/ds/css'; import '@veilance/ds/js';
C · Tokens only
<link rel="stylesheet" href="/dist/veilance.css?v=1779882879">
/* Then use the tokens directly */
.my-card {
background: var(--v-surface-section);
color: var(--v-on-primary);
border: 1px solid var(--v-border-5);
font-family: var(--v-font-display);
}
Theme & Language
// Switch theme
Veilance.setTheme('light'); // or 'dark'
// Switch language (and direction)
Veilance.setLang('ar'); // sets lang="ar" dir="rtl"
Veilance.setLang('en'); // sets lang="en" dir="ltr"
// Show a toast
Veilance.toast.show({
title: 'Brief Submitted',
message: 'We\'ll respond within 48 hours.',
variant: 'accent',
duration: 4000,
});
Web Components API
All components are framework-agnostic custom elements. Light DOM only — your CSS still applies, your selectors still work.
Changelog
<v-daterange> field widened to fit full YYYY-MM-DD dates, .v-table-wrap promoted to global DS utility, hero CTAs wrap on narrow viewports, last unwrapped instruction-page table fixed. Page-wide overflow sweep at 375px is now clean.<v-daterange> web component — replaces the prior static markup. Popover calendar, first click sets start, second click sets end, click-before-start restarts, range highlight, Clear / Escape, dispatches v-daterange:change.<v-back-to-top> web component — reusable across any DS page, fades in past 400px scroll, smooth scroll, RTL + reduced-motion aware.html { overflow-x: hidden }. Swapped hidden → clip on html + body. Refreshed displayed version in topbar and essence tag.VEILANCE — Brilliance, Unveiled.
[email protected] · DUBAI, UAE
Intent · Chart · Density
Semantic intent tokens (success / warning / info / danger) for application status. A 7-tone chart palette for data viz. Density modes (compact / comfortable / spacious) for power-user surfaces.
Semantic intent
Chart palette · 7 tones
Density modes
Set [data-density="compact"] on the root or any subtree to scale every control 0.8× — for power users / data-heavy surfaces. spacious goes the other way (1.15×) for touch-first / public-facing screens.
WCAG AAA Contrast Mode
Opt-in via <html data-contrast="aaa">. Lifts every text token to ≥ 7:1 on its surface, thickens the focus ring to 3px, and bumps brand CTAs to weight 500. Brand marketing surfaces stay on the default palette for visual hierarchy; app surfaces (forms, dashboards) declare AAA.
Sample heading
Tertiary text on Deepest at 6.4:1 — AAA-large only.
Sample heading
Tertiary text bumped to ≥ 7:1 — AAA for body.
Icon System
100+ icon sprite shipping in dist/veilance-icons.svg. Reference any icon by name via the <v-icon> element. Stroke is currentColor so icons inherit text colour. Sizes: sm (14), default (18), lg (22), xl (32).
<v-icon name="search"></v-icon> <v-icon name="bell" size="lg"></v-icon>
Alert
Inline contextual messaging. Distinct from toast (transient): an alert sits inside the page flow and persists until dismissed or addressed. Four intents map to brand-aligned semantic colours.
Empty State
A first-class component, not a placeholder. Combines illustration ring, title, supportive copy, and a primary CTA.
Every engagement starts with a 2-week architecture sprint. The blueprint comes before the allocation, the allocation comes before the code.
OTP Input
Six-digit one-time-code input. Paste-aware, keyboard-navigable, numeric-keypad-aware on mobile, autocomplete-hinted for SMS-delivered codes.
Slider
Native range input themed to the brand. Teal-light thumb with focus glow ring, hair-thin track. Touch-target compliant on mobile.
Combobox
Searchable select with keyboard navigation. Filters the option list as you type. Use for any select with more than ~7 options.
Command Palette
⌘K / Ctrl-K opens. Linear-class command surface — type-to-filter, arrow-key nav, grouped actions, shortcut hints.
Calendar & Date Picker
A first-class calendar primitive paired with a popover-anchored date picker. Locale-aware weekday labels, keyboard navigation, today marker, selected state.
File Upload / Dropzone
Drag-and-drop or click to upload. Renders default illustration + copy when content slot is empty.
Drawer & Sheet
Drawer slides in from the trailing edge — for detail panels, filters, quick-edit forms. Sheet slides in from the bottom — for mobile actions, modals, and contextual menus.
Engagement details
Quick-edit panel. Most app surfaces should default to a drawer over a modal — preserves page context while still being clearly modal in attention.
Choose action
Charts
SVG-based chart primitives, themed with the chart palette. No external dependencies — pure custom-element renderers covering area, line, bar, and sparkline. Pair with Recharts/Chart.js if you need scatter / radar / heatmap.
Last 30 days:
Advanced Data Table
Wrap a <table> in <v-data-table> to get sort, filter, and row-selection wiring. Sticky header by default. Click any sortable column header to sort.
| Engagement | Discipline | Owner | Started | Status | |
|---|---|---|---|---|---|
| Mubadala · Integration Layer | Enterprise Integration | Y. Hmidan | 2026-03-12 | Active | |
| DEWA · AI Triage | AI & Automation | R. Bahri | 2026-04-02 | Active | |
| Etihad · Sourcing Portal | Power Platform | Y. Hmidan | 2026-02-18 | At-risk | |
| Mashreq · Identity Refresh | Identity & Compliance | L. Khoury | 2026-01-05 | Paused | |
| RTA · Process Automation | Process Automation | Y. Hmidan | 2026-05-01 | Active |
Form Composer
A composition system: .v-form wraps .v-form-sections, each with a head + grid of fields, and an action bar at the end. Auto-collapses to single column on mobile.
More Atoms
Button group, toggle group, number stepper, rating, color picker, tag input, secret field, input group, status indicator, banner, cookie banner.
More Molecules
Avatar group · Status dot · Comment thread · Timeline · Notification list · Filter panel · Tree view · Code block · Integration card · Kanban · Wizard · Workspace switcher.
Boundary 2 conflicts with the current ESB schema. Suggest re-shaping the canonical envelope before Sprint 05.
- Architecture sprint kicked off
- Blueprint v1 published
- Stakeholder review
- Build kickoff
Mobile Patterns
Brand the same way across web, webapp, and mobile native-feel surfaces. Safe-area aware, touch-target-compliant, platform-flavoured via data-platform="ios" or data-platform="android".
Reviewed the integration blueprint. Three boundary changes — pinging @rana to validate.