03. Basic Styles

Our Style Codex and Web Guidelines

Mentor Seraphina

Seraphina grins and presses a list into your hand – one you should definitely remember.
“This is your personal cheat sheet. Read it, understand it – and most importantly: use it.”

With a mischievous wink, she leans back.
“Oh, and if you’re wondering who went through the trouble of writing all this down so neatly – thank Tinker. That little overachiever saved you the paperwork.”

Schriften & Root

CSS
/* Fonts */
.headline {
    font-family: var(--headline);
}
.lh-sm {
    line-height: var(--line-height-small);
}
.fs-title {
    font-size: var(--font-size-title);
}
.fs-lg {
    font-size: var(--font-size-large);
}
.fw-bold {
    font-weight: var(--bold);
}
.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}
.center {
    text-align: center;
}
/* colors */
.secondary {
    color: var(--secondary);
}
.bg-secondary {
    background-color: var(--secondary);
}
.dark {
    color: var(--dark);
}
.bg-dark {
    background-color: var(--dark);
}
.light {
    color: var(--light);
}
.bg-light {
    background-color: var(--light);
}
.bg-highlight {
    background-color: var(--highlight);
}
/* Shadow / Effects */
.box-shadow-light {
    box-shadow: var(--shadow-light);
}
.multiply {
    mix-blend-mode: multiply;
}
/* Spacing */
.p-sm {
    padding: var(--spacing-small);
}
.p-lg {
    padding: var(--spacing-large);
}
.my-sm {
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small);
}
.my-lg {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
}
/* Border-Radius */
.b-radius-sm {
    border-radius: var(--border-small);
}
.b-radius-xl {
    border-radius: var(--border-large)
}

Your task

The Foundation Everything Rests On

“Rule number one: nobody likes broken layouts and scrolling madness.”

  • Use box-sizing: border-box for all elements, so width calculations don’t spiral out of control.
  • Reset wild spacing with margin: 0; padding: 0;, so you decide where space belongs.
  • Enable smooth scrolling – no one wants to be hurled from one section to the next.
  • And when something is selected, it should look intentional: Use ::selection to set our highlight color with dark text.

Styling the body

Seraphina snaps her fingers over the parchment.
“And don’t forget the body of the page. If that’s off, no layout will save you.”

  • Set a background image for depth: img/background.jpg
  • Enable nice text wrapping with text-wrap: pretty – because words shouldn’t just break
  • Use the –paragraph variable for font-family
  • Optimize line-height and font-size using –line-height-normal and –font-size-base
  • Choose strong contrast by setting –primary as the text color

Because Every Good Revolution Needs Space

“We don’t want content stretching across the whole page like a mess. So set some limits.”

  • .container: max width 1400px, centered, with some breathing room.
  • .container-large: grows up to 95% of the screen width, still elegant.
  • Above 1200px, .container-large adapts to 90%.

Clear, Bold, and Full of Character

“If you want a headline to make a statement, give it a voice. No weak headlines!”

  • Headings (h1, h2, h3): use the headline font and serious weight.
  • Let headings balance automatically for better flow.
  • h1: big, bold, and shouts “REBELLION” – but not too loud -> font-weight: normal
  • h2: make the first letter extra big – style is in the details.
  • Links: no boring default styles.
  • Use the secondary color, add smooth transitions, and change the color to green on hover.

Clear Calls to Action

“A button should look like you can push it – not like random decoration.”

  • Background: –secondary
  • Text color: –light
  • Font: uppercase
  • Slightly rounded corners
  • Letter spacing for better readability
  • On hover: background color switches to –green

No Distortions

“Want images to stay in the right size on every device? Then make them responsive.”

  • .img-fluid: max-width: 100%, height: auto – clean and reliable.

“Icons aren’t just decoration.

“They guide the eye, strengthen the message, and make buttons intuitive.”

  • Use MaterialIconsRounded as font-family for a clean, modern look
  • Font size: 5rem – visible, but not shouting
  • Color: var(–secondary) – to fit seamlessly into the design

Small but Mighty

“We don’t need massive banners. The logo stays at a max width of 120px – it supports the design, not dominates it.”

Solve the task here in the console [–> Open in a new tab]

CSS
/* 1. General Styles – The foundation everything stands on */

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

/* 2. selection */
::selection {
    background-color: var(--highlight);
    color: var(--dark)
}

/* 3. body – The body of the rebellion */
body {
    background-image: url('img/background.jpg');
    text-wrap: pretty;
    font-family: var(--paragraph);
    line-height: var(--line-height-normal);
    font-size: var(--font-size-base);
    color: var(--primary);
}

/* 4. Containers – Because a good revolution needs space */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-base);
}

.container-large {
    width: min(95%, 1920px);
    margin: var(--spacing-extra-large) auto;
}

@media screen and (min-width: 1200px) {
    .container-large {
        width: min(90%, 1920px);
    }
}

/* 5. Text – Clear, direct, and full of character */
h1,
h2,
h3 {
    font-family: var(--headline);
    font-weight: var(--bold);
    text-wrap: balance;
    color: var(--color-primary)
}

h1 {
    text-transform: uppercase;
    font-weight: normal;
    font-size: var(--font-size-large);
    margin-top: -1.1rem;
}

h2 {
    font-weight: var(--bold);
    font-size: var(--font-size-large);
}

h3,
h1 {
    font-family: var(--accent-font);
}

h2::first-letter {
    font-size: var(--font-size-large);
}

/* Links */
a {
    color: var(--secondary);
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--headline);
    font-weight: var(--normal);
    transition: 0.3s;
}

a:hover {
    color: var(--green);
}

/* 6. Buttons – Clear calls to action */
.btn {
    background: var(--secondary);
    color: var(--light);
    padding: 10px 20px;
    border-radius: var(--border-small);
    display: inline-block;
    letter-spacing: 2px;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    text-decoration: none;
    background: var(--green);
    color: var(--light);
}

/* 7. Images – No distortion allowed */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* 8. Logo – Small, but vital */
.logo {
    max-width: 120px;
    height: auto;
}

/* 9. Icons – Because they’re more than just decoration */
.material-icons-rounded {
    font-family: 'MaterialIconsRounded';
    font-size: 5rem;
    font-style: normal;
    color: var(--secondary);
}
Treat for Bastet?
Treat for Bastet?
Scroll to Top