Irozon exists to make digital work feel calm, precise and considered.
This page documents the visual language behind irozon.se so anyone building an Irozon surface — a page, a component, a deck, a client asset — can work from the same source of truth. It is a reference for developers and designers, not a page meant for client or public viewing.
Irozon is calm, precise and forward-looking.
Premium through reduction, not decoration.
Official assets only — never recreated.
docs/logo/ is the master reference folder for every official logo asset
and is the single source of truth for this section. The variants below are the actual
files found there — nothing here is redrawn, recolored, cropped or approximated. The
live navigation renders its own production copy of the horizontal lockup from
src/assets/icons/irozon-logo.svg, confirmed identical in content to
docs/logo/irozon-long.png below — just exported as a scalable vector for
production use, not a competing variant.
Also present in docs/logo/: a wordmark-only mark with no symbol (irozon-text.png
plus dark/light variants) and the source Illustrator file
(irozon-branding.ai). Not tiled above to keep this section a reference, not
a gallery of near-duplicates.
Correct vs. incorrect use
Use the supplied file as-is: original proportions, original colors, clear space around it.
Never stretch/distort the aspect ratio, and never apply arbitrary colors, shadows, outlines or bevels — shown here only to illustrate the mistake.
Logo rules
- Never recreate the Irozon wordmark by typing "irozon" in Manrope, Chalet, or any other font — the wordmark is artwork, not type.
- Never stretch or distort the logo, and never change its aspect ratio.
- Never apply arbitrary colors, or add shadows, outlines, glow or bevel effects.
- Never modify the internal spacing between the symbol and the wordmark.
- Prefer the official supplied variants over recoloring the SVG/CSS at runtime.
Clear space
Maintain clear space around the logo approximately equal to the height of the symbol's inner ring/mark. This is the current digital usage rule for this design system, not a historical specification — the supplied assets don't include formal clear-space measurements from the original brand guidelines.
Minimum size
Full lockup: don't render narrower than roughly 100–120px wide on screen. Symbol only: don't render smaller than roughly 24×24px — below that the inner ring of the mark stops reading clearly. This is current digital guidance based on the supplied assets' legibility, not a historical spec.
White, Ink and Green carry the system. Lime is a rare accent.
Click any swatch to copy its hex value.
Core
Neutrals
Functional
Lime → Green, 135°
linear-gradient(135deg, #9BE15D 0%, #02C685 100%)
Color philosophy
- White, Ink and Irozon Green are the dominant system — they should carry almost every screen.
- Lime is a rare accent: gradient stops, small highlights, never a large flat fill or body text color.
- The old bright-blue CTA color is retired. It is not a token and should not appear as a primary action color anywhere new. See Do / Don't.
- Premium comes from restraint — most surfaces should be white or Subtle Background with a single confident accent, not several competing colors.
Usage ratios on a typical page
- Canvas / Subtle Background dominate — roughly two-thirds to three-quarters of any page's surface area. This is where "premium through reduction" actually lives.
- Ink is the second-most-used color — section backgrounds (hero, footer, the Signature CTA's rest state), primary text. Not decorative, structural.
- Green is selective, not ambient — the single primary action per context, key stats/highlights, success states. If more than one element on a screen competes for Green, that's a signal the hierarchy is unclear, not that the page needs more color.
- Lime is a rare accent — gradient stops and small highlights only, well under 5% of any composition. It should never be the largest color region on a screen.
- Functional colors (Error) exist only for status — form validation, destructive actions. Never used decoratively.
Correct use vs. overused color
One confident accent. The card is Canvas + Ink + a sliver of Green implied by the single CTA — everything else is neutral.
Green as a card background plus Lime for the CTA leaves no accent left to draw the eye — everything shouts, so nothing stands out.
Manrope is the current digital typeface. Chalet is the historical one.
Manrope modernizes the original Irozon identity for digital use while preserving its
clean, geometric and forward-looking character. As of Phase 2, this scale is shipped
as ten reusable .type-* classes in src/index.css (@layer components) and applied across every public page — see docs/design/irozon-design-audit.md for
the migration record.
Current digital typeface
Manrope
Self-hosted variable font (weight axis 200–800). Primary typeface for irozon.se, UI, marketing pages and future Irozon digital products, rendered live throughout this page.
Historical brand typeface
Chalet
Preserved as brand heritage, not embedded here or in production — no confirmed web license. Do not download it from unlicensed "free font" sources; it is not part of the historical logo design either, which is artwork, not type.
Weight system — disciplined, not arbitrary
- Display XL / Display L / H1 / H2 — weight 700
- H3 — weight 600
- Body Large / Body / Body Small — weight 400
- Label — weight 600
- Caption — weight 500
Tracking & line-height rules
- Tracking (letter-spacing) is size-specific, never one fixed value. Large display text tightens (-0.02em to -0.03em) because letters read too far apart as they grow; Label/Caption relax to slightly positive tracking (+0.03em to +0.06em) for legibility at small sizes.
- Line-height tracks size inversely — tight on large headings (0.98–1.15) so a multi-line display doesn't feel loose, looser on body copy (1.55–1.65) so paragraphs stay easy to scan.
- Never apply a heading's negative tracking to body text — it reads as cramped, not premium.
- Build hierarchy from weight + size + line-height together, not size alone — see the Weight system above.
Good vs. bad typography
One heading weight, one body weight, sizes drawn from the scale above. Hierarchy comes from the size/weight jump, not decoration.
Everything bold, uppercase used as a heading style rather than a rare Label treatment, and three unrelated sizes stacked with no scale logic — nothing reads as "the important part" because everything is fighting for it.
The Irozon Signature CTA — the original slide, restored.
src/components/PrimaryButton.tsx is the canonical, reusable
implementation of this interaction, generalized directly from the original
SlidingButton.tsx hero button (git history, commit 3a129ae)
and shared by the hero, service pages, project/case-study pages, the portfolio
section, and the contact form. The architecture is the original's, unchanged: one
full-width base layer holds the text; at rest it sits at Ink, white text, x:0. On
hover/focus that whole layer slides right by the original 4.1rem
distance and recolors to Green with Ink text, while a separate left panel — hidden at
rest (x:-100%, opacity:0) — slides in to reveal the three-dot mark on a constant Ink
background with white dots. Nothing merges and nothing reorders; only the palette
moved from the original's Amber/Black to Irozon Ink/Green.
Tab to any button above to see the shared focus-visible treatment: a 2px
Irozon Green outline, offset from the control, visible on both dark and light surfaces.
It only appears for keyboard/assistive-tech focus, never on a plain mouse click.
Filter / Chip — not a CTA
Used for filter/toggle controls (e.g. the category filters on /projects),
never for calls to action. Deliberately quieter than the Signature CTA — no slide/reveal
motion, no bright Green fill — so it recedes behind project imagery instead of competing
with it.
Three section-spacing roles. Three container widths.
Phase 3 replaced a scattered mix of py-8/py-10/py-12/py-16/py-20/py-32 and five different
max-w-* widths with two small, named systems — three
.section-* classes for vertical rhythm and three
.container-* classes for content width — both shipped in
src/index.css (@layer components).
Section spacing roles
.section-compact
48px mobile → 64px desktop. Dense/secondary sections — FAQ, trust strips, a page's closing sub-sections.
.section-standard
64px mobile → 96px desktop. The default — page heroes, body sections, most section-to-section rhythm sitewide.
.section-large
96px mobile → 128px desktop. Reserved for a page's single largest moment — the homepage "What We Offer" section.
Container widths
.container-prose
max-w-3xl (768px). Narrow reading measure — hero descriptions, FAQ, case-study body text, article content, centered CTAs.
.container-standard
max-w-5xl (1024px). The default content width — every service-detail-page section, case-study galleries.
.container-wide
max-w-7xl (1280px). Grids and wide compositions — portfolio, homepage sections, footer, About's major sections.
Rule
- Each class controls only padding or only width+centering+horizontal padding — never both — so a section combines exactly one of each: e.g.
class="section-standard container-wide". - Don't nest a second
px-6/max-w-*inside a container-wrapped section — the container already owns horizontal padding. - Reach for a fourth role only if a real layout genuinely can't be served by these three — don't add one-off
py-*values back in.
Base unit is 8px. Content max-width ≈ 1180px, centered, with a consistent 12-column grid underneath for multi-column sections.
Flat, bordered, quietly elevated.
Border substitutes for shadow by default. Shadow is reserved for surfaces that need
to read as genuinely elevated — not applied just because something is a card. Three
roles, shipped as .surface-card, .surface-card-raised and
.surface-floating in src/index.css.
Level 0 — .surface-card
1px border, Medium radius, no shadow. The default for content cards — tech-approach cards, capability cards, case-study gallery visuals.
Level 1 — .surface-card-raised
1px border, Medium radius, a very subtle shadow. Portfolio/project media cards and
the shadcn Card primitive (blog listing) use this — enough lift to
separate from the page, nothing heavier.
Level 2 — .surface-floating
No border, Large radius, a real shadow. Reserved for surfaces that are genuinely elevated — the homepage's glassmorphism service cards, modals/popovers.
Fixed during Phase 3
- Homepage service cards and Portfolio project cards used to render the same visual role with different shadows (none vs.
shadow-lg) depending on which page they were on — both now use the same Level 1 treatment. - Three different sidebar-card treatments on
/contact(bordered vs. two different borderless variants) are now one consistent Level-0-style panel. - A handful of stray
rounded-lgsurfaces (the contact status region, a blog hero image, the project-dialog image, the shadcnCardprimitive) were promoted to the Medium/Large radius roles below —rounded-lgno longer appears as a card radius anywhere on the public site.
Radius scale
Small → buttons, filter chips, form controls (the Signature CTA keeps its own finalized geometry). Medium → standard content cards (Level 0/1 above). Large → feature-weight surfaces: project/portfolio imagery, hero photography, the homepage's glassmorphism cards. Pill → badges, tags, the active filter chip.
Shadow scale (kept subtle)
Subtle background section
Canvas card on Subtle Background
Used to separate a section from the page without adding a hard border or color block.
Responsive, not decorative.
Three timing tiers cover almost everything. Hover a card to preview its timing; nothing here bounces except the hero CTA's signature reveal, documented above.
Every transition on this page — including the primary CTA reveal above — is wrapped in a
@media (prefers-reduced-motion: reduce) rule that removes transform/opacity
animation entirely and falls back to an instant state change. Use the toggle to preview
that behavior without changing your OS setting.
Springs
A single restrained, critically-damped default spring
(stiffness 400, damping 30) drives interactive spatial movement —
navigation's active-page indicator, and anything else that moves in response to a
selection rather than a hover. It does not overshoot or bounce. The
expressive spring (stiffness 420, damping 18, mass 0.6)
is reserved for the Signature CTA above and is not reused elsewhere — the one
deliberately springier motion on the site stays tied to the one interaction it was
tuned for.
Scroll reveals
Content fades and rises 20px into place, once, the first time it enters the viewport (never re-triggering on scroll back up). Static, always-present sections use this pattern. Content whose membership actually changes — a filtered project grid, a card list waiting on data to arrive — animates on mount instead, since it is reacting to a real change, not to the reader scrolling past it.
Hover & press
Hover and press feedback stays single-property: a color shift, a small opacity change, or one modest scale — never two transforms stacked on the same element. Project and case-study imagery scales in place on hover; nothing jumps, and shadow escalation is avoided in favor of a subtle border/color change.
Reduced motion
The whole site is wrapped in Framer Motion's
<MotionConfig reducedMotion="user">, so every animated
component automatically respects the OS-level
prefers-reduced-motion setting without a per-component check. The two
animations that live outside Framer Motion — the footer marquee's infinite loop and
the hero's cursor-repel image physics — each carry their own explicit guard on top
of that, since an open-ended loop has no single "end state" to jump to. Reduced
motion never hides content or feedback; it removes travel and lets state changes
land instantly instead.
Footer marquee
Runs a single, deliberately very slow 500-second loop — a locked design decision, not a bug — linear easing, two copies of the strip animated together so the loop has no visible seam at reset. Under reduced motion it holds still rather than animating at a lower speed.
Real Irozon work first, presented plainly.
Examples below are actual project covers from src/assets/projects, shown
at a single consistent aspect ratio.
Hero philosophy — implemented in HeroSection.tsx
The homepage hero shows four real Irozon project surfaces — VINAZ (e-commerce),
Al Mouj (mobile app), Positive Effects (branding) and Midix (app identity) — in place
of the previous generic 3D stock illustrations. The set is deliberately small and
spans different kinds of work rather than five near-identical screenshots. Each tile
keeps a curated object-position so its square crop lands on the
representative part of the source image (a browser-chrome mockup's top, a scattered
app-screen mockup's leftmost clean screen) instead of an arbitrary center-crop. On
mobile only the two strongest visuals (VINAZ, Al Mouj) render — a four-image floating
collage doesn't fit a narrow viewport without excessive height. The existing
cursor-repel spring physics and entrance motion (Phase 4, unchanged) apply to whatever
set is currently rendered.
- Real Irozon client/project work always comes first — prefer it over generic stock mockups or decorative 3D renders whenever a real asset exists.
- Frame devices/products consistently — same angle, same crop logic, across a set.
- Keep backgrounds clean and neutral; let the work be the subject, not a staged scene.
- Use large imagery rather than small thumbnails wherever layout allows.
- Hold one aspect ratio per grid — mixed ratios read as unfinished.
- Avoid decorative clutter: no unnecessary badges, stickers, glossy 3D device props or drop-shadow stacks on top of real screenshots.
Aspect ratios — reflects what src/components/CaseStudyGallery.tsx and
PortfolioGrid.tsx actually implement
-
Portfolio grid cards (homepage) — fixed
1:1square. Every card in the grid holds this ratio; don't mix in a wide or tall card. -
Case-study hero/featured visual —
16:9widescreen by default. - Case-study supporting visuals —
4:3by default. -
Portrait detail shots (mobile screens, vertical UI) —
3:4, used sparingly and only when the source material is genuinely portrait. - These four ratios are the complete set. Don't introduce a fifth ratio for a one-off image — crop to the nearest one instead.
Alt text
- Meaningful project/case-study imagery gets concise, descriptive alt text — what the image actually shows (e.g. "VINAZ — E-commerce"), never a keyword-stuffed SEO phrase.
-
Placeholder visuals (
CaseStudyGallery.tsx's "image coming soon" state) carry noaltat all — there's no real<img>to describe, and the placeholder's own visible caption already explains itself to a screen reader. - Repeated decorative imagery never reuses one identical alt string across many instances — each hero/portfolio tile's alt text names the specific real project it shows, so assistive tech doesn't hear the same phrase over and over.
Image lightbox — CaseStudyLightbox.tsx, implemented Phase 6
Every real (non-placeholder) case-study gallery image is clickable and opens in one shared, reusable lightbox — not a per-project modal. The pattern, if reused elsewhere in future work, should keep these rules:
-
Backdrop — Irozon Ink at 95% opacity (
bg-ink/95), not pure black — restrained, on-brand, never a decorative gradient. -
Image — centered, natural aspect ratio, never cropped
(
object-contain, capped at85vh/90vwso it always stays inside the viewport without needing to crop). - Controls — a close button (top-right), Previous/Next arrows only when the gallery has more than one real image, and a subtle "n / total" position indicator — no thumbnails, no extra chrome.
- Navigation — Previous/Next buttons, ←/→ keys, and touch swipe all wrap (last → first, first → last). A single-image gallery hides the arrows and counter entirely rather than showing "1 / 1."
- Dismissal — Esc, the close button, or clicking the backdrop; clicking the image itself never closes it.
-
Accessibility — built on Radix's Dialog primitive directly (already
a dependency) for correct
aria-modal/focus-trap behavior; focus moves into the dialog on open and is explicitly returned to the exact thumbnail that opened it on close, rather than relying only on the primitive's default restore. -
Reduced motion — the open/close fade and the per-image
cross-fade-in both drop to instant under
prefers-reduced-motion; no zoom/bounce at any time, matching the Phase 4 motion system. -
SEO — purely progressive enhancement. The normal gallery grid stays
real, crawlable
<img>markup; the lightbox only ever displays an image that's already in that markup, never content exclusive to the modal.
One icon style, used consistently.
Lucide is
the only icon library used across irozon.se — every icon in the codebase imports from
lucide-react. It's a stroke-only set (no filled variant is used
anywhere), which is what makes the icon language feel like one consistent voice
instead of a mix of styles bolted together.
Illustrative icons drawn to match Lucide's stroke geometry (2px stroke, round caps/joins) — not exact library glyphs.
Rules
- Lucide only. Never mix in a filled icon set, an emoji-as-icon, or a second stroke library with a different weight — it reads as inconsistent immediately.
- Stroke weight stays at Lucide's default (2px) at every size above. Don't thicken it for "emphasis" — use color or a larger size instead.
- Three sizes cover nearly everything: 16px inline with text, 20px for standalone small icons, 32px only for placeholder/empty states. Anything else needs a specific reason.
- Icons support text, they don't replace it. Use an icon next to a label, not instead of one, except for universally understood actions (close ×, external-link arrow).
-
Decorative icons get
aria-hidden="true"; icons that are the only content of a control need an accessible label.
Calm, confident, clear — never corporate.
Irozon writes the way the interface looks: reduced, precise, and sure of itself without needing to oversell.
- Calm — no urgency tricks, no exclamation-point energy.
- Confident — states what Irozon does, doesn't hedge with qualifiers.
- Clear — plain language over jargon; a reader shouldn't need to decode it.
- Concise — one idea per sentence; cut the word that isn't earning its place.
- Professional without corporate jargon — no "synergy," "cutting-edge," "leverage," "solutions" as a filler noun.
"Websites built to move your business forward."
Concrete, active, says what it is. A reader knows exactly what they're getting.
"We deliver cutting-edge innovative digital transformation solutions."
Four buzzwords, zero information. Could describe any agency, says nothing about Irozon specifically.
Premium through reduction.
The same restraint that governs color and type governs layout and motion — every one of these ties back to a section already documented above.
- Premium through reduction — strip the unnecessary rather than decorate to compensate. See Color and Typography.
- Generous whitespace — 96–160px section padding on desktop; see the Spacing scale.
- Restrained borders/shadows — 1px borders and the three-tier subtle shadow scale, never a heavy drop shadow for its own sake. See Surfaces.
- One dominant CTA per context — the Signature CTA appears once per page/section; everything else is Secondary or Tertiary. See Buttons.
- Motion only when it communicates something — state change, direct feedback, spatial relationship. Never motion as ambient decoration. See Motion.
Contrast, focus and motion are part of the brand, not an afterthought.
| Pairing | Ratio | Guidance |
|---|---|---|
| Primary Text on Canvas | ~15.9:1 | Pass — any size |
| Body Text on Canvas | ~11.6:1 | Pass — any size |
| Muted Text on Canvas | ~4.55:1 | Pass — normal text (AA) |
| Irozon Green on Canvas | ~2.2:1 | Large/bold text, icons & accents only — not body copy |
| Error on Canvas | ~2.8:1 | Pair with an icon or bold weight, not fine print |
| White text on Irozon Ink | ~15:1 | Pass — any size (AAA) |
-
Every interactive element uses a real
<button>/<a>and a visible:focus-visiblering — neveroutline:nonewithout a replacement. -
All motion respects
prefers-reduced-motion: reduce; see the Motion section toggle. - Never use Green alone to communicate status — Green and Lime are never the only signal for state (e.g. success/error); always pair with text or an icon so the message survives for color-blind readers too.
- Heading levels on any real page should descend in order (H1 → H2 → H3) — this reference follows that same rule throughout.
-
Images carry meaningful
alttext; purely decorative marks use emptyalt="". - Touch targets are at least 44×44px on any surface a finger might tap — the Signature CTA's 48px height and the icon chip's 48×48px footprint both clear this by design.
A few rules worth repeating.
Let Ink and White carry the layout. Bring Green in once, with intent — usually on the single most important action.
The old bright-blue CTA is retired. It doesn't belong to the current palette and shouldn't be reused for buttons, links or accents.
The brand gradient is a highlight, not a background pattern.
Large gradient fills read as decorative and generic — the opposite of "premium through reduction."
Before shipping any Irozon page.
A fast pass against this whole system — if any answer is "no," go back to the relevant section above before merging.
-
Correct logo variant for the surface — official asset from
docs/logo/, never retyped or recolored? See Logo. - Manrope rendering, no lingering Inter/system fallback? See Typography.
- Semantic color tokens used — no raw hex/arbitrary Tailwind color literals? See Color.
- Exactly one primary (Signature) CTA for this context — everything else Secondary/Tertiary? See Buttons.
- Consistent spacing rhythm — 8px base unit, no one-off margins? See Spacing.
- Real Irozon project imagery where available, correct aspect ratio for its slot? See Imagery.
- Icons are Lucide, stroke-only, correct size tier? See Iconography.
- Copy is calm/confident/clear — no corporate jargon? See Brand Voice.
- Accessible — contrast passes, focus-visible intact, reduced-motion respected, touch targets ≥44px? See Accessibility.
- Checked on mobile, not just desktop?
Irozon is calm, precise and forward-looking.
The identity is built around whitespace, confident typography, strong digital work and selective use of Irozon Green.
Motion should make the interface feel responsive rather than decorative.
Premium through reduction, not decoration.