Design & UX
Visual identity, documented design system with tokens and reusable components, modern UI, WCAG AA accessibility. For products that don't need a tutorial.
The context
In 2026, users compare your product to Notion, Linear, Stripe and Vercel — even if your industry has nothing to do with theirs. The UX bar is higher than ever: 3 seconds to understand, 8 seconds to engage, and every friction translates to dropping conversion rates.
But the real problem isn't « we need prettier design ». It's that most products are designed screen by screen, with no system. Result: 12 versions of the same button, 8 shades of grey, components that look alike without being identical. At scale, this is unmanageable — for designers and devs alike.
Our approach: a documented design system from day one. Tokens (colors, spacings, typo) declared once, used everywhere. Figma components synced with code. WCAG AA accessibility validated on every delivery. You get a product that scales visually — and a dev team that doesn't struggle to integrate.
100%
WCAG AA
Contrast, focus, ARIA validated on every delivered screen
1×
Source of truth
Figma tokens synced with your code via Style Dictionary
47
Avg components
Reusable library delivered with variants & states
3 wks
Avg timeline
From first mockup to complete dev handoff
What we design
From visual identity from scratch to enterprise design systems, we pick the scale that matches your stage.
Logo, palette, typo, tone.
Logo (3 directions, 1 finalised), WCAG AA accessible palette, typography (Inter, Geist, Söhne…), iconography, tone guidelines. Brandbook PDF + exported assets (SVG, PNG, favicon, social cards). For startups starting out or rebranding.
Tokens + documented components.
Tokens (colors, spacing, typo, radius, shadow) declared in Tokens Studio. 30-80 Figma components with variants, props, states (hover, focus, disabled). Storybook if needed. Code sync via Style Dictionary. For scale-ups with existing products.
Native iOS HIG + Material 3 design.
Pixel-perfect mockups following Human Interface Guidelines (iOS) or Material 3 Expressive (Android). Native components adapted to your brand. Dark mode, dynamic type, voice over accessibility. Dev specs delivered per screen.
Dashboard, tables, complex forms.
Data-dense dashboards, filterable tables, multi-step forms, empty states, loading, error. Consistency across 30+ screens. Responsive desktop/tablet/mobile. Carefully crafted empty states (often forgotten).
Diagnostic + iteration on existing product.
Full UX audit (Maze or user tests), heatmaps, problematic paths identified. Screen-by-screen redesign with testable hypotheses. Iterations based on product metrics, not taste.
Illustrations, motion, visual presence.
Custom illustrations (brand-specific style), motion design for landing page, lightweight Lottie animations, consistent social presence. For products that want a recognisable visual character.
Our approach
We start by understanding your users and product, not by drawing. Form follows function — always.
2 h workshop: understand the audience, the competitor they already use, identified frictions. Audit existing product if redesign. Define target « visual vocabulary » (3 inspiration references, 3 anti-references).
Create 2-3 distinct visual directions on key screens. Internal test on your team. Direction selection, adjustments until approval. Foundation tokens definition (palette, typo, spacing scale).
Build the design system (components, variants, states) in parallel with actual screens. Batch iterations, review with you every 3-4 days. Figma clickable prototype on critical paths. Accessibility validated per screen.
Technical specs per screen (exact spacing, states, animations). Asset export (SVG, PNG, Lottie). Tokens exported as JSON for direct integration (Tailwind config, CSS variables). Q&A sessions with devs during integration.
Our toolkit
No fashion. Here's what we use on 100% of our projects — and why.
Design & prototyping
Figma · FigJam · Tokens Studio
Figma remains the standard. Tokens Studio syncs Figma tokens ↔ JSON for code. FigJam for workshops and user flows.
Components & handoff
Storybook · Zeroheight · Specify
Storybook for coded components. Zeroheight for design system docs on business side. Specify to pipe tokens into the CI pipeline.
User research
Maze · Lookback · Useberry · Notion
Maze for large-scale tests (15-50 users). Lookback for 1-1 interviews. Notion centralises insights and design decisions.
Motion & illustrations
After Effects · Rive · Lottie · Procreate
AE for final motion design. Rive for interactive animations (state machine). Lottie for lightweight assets. Procreate for hand-drawn illustrations.
Accessibility & contrast
Stark · Contrast · WAVE · NVDA
Stark integrated in Figma for real-time WCAG check. Contrast macOS app for ratios. WAVE for tests on code. NVDA/VoiceOver for screen reader tests.
Typography & icons
Inter · Geist · Söhne · Lucide · Phosphor
Inter by default (free, screen-optimised). Geist (Vercel) very clean. Söhne premium if budget. Lucide for icons (consistency + extensible). Phosphor for variety.
Measurable guarantees
WCAG AA
100% of screens
Minimum 4.5:1 contrast, visible focus, correct ARIA. Validated via Stark + screen reader tests before delivery.
≤ 4 days
Iteration turnaround
You send feedback, we deliver corrected version within 4 business days max. No ghosting.
1×
Source of truth
Single master Figma file, tokens synced with code. No design ↔ implementation divergence.
30 d
Iterations included
30 days after final delivery, minor adjustments included (colors, spacings, micro-copy). Beyond: hourly rate.
料金
抽象的なパッケージではなく、お客様のコンテキスト（範囲、複雑性、期限、制約）に合わせて見積もります。やりたいことを3文でお書きください — 48営業時間以内に確定見積もりをお返しします。
48営業時間以内に返答 見積もりを依頼 →メールの準備ができました 🚀
メールクライアントを開き、すべての情報を入力済みです。送信をクリックすると、チームが 24 営業時間以内に返信します。
