All the style guidelines that will be used to build the Can Jet Website.
Red (Pigment)
Orange-Red (Crayola)
Blood (Animal)
Apple
Maximum Yellow Red
Sea Serpent
Jelly Bean
Bluebonnet
Neon Green
Screamin' Green
Ultramarine Blue
Dark Gunmetal
Gunmetal
Quick Silver
Our grid system is composed of 8 flexible columns with a gutter between columns of 30px. We apply border-box so that the border and padding is included in the width of the grid columns.
The device ranges are more aligned with common screen sizes today.
| Devices | Columns | Grid Items | Gutter |
|---|---|---|---|
| Mobile (0px - 599px) | 1 column per row | 100% | 8-12px |
| Small Tablet (600px - 899px) | 2 colmuns per row | 50% | 12-16px |
| Big Tablet (900px - 1199px) | 3 colmuns per row | 33.3% | 16px |
| Laptop (1200px - 1439px) | 4 colmuns per row | 25% | 20px |
| Desktop (1440px +) | 5 colmuns per row | 20% | 24px |
This is Allura. Our brand Typeface.
We selected Allura as our brand typeface because it captures an elegant, approachable style that resonates with our brand's identity. Its flowing, handwritten aesthetic conveys a sense of warmth and sophistication, making it ideal for creating a personal connection with our audience.
Allura's readability, even in smaller sizes, ensures it remains accessible across various applications, from digital interfaces to print.
Monserrat is our supporting font.
Montserrat serves as our primary support font, selected for its exceptional flexibility and clean, modern aesthetic. Its simplicity enhances readability across various screen sizes, making it an ideal choice for both headings and body text. The font’s versatility allows it to seamlessly complement other design elements, ensuring a cohesive and accessible visual experience.
Open Sans for regular text.
Open Sans is our chosen text font, thoughtfully selected to enhance readability and comprehension for our users. Its clean, open letterforms and balanced spacing make paragraphs easy to read, providing a smooth, accessible reading experience across all devices. This clarity in design helps ensure that users can effortlessly understand and engage with content.
Heading One
70px
Allura
Heading Two
40px
Monserrat
Heading Three
35px
Monserrat
Heading Four
22px
Monserrat
Heading Five
14px
Monserrat
Body
16px
Open Sans
20px
Open Sans
The default body text is 16px. For optimum reading length, the paragraph width is responsive to the viewport.
Used to display data points connected by straight lines. It's commonly used to show trends over time, making it ideal for visualizing how variables change across a continuous interval (such as days, months, or years).
Variation of a line chart where multiple data series are layered on top of each other, rather than overlapping.
Uses rectangular bars to represent data values. The length or height of each bar corresponds to the value it represents. Bar charts are useful for comparing quantities across different categories and are typically used when the data is categorical (like types, groups, or classifications) rather than continuous.
Variation of a bar chart where multiple data series are stacked on top of each other in a single bar, rather than being placed side-by-side
Bar chart where the bars extend horizontally from the y-axis instead of vertically from the x-axis. Each bar's length represents the value of the data it corresponds to, making it easy to compare values across categories.
Type of chart similar to a line chart but with the area below the line filled with color or shading. This makes it useful for visualizing cumulative values over time or across categories, as well as seeing how quantities change.
Type of chart that displays data as individual points on a two-dimensional grid. It’s used to visualize the relationship between two variables, with one variable plotted along the x-axis and the other on the y-axis. Each data point represents a unique observation in the dataset.
Circular statistical graphic divided into slices to illustrate the numerical proportions of a whole. Each slice of the pie represents a category's contribution to the total, making it easy to visualize relative sizes.
Is a variation of a pie chart with a hole in the center, resembling a donut. It is used to display data in a circular format, showing the relative proportions of a whole, similar to a pie chart.
The Booking Block allows users to enter travel details such as dates, destinations, and passenger counts, streamlining the flight booking process.
<form class="booking-form">
<div class="form-group">
<label for="departure" class="form-label">Departure City:</label>
<input
type="text"
id="departure"
name="departure"
class="form-input"
required/>
</div>
<div class="form-group">
<label for="arrival" class="form-label">Arrival City:</label>
<input
type="text"
id="arrival"
name="arrival"
class="form-input"
required/>
</div>
<div class="form-group">
<label for="date" class="form-label">Travel Date:</label>
<input
type="date"
id="date"
name="date"
class="form-input"
required/>
</div>
<div class="form-group">
<label for="passengers" class="form-label">Number of Passengers:</label>
<select
id="passengers"
name="passengers"
class="form-select"
required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<button type="submit" class="btn-submit">Search Flights</button>
</form>
Buttons like "Search Flights" and "Book Now" enable users to perform key actions on the website, guiding them through their booking journey.
<button type="button" class="button-xs">Button text</button>
<button type="button" class="button-sm">Button text</button>
<button type="button" class="button-md">Button text</button>
<button type="button" class="button-lg">Button text</button>
<button type="button" class="button-xl">Button text</button>
The Booking Card displays essential flight information, including prices and schedules, helping users quickly compare options and make informed decisions.
Flight No: AB123
Duration: 6h
<div class="flight-card">
<p class="flight-number">Flight No: AB123</p>
<div class="flight-info">
<div class="departure">
<span class="location">New York (JFK)</span>
<span class="time">10:00 AM</span>
</div>
<div class="arrival">
<span class="location">Los Angeles (LAX)</span>
<span class="time">1:00 PM</span>
</div>
</div>
<p class="duration">Duration: 6h</p>
<button class="book-button">Book Now</button>
</div>
Inputs are fields for users to enter personal information and payment details, ensuring accurate data collection during the booking process.
<div class="input-container">
<label for="email" class="label">Email</label>
<input type="email" name="email" id="email" class="input-field" placeholder="you@example.com" />
</div>
<div class="input-container">
<label for="email" class="label">Email</label>
<input type="email" name="email" id="email" class="input-field" placeholder="you@example.com" />
</div>
The Textarea allows users to add special requests or comments, personalizing their booking experience and addressing specific needs.
<div>
<label for="comment" class="label-textarea">Add your comment</label>
<textarea rows="4" name="comment" id="comment" class="textarea"></textarea>
</div>
Lists present options like available flights or services, helping users navigate choices and find relevant information efficiently.
<div class="crew-list">
<div class="crew-item">
<div class="crew-label">
<label for="crew-1" class="label-fieldset">Captain John Smith</label>
</div>
<div class="crew-checkbox">
<input id="crew-1" name="crew-1" type="checkbox" class="checkbox-fieldset"/>
</div>
</div>
<div class="crew-item">
<div class="crew-label">
<label for="crew-2" class="label-fieldset">First Officer Emily Davis</label>
</div>
<div class="crew-checkbox">
<input id="crew-2" name="crew-2" type="checkbox" class="checkbox-fieldset"/>
</div>
</div>
<div class="crew-item">
<div class="crew-label">
<label for="crew-3" class="label-fieldset">Flight Attendant Mike Johnson</label>
</div>
<div class="crew-checkbox">
<input id="crew-3" name="crew-3" type="checkbox" class="checkbox-fieldset"/>
</div>
</div>
</div>