Clarity.
With depth.

Status and scope

Working system v0.5 · 17 September 2026. The name and source logo are settled. Glass, refraction, strong contrast, light and dark modes are the selected direction. Exact colors, dimensions, type assignments and component rules below are proposed standards for review. The guide is a live reference, not a finished production library or an accessibility certification.

This identity belongs to the independent Form & Phase studio. Its promise is broad ownership of digital product challenges across web, mobile and connected systems. A visitor should feel understood, see a credible path forward, and know who will carry the work through.

Five design principles

1. Make room for the idea. Each section gets one primary message. Group related elements and allow space between different thoughts. A large viewport does not need more content.
2. Make the structure legible. Align copy, controls and imagery to a clear grid. Hierarchy comes from size, position and spacing before borders or effects.
3. Give light a purpose. Refraction expresses clarity, layers and changing perspective. Use it in atmosphere, selected controls, and supporting surfaces. Reading and interaction stay crisp.
4. Connect craft to capability. A careful interface signals a careful practice. Forms, keyboard behavior and small-screen layouts deserve the same attention as the opening image.
5. Keep the invitation human. Use direct, considerate language. Help people explain their needs without first learning our terminology.

Page-level restraint

Use one dominant visual moment, one warm accent chapter and one strong close as a starting rhythm. Case-study references occupy a compact supporting section on the homepage. Product screenshots belong to contexts where they explain a decision. No giant interface presentation sets the studio's overall identity.

Review test: Can someone describe what this studio helps with after the first screen? Can they find a specific capability within one further step? Does the page still work if every decorative image is removed?

Source assets

The supplied folded F and outlined upright Inter Tight 800 wordmark are the source of truth. The master SVG is preserved in the asset bundle. Horizontal and symbol-only arrangements reuse those paths; they are proposed applications of the approved geometry. Black/ink and white variants are included.

Spacing and alignment

Use x = one quarter of the symbol height as minimum clear space around a lockup. In a horizontal lockup, the gap between symbol and lettering is about one quarter of symbol height. Preserve supplied proportions and optical relationships. The minimum size is a starting recommendation, not a substitute for checking the fold on the actual display.

Keep the mark upright, solid and single-color. Use ink on light surfaces and white on dark surfaces. On the bright accent field use ink. Do not redraw the fold, typeset a replacement wordmark, squeeze letter spacing, rotate, outline, add a shadow, or fill the mark with a glass texture. The material imagery may echo a fold without becoming a replacement logo.

The logo is an image; headings and paragraphs remain live text. A linked logo has the accessible name “Form & Phase — home.” Decorative repeated logos use an empty alternative. There is no need to announce the symbol and lettering separately.

Message hierarchy

• Headline: an idea about possibility, progress or confidence. Usually 4–10 words. It should earn attention without promising unlimited capability.
• Supporting sentence: explain how strategy, design and technology come together. Usually 18–30 words.
• Category cue: make web, mobile and connected systems discoverable within the opening or the next section.
• Specific section: name the actual subject and what it helps a client do.
• Action: name the next destination or action in 2–5 words.

Editorial rules

Use Form & Phase consistently, with the ampersand. Use sentence case for headings, buttons and navigation. “Design systems” is a capability, not a capitalized product name. Use “we” for the studio's voice and describe the actual people and collaboration model accurately.

Favor concrete verbs: understand, shape, design, build, connect, test, launch, improve. Explain specialist terms when they matter. Avoid “world-class,” “cutting-edge,” “seamless solutions” and unsupported leadership claims. Technical specificity belongs in relevant expertise pages rather than a hero inventory.

Do not promise response times, delivery dates, results, certifications or support coverage until they are established. Samples in this guide are proposed copy, not claims about existing operations. Case studies distinguish actual scope, status and supported outcomes.

Copy limits as design tools

Aim for one heading, one short paragraph and one main destination in a homepage teaser. A service introduction can support two short paragraphs. Body text should remain comfortable without manually inserted line breaks. Use intentional line breaks only in short display copy and recheck every breakpoint.

Color roles

Color values are functional commitments. Select the semantic role first. A decorative orange field and an accessible orange text link need different values. Click a swatch to copy its value; the light/dark selector at the top updates the semantic palette.

Distribution

For a light page, begin with roughly 80% neutral canvas, 15% imagery or supporting surfaces, and 5% accent. This is a visual balance, not a pixel quota. One full-width accent section can change the proportions. In dark mode, charcoal remains the dominant field and light is concentrated around text, controls and the optical edges.

Keep success, warning, error and information colors in feedback contexts. Orange is a brand/action color, not an error color. Never distinguish status through hue alone: pair it with a label, icon or description.

The bright accent is deliberately preserved for its energy. Small white text on #F04B24 is not an approved pairing. Use ink on that field, or use the deeper action color behind white text. Do not use opacity to make essential text quieter; select the secondary text token.

Light mode

Pearl and paper form a calm open field. Ink establishes sharp hierarchy. Glass is visible through refraction, peach caustics, delicate edges and selective shadows. Whitespace stays bright; long passages remain high contrast.

Dark mode

Use charcoal with a slight natural warmth rather than pure black everywhere. White typography and silver optical edges establish the contrast. Smoked glass is transparent, not a gray opaque shape. Warm vermilion highlights occupy small areas; they do not turn the whole surface orange.

Theme behavior

Offer System / Light / Dark. Default to the operating-system preference. Persist an explicit choice and allow a return to System. Update the native color-scheme so selects, scrollbars and other browser controls fit. Apply the saved theme before first paint. Listen for system changes while System is selected.

Theme is semantic: canvas, surface, text, boundary, action and status tokens change together. Do not invert an entire page with a CSS filter. Use the dedicated light/dark material assets and the appropriate logo variant. Keep layout, reading order, content and functionality identical.

Exceptional surfaces

The bright orange field keeps dark ink in both themes. Its button can use an ink surface and white label. A dark editorial chapter on a light page should adopt the complete dark token set locally; changing only its background leaves links and fields at risk. Logo and icon variants must follow the local surface, not just the global setting.

The specimens in this guide use the selected global theme. The two material studies shown here intentionally show both treatments side by side.

Approved text pairings

The values below are computed using the WCAG relative-luminance formula for solid colors. They do not certify text on changing photography, transparency or video. Test the darkest or lightest background actually behind the text and test each interactive state.

Target at least 4.5:1 for normal text, 3:1 for large text, and 3:1 for necessary control boundaries/graphics against adjacent colors. Large text is at least 24 CSS px regular or approximately 18.67 CSS px bold. The internal preference is 4.5:1 for all meaningful text where practical. Aesthetic thinness does not excuse inadequate legibility.

These thresholds follow WCAG contrast guidance and non-text contrast. Keep calculations unrounded when deciding pass/fail; display two decimal places only for readability.

Focus and overlays

Use a 3 px text-colored outline with a 3 px offset on normal themed surfaces. On exceptional accent or image backgrounds, add a contrasting separation edge and verify both the ring and the control boundary. Recheck the actual composite. For dense content use an opaque local surface beneath text rather than adding text shadows to compensate for a busy image.

Families and weights

Use Inter Tight for display headings and short editorial titles. Use Inter for body copy, navigation, form labels and utility information. The logo remains outlined Inter Tight 800. Keep font files local and include their licenses. The bundled Latin variable WOFF2 subsets support the guide's English content; expand coverage for other languages.

Rhythm and rendering

Use tracking of −0.02em for display and hero headings, −0.015em for standard headings, −0.01em for smaller titles, and normal tracking for body and controls. Shared tracking tokens keep the guide and studio pages aligned; avoid additional negative overrides that make letterforms touch. Uppercase eyebrows may use 0.12em; keep them brief and readable. Do not use a letterspaced eyebrow above every heading. It must add useful context.

Headlines can be light in feel without using ultralight font weights. Favor 400, not 200. Large type sits beside meaningful empty space. Do not shrink body copy to make a composition fit. Adjust the layout or edit the content.

Use rem-based fluid sizes with minimum and maximum values. Allow headings and controls to grow with text zoom. Avoid fixed heights on text containers. Use text-wrap: balance for short headings and natural wrapping for body copy. Do not uppercase a paragraph or use ultra-tight negative leading.

Semantic hierarchy

One descriptive H1 per page. H2 introduces major sections; H3 introduces content within them. Visual size is a style role, not a reason to skip heading levels. Use tabular numerals for comparison tables and numerical outputs. Essential copy must remain live text.

The max width is the content width, excluding outer gutters. The wide container caps at 90 rem. At a 1440 px viewport, fluid 4vw gutters leave approximately 58 px on each side. Use width: min(calc(100% - 2 * var(--fp-gutter)), var(--fp-container-wide)) and automatic inline margins. Backgrounds may span the viewport while content stays aligned.

Responsive grid

• Below 640 px: 4 conceptual columns, 24 px outer gutters, 16 px gaps. Most reading and forms use a single column.
• 640–1023 px: 8 columns, 32 px gutters, 24 px gaps. Use two-column content where it still reads comfortably.
• 1024 px and above: 12 columns, fluid 48–96 px gutters subject to container max width, 32 px gaps.
• Typical editorial split: 5/7 or 4/8. Main reading column should not exceed 65 ch. Three service columns collapse to a stack when each would be narrower than 240 px.

Breakpoints respond to content pressure. Navigation can collapse earlier than the main grid. The container lab previews the proportion at different specimen widths; it is not a substitute for browser testing.

Full-bleed and contained sections

Reserve full bleed for atmosphere or a deliberate change in chapter. Keep form controls on predictable surfaces. A work teaser uses a contained horizontal panel on desktop and a short stacked panel on mobile. It does not become a giant image.

Images crop with an intentional focal point. Text never overlaps an uncontrolled caustic or bright edge. On a narrow screen, move or reduce decorative imagery before shrinking the message. Preserve source order when columns collapse.

Base scale

Use the 4 px base scale with deliberately limited steps: 0, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 160, 192. Use rem values in implementation so user font preferences remain respected. One-off values require a clear layout reason.

The parent layout owns the spacing with gap. Reset default typography margins and use a stack utility. A section may need several stacks where different relationships require different distances.

Density levels

Display: homepage hero and closing invitation. Few elements, broad separation. Editorial: service and approach pages. Comfortable reading, repeatable section rhythm. Utility: forms, navigation, component documentation. Compact enough to scan, never below target-size requirements.

Do not make every gap equally large. An eyebrow separated by 80 px from its own heading loses association. Conversely, three unrelated sections separated by 24 px feel crowded even if each has a large headline. Space expresses grouping.

Use a single hairline only when adjacency remains unclear after spacing. Avoid outlining every block. Dense technical documentation can use more separators than the marketing homepage.

Surface hierarchy

1. Canvas: the base reading field. Most content lives here without a box.
2. Subtle surface: light differentiation for a compact case-study gateway or related content.
3. Raised surface: white in light mode, charcoal-green in dark mode. Used for inputs, dialogs or a cohesive component specimen.
4. Overlay: functional popover or modal. Use a clear boundary and a restrained shadow.
5. Atmospheric glass: visual material in a hero, accent chapter or closing edge. It carries no essential content.

Shape tokens

Do not apply the pill shape to every object. An editorial section is usually just a section. Radius is proportional to the object's size and role; keep nested contours consistent.

Lines and shadows

Use 1 px quiet dividers for optional separation and 1 px strong borders for necessary input boundaries. Use 2 px for selected boundaries and the dedicated 3 px ring for keyboard focus. The proposed floating shadow is 0 16px 48px rgb(25 28 25 / .10) on light surfaces. Dark overlays use a stronger boundary plus a restrained dark shadow; a black shadow alone will not separate dark layers.

Glass treatment must retain a solid-color fallback. If a translucent header is used, its text contrast must work across every background beneath it. The expanded studio header has an ivory or charcoal gradient that fades into the hero. The compact header uses a 75–76% themed veil with backdrop blur and a stable text color; review the actual composite at each section. Keep long-form reading and the overall form canvas calm. Individual fields may use the optical treatment with a stronger inner tint and a clear boundary.

Anatomy and hierarchy

A button changes something; a link goes somewhere. A navigation CTA remains an anchor even when it looks like a button. Use a native button for form submission, a dialog trigger or an expandable menu. Default non-submit controls to type="button".

One primary action per decision group. A homepage can repeat its main invitation at the opening and close. Avoid several equally emphasized buttons competing within a hero. Destructive intent is a contextual modifier, not a sixth core variant. Explain the consequence in its surrounding context; color alone cannot do that work.

Dimensions

Use an 8 px gap between label and icon. Labels stay in sentence case. Allow height to grow when a translated label wraps. On narrow screens, actions can stack at full width; preserve their priority and document order. Icon-only controls are circular, with equal width and height: 40 px small, 48 px default, or 56 px large. Keep the same circle through hover, focus, pressed, loading, and disabled states. Center the loading indicator in place of the icon and preserve the accessible name. Guide utility controls use the 40 px size.

Interaction contract

• Hover: deepen the light-mode action fill; lighten the dark-mode fill. Secondary uses a stronger neutral fill; outline and ghost receive a subtle surface. Text/link keeps its underline and strengthens it on hover. Pointer hover must never reveal the only available label.
• Pressed: use the active color. Avoid a large scale animation; a 1 px translation is sufficient.
• Keyboard focus: 3 px text-colored ring with a 3 px offset. On high-contrast fields use a contrasting two-tone ring. Focus must remain visible and unobscured.
• Loading: keep the label and width stable, add a spinner, set aria-busy, and prevent duplicate activation. Announce the result through a nearby status region.
• Disabled: native disabled, a subdued solid fill and explicit context where needed. Do not disable submit simply because required fields are empty; allow validation to explain what is missing.

Variant behavior

Primary leads with the action color. Secondary uses a quiet neutral fill and no visible outline. Outline has a transparent background and a functional border. Ghost has no resting fill or border and receives a subtle surface on hover or press. Text/link has no surface and stays underlined at rest; a text-styled button still performs an action, while an anchor navigates.

Use the same default 48 px target and 16 px label for the first four variants. Standalone text actions retain a comfortable target; links within prose follow the line height and inline-link spacing rules. Disabled states keep the variant recognizable and prevent activation. A disabled navigation link should be replaced by plain text with an explanation, rather than leaving an apparently working anchor.

The loading specimen simulates local work only.

Implemented state matrix

The component lab uses the shared Button component to compare primary, secondary, outline, ghost, and text/link across default, hover, pressed, focus, loading, and disabled states. Switch the specimen between light, dark, and accent surfaces. Hover, pressed, and focus are held visually for comparison; loading and disabled use the component behavior. The accent surface uses ink primary actions and pale secondary actions, with ink text links. Disabled outline, ghost, and link variants retain their distinct surfaces.

Site navigation

Use Expertise · Approach · Design Systems · Work · Studio, followed by Let's talk. A wide navigation can show all destinations; collapse when the content no longer fits comfortably, rather than squeezing type and gaps. The studio logo returns to the homepage. Mark the current page with aria-current="page" and a visible non-color cue.

On mobile, a clearly labeled Menu button opens the navigation. Reflect its state with aria-expanded and connect it to the navigation using aria-controls. A modal drawer contains focus, closes with Escape, and restores focus to its trigger. A simple in-flow disclosure needs no focus trap. Do not mix those two behaviors.

Link treatment

Body links are underlined at rest. Long service rows can use a trailing arrow and an underlined title on hover and keyboard focus; their link semantics remain native. Name the destination: “Explore application engineering” is more useful than repeated “Learn more.” External links generally open in the same tab. If a new tab is necessary, say so in the accessible label.

The first keyboard stop is “Skip to content.” Keep sticky navigation compact and give anchor sections enough scroll-margin-top to clear it. A breadcrumb belongs on deeper pages where it explains location; it does not need to occupy the homepage.

Footer navigation

The footer is a complete closing composition: an inviting statement, one clear contact action, the studio identity, grouped service and studio links, and real legal/contact details. Reserve generous space above the utility row. Do not invent an address, client list or social account to make the footer look complete.

Shared field anatomy

Order each field as label → control → hint → error. Keep the visible label above the control, 8 px away. Place help 8 px below, and separate complete field groups by 24 px. A placeholder illustrates a format; it never replaces the label. Use real label associations and connect help and error text through aria-describedby.

Use the correct input type and autocomplete token: email, tel, name, organization. Never force a numeric keyboard for values such as postal codes that can contain letters or leading zeros. Keep editable text at 16 px or above to avoid unwanted small-text interactions on mobile browsers.

State behavior

Default: a solid themed surface and a functional boundary. Hover: strengthen the border. Focus: a clear outer focus ring; do not remove the boundary. Filled: retain the same type and layout. Error: show a specific message, a visible error boundary and aria-invalid="true". Read-only: keep text selectable and focusable where appropriate. Disabled: only for unavailable controls with an explanation; they are excluded from native form submission.

Use (optional) for optional information. Keep required information to a minimum and explain the convention above the form. Show a prefix or suffix only when it clarifies the expected unit. Password controls need visible show/hide labels, appropriate autocomplete and no prohibition on paste; the marketing contact form does not need a password field.

Use a fieldset and legend for related checkboxes or radios. Keep options short and give each a comfortable 44 px interaction row. A Radix Select starts with an instructive placeholder when there is no sensible default. Its actual items have nonempty values. Avoid selecting a consent option in advance. Do not turn every choice into a large pill or tile.

A switch is appropriate for an immediate preview preference. A checkbox is appropriate for a value that will be submitted with a form. Labels describe the setting positively and stay stable when its state changes.

The controls use Radix Checkbox, Radio Group, Select, Switch and Label, styled with the studio tokens. The extra examples expose mixed and disabled checkbox states. Radix provides the interaction model; the studio still owns labels, grouping, contrast and clear guidance. These local specimens do not save or transmit information.

Inquiry pattern

Start with name, email and a short project description. Organization, timing and service interest can be optional. Avoid mandatory budget bands unless they materially help route the inquiry. Use visible, concise privacy information linked to the actual policy before a production submission is enabled.

Validation sequence

1. Keep the first view calm. Do not mark empty fields invalid before interaction.
2. Validate on submit. After a field has shown an error, update its error as the user corrects it.
3. Show a short summary of errors near the start of the form with links to the affected controls. Move focus to the summary on a failed submit.
4. Attach a specific inline error to each invalid control. Preserve every entered value.
5. During a real request, prevent duplicate submission and expose the pending state. Keep the button label meaningful.
6. Announce success only after the server confirms receipt. A network error keeps the values and offers a retry. Confirmation should explain what happens next without inventing a response-time promise.

Client validation is a convenience; the server must independently validate and protect the real endpoint. Abuse protection, rate limits, request size limits and data retention belong in the production implementation. Do not put sensitive inquiry content in URLs or analytics.

Local specimen: this form exercises error handling and confirmation only. Nothing is sent or stored. Its confirmation deliberately says “Demo complete.”

Feedback levels

• Inline hint: prevents uncertainty near the relevant control.
• Inline error: names the specific issue and how to resolve it.
• Status panel: confirms a meaningful outcome in context. Keep it on screen when the next step depends on it.
• Toast: a lightweight, non-critical acknowledgment. It must not be the only place an important error appears.
• Page state: provides a recovery route when a whole view is unavailable.

Use a label or icon alongside semantic color. Success means an operation completed, not merely that a user clicked a button. Warning means a decision needs attention; error means the intended action did not complete. An informational panel should not resemble an urgent alert.

Use role="status" for non-urgent dynamic updates and reserve role="alert" for time-sensitive interruptions. Static examples do not need live-region roles. Avoid repeatedly announcing changing counters. A loading skeleton reflects the expected layout and is hidden from assistive technology; expose a single loading status instead. Respect reduced motion.

Empty, unavailable and failed

An empty state explains what will appear and offers a relevant first action. An unavailable state tells the person whether it is temporary. A failure state preserves context and offers retry or an alternative contact route. Do not display fabricated data to fill an empty section.

The Radix Toast example persists until dismissed so its text is never lost to a timer. The notification region is reachable with F8; it has a visible close action and supports rightward swipe dismissal. Keep essential errors in their original context.

Disclosure

Use Radix Accordion for the shared disclosure pattern. Its trigger names the hidden content, exposes the expanded state, and leaves expanded content in document flow. Simple standalone content can still use native details and summary. Essential service meaning, prices or required form instructions should not depend on opening a disclosure.

Tabs

Tabs switch related panels in the same context. Use a tablist, tabs with aria-selected and panel associations. Only the active tab participates in the Tab sequence; Left/Right arrows and Home/End move between tabs. For panels that load slowly, activate with Enter or Space rather than on focus. If content is long or should be linked independently, prefer separate pages or headings.

Dialog

A modal dialog is appropriate for a bounded interruption that benefits from focus. Use Radix Dialog with its Trigger, Portal, Overlay, Content, Title, Description and Close parts. Give it a clear title and visible close action. Radix manages focus containment, Escape dismissal and focus return to the trigger. Choose initial focus deliberately. Do not open a modal automatically on page load. Large editorial content deserves a page.

The specimen uses Radix Tabs with immediate local panels and a Radix Dialog. Keep the library-provided roles and keyboard model instead of attaching a second custom tab-navigation handler. Marketing navigation and full contact flows do not need to be forced into a modal.

Service gateway

Use an editorial row: short category, outcome-oriented heading, one sentence, and a clear link. A fine rule can separate rows. The homepage can group the offer into three larger narratives—define, create, evolve—while the Expertise page exposes the six service areas. Avoid a dense wall of equal cards before the studio promise has landed.

Compact work reference

A homepage work teaser may include a small crop, project name, scope and one verified outcome. Keep the media bounded; two compact examples are enough to invite deeper reading. If a metric is unavailable, explain the actual problem and contribution. Never invent clients, awards, testimonials, scale, team size or numerical results.

Technical depth signal

Show a small artifact, method or principle linked to a dedicated destination: an architecture decision, a token system, an accessibility workflow, a release checklist. Label conceptual examples as examples. A decorative code block is not evidence of engineering quality.

Card rules

Use a card when a collection forms one meaningful object. Prefer a single title link for a card; avoid nested interactive targets or a giant click area around unrelated controls. Equal cards should align by content structure without clipping text. A homepage should alternate open editorial sections with occasional contained objects.

Code and data

Technical documentation uses semantic code blocks with horizontal scrolling when necessary. If line numbers are shown, each number and its code line share the same row and line-height. Blank lines occupy a real row. Do not distribute a separate gutter with flex spacing; that can break the relationship between numbers and lines. Hide decorative line numbers from assistive technology and copying.

Material direction

Use clear folded glass, optical edges, soft caustics and a restrained warm reflection. The silhouette can echo the logic of the F without tracing the logo. A composition needs a clear light source, a coherent material and a quiet area for text. Favor one memorable form over many floating objects.

Light mode: near-white and warm-paper atmosphere, dark live typography, bright transmitted light and precise darker edges. Dark mode: charcoal atmosphere, pale live typography, restrained luminous edges and deeper transparent planes. A dedicated dark render is included; do not invert a light photograph with CSS.

The studio hero uses a new paired light/dark optical composition. Each source is 1672 × 941 px, delivered as 800, 1280, and 1672 px WebP variants. The generation request specified 4K, but the returned files are native 1672 px; no upscale is presented as added detail. The PNG masters and exact prompts are recorded in ASSET-PROMPTS.md. The earlier guide imagery remains a reference specimen.

Use the hero artwork once per page. Deeper sections use scalable CSS planes, light paths, and translucent surfaces. Images contain no essential message. Mobile crops leave enough quiet space for the live copy.

Composition guardrails

• Let roughly half to two thirds of a hero remain visually quiet. This is a starting composition rule, not an opacity target.
• Keep display type on a stable solid or near-solid field. Validate the actual composite if text touches an image.
• Use a separate image layer with pointer-events: none; it must not block controls.
• Use restrained lens dispersion at edges. Avoid rainbow gradients, glowing interface panels and visual noise across every section.
• Prefer one still frame at launch. If motion adds meaning later, use a static fallback, respect reduced motion, and budget its cost.

The working optical stack

The glass and light lab uses the same components as the studio pages:

1. Tinted body: theme-specific transparency establishes clear or smoked glass.
2. Softened backdrop: blur and saturation let the background influence the surface.
3. Directional rim: a masked 1 px edge catches nearby pointer light.
4. Halo: a separate masked ring, softened with a 4 px blur, blooms around the same edge. The surface fill remains steady.
5. Content: live text and icons sit above the decorative layers and remain sharp.

Primary buttons use a deep vermilion fill with white text in both light and dark modes, with a pale inner edge and coral outer glow. The accent surface retains an ink primary fill. Buttons have no inset shadows; the feathered rim, halo, and small outer shadow provide separation. The same halo treatment applies to primary, secondary, outline, fields, glass panels, and the scroll cue. Ghost/text-link actions stay flat. Fields use a stronger inner tint, visible borders, and normal native focus. Selected supporting panels use GlassSurface; large passages of reading remain on stable backgrounds. Disabled controls become matte.

Smooth gradient falloff

The working studio uses the corrected bidirectional clothoid helper to generate its gradient stops at build time. Forward and reverse curves soften the appropriate ends of each transition. The same falloff shapes the hero and navigation fades, static material gradients, and directional edges. Circular edge gradients mirror their two sides so both the highlight and its fade join smoothly. Runtime pointer movement updates only angle and intensity. Source provenance is recorded in the gradient helper notes.

One directional light source

A mouse pointer defines one light position in viewport coordinates. Only controls, fields, and glass panels within 96 px of the pointer respond, measured from their bounds. Intensity eases from zero at that threshold to full strength at the element. The image, header gradient, decorative planes, and control faces remain static; only the rim and halo follow the light.

OpticalLighting batches updates in one animation frame using cached bounds and visible-element observation. There is no continuous animation loop or React render per pointer move. The rim and halo enter over 160 ms, remain visible while the pointer stays nearby, and fade out over 650 ms when it leaves. Touch/coarse input, reduced motion, fixed-light selection, and the initial view retain the resting appearance. Dark neutral controls catch a pale near-side edge; light and accent controls emphasize the darker opposite edge. A supplied edgeColor overrides this with a colored near-side highlight. Primary buttons lighten the inner rim toward white while retaining the supplied color in the outer halo; other controls share their color across both layers. Primary defaults to coral; the lab also shows a custom blue outline button.

The effect is an optical illusion built from CSS, not physical ray tracing or geometric distortion of live content. Unsupported backdrop filtering and reduced transparency use solid surface fallbacks. Forced-color mode suppresses decorative glass. Review text, boundaries, and focus on the actual composed background; solid token contrast reports cannot certify translucency.

Icons and photography

Lucide line icons at 20–24 px and consistent stroke weight support interaction. Use existing icons rather than drawing approximate substitutes. Pair unfamiliar icons with labels; decorative icons use aria-hidden="true". A logo is not an icon-font glyph.

Use real studio or process photography only when there is an authentic subject and permission to publish. Product imagery belongs in a specific project story. Generic smiling-team photography should not imply a team or workplace that does not exist.

Keep movement small: 1–2 px for action feedback, up to 16 px for an editorial entrance. Do not animate large blurs, layout height on every scroll frame or body text tracking. Content must be visible before JavaScript enhancement. A failed animation cannot leave a blank page.

Honor prefers-reduced-motion: reduce: remove decorative movement, use immediate view changes and retain static focus feedback. Avoid scroll hijacking, cursor replacements and automatic parallax. Any long-running decorative motion needs a pause control or a still alternative. Use transform and opacity where animation is useful, and inspect the result on ordinary mobile hardware.

The written guide keeps its original material still. Studio controls and selected surfaces respond only to a fine mouse pointer. The lab provides fixed-light and reduced-motion switches. Changing the theme does not animate the entire page through intermediate contrast states.

The studio navigation changes between two fixed heights over 240 ms after a scroll threshold. It does not continuously scale with scroll distance, and its fixed positioning prevents content reflow. Reduced motion removes this transition.

Full-screen opening and overlay navigation

The homepage opening uses min-height: 100dvh, with 100svh fallback, and includes the navigation area within the same viewport composition. Content can grow naturally on short viewports or at larger text sizes. The glass down-arrow stays near the lower edge, scrolls to the capability introduction, and transfers keyboard focus to that section. Reduced motion uses immediate scrolling.

Studio navigation overlays each page at the top. The desktop inner height is 104 px, contracting to 72 px beyond 48 px of scrolling. Mobile uses 88 → 68 px. It expands again within 16 px of the top to avoid jitter around the threshold. A translucent veil, blur, and edge appear in the compact state. The header remains fixed and never pushes the content. Interior page content reserves enough top space, while its background extends behind navigation.

Homepage sequence

Sequence can change with real content. Do not add every service as a separate large homepage section. The page's job is to establish a coherent promise and provide routes into depth.

Secondary templates

Expertise: outcome-led opening → six service areas → how disciplines connect → relevant proof → invitation. Each service detail page includes who it helps, typical challenges, activities, useful deliverables and related capabilities.

Design systems: why consistency and speed matter → audit and foundations → tokens and components → accessibility and documentation → governance and adoption → relevant artifacts. This is a substantive destination, not a color-swatch gallery.

Approach: how uncertainty becomes a plan → collaboration and decision-making → design and engineering working together → quality and release → ongoing evolution. Security, accessibility and performance are continuous responsibilities.

Work: a compact index with meaningful summaries. A case study explains context, constraints, contribution, decisions and supported results. Keep client permissions and attribution clear.

Studio: point of view, actual people and working model. Contact: approachable invitation and a short, working inquiry flow. The full strategic sitemap is included in the downloads.

Responsive rules

At 320–479 px, use one column, 24 px page gutters where space permits, a compact navigation and naturally wrapping titles. At medium widths, split only content that still reads comfortably. At large widths, cap body measures instead of stretching paragraphs across the display. Keep meaningful content order in the DOM; CSS should not create a different reading sequence.

A hero uses padding and a content-driven minimum height, not a fixed height that clips at zoom. The visual can move below the copy on mobile. Tables may scroll inside a labeled region when their two-dimensional relationship matters. Ordinary paragraphs, controls and navigation must reflow without horizontal page scrolling.

Footer composition

Close with a large but short invitation, then a quieter navigation layer. Use the logo at a deliberate scale, a real contact route, grouped links, copyright and policy links. Repeat the primary CTA only when it clarifies the ending. The footer should feel like the final chapter of the identity, with enough space to let the page land.

Built pages: the rules in context

The system now has 16 working studio pages, starting with Home, Expertise, Approach, Design Systems, Work, Studio, and Contact. Every main navigation link opens a page. The content map records the service routes and full topic coverage. The system lab compares their shared components and content behavior. These pages put the system into practice.

The homepage uses a broad promise, three connected capability groups, a dark quality chapter, a contained design-system example, the working approach, compact routes into depth, and a strong accent invitation with a full footer. Expertise leads to dedicated service pages with scope, decisions, outputs, and connected disciplines. Approach explains the full lifecycle; Quality & Care makes the cross-cutting practices visible. Work begins with the approved studio-initiated system project. The contact page combines a short invitation with a validated inquiry form, delivery feedback, and a copyable brief if sending fails.

At 800 px the navigation and large editorial splits collapse. Service summaries stack before the three-column measure becomes too narrow. Form width remains capped at 36 rem. Hero copy and controls use natural height; the mobile material crop moves toward the lower portion. The content lab lets reviewers extend copy and compare narrow and wide measures without hiding overflow.

Use 3–8 words for a hero headline, 15–30 words for opening support, and 20–45 words for each service summary as editing targets. Longer approved content should wrap and grow. These limits must never become text clipping.

Baseline and house standards

Target WCAG 2.2 AA for production. Normal text needs at least 4.5:1 contrast; large text needs 3:1. Necessary control boundaries and state indicators generally need 3:1 against adjacent colors. Decorative dividers are a separate role. See the W3C contrast guidance and non-text contrast guidance.

The studio's 40 px minimum button/input height is a house design choice. WCAG 2.2 AA's target-size criterion uses 24 × 24 CSS pixels with defined exceptions; do not mislabel our preferred size as the AA requirement. See target size, minimum.

Keyboard focus must not be entirely hidden by author-created content, including sticky navigation. Our stronger practical aim is to keep the whole focus indicator visible. See focus not obscured.

Review a complete path

• Keyboard: reach every action in a logical order; see focus; operate menus, tabs and dialogs; escape temporary layers; restore focus.
• Screen reader: check landmarks, headings, names, roles, selected states, field hints, errors and dynamic feedback. Review with VoiceOver and another platform when shipping broadly.
• Zoom and reflow: inspect text at 200% and content at a 320 CSS-pixel viewport; check 400% browser zoom on a suitable desktop viewport. No clipped controls or lost information.
• Color: inspect both themes, error states, images behind text, grayscale distinction and system high-contrast modes.
• Motion: turn on reduced motion; all tasks and content remain available.
• Forms: submit empty, invalid and valid values; simulate server rejection and network failure in production; keep user input intact.
• Touch: make targets comfortable, allow page scrolling, avoid hover dependencies and test a real mobile browser.

Radix Primitives, native text controls, semantic HTML and a coherent focus model reduce the amount of custom behavior that must be maintained. Automated checks support manual review; they cannot establish conformance on their own. This guide's contrast calculations describe the listed solid pairs, not every possible future composition.

Three layers

1. Primitive: raw palette, spacing and type values—paper, ink, 24 px.
2. Semantic: intent—canvas, text, action, error. These resolve separately in light and dark themes.
3. Component: a use of those decisions—48 px control height, 8 px input radius, 24 px field gap.

The downloadable JSON is a documented project schema with value and type fields; it is not presented as a validated Design Tokens Community Group interchange file. The CSS exposes --fp-* properties. Prefer semantic variables in component styles so a dark-mode change does not require rewriting every component.

.field-control {
  min-height: var(--fp-control-height);
  color: var(--fp-text);
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-control);
}
.field-control:focus-visible {
  outline: 3px solid var(--fp-focus);
  outline-offset: 3px;
}

The guide ships local Latin-subset Inter and Inter Tight WOFF2 fonts and their open font licenses. Add the appropriate character subsets before publishing content in additional languages. Use font-display: swap, reserve image dimensions, and keep the logo outlined while all content text remains selectable.

Component foundation: Radix Primitives

Use Radix Primitives as the shared behavior layer for complex controls. Form & Phase owns the styling through semantic tokens and the five button variants. Primitives are unstyled React components, so the visual identity remains ours. See Radix introduction.

The guide includes local React mounts for these interactive specimens. The 25 reference chapters remain static HTML. src/controls.jsx contains the components, radix-controls.css contains their theme-aware styles, and controls.js is the compiled browser bundle. Dependencies are pinned in package-lock.json; rebuilding requires npm ci followed by npm run build. The shipped output is ready to view without running a build.

Use Radix's data-state, data-disabled and data-highlighted attributes for styling. Retain the semantic roles and event handlers supplied by each primitive. When composing a trigger with asChild, use an element that accepts the passed props and ref. Keep dialog and select content in their portals to avoid clipping. Portals in this guide inherit the root theme; a future nested theme must provide a correctly themed portal container.

Loading is application state: Radix does not know whether an API request is pending. Keep the button label stable, prevent repeat submission, and report the real result. The five variants—primary, secondary, outline, ghost, text/link—remain the visual contract. Inputs retain browser autocomplete and validation semantics. Production forms still need server validation and request handling.

Radix is a foundation for accessibility work, not a substitute for reviewing the finished composition. Verify labels, keyboard paths, focus return, contrast, touch targets and error messages on the assembled page. Detailed references: Select, Checkbox, Dialog, Toast, Slider.

Performance intentions

Aim for a fast still composition before adding animation. Use responsive modern images, defer offscreen media and avoid loading a whole motion framework for a decorative entrance. The studio hero supplies responsive 800/1280/1672 px WebP sources and preserves the native PNG masters. Both light and dark variants are local; use the source dimensions as the actual resolution ceiling.

Production targets: LCP ≤ 2.5 seconds, INP ≤ 200 milliseconds and CLS ≤ 0.1 at the 75th percentile of visits, evaluated with real-user data. These are targets, not measured results for a future site. See Core Web Vitals.

Boundaries of this artifact

Basis is a reference with interaction demonstrations, accompanied by the studio website and a shared component lab. It does not include a contact backend, analytics, CMS, or a published component package. Guide-specific documentation layouts remain separate from the shared studio components.

Shared page implementation

src/system/components.jsx supplies the studio pages and lab with Button, Field, text inputs, Radix selections, Disclosure, TabGroup, Modal, Alert, shared layout, navigation, and footer. COMPONENTS.md documents their props, behaviors, and boundaries. src/studio.jsx contains the homepage, contact, and shared shell; src/site-pages.jsx and src/service-content.js supply the deeper pages, and src/site-map.js owns route metadata; src/lab.jsx is the interactive component review area.

The build generates tokens.css from tokens.json, compiles browser bundles, prerenders HTML, and versions style/script references to avoid stale previews. It also syncs the written guide's token inspector. Light, dark, and accent surfaces inherit semantic roles from their nearest theme; image and logo selection follow that same scope. Portaled controls currently use the root theme.

The contact page uses production-facing inquiry copy. It validates required fields, links an error summary to the fields, guards repeat submission, and confirms success only after a configured endpoint accepts the inquiry. Failed sends retain entries and offer a copyable brief.

Component definition checklist

Each production component should document its purpose, anatomy, variants, sizes, responsive behavior, states, keyboard contract, accessible name, content limits and usage examples. New variants need a real use case. Prefer extending an established pattern over creating a visually similar one with slightly different spacing.

Before approving a page

1. The first screen communicates a clear studio promise and next step.
2. The content has one primary message per section and enough space between different ideas.
3. The correct semantic colors work in both themes; real composites pass contrast review.
4. Typography follows the hierarchy and body copy stays within a readable measure.
5. Controls show hover, keyboard focus, active, pending, disabled and error states where relevant.
6. The page works at narrow widths, enlarged text, keyboard-only navigation and reduced motion.
7. Every client, metric, testimonial and team claim has a source and permission to publish.
8. The final invitation and footer provide a clear, working route forward.

Versioning

v0.1 establishes the visual direction and five button variants. v0.2 adopts Radix Primitives for shared interactive controls and adds mixed/disabled selection specimens. v0.3 applies the system to three studio pages, adds reusable React components and a state lab, generates CSS from JSON tokens, and introduces a scoped accent theme. v0.4 adds the optical material stack, directional pointer light, full-screen opening, overlaid compacting navigation, and responsive hero assets. v0.5 expands the sitemap into 16 studio pages, connects the complete delivery story, and adds the studio-initiated case study. See DECISIONS.md for the implementation decisions. Record accepted changes to palette, typography or behavior in a decision log. Use patch versions for clarifications, minor versions for compatible additions and a major version when a change requires coordinated updates across the site.

The homepage, service pages, utility pages, and contact form now exercise the shared system. Review them together: the homepage tests presence and breathing room; the service page tests depth; the contact page tests clarity and interaction. Refine composition, live copy, and material strength using these working pages.

Included in the bundle

• Component source: React/Radix examples, themed component CSS, pinned dependencies and a prebuilt local browser bundle.
• Design guide: the complete prose specification in Markdown and this interactive HTML reference.
• Tokens: light/dark semantic values in JSON and reusable CSS custom properties.
• Identity: the preserved outlined master, horizontal, stacked and symbol SVGs in ink and white.
• Material: paired hero artwork, responsive WebPs, native PNG masters, exact prompts, and CSS optical surfaces.
• Typography: local font subsets and their license files.
• Strategy: the earlier site outline, included as strategic background.
• Verification: a concise record of the checks performed on this artifact and the contrast calculation report.

Primary references

Inter typeface · Inter Tight · WCAG 2.2 quick reference · Core Web Vitals · Lucide

Form & Phase pairs open composition, confident scale, and considered pacing with its own identity, materials, voice, and service structure.

Working pages and implementation files

• Homepage · Expertise · Approach · Design Systems · Work · Studio · Contact
• Content map and coverage
• System lab: directional glass, button matrix, inputs, selections, motion, and content stress examples.
• Artwork provenance and prompts.
• Component contracts and decisions from the pages.
• Expanded contrast report: 78 solid pairs across light, dark, and accent themes.