Oryven - Agency Studio Figma Template
A dark, motion-led agency website design system: 9 pages at three breakpoints, 21 components, full type and colour foundations, and a motion spec for every interaction.
About this template
A complete website design system for design studios, creative agencies and independent designers.
Dark, editorial and confident: restrained typography, one accent colour, and a layout that gives work room to breathe.
It isn't a set of pretty screens. Every page is built with auto layout and real constraints, every component carries its states as variants, and every style is documented at all three breakpoints, so you can design new pages in the same language instead of redrawing them.
Nine pages, designed at 1440 / 810 / 390
- Home
- Projects
- Project Detail
- Journal · Article
- Contact
- Legal
- 404
- Loader
A style guide you can actually hand over
Colour palettes with usage notes, every text style documented with family, weight, size, line-height, tracking and case, and layout rules covering grids, section rhythm, radii, strokes and grain.
Motion documented, not guessed
A dedicated Interactions page records the trigger, values and easing for every animation: loader, hero sequence, reveals, hovers, FAQ, cursor and more. Hand it to a developer and the build matches the design.
Built to be customised
Shared colour variables and text styles, clearly named layers, shallow nesting and component descriptions that name their counterparts in the Framer build.
Features
- 9 pages × 3 breakpoints (Desktop 1440, Tablet 810, Phone 390), 25 frames in total
- Column grids applied to every frame (12 / 8 / 4). Toggle with
Shift + G - Button, Submit Button, Tag, Social Link, Cursor, Eyes, Brand Mark & Logo
- Navigation and Footer, one variant per breakpoint
- Service Card, Process Step, Pricing Card, Stat Card, Project Card, Article Card, Journal Row, Testimonial Card, FAQ Item, Capsule, Logo Card, Progress Ticks
- Hover, open and state variants (
State=Hover,State=Open) - All on one organised board, each with a description
- Assets / Images library included
Foundations
- Colour: Light ramp, Brand, Surface and Cues. Every swatch is shown as it appears over the dark background, with usage notes
- Typography: 54 text styles in Desktop / Tablet / Mobile sets, each with a live preview and full specs
- Layout & Spacing: grids, side padding, container, section rhythm, page offsets, radii, strokes and grain
- Logo lockups on dark and light
- Icon library plus custom icons
System
- 28 colour variables
- 3 grid styles
- Auto layout and constraints throughout
- Named layers and sections, no stray or hidden leftovers
- Read Me covering structure, tokens, fonts, CMS fields and changelog
- Motion specs for every interaction
Fonts
- Manrope and Geist Mono, both free on Google Fonts