FrontCore — Design System

Foundations

Colors

Palette used throughout the prototype. Click any swatch to copy its hex value.

Brand & action

Text & surfaces

Feedback & state

Tokens in JSON

All colors in a single object, ready for devs to copy.

Foundations

Typography

Single font across the whole system: Poppins, loaded via Google Fonts in weights 400, 500, 600 and 700.

ℹ️Import: @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); — or use the <link> tags in the snippet below.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

body{ font-family:'Poppins',sans-serif; }

Foundations

Logo & icons

The original file (logo.png) has its text fixed in white inside the PNG — it only works on a blue/dark background. For use on a light background, we generated the logo-dark.png variant (same icon, text in --title). Icons follow the convention of monochrome SVG <img> with a filter for inversion.

On dark/blue background — logo.png

On light background — logo-dark.png

<!-- blue/dark background -->
<div class="logo"><img src="assets/logo.png" alt="FrontCore"></div>

<!-- light/white background -->
<div class="logo"><img src="assets/logo-dark.png" alt="FrontCore"></div>

.logo img{ height:24px; width:auto; }

Icon buttons

<button class="icon-btn-square"><svg>...</svg></button>

.icon-btn-square{
  background:var(--main-card); border:1px solid var(--stroke);
  box-shadow:var(--shadow-sm); border-radius:var(--radius-md);
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
}

Foundations

Spacing

Scale based on multiples of 4px. --space-2 (8px) and --space-4 (16px) are the most used throughout the app, for gap and padding.

Foundations

Borders & radius

Default 1px border in the --stroke color. Six rounding levels cover everything from chips to entire cards.

Foundations

Shadows

Soft, subtle shadows — the app never uses strong shadows, except on the device "frame" (the 1366×768 bezel wrapping each screen) and on modals.

Components

Buttons

Four variants cover every case: primary action, outlined secondary action, cancel/neutral, and destructive action.

<button class="btn-primary">Save</button>
<button class="btn-outline">View form</button>
<button class="btn-secondary">Cancel</button>
<button class="btn-danger-outline">Delete</button>

.btn-primary{
  background:var(--primary); border:none; box-shadow:var(--shadow-sm);
  border-radius:var(--radius-md); height:40px; padding:0 24px;
  font-weight:600; font-size:14px; color:var(--white); cursor:pointer;
}
.btn-outline{ background:var(--main-card); border:1px solid var(--primary); color:var(--primary); /* + same base */ }
.btn-secondary{ background:var(--gray); color:var(--title); /* + same base */ }
.btn-danger-outline{ background:var(--main-card); border:1px solid var(--red-danger); color:var(--red-danger); /* + same base */ }

Components

Text fields

Floating label: centered like a placeholder when empty and unfocused; it moves up into a caption that "breaks" the top border when the field is focused or filled — the border also turns blue at that moment.

Full name*

Already filled

Disabled

15/60

Required field*

This field is required.

<div class="ffield">
  <input type="text" class="text-input" id="nome" placeholder="Full name*">
  <label class="ffield-label" for="nome">Full name*</label>
</div>

.ffield{ position:relative; width:100%; }
.ffield .text-input::placeholder{ color:transparent; }
.ffield-label{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-size:14px; color:var(--placeholder); pointer-events:none;
  transition:top .12s ease, left .12s ease, font-size .12s ease, color .12s ease;
}
.ffield .text-input:focus ~ .ffield-label,
.ffield .text-input:not(:placeholder-shown) ~ .ffield-label{
  top:0; left:10px; font-size:10px; color:var(--text);
  background:var(--main-card); padding:0 4px;
}
.ffield .text-input:focus ~ .ffield-label{ color:var(--primary); }
.ffield .text-input:focus,
.ffield .text-input:not(:placeholder-shown):not(:disabled){ border-color:var(--primary); }

Components

Selectors

Two patterns: a custom select (single-option dropdown) and a tag box (multi-select with chips), both with the same floating label as the text fields.

Select the type

Unit

<div class="csel">
  <div class="csel-box"><span class="placeholder">Select the type</span><span class="chev">▾</span></div>
  <span class="csel-tiny-label">Select the type</span>
  <div class="csel-menu">
    <div class="csel-option">Text</div>
  </div>
</div>

/* JS: toggle .open on .csel-box click; toggle .has-value + fill
   the .placeholder text when choosing a .csel-option */

Components

Checkbox & toggle

18px square checkbox for selection in tables and forms. Toggle switch for binary states (active/inactive, visible/hidden).

Active

<div class="checkbox checked"><img src="check.svg"></div>

.checkbox{ width:18px; height:18px; border-radius:2px; border:2px solid var(--text); }
.checkbox.checked{ background:var(--primary); border-color:var(--primary); }

<div class="toggle-switch on"><span class="thumb"></span></div>

.toggle-switch{ width:36px; height:20px; border-radius:20px; background:var(--stroke); }
.toggle-switch .thumb{ width:16px; height:16px; border-radius:50%; background:var(--white); left:2px; transition:left .15s; }
.toggle-switch.on{ background:var(--primary); }
.toggle-switch.on .thumb{ left:18px; }

Components

Badges & status

Fully rounded pill (100px radius) used to indicate record status, such as active forms.

Active Draft

<span class="status-pill ativo">Active</span>

.status-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 14px; border-radius:100px; font-size:12px; font-weight:600;
}
.status-pill.ativo{ background:var(--success-bg); color:var(--success-text); }

Components

Alerts & banners

Informational banner (blue) for neutral notices; alert banner (soft red) to block an action until the user fixes something.

<div class="info-banner"><svg>...</svg><span>Informational message.</span></div>

.info-banner{
  display:flex; align-items:center; gap:8px;
  background:var(--info-bg); border:1px solid var(--info-border);
  border-radius:var(--radius-md); padding:12px 16px; font-size:14px; color:var(--info-text);
}
.danger-banner{ background:var(--danger-bg); color:var(--danger-text); /* no border */ }

Components

Cards

The main card (main-card) wraps each screen's content; the footer card (footer-card) pins the save/cancel actions to the bottom.

Main card

White background, large radius and soft shadow — the default container for any screen.

.main-card{
  background:var(--main-card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:16px;
}
.footer-card{ /* same base, padding:16px, flex with actions on the right */ }

Components

Tables

Header and rows share the same display:grid with identical columns, ensuring perfect alignment. Sortable columns show an arrow that rotates according to direction.

Name

Type

Status

Actions

CPF number

CPF

Active

⋮

Admission date

Date

Draft

⋮

.grid-cols{
  display:grid;
  grid-template-columns: 40px minmax(200px,2fr) minmax(100px,1fr) 40px;
  column-gap:16px; align-items:center;
}
/* same .grid-cols class on the header and on each row */
.th{ display:flex; align-items:center; gap:4px; cursor:pointer; }
.th .chev{ opacity:.35; transform:rotate(-90deg); transition:transform .15s; }
.th.sorted.desc .chev{ transform:rotate(90deg); }

Components

Modals

Always positioned absolute inside the screen "frame" (not the entire viewport), with a translucent blue backdrop — never position:fixed on the window.

<div class="modal-overlay">
  <div class="modal-card">
    <div class="modal-head">
      <p class="modal-title">Do you want to delete this field?</p>
      <button class="modal-close">×</button>
    </div>
    <p class="modal-desc">Are you sure you want to delete this field?</p>
    <hr class="modal-hr">
    <div class="modal-footer">
      <button class="btn-secondary">Back</button>
      <button class="btn-danger-outline">Delete</button>
    </div>
  </div>
</div>

.modal-overlay{ position:absolute; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center; }
.modal-card{ width:630px; max-width:calc(100% - 32px); background:var(--main-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-modal); padding:16px; }

Navigation

Tabs & actions menu

Page-level tabs (blue underline on the active item) and the context (kebab) menu used in table rows and headers.

Admissions Admission form Onboarding form Available fields

<div class="tabs-row">
  <a class="tab">Admissions</a>
  <a class="tab active">Onboarding form</a>
</div>

.tab{ font-size:14px; color:var(--text); padding-bottom:12px; border-bottom:2px solid transparent; }
.tab.active{ color:var(--title); font-weight:600; border-color:var(--primary); }

Navigation

Side menu

Collapsed by default (56px, icons only), expands on hover (232px, with labels) and can be pinned with the pin. Hover over the bar below to see it.

.sidemenu{ width:56px; transition:width .22s ease; overflow:hidden; }
.sidemenu.expanded{ width:232px; box-shadow:4px 0px 16px 0px rgba(0,0,0,0.18); }
.sidemenu:hover{ /* JS adds .expanded on mouseenter, removes on mouseleave (if not pinned) */ }

.menu-item{ width:40px; border-radius:20px; overflow:hidden; transition:width .22s ease; }
.sidemenu.expanded .menu-item{ width:100%; }
.menu-item.active{ background:var(--primary); color:var(--white); }
.menu-item .menu-label{ opacity:0; transition:opacity .15s; }
.sidemenu.expanded .menu-item .menu-label{ opacity:1; }

Layout

App frame (FrontCore-specific convention)

Unlike the other tokens (reusable in any project), this is a convention of this prototype: every screen is rendered inside a fixed 1366×768px frame, centered over a neutral gray background — simulating a "device" and avoiding any resizing with the browser window.

📌Use this pattern only if the new project also needs fixed-size screens (e.g., prototype presentations). It is not recommended for real responsive products.

body{
  margin:0; display:flex; justify-content:center; align-items:flex-start;
  background:var(--backdrop); /* #c8c8c8 */
}
.frame{
  width:1366px; height:768px; flex-shrink:0;
  background:var(--background); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-xl); /* 0 0 24px rgba(0,0,0,0.25) */
}

Colors

Typography

Logo & icons

Spacing

Borders & radius

Shadows

Buttons

Text fields

Selectors

Checkbox & toggle

Badges & status

Alerts & banners

Cards

Tables

Modals

Tabs & actions menu

Side menu

App frame (FrontCore-specific convention)

Ready to reuse