kadete.ph

kadete.ph

Design system

Academy navy and gold, with flag blue and red as accents. Glass 2.0 surfaces over soft color, progressive blur on bars, and plenty of space. Every sample on this page uses the real components.

  • Calm and serious. These students are preparing to serve. No cartoon color blocks.
  • Readable first. Body text 17px, 1.65 line height, AA contrast on every surface, glass included.
  • Color is never the only signal. Right and wrong also differ by icon, label and edge style.
  • Light only. One theme, tuned for phones on mobile data.

Color

Brand

  • Navy--navy · #0F1F3DHero, dark glass, primary buttons
  • Flag blue--brand · #1F4FB3Links, selected state, focus
  • Gold--signal · #E8B53AMain call to action, highlights
  • Flag red--red-fill · #C8283DNeeds work, wrong answers

Feedback

  • Correct--correct · #2E7D1ERight answers, strong topics
  • Wrong--wrong · #C21F35Missed answers (always with an icon or dashed edge)
  • Unsure--unsure · #8A5A00Offline and warning text

Neutrals

  • Ink--ink · #232836Headings
  • Text--text · #3A4152Body copy
  • Muted--muted · #646D80Secondary text, labels
  • Line--line · #E1E6EEDividers
  • Canvas--bg · #F2F4F8Page background
  • Surface--surface · #FFFFFFSolid surfaces

Tints

  • Blue soft--brand-soft · #E7EEFBSelected fill, info
  • Red soft--red-soft · #FFE7EAWrong-answer fill
  • Gold soft--signal-soft · #FBF3DFCallouts
  • Green soft--correct-soft · #E3F8D6Correct-answer fill

Typography

Plus Jakarta Sans, self-hosted variable font, used for everything. Tight geometric shapes, clear numbers.

Displayclamp(36px, 6vw, 56px) · 650 · -3%

See exactly which topics to fix.

H232px · 650 · -2.5%

Pick your exam

H320px · 650 · -1.5%

Full timed mocks

Body17px · 450 · 0

After every test you see your score by subject and the topics to work on next.

Small15px · 450 · 0

No sign-up needed for the free questions.

Label13px · 650 · +8%, caps

Next focus

Spacing

4px base.

--space-14px
--space-28px
--space-312px
--space-416px
--space-524px
--space-632px
--space-748px
--space-864px

Radius

Tight corners read as professional.

--radius-sm8px
--radius-md12px
--radius-lg16px
--radius-xl20px
--radius-pillpill

Glass 2.0

Frosted surfaces with a light-catching hairline edge, faint grain and a soft top sheen. They sit over gentle color glows, never over busy images.

Light glass

.card

Default surface for content. 82% white, 20px blur.

Dark glass

.g2 .g2-dark

On navy panels: hero, score, subjects.

Plain glass

.glass

Lighter: 66% white. For chrome, not for long text.

Progressive blur

Bars blur what scrolls under them, strongest at the edge and fading out. Scroll the box.

Header bar.pblur inside a sticky bar
Question 1Scroll me under the bar
Question 2Scroll me under the bar
Question 3Scroll me under the bar
Question 4Scroll me under the bar
Question 5Scroll me under the bar
Question 6Scroll me under the bar
Question 7Scroll me under the bar
Question 8Scroll me under the bar
Question 9Scroll me under the bar
Question 10Scroll me under the bar

Buttons

Pill shape, two heights (44px and 52px). Navy is the main action, gold appears once per screen at most, glass for secondary. Hover changes color only; nothing lifts.

Chips

NeutralInfo13/20Needs workIn progress

Notices

Your free-trial result will be saved to your account.

All answers saved.

That sign-in link has expired.

Answer choices

Tap targets at least 56px tall. Tap a choice to see the selected state.

While answering

Which law created the Philippine National Police?

How sure are you?

In review

Which law created the Philippine National Police?

  • ARA 8551Your answer
  • BRA 6975Correct answer
  • CRA 9165
WhyRA 6975, the DILG Act of 1990, established the PNP under the DILG.

Fields

Floating labels. Sign-in is Google only, so no passwords anywhere.

Progress

English72%
Abstract Reasoning30%
Rings show accuracy and daily goal.