The Tarvos Design Kit is a collection of components and styles for rapid design and prototyping of the Exein products.
The name of the tarvos design system comes from: Tarvos /ˈtɑːrvɒs/, or Saturn XXI, is a prograde irregular satellite of Saturn. It was discovered by John J. Kavelaars et al. on September 23, 2000, and given the temporary designation S/2000 S 4. The name, given in August 2003, is after Tarvos, a deity depicted as a bull god carrying three cranes alongside its back from Gaulish mythology.
Before cloning this repository, you can see Tarvos Design Kit at this link.
Before cloning this repository, you can see Tarvos Icons at this link.
Tarvos document has several artboards as follows:
- Getting Started: Instructions on how to use the kit
- Grid: Preset artboards with the grid system for responsive web design.
- UI Patterns Components: A collection of assets that correspond to the Tarvos Design
- Website UI Patterns Components: A collection of assets that correspond to the Tarvos Design for Website: Desktop/Mobile use.
Tarvos Icons Set include a list of our Icons divided by major categories.
Use the Link Assets button or the ‘+’ icon within the Assets panel to link the design system to your new file. Once added, you can add components from this file onto other artboards within this same file. Colors, Type Styles, and Components are organized within the Assets panel; within each component there are the variations, pieces and states of each component.
You can access Text Styles by selecting a text box then going to the Assets Panel and selecting the style from list within Character Styles to apply the Carbon type tokens to an element. Text styles are based on the typography that is described on “Elements” page of this document. We use the following fonts: Replica Family and Jet Brains Mono Family.
Select a component once it’s been placed on the canvas to create your UX UI prototyping or Design.
As a designer, we always craft and maintain the quality of the work. We provide a major set of breakpoints for you to start with. We should always consider and care how your design works across screen sizes. Ignoring one of the artboards will lead to poor user experiences. We also provide additional Breakpoints for conveying content/layout adjustments.
To get started with your design on Adobe XD, copy and paste the artboards to the right into your new document. To view layout go to “View → Show Layout Grid” and the units at “View → Show Square Grid”.
Small
Screen Width at 0px+
Columns: 4
Padding: 16px
Margin: 18px
Medium
Screen Width at 672px+
Columns: 8
Padding: 16px
Large
Screen Width at 1056px+
Columns: 12
Padding: 16px
Margin: 80px
xLarge
Screen Width at 1312px+
Columns: 12
Padding: 16px
Margin: 76px
Max
Default Freeze is at 1584px
Columns: 12
Padding: 16px
Margin: 76px
- Form Interaction
- Search Box
- Dropdown
- Accordion
- Breadcrumb
- Button
- Checkbox
- Content Switcher
- Data Table
- Data Table Tab
- Data Table Module
- Pagination
- Modal
- Form
- Notification
- Progress Indicator
- Radio Button
- Slider
- List
- Tab
- Tag
- Tooltip
- Toogle
- Slideshow 3 Subtitles
- Slideshow Default
- Video Player
- In page Slider
- Features Block
- Features Block – Hero
- Features Block – Description
- Secondary Block Particles
- Main Website Header
- Form Section
- Home
- Search
- Zoom in
- Soon out
- Info
- Close full screen
- Add
- Duplicate
- To button
- To top
- Chevron left
- Chevron right
- Arrow left
- Arrow right
- Confirm
- Wi-fi
- Exit
- Export
- Upload
- Download
- Embed
- Notifice
- Notice off
- Label off
- Swap wert
- Warning
- Label
- Close
- Clipboard
- Calendar
- Task
- General
- Filter
- Page
- Note
- Feed
- Add card
- Payment
- Cart
- Add account
- Audio on
- Audio off
- Audio down
- Microphone off
- Microphone on
- Refleash
- Repeat
- Replay
- Paly
- Stop
- Launch application
- Full creen
- Label
- Full screen exit
- Log in
- Lock
- Unlock
- Setting account
- Smart home
- Laptop
- Tv
- Tablet
- Keyboard
- Server
- Webcam
- Smart watch
- Router
- Phone
- Trending
- Tab left
- Phone close
- Mouse
- Balance
- Smart tv
- Photo
- Video security
- Microwave
- Group
- Smart speaker
- Hierarchy
- Arcigne
- Autor
- eBpf
- Ai
- Task
- Log out